/*
  Компоненты 144 AGENCY. Цвета, отступы, размеры — только var(--…) из tokens.css.
  Разделы: основа · раскладка · шапка и нижняя панель · сообщения · кнопки · поля ·
  карточка, метка, таблица · пустое состояние, подтверждение, разделы · страницы и блоки
  (перенесены из шаблонов) · телефон · без анимаций.
*/

/* --- Основа -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-m);
  line-height: 1.5;
  overflow-wrap: break-word;
}
a { color: var(--color-accent); text-underline-offset: 2px; }
a:hover { color: var(--color-accent-hover); }
img, video { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-l); }
h3 { font-size: var(--text-m); }
p { margin: 0 0 var(--space-3); }
code, kbd { font-family: var(--font-mono); }
[x-cloak] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-focus); outline-offset: 2px;
}
.icon {
  width: 1.25em; height: 1.25em; flex: 0 0 auto;
  stroke: currentColor; fill: none; vertical-align: -0.25em;
}

/* --- Раскладка ------------------------------------------------------------------------ */
.page { max-width: 1100px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); }
.narrow { max-width: 640px; }
.stack { display: grid; gap: var(--space-3); }
.grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start;
}
/* Элемент сетки не шире колонки: длинная таблица прокручивается внутри, а не страница. */
.grid > *, .stack > * { min-width: 0; }
.muted { color: var(--color-text-muted); }
.hint { color: var(--color-text-muted); font-size: var(--text-s); margin: var(--space-1) 0 0; }
.terms { white-space: pre-wrap; }

/* --- Шапка ---------------------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap;
  padding: var(--space-2) var(--space-4); min-height: 64px;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.topbar__brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap); min-width: var(--tap); text-decoration: none; color: var(--color-text);
}
.topbar__brand img { display: block; height: 36px; width: auto; }
.topbar__org { font-weight: 600; }
.topbar__nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.topbar__nav a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3);
  border-radius: var(--radius-s); color: var(--color-text); text-decoration: none; font-weight: 500;
}
.topbar__nav a:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.topbar__nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--color-brand); font-weight: 700; }
.topbar__who { margin-left: auto; color: var(--color-text-muted); }
.topbar__logout { margin: 0; }
.topbar--bare { justify-content: center; border-bottom: 0; background: transparent; }
.topbar--cabinet .topbar__logout { margin-left: auto; }

/* --- Нижняя панель (телефон) ----------------------------------------------------------- */
.bottom-nav { display: none; }
.bottom-nav__list {
  display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none;
}
.bottom-nav__item { position: relative; }
.bottom-nav__link, .bottom-nav summary {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: var(--space-1); color: var(--color-text); text-decoration: none;
  font-size: var(--text-xs); font-weight: 600; cursor: pointer; list-style: none;
}
.bottom-nav summary::-webkit-details-marker { display: none; }
.bottom-nav__link[aria-current="page"] { color: var(--color-accent); box-shadow: inset 0 3px 0 var(--color-brand); }
.bottom-nav .icon { width: 24px; height: 24px; }
.bottom-nav__menu {
  position: absolute; right: var(--space-2); bottom: calc(100% + var(--space-2));
  min-width: 240px; max-width: calc(100vw - 2 * var(--space-4));
  margin: 0; padding: var(--space-2); list-style: none;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-m); box-shadow: var(--shadow-2);
}
.bottom-nav__menu a, .bottom-nav__menu button {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--tap);
  padding: 0 var(--space-3); border: 0; border-radius: var(--radius-s); background: none;
  color: var(--color-text); font: inherit; text-decoration: none; text-align: left; cursor: pointer;
  justify-content: flex-start; font-weight: 500;
}
.bottom-nav__menu a:hover, .bottom-nav__menu button:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.bottom-nav__menu form { margin: 0; }
.bottom-nav__who {
  padding: var(--space-2) var(--space-3); color: var(--color-text-muted); font-size: var(--text-s);
  border-top: 1px solid var(--color-border); margin-top: var(--space-1);
}

/* --- Сообщения ------------------------------------------------------------------------ */
/* Сообщения прижаты к низу окна: после HTMX-сохранения блока внизу карточки они видны без прокрутки.
   Без JS nojs.css возвращает их в поток над страницей, как раньше. */
.messages {
  position: fixed; z-index: 60; left: 50%; bottom: var(--space-4); transform: translateX(-50%);
  width: min(560px, calc(100% - 2 * var(--space-4))); display: grid; gap: var(--space-2); margin: 0;
}
.messages:empty { display: none; }
.messages .msg { display: flex; align-items: center; gap: var(--space-2); box-shadow: var(--shadow-2); }
.msg__text { flex: 1 1 auto; }
.msg__close {
  flex: 0 0 auto; min-width: var(--tap); padding: 0; background: none; border-color: transparent; color: inherit;
}
.msg__close:hover { background: none; border-color: currentColor; color: inherit; }
.msg, .message {
  margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m);
  background: var(--color-surface); border: 1px solid var(--color-border); border-left-width: 4px;
}
.msg--error, .message--error { border-color: var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger); }
.msg--success, .message--success { border-color: var(--color-ok); background: var(--color-ok-soft); color: var(--color-ok); }
.msg--warning, .message--warning { border-color: var(--color-warning); background: var(--color-warning-soft); color: var(--color-warning); }
.msg--info, .message--info { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-text); }

/* --- Кнопки --------------------------------------------------------------------------- */
/* Старые шаблоны: голая <button> — главная, .secondary — второстепенная, .danger — опасная. */
button, .button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-accent); border-radius: var(--radius-m);
  background: var(--color-accent); color: var(--color-accent-text);
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
button:hover, .button:hover, .btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-accent-text); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-text); }
.btn--secondary, button.secondary {
  background: var(--color-surface); color: var(--color-accent); border-color: var(--color-accent);
}
.btn--secondary:hover, button.secondary:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.btn--danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-accent-text); }
.btn--danger:hover { background: var(--color-danger); color: var(--color-accent-text); filter: brightness(.92); }
button.danger { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger); }
button.danger:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.btn--text {
  background: none; border-color: transparent; color: var(--color-accent);
  padding-left: var(--space-2); padding-right: var(--space-2); font-weight: 500;
}
.btn--text:hover { background: var(--color-accent-soft); border-color: transparent; color: var(--color-accent); }
.btn--text.btn--danger { color: var(--color-danger); background: none; }
.btn--text.btn--danger:hover { background: var(--color-danger-soft); filter: none; }
button[disabled], .btn[aria-disabled="true"], .htmx-request button[type="submit"] { opacity: .55; cursor: not-allowed; }
.btn--block { width: 100%; }
.inline-form { display: inline; margin: 0; }

/* --- Поля ----------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]),
select, textarea, .select {
  min-height: var(--tap); max-width: 100%; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-field-border); border-radius: var(--radius-s);
  background: var(--color-surface); color: var(--color-text); font: inherit;
}
textarea { min-height: 96px; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--color-accent); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--color-danger); border-width: 2px;
}
.field { display: grid; gap: var(--space-1); margin: 0 0 var(--space-4); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; }
.field__label { font-weight: 600; font-size: var(--text-s); }
.field__hint { color: var(--color-text-muted); font-size: var(--text-s); margin: 0; }
.field__error { color: var(--color-danger); font-size: var(--text-s); font-weight: 600; margin: 0; }
.row-form { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-end; }
.row-form label, .stack label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-s); }

/* --- Карточка, метка, таблица ---------------------------------------------------------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-m); padding: var(--space-4); margin: 0 0 var(--space-4);
}
.card h2 { margin: 0 0 var(--space-2); font-size: var(--text-l); }
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 10px;
  border-radius: 999px; background: var(--color-surface-sunken); color: var(--color-text);
  font-size: var(--text-s); font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.badge--ideas, .badge--script, .badge--preproduction { background: var(--color-surface-sunken); color: var(--color-text); }
.badge--shooting, .badge--editing { background: var(--color-accent-soft); color: var(--color-accent); }
.badge--review { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--accepted { background: var(--color-ok-soft); color: var(--color-ok); }
.badge--now { background: var(--color-lime); color: var(--color-text); }
.badge--danger, .flag {
  display: inline-flex; padding: 1px 8px; border-radius: 999px; margin-right: var(--space-1);
  background: var(--color-danger-soft); color: var(--color-danger); font-size: var(--text-xs); font-weight: 600;
}
.table, .list-table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
.table th, .table td, .list-table th, .list-table td {
  text-align: left; padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border); vertical-align: top;
}
.table th, .list-table th { font-size: var(--text-s); color: var(--color-text-muted); font-weight: 600; }
.list-table { border: 1px solid var(--color-border); border-radius: var(--radius-m); border-collapse: separate; border-spacing: 0; }
.list-table tr:last-child td { border-bottom: 0; }

/* --- Пустое состояние, подтверждение, разделы, якоря, страницы ------------------------- */
.empty {
  display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-4);
  border: 1px dashed var(--color-field-border); border-radius: var(--radius-m);
  background: var(--color-surface); color: var(--color-text-muted);
}
.empty__text { margin: 0; color: var(--color-text); font-weight: 600; }
.empty .hint { margin: 0; }
.confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.confirm__ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.confirm__question { font-weight: 600; }
.section {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-m); padding: var(--space-4); margin: 0 0 var(--space-4);
}
details.section { padding: 0; }
details.section > summary {
  display: flex; align-items: center; gap: var(--space-2); min-height: 56px;
  padding: var(--space-2) var(--space-4); cursor: pointer; list-style: none;
  font-size: var(--text-l); font-weight: 700;
}
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary .icon { transition: transform var(--duration-fast) ease; }
details.section[open] > summary .icon { transform: rotate(90deg); }
details.section > .section__body { padding: 0 var(--space-4) var(--space-4); }
.anchors { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.anchors a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3);
  border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface);
  color: var(--color-text); text-decoration: none; font-size: var(--text-s); font-weight: 600;
}
.anchors a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0; }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--space-3);
}
.pager a { border: 1px solid var(--color-border); border-radius: var(--radius-s); background: var(--color-surface); text-decoration: none; }

/* --- Кабинет клиента (из base_cabinet.html) -------------------------------------------- */
.cab { max-width: 760px; margin: 0 auto; }
.cab h1 { font-size: var(--text-xl); margin: 0 0 var(--space-1); }
.cab h2 { font-size: var(--text-l); margin: 0 0 var(--space-2); }
.cab .cab-sub { margin-top: var(--space-5); }
.cab-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-m); padding: var(--space-4); margin: 0 0 var(--space-4);
}
.cab-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.cab-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3);
  border-radius: var(--radius-s); color: var(--color-text); text-decoration: none; font-weight: 500;
}
.cab-nav a.active, .cab-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--color-brand); font-weight: 700; }
.cab-link {
  background: none; border: 0; padding: 0 var(--space-2); font: inherit; font-weight: 500;
  color: var(--color-accent); text-decoration: underline; cursor: pointer;
}
.cab-link:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.cab-badge {
  display: inline-flex; padding: 2px 12px; border-radius: 999px;
  background: var(--color-accent-soft); color: var(--color-accent); font-size: var(--text-s); font-weight: 600;
}
.cab-terms { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.cab-button {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-m);
  background: var(--color-accent); color: var(--color-accent-text); text-decoration: none; font-weight: 600;
}
.cab-button:hover { background: var(--color-accent-hover); color: var(--color-accent-text); }
.cab-note { color: var(--color-text-muted); font-size: var(--text-s); margin: var(--space-1) 0 0; }
.cab-warning {
  background: var(--color-warning-soft); border: 1px solid var(--color-warning); border-left-width: 4px;
  border-radius: var(--radius-m); padding: var(--space-3); margin: 0 0 var(--space-4); overflow-wrap: anywhere;
}
.cab-closed {
  display: inline-flex; padding: 2px 12px; border-radius: 999px; margin-left: var(--space-1);
  background: var(--color-danger-soft); color: var(--color-danger); font-size: var(--text-s); font-weight: 600;
}
.cab-preview {
  background: var(--color-warning-soft); border: 1px dashed var(--color-warning); border-radius: var(--radius-m);
  padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); font-size: var(--text-s);
}
.cab-stages { list-style: none; margin: 0; padding: 0; }
.cab-stage { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.cab-stage:last-child { border-bottom: 0; }
.cab-stage__name { flex: 1 1 180px; font-weight: 600; }
.cab-stage__dates { color: var(--color-text-muted); }
.cab-stage--done .cab-stage__name { color: var(--color-text-muted); font-weight: 400; }
.cab-stage--current {
  background: var(--color-accent-soft); margin: 0 calc(-1 * var(--space-4));
  padding: 10px var(--space-4); border-radius: var(--radius-s);
}
.cab-stage__mark { flex: 0 0 100%; font-size: var(--text-xs); color: var(--color-accent); font-weight: 600; }
.cab-team { list-style: none; margin: 0; padding: 0; }
.cab-team li { padding: 6px 0; overflow-wrap: anywhere; }

/* --- Плеер (из cabinet/_player.html) --------------------------------------------------- */
.player { max-width: 100%; }
.player__video {
  display: block; width: 100%; max-width: 100%; max-height: 70vh;
  background: var(--color-video); border-radius: var(--radius-m);
}
.player__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: 10px; }
.player__time {
  font: 600 34px/1.1 var(--font-mono); letter-spacing: .02em;
  user-select: all; -webkit-user-select: all;
}
.player__ok { color: var(--color-ok); }
.player__hint { color: var(--color-text-muted); font-size: var(--text-s); flex: 1 1 100%; margin: 0; }
.player__problem { color: var(--color-danger); font-size: var(--text-s); margin: var(--space-2) 0 0; }
.player__download { margin-left: auto; }

/* --- Правки клиента (из cabinet/_review.html) ------------------------------------------ */
.rv { margin-top: var(--space-4); }
.rv__actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.rv button.rv__ghost { background: var(--color-surface); color: var(--color-accent); }
.rv form { margin: 0; }
.rv__list { list-style: none; margin: var(--space-3) 0; padding: 0; }
.rv__list li {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border);
}
.rv__tc { font: 600 15px var(--font-mono); min-width: 72px; }
.rv__text { flex: 1 1 200px; overflow-wrap: anywhere; white-space: pre-wrap; }
.rv__who { color: var(--color-text-muted); font-size: var(--text-xs); }
.rv button.rv__x {
  background: none; color: var(--color-danger); border: 0;
  padding: var(--space-1) var(--space-2); text-decoration: underline;
}
.rv__veil {
  position: fixed; inset: 0; z-index: 50; padding: var(--space-4);
  display: flex; align-items: center; justify-content: center; background: var(--color-overlay);
}
.rv__dialog {
  background: var(--color-surface); border-radius: var(--radius-l); padding: var(--space-4);
  width: 100%; max-width: 520px; max-height: 100%; overflow: auto;
}
.rv__dialog label { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-3); font-size: var(--text-s); }
.rv__dialog input, .rv__dialog textarea { width: 100%; }

/* --- Комментарии клиента (из cabinet/_comments.html) ---------------------------------- */
.cm { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.cm li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.cm__head { font-size: var(--text-xs); color: var(--color-text-muted); }
.cm__text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 2px 0 0; }
.cm-form textarea { width: 100%; }
.cm-form button { margin-top: var(--space-2); }

/* --- Просмотр ролика командой (из files/watch.html) ----------------------------------- */
.watch { max-width: 960px; }
.watch h1 { font-size: var(--text-xl); margin: 0 0 var(--space-1); }
.watch__state--bad { color: var(--color-danger); }

/* --- Файлы проекта (из files/_project_files.html) -------------------------------------- */
.files { margin: var(--space-4) 0; }
.files__tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-3); }
.files__tab {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3);
  border-radius: var(--radius-m) var(--radius-m) 0 0; text-decoration: none; color: var(--color-text-muted);
}
.files__tab--active {
  color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border);
  border-bottom-color: var(--color-surface); margin-bottom: -1px; font-weight: 600;
}
.files__panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
}
.files__list { list-style: none; margin: 0; padding: 0; }
.files__row {
  padding: 10px 0; border-bottom: 1px solid var(--color-border);
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: baseline;
}
.files__row:last-child { border-bottom: 0; }
.files__name { font-weight: 600; overflow-wrap: anywhere; flex: 1 1 240px; }
.files__meta { color: var(--color-text-muted); font-size: var(--text-s); flex: 1 1 100%; }
/* Хеш — в подсказке, на виду только «Файл дошёл целым» (аудит F28). */
.files__hash { display: inline-flex; align-items: center; gap: 4px; color: var(--color-ok); font-size: var(--text-xs); font-weight: 600; }
.files__hash .icon { width: 14px; height: 14px; }
.files__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.files__actions form { margin: 0; }
.files__state { font-size: var(--text-s); }
.files__state--bad { color: var(--color-danger); }
.files__deleted { color: var(--color-text-muted); text-decoration: line-through; }
.files__link, .files__danger, .task__danger {
  background: none; border: 0; padding: 0 var(--space-2); font: inherit; font-weight: 500;
  color: var(--color-accent); cursor: pointer; text-decoration: underline;
}
.files__danger, .task__danger { color: var(--color-danger); }
.files__link:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.files__danger:hover, .task__danger:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.files__upload { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); }
.files__progress { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.files__progress li { margin: 6px 0; font-size: var(--text-s); }
.files__progress progress { width: 100%; height: 8px; accent-color: var(--color-accent); }

/* --- Задачи (из tasks/_block.html и tasks/detail.html) --------------------------------- */
.tasks__late td { color: var(--color-danger); }
.tasks__new summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; font-weight: 600; margin-top: var(--space-3); }
.task__fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--space-4); margin: 0; }
.task__fields dt { color: var(--color-text-muted); }
.task__fields dd { margin: 0; overflow-wrap: anywhere; }
.task__description { white-space: pre-wrap; overflow-wrap: anywhere; }
.task__states { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.task__states form { margin: 0; }
.task__list { list-style: none; margin: 0; padding: 0; }
.task__list > li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.task__list > li:last-child { border-bottom: 0; }
.task__change { font-size: var(--text-s); }
.task__comment { white-space: pre-wrap; margin: var(--space-1) 0 0; }
.task__deleted { color: var(--color-text-muted); text-decoration: line-through; }

/* --- Телефон (≤ 767 px) ---------------------------------------------------------------- */
@media (max-width: 767px) {
  body.has-bottom-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.has-bottom-nav .messages { bottom: calc(64px + env(safe-area-inset-bottom) + var(--space-2)); }
  h1 { font-size: var(--text-l); }
  .page { padding: var(--space-4) var(--space-4) var(--space-6); }
  .topbar { min-height: 56px; }
  .topbar--team .topbar__nav, .topbar--team .topbar__logout { display: none; }
  .bottom-nav {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-2);
  }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .row-form > * { flex: 1 1 100%; }
  .row-form input:not([type="checkbox"]):not([type="radio"]), .row-form select { width: 100%; }
  .list-table, .list-table tbody, .list-table tr, .list-table td { display: block; width: 100%; }
  .list-table { border: 0; background: none; }
  .list-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .list-table tr {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-m); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-3);
  }
  .list-table td { border: 0; padding: var(--space-1) 0; }
  .list-table td[data-label]::before {
    content: attr(data-label); display: block; font-size: var(--text-xs); color: var(--color-text-muted);
  }
  .table { display: block; overflow-x: auto; }
  .task__fields { grid-template-columns: 1fr; }
}

/* --- Без анимаций по просьбе системы --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important;
  }
}

/* --- T06: файлы и загрузка ------------------------------------------------------------- */
.files__row { align-items: center; justify-content: space-between; }
.files__main { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 260px; min-width: 0; }
.files__main .files__name { flex: none; }
.files__actions .confirm { margin: 0; }
.files__actions .btn { min-height: var(--tap); }
.files__actions .icon { width: 18px; height: 18px; }
.upl__zone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1); min-height: 120px; padding: var(--space-4); text-align: center; cursor: pointer;
  border: 2px dashed var(--color-text-muted); border-radius: var(--radius-m);
  background: var(--color-surface-sunken);
}
.upl__zone:hover, .upl__zone--over { border-color: var(--color-accent); background: var(--color-accent-soft); }
.upl__zone:focus-within { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.upl__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upl__icon .icon { width: 28px; height: 28px; }
.upl__title { font-weight: 600; }
.upl__sub { font-size: var(--text-s); color: var(--color-text-muted); }
.upl__item { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.upl__item:last-child { border-bottom: 0; }
.upl__name { font-weight: 600; overflow-wrap: anywhere; }
.upl__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.upl__actions [hidden] { display: none; }
@media (max-width: 767px) {
  .files__actions { width: 100%; }
  .files__actions .btn { flex: 1 1 auto; }
  .files__panel { padding: var(--space-3); }
}

/* --- T02: вход, «Люди», «Журнал», «Настройки» ------------------------------------------ */
.auth { max-width: 440px; margin: var(--space-6) auto 0; display: grid; gap: var(--space-4); }
.auth__sign { justify-self: center; display: block; }
.auth__sign img { display: block; height: 60px; width: auto; }
.auth__card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-l); padding: var(--space-6); box-shadow: var(--shadow-1);
}
.auth__card h1 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.auth__form { margin: 0; }
.auth__form .field input:not([type="hidden"]) { min-height: 52px; font-size: var(--text-m); }
.auth__form input[readonly] { background: var(--color-surface-sunken); }
.auth__change { justify-self: start; }
.auth__email { overflow-wrap: anywhere; }
.auth__code { font-family: var(--font-mono); letter-spacing: .3em; }
.auth__resend { margin: var(--space-4) 0 0; display: grid; justify-items: start; gap: var(--space-1); }
.auth__resend .hint { margin: 0; }
.auth__switch { text-align: center; margin: 0; }
.auth__switch a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }

.people__add > .hint, .settings .section > .hint { margin: 0 0 var(--space-4); }
.people__form { max-width: 480px; }
.people__form .btn { justify-self: start; }
.people__role { gap: var(--space-2); }
.people__role select { min-width: 0; }
.people__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.people__off td { color: var(--color-text-muted); }

.audit__filter > summary .badge { font-size: var(--text-xs); }
.audit__form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 var(--space-4); }
.audit__form .field select, .audit__form .field input { width: 100%; }
.audit__buttons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.audit__when { white-space: nowrap; }

.settings textarea { width: 100%; }
.settings__save { margin-bottom: var(--space-4); }

@media (max-width: 767px) {
  .auth { margin-top: var(--space-4); }
  .auth__card { padding: var(--space-4); }
  .people__role { display: flex; }
  .people__role select { flex: 1 1 100%; }
  .people__actions { padding-top: var(--space-2); }
  .audit__form { grid-template-columns: minmax(0, 1fr); }
  .settings__save .btn { width: 100%; }
}

/* --- T03: главная по ролям и список проектов ------------------------------------------- */
.home > h1 { margin-bottom: var(--space-4); }
.home .section > h2 { margin: 0 0 var(--space-3); font-size: var(--text-l); }
.home-list { list-style: none; margin: 0; padding: 0; }
.home-list__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3);
  min-height: var(--tap); padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border);
}
.home-list__item:last-child { border-bottom: 0; }
.home-list__item > a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
.home-list__item--late > a { color: var(--color-danger); }
.home-list__action { margin-left: auto; }
.home-group { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-1); font-size: var(--text-m); }
.home-group:first-of-type { margin-top: 0; }
.attn { border-color: var(--color-brand); }
.attn__calm { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-ok); font-weight: 600; }
.attn__group + .attn__group { margin-top: var(--space-4); }
.attn__group h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); font-size: var(--text-m); }
.attn__group .hint { margin: 0 0 var(--space-1); }

.plist__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-4); }
.plist__head h1 { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.chip {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4);
  border: 1px solid var(--color-field-border); border-radius: 999px; background: var(--color-surface);
  color: var(--color-text); font-size: var(--text-s); font-weight: 600; text-decoration: none;
}
.chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.chip[aria-current="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-text); }
.plist__search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin: 0 0 var(--space-4); }
.plist__search .field { margin: 0; }
.plist__search select, .plist__search input { min-height: var(--tap); }
.plist__q { flex: 1 1 240px; }
.plist__q input { width: 100%; }
.plist__table { font-size: var(--text-s); }
.plist__table th, .plist__table td { padding: var(--space-2); }
.plist__table td { white-space: nowrap; vertical-align: middle; }
.plist__table td.plist__name { white-space: normal; }
.plist__table .flag { white-space: nowrap; }
.plist__name a { font-weight: 600; }
@media (max-width: 767px) {
  .plist__search > * { flex: 1 1 100%; }
  .plist__search select { width: 100%; }
  .plist__name { font-size: var(--text-m); }
  .plist__table td { white-space: normal; }
  .plist__table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
  .plist__table td.plist__name, .plist__table td.plist__flags { grid-column: 1 / -1; }
  .plist__table td.plist__flags--none { display: none; }
  .plist__name a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .home-list__action { margin-left: 0; }
}

/* --- T04: карточка проекта и задачи ---------------------------------------------------- */
.phead { margin: 0 0 var(--space-4); }
.phead__back { margin: 0 0 var(--space-2); }
.phead__back a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); font-weight: 600; text-decoration: none; }
.phead h1 { margin: 0 0 var(--space-2); }
.phead__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.phead__status .badge { font-size: var(--text-m); padding: var(--space-1) var(--space-3); }
.phead__next { margin: 0; }
.phead__why { color: var(--color-text-muted); font-size: var(--text-s); flex: 1 1 280px; }
.phead__why strong { color: var(--color-text); }
.phead__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; }
.phead__facts > div { min-width: 0; }
.phead__facts dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.phead__facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.phead__facts .flag { font-size: var(--text-s); }
.phead__anchors { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-1); -webkit-overflow-scrolling: touch; }
.phead__anchors a { flex: 0 0 auto; white-space: nowrap; }

.psec > summary h2 { margin: 0; font-size: inherit; }
.psec > summary .badge { font-size: var(--text-s); }
.psec > .section__body { scroll-margin-top: var(--space-8); }
.psec__block + .psec__block, .psec__block + .files { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.psec__block > h3 { margin: 0 0 var(--space-2); }
.psec__player:empty { display: none; }
.psec__form { max-width: 560px; }
.psec__form input:not([type="hidden"]), .psec__form select, .psec__form textarea { width: 100%; }
.psec--rare > summary { font-size: var(--text-m); color: var(--color-text-muted); }
.plain-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }

.team { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.team__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border);
}
.team__row:last-child { border-bottom: 0; }
.team__who { display: flex; flex-direction: column; min-width: 0; }
.team__name { font-size: var(--text-l); font-weight: 600; overflow-wrap: anywhere; }
.team__role { color: var(--color-text-muted); font-size: var(--text-s); }

.stages { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.stages__row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border);
}
.stages__row:last-child { border-bottom: 0; }
.stages__row--current { background: var(--color-accent-soft); margin: 0 calc(-1 * var(--space-2)); padding: var(--space-2); border-radius: var(--radius-s); }
.stages__name { font-weight: 600; }
.stages__dates { font-variant-numeric: tabular-nums; }
.stages__edit > summary { list-style: none; }
.stages__edit > summary::-webkit-details-marker { display: none; }
.stages__edit[open] > summary { margin-bottom: var(--space-3); }
.stages__form { display: grid; gap: var(--space-2); max-width: 560px; }
.stages__fields { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-s); }
.stages__fields legend { font-weight: 600; padding: 0 var(--space-1); }
.stages__fields label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-s); flex: 1 1 160px; }

.log { list-style: none; margin: 0; padding: 0; }
.log__row { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.log__row:last-child { border-bottom: 0; }
.log__when { color: var(--color-text-muted); font-size: var(--text-s); font-variant-numeric: tabular-nums; }
.log__who { color: var(--color-text-muted); font-size: var(--text-s); }
.log__note { flex: 1 1 100%; white-space: pre-wrap; overflow-wrap: anywhere; }

.rounds__request {
  background: var(--color-warning-soft); border: 1px solid var(--color-warning); border-left-width: 4px;
  border-radius: var(--radius-m); padding: var(--space-3); margin: 0 0 var(--space-3);
}
.rounds__request p { margin: 0 0 var(--space-2); }
.rounds__code { font: 600 15px var(--font-id); letter-spacing: 0.04em; white-space: nowrap; }
.rounds__reel { border-top: 1px solid var(--color-border); }
.rounds__reel > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); min-height: var(--tap); padding: var(--space-2) 0; list-style: none; cursor: pointer; }
.rounds__reel > summary::-webkit-details-marker { display: none; }
.rounds__reel > summary:hover .rounds__name { text-decoration: underline; }
.rounds__name { flex: 1 1 160px; min-width: 0; }
.rounds__count { color: var(--color-text-muted); font-size: var(--text-s); }
.rounds__reel[open] { padding-bottom: var(--space-3); }
.rounds__title { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-m); }
.rounds__notes { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.rounds__note { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.rounds__note:last-child { border-bottom: 0; }
.rounds__tc { font: 600 var(--text-m) var(--font-mono); min-width: 88px; }
.rounds__tc a { display: inline-flex; align-items: center; min-height: var(--tap); }
.rounds__text { flex: 1 1 240px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rounds__who { color: var(--color-text-muted); font-size: var(--text-s); }

.tasks__new { margin: 0 0 var(--space-3); }
.tasks__new > summary.btn { display: inline-flex; margin: 0; list-style: none; }
.tasks__new > summary::-webkit-details-marker { display: none; }
.tasks__form { max-width: 560px; margin-top: var(--space-3); }
.tasks__form .field { margin: 0; }
.tasks__title a { font-weight: 600; }
.tasks__kind { font-size: var(--text-s); }
.badge--task-in_progress { background: var(--color-accent-soft); color: var(--color-accent); }
.badge--task-done { background: var(--color-ok-soft); color: var(--color-ok); }
.badge--task-cancelled { background: var(--color-surface-sunken); color: var(--color-text-muted); }
.task__states { align-items: center; }
.task__file { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.task__file-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 240px; }
.task__file-name { font-weight: 600; overflow-wrap: anywhere; }
.task__file-meta { color: var(--color-text-muted); font-size: var(--text-s); }
.task__comment-form { margin-top: var(--space-3); max-width: 640px; }
.task__comment-form textarea { width: 100%; }
.task-form { max-width: 560px; }

@media (max-width: 767px) {
  .phead__facts { flex-direction: column; gap: var(--space-2); }
  .phead__next, .phead__next .btn { width: 100%; }
  .stages__row { flex-direction: column; }
  .task__states > form, .task__states .btn--primary { width: 100%; }
  .tasks__table .tasks__title { font-size: var(--text-m); }
}
.tasks__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tasks__step { margin: 0; }
@media (max-width: 767px) {
  .tasks__step, .tasks__step .btn { width: 100%; }
}

/* --- T05: плеер, правки, кабинет клиента ----------------------------------------------- */
/* Своя панель плеера (static/js/player-ui.js); без JS видны родные controls. */
.player--ui .player__video { cursor: pointer; }
.pui { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.pui__scrub { position: relative; }
.pui__rail { position: relative; height: 28px; margin: 0 10px; }
.pui__rail[hidden] { display: none; }
.pui__mark {
  position: absolute; top: 0; width: 28px; min-width: 0; height: 28px; min-height: 0; padding: 0;
  transform: translateX(-50%); background: none; border: 0; border-radius: var(--radius-s);
}
.pui__mark::after {
  content: ""; position: absolute; left: 50%; top: 4px; bottom: 0; width: 6px; margin-left: -3px;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--color-brand);
}
.pui__mark--draft::after { background: var(--color-accent); }
.pui__mark:hover { background: var(--color-accent-soft); }
.pui__range { display: block; width: 100%; height: var(--tap); margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.pui__row { display: flex; align-items: center; gap: var(--space-2); }
.pui__btn {
  min-width: var(--tap); min-height: var(--tap); padding: 0 var(--space-3);
  background: var(--color-surface); color: var(--color-text); border-color: var(--color-field-border);
}
.pui__btn:hover { background: var(--color-accent-soft); color: var(--color-accent); border-color: var(--color-accent); }
.pui__btn .icon { width: 22px; height: 22px; }
.pui__play { min-width: 64px; min-height: 56px; background: var(--color-accent); color: var(--color-accent-text); border-color: var(--color-accent); }
.pui__play:hover { background: var(--color-accent-hover); color: var(--color-accent-text); border-color: var(--color-accent-hover); }
.pui__play .icon { width: 28px; height: 28px; }
.pui__btn-text { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pui__back .pui__btn-text::before { content: "−"; }
.pui__fwd .pui__btn-text::before { content: "+"; }
.pui__time { margin-left: auto; color: var(--color-text-muted); font: 500 var(--text-s) var(--font-mono); white-space: nowrap; }
.player__bar .player__copy { min-height: var(--tap); }

/* Правки у команды: плеер слева, правки колонкой справа; на телефоне — под плеером. */
.psec__watch--player { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: var(--space-5); align-items: start; }
.psec__watch--player > .psec__block { margin: 0; padding: 0; border: 0; }
.psec__watch:not(.psec__watch--player) > .psec__player { margin-bottom: var(--space-4); }
.psec__video-name { margin: 0 0 var(--space-2); }
.psec__player .empty .btn { color: var(--color-accent); }

/* Кабинет: «От вас», ролик на показе, свёрнутые этапы, архив материалов, закрытый кабинет. */
.cab-ask { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-left: 4px solid var(--color-brand); background: var(--color-surface-sunken); border-radius: 0 var(--radius-s) var(--radius-s) 0; font-weight: 600; }
.cab-ask__label { color: var(--color-text-muted); font-weight: 500; margin-right: var(--space-1); }
.cab-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.cab-row .cab-closed { margin-left: 0; }
.cab-card .cab-warning { margin: var(--space-3) 0 0; }
.cab-lead { margin: 0 0 var(--space-3); }
.cab-actions { margin: var(--space-3) 0 0; }
.cab-watch .cab-note { margin: 0 0 var(--space-2); }
.cab-fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-height: var(--tap); cursor: pointer; list-style: none; }
.cab-fold > summary::-webkit-details-marker { display: none; }
.cab-fold > summary h2 { margin: 0; }
.cab-fold > summary .icon { transition: transform var(--duration-fast) ease; }
.cab-fold[open] > summary .icon { transform: rotate(90deg); }
.cab-fold[open] > summary { margin-bottom: var(--space-2); }
.cab-fold__now { color: var(--color-text-muted); font-size: var(--text-s); font-weight: 600; }
.cab-stages__tbd { margin-top: var(--space-2); }
details.cab-video { padding: 0; }
.cab-video > summary { display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
.cab-video > summary::-webkit-details-marker { display: none; }
.cab-video > summary .icon { flex: 0 0 auto; transition: transform var(--duration-fast) ease; }
.cab-video[open] > summary .icon { transform: rotate(90deg); }
.cab-video__title { flex: 1 1 auto; min-width: 0; }
.cab-video__title h2 { margin: 0; overflow-wrap: anywhere; }
.cab-video > .player, .cab-video > .rv { margin-left: var(--space-4); margin-right: var(--space-4); }
.cab-video > .player:last-child, .cab-video > .rv:last-child { margin-bottom: var(--space-4); }
.cab-closed-page { text-align: left; }
.cab-closed-page__sign { display: block; margin: var(--space-4) 0 var(--space-4); }

/* Решение клиента под плеером: поле правки без окна, черновик, «Отправить» и «Принять». */
.rv { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.rv h2 { margin: 0 0 var(--space-3); }
.rv__subtitle { margin: 0 0 var(--space-1); font-size: var(--text-m); }
.rv__add .hint { margin: 0 0 var(--space-3); }
.rv__fields { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 var(--space-3); }
.rv__fields .field { margin-bottom: var(--space-3); }
.rv__tc-field input { font: 600 var(--text-m) var(--font-mono); }
.rv__state { margin: 0 0 var(--space-3); }
.rv__state p { margin: 0 0 var(--space-2); }
.rv__draft { margin-top: var(--space-5); }
.rv__draft .hint { margin: 0; }
.rv__list li { align-items: center; }
.rv__list .rv__tc {
  min-height: var(--tap); padding: 0 var(--space-2); background: none; border-color: transparent;
  color: var(--color-accent); font: 600 var(--text-m) var(--font-mono); text-decoration: underline;
}
.rv__list .rv__tc:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.rv__tc--none { padding: 0 var(--space-2); color: var(--color-text-muted); }
.rv__del { margin-left: auto; }
.rv__decide { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-2); }
.rv__accept { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.rv__accept .confirm > .btn--text {
  padding: var(--space-2) var(--space-5); border-color: var(--color-accent); background: var(--color-surface); font-weight: 600;
}
.rv__accept .confirm__question { flex: 1 1 100%; font-weight: 600; }
.rv__why { margin: 0; font-size: var(--text-m); font-weight: 600; color: var(--color-text); }

@media (max-width: 767px) {
  .psec__watch--player { grid-template-columns: minmax(0, 1fr); }
  .player--ui .player__video { max-height: 60vh; }
  .pui__row { flex-wrap: wrap; gap: var(--space-2); }
  .pui__btn { flex: 1 1 0; }
  .pui__play { flex: 1.4 1 0; }
  .pui__time { flex: 0 0 100%; order: -1; margin: 0; text-align: right; }
  .rv__fields { grid-template-columns: minmax(0, 1fr); }
  .rv__decide, .rv__decide form, .rv__decide .btn, .rv__accept, .rv__accept .confirm { width: 100%; }
  .rv__accept .confirm__ask .btn { flex: 1 1 0; }
  .cab-video > .player, .cab-video > .rv { margin-left: var(--space-3); margin-right: var(--space-3); }
}

/* T07: цели касания, найденные замером (tools/ui-audit) */
.tap-link, .tasks__title a, .cab-card h2 a, .plist__name a { display: inline-flex; align-items: center; min-height: var(--tap); }
.player__download { display: inline-flex; align-items: center; min-height: var(--tap); }

/* --- Заход 2, таск 04: колонка навигации, рабочее место проекта, статусы ролика -------- */
/* Колонка слева на ноутбуке (≥ 768 px); на телефоне — тонкая шапка и нижняя панель. */
.shell--rail { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh; }
.shell--rail > .topbar--team { display: none; }
.shell--rail > .page { max-width: none; width: 100%; padding: 28px 40px 64px; }
.rail {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: 2px; padding: 20px 12px;
  background: var(--color-surface-sunken);
}
.rail__logo {
  display: flex; align-items: center; gap: 10px; min-height: var(--tap); margin: 0 0 var(--space-4);
  padding: 0 10px; color: var(--color-text); font-weight: 600; text-decoration: none;
}
.rail__logo img { display: block; width: 26px; height: auto; }
.rail__nav { display: flex; flex-direction: column; gap: 2px; }
.rail__item {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px;
  border-radius: var(--radius-m); color: var(--color-text); font-weight: 500; text-decoration: none;
}
.rail__item .icon { width: 20px; height: 20px; }
.rail__item:hover { background: var(--color-border); color: var(--color-text); }
.rail__item[aria-current="page"] { background: var(--color-text); color: var(--color-surface); }
.rail__me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px 10px; }
.rail__ava {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-avatar); color: var(--color-avatar-text); font-size: var(--text-s); font-weight: 700;
}
.rail__who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rail__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rail__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); font-size: var(--text-xs); }
.rail__logout { margin: 0 0 0 auto; }
.rail__exit {
  min-width: var(--tap); min-height: var(--tap); padding: 0; border-color: transparent;
  background: none; color: var(--color-text);
}
.rail__exit:hover { background: var(--color-border); border-color: transparent; color: var(--color-text); }

/* Рабочее место проекта */
.ws__crumbs { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-s); }
.ws__crumbs a { color: var(--color-text-muted); text-decoration: none; }
.ws__crumbs a:hover { color: var(--color-text); text-decoration: underline; }
.ws-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: start; margin: 0 0 var(--space-4); }
.ws-head__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px; margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.ws-head__code, .ws-code { font-family: var(--font-id); font-weight: 600; letter-spacing: 0.03em; }
.ws-head__code { font-size: 34px; line-height: 1.1; }
.ws-head__facts { display: flex; flex-wrap: wrap; gap: 2px var(--space-2); margin: 6px 0 0; color: var(--color-text-muted); }
.ws-head__facts > span:not(:last-child)::after { content: "·"; margin-left: var(--space-2); }
.ws-head__facts .flag { margin: 0; }
.ws-head__facts .flag::after { content: none; }

.next-step {
  display: flex; align-items: center; gap: var(--space-4); width: 460px; max-width: 100%;
  padding: 14px var(--space-4); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-m);
}
.next-step__text { flex: 1; min-width: 0; }
.next-step__text small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.next-step__text b { font-weight: 600; }
.next-step__form { margin: 0; }

.stage-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 6px 0 var(--space-5); padding: 0; list-style: none; }
.stage-strip__item {
  padding: 10px var(--space-3) 9px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-s);
}
.stage-strip__item--done { background: none; }
.stage-strip__item--now { border-color: var(--color-text); box-shadow: inset 0 3px 0 var(--color-text); }
.stage-strip__title { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-s); font-weight: 600; }
.stage-strip__item--done .icon { color: var(--color-ok); }
.stage-strip__line { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.stage-strip__bar { display: block; height: 4px; margin-top: 7px; overflow: hidden; border-radius: var(--radius-xs); background: var(--color-border); }
.stage-strip__bar i { display: block; height: 100%; background: var(--color-text); }
.stage-strip__item--delivery .stage-strip__bar i { background: var(--st-confirmed); }

.ws-tabs { display: flex; gap: 4px; margin: 0 0 var(--space-5); border-bottom: 1px solid var(--color-border-strong); }
.ws-tabs a {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px;
  margin-bottom: -1px; border-bottom: 3px solid transparent;
  color: var(--color-text-muted); font-weight: 500; text-decoration: none;
}
.ws-tabs a:hover { color: var(--color-text); }
.ws-tabs a[aria-current="page"] { color: var(--color-text); font-weight: 600; border-bottom-color: var(--color-text); }
.ws-tabs__n { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; }

.ws-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.ws-col { display: grid; gap: var(--space-4); min-width: 0; }
.ws-card {
  min-width: 0; padding: var(--space-4) var(--space-5); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-m);
}
.ws-card--flush { padding: 0; }
.ws-card--flush > .files { padding: var(--space-4) var(--space-5); }
.ws-card__title { margin: 0 0 var(--space-3); font-size: var(--text-m); font-weight: 600; }
.ws-card .psec__block { padding: 0; }
.ws-card .psec__block > h3 { margin: 0 0 var(--space-3); font-size: var(--text-m); font-weight: 600; }
.ws-card .psec__block + .psec__block { margin-top: var(--space-4); }
.ws-card .tasks { margin: 0; }
.ws-why { margin: 0; color: var(--color-text-muted); }
.ws-why strong { color: var(--color-text); }
.ws-rare > summary { display: inline-flex; list-style: none; }
.ws-rare > summary::-webkit-details-marker { display: none; }
.ws-rare[open] > summary { margin-bottom: var(--space-3); }
.field.field--code input:not([type="checkbox"]):not([type="radio"]) { width: 140px; max-width: 100%; font-family: var(--font-id); font-size: var(--text-l); letter-spacing: 0.06em; text-transform: uppercase; }
.field--code input:disabled { background: var(--color-surface-sunken); color: var(--color-text); }
.field--code .icon { color: var(--color-ok); margin-right: var(--space-1); }

/* Статус ролика: заливка и слово, не только цвет. Цвета — токены --st-<код>. */
.reel-status {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px;
  border-radius: 12px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
.reel-status--prep { background: var(--st-prep); color: var(--st-prep-text); box-shadow: inset 0 0 0 1.5px var(--st-prep-text); }
.reel-status--queue { background: var(--st-queue); color: var(--st-queue-text); }
.reel-status--editing { background: var(--st-editing); color: var(--st-editing-text); }
.reel-status--review { background: var(--st-review); color: var(--st-review-text); }
.reel-status--revisions { background: var(--st-revisions); color: var(--st-revisions-text); }
.reel-status--accepted { background: var(--st-accepted); color: var(--st-accepted-text); }
.reel-status--delivered { background: var(--st-delivered); color: var(--st-delivered-text); }
.reel-status--confirmed { background: var(--st-confirmed); color: var(--st-confirmed-text); }

@media (max-width: 767px) {
  .shell--rail { display: block; }
  .shell--rail > .topbar--team { display: flex; }
  .shell--rail > .page { padding: var(--space-4) var(--space-4) var(--space-6); }
  .rail { display: none; }
  .ws-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .ws-head__title { font-size: 25px; }
  .ws-head__facts { flex-direction: column; gap: 0; }
  .ws-head__facts > span::after { content: none !important; }
  .ws-head__code { font-size: 28px; }
  .next-step { width: auto; flex-wrap: wrap; }
  .next-step__form, .next-step .btn { width: 100%; }
  .stage-strip { grid-template-columns: repeat(5, minmax(108px, 1fr)); overflow-x: auto; margin-right: calc(-1 * var(--space-4)); padding-right: var(--space-4); }
  .ws-tabs { overflow-x: auto; margin-right: calc(-1 * var(--space-4)); }
  .ws-tabs a { flex: none; white-space: nowrap; padding: 0 10px; }
  .ws-cols { grid-template-columns: minmax(0, 1fr); }
  .ws-card { padding: var(--space-4); }
  .ws-card--flush > .files { padding: var(--space-4); }
}
.new-project { max-width: 560px; }

/* --- Ролики: сетка по сменам (вкладка «Ролики») ------------------------------------------ */
.reels { display: grid; gap: var(--space-4); min-width: 0; }
.reels > * { min-width: 0; }
.reels-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.reels-bar__chips { margin: 0; max-width: 100%; }
.reels-bar__tools { display: flex; align-items: center; gap: var(--space-3); }
.reels-bar .chip { gap: 6px; }
.reels-bar .chip b { font-weight: 600; color: var(--color-text-muted); }
.reels-bar .chip[aria-current="true"] b { color: var(--color-border-strong); }
.seg { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-m); overflow: hidden; background: var(--color-surface); }
.seg a { display: grid; place-items: center; width: var(--tap); height: var(--tap); color: var(--color-text-muted); }
.seg a:hover { color: var(--color-text); }
.seg a[aria-current="true"] { background: var(--color-text); color: var(--color-accent-text); }
.seg .icon { width: 20px; height: 20px; }

.shift-new[hidden] { display: none; }
.shift-form__row { display: grid; grid-template-columns: 140px 190px minmax(0, 1fr); gap: var(--space-4); }
.shift-form .field { margin-bottom: var(--space-3); }
.shift-form textarea { min-height: 140px; }
.shift-form__actions { display: flex; gap: var(--space-3); }
/* Ролики смены — галочками из сценариев, доп. съёмка и названия свёрнуты (макет 25). */
.shift-pick { margin: var(--space-2) 0 var(--space-4); }
.shift-pick__title { margin: 0 0 var(--space-2); font-weight: 600; }
.shift-pick__group, .shift-pick__more { margin: 0 0 var(--space-2); padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-m); background: var(--color-surface); overflow: hidden; }
.shift-pick__group legend { float: left; width: 100%; padding: var(--space-2) var(--space-3); background: var(--color-bg); font-size: var(--text-s); font-weight: 600; }
.shift-pick__more > summary { padding: var(--space-2) var(--space-3); background: var(--color-bg); font-size: var(--text-s); font-weight: 600; cursor: pointer; }
.shift-pick__more > .field__hint, .shift-pick__more > .field { margin: var(--space-2) var(--space-3); }
.shift-pick__row { clear: both; display: flex; gap: var(--space-3); align-items: center; min-height: var(--tap, 44px); padding: 6px var(--space-3); border-top: 1px solid var(--color-border); }
.shift-pick__row input { width: 18px; height: 18px; flex: none; }
.shift-pick__none { margin: 0 0 var(--space-2); }

.shift { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.shift__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.shift__title { margin: 0; font-size: var(--text-m); font-weight: 600; }
.shift__meta { font-weight: 500; color: var(--color-text-muted); }
.shift__acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.shift__acts:has(.shift-act[open]) { flex-basis: 100%; }
.shift__blocked { display: grid; gap: var(--space-1); max-width: 280px; }
.shift__why { font-size: var(--text-xs); color: var(--color-text-muted); }
.shift__why a { color: var(--color-text); text-decoration: underline; }
.shift__empty { margin: 0; color: var(--color-text-muted); }
.shift-act > summary { list-style: none; cursor: pointer; }
.shift-act > summary::-webkit-details-marker { display: none; }
.shift-act[open] { flex: 1 1 100%; }
.shift-act[open] > summary { margin-bottom: var(--space-2); }
.shift-act__form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.shift-act__form select { min-width: 220px; min-height: var(--tap); }
.shift-act__form--wide { display: grid; max-width: 560px; }
.shift-act__form--wide textarea { width: 100%; }
.shift__why-link { color: var(--color-text); text-decoration: underline; cursor: pointer; }
.shift__ok { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); font-size: var(--text-s); color: var(--color-text-muted); }
.shift__ok .icon { width: 16px; height: 16px; }
.shift-upload { position: relative; display: inline-flex; }
.shift-upload__btn { position: relative; cursor: pointer; }
.shift-upload__btn:focus-within { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.shift-upload .upl__input { z-index: 1; }
.shift-upload__pop { position: absolute; z-index: 5; top: calc(100% + var(--space-2)); right: 0; width: 340px; max-width: calc(100vw - 32px); padding: 0 var(--space-3) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); box-shadow: var(--shadow-2); }
.shift-upload__pop:has(.upl__list:empty) { display: none; }
.shift-upload .upl__list { margin: 0; padding: 0; list-style: none; }
.shift-upload .upl__actions .btn { min-height: 36px; }
.shift-upload__hint { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.shift-upload__folder { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.shift-upload__folder select { min-height: var(--tap); max-width: 200px; }

/* Готовность смены и папки исходников: строка под шапкой смены (заход В). */
.prep { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); border: 1px solid var(--color-border); background: var(--color-surface); }
.prep--ready { border-color: var(--color-ok-soft); background: var(--color-ok-soft); color: var(--color-ok); }
.prep--blocked { border-color: var(--color-warning-soft); background: var(--color-warning-soft); color: var(--color-warning); }
.prep__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); flex: 1 1 280px; min-width: 0; margin: 0; }
.prep__state .icon { width: 18px; height: 18px; flex: none; }
.prep__state b { font-weight: 600; }
.prep__why { font-size: var(--text-s); font-weight: 500; }
.prep__edit { flex: 0 0 auto; }
.prep__edit[open] { flex: 1 1 100%; }
.prep__edit > summary { list-style: none; cursor: pointer; }
.prep__edit > summary::-webkit-details-marker { display: none; }
.prep__form, .folder__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); color: var(--color-text); }
.prep__check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-weight: 500; }
.prep__check input, .folder__pick input { width: 20px; height: 20px; accent-color: var(--color-accent); }
.prep__field { display: grid; gap: var(--space-1); min-width: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.prep__field input, .prep__field select { min-height: var(--tap); min-width: 220px; max-width: 100%; }
.prep__cast { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.prep__cast legend { padding: 0; margin-bottom: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); float: left; width: 100%; }
.prep__cast input { width: 72px; min-height: var(--tap); }
/* «Готовность» смены одной панелью (макет 25, замечание Кирилла К11). */
.prep__auto { flex: 1 1 100%; display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); background: var(--color-warning-soft); font-size: var(--text-s); }
.prep__auto .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.ready-list { margin: var(--space-3) 0 0; padding: 0; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-m); overflow: hidden; background: var(--color-surface); color: var(--color-text); }
.ready-list__row { display: grid; grid-template-columns: 22px 150px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--text-s); }
.ready-list__row:first-child { border-top: 0; }
.ready-list__row b { font-weight: 600; }
.ready-list__row span:last-child { color: var(--color-text-muted); overflow-wrap: anywhere; }
.ready-list__mark { color: var(--color-danger); font-weight: 700; }
.ready-list__mark--ok { color: var(--color-ok); }
.prep__form-title { flex: 1 1 100%; margin: 0; font-weight: 600; font-size: var(--text-s); }
.prep__field--wide { flex: 1 1 260px; }
.prep__field--wide input { width: 100%; }

.folders { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-3); }
.folders__title { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); font-size: var(--text-s); font-weight: 600; }
.folders__title .icon { width: 18px; height: 18px; }
.folders__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.folders__none, .folders__loose { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--text-s); color: var(--color-text-muted); }
.folder { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-m); }
.folder[open] { flex: 1 1 100%; }
.folders__list li:has(.folder[open]) { flex: 1 1 100%; }
.folder > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-3); list-style: none; cursor: pointer; }
.folder > summary::-webkit-details-marker { display: none; }
.folder__name { font-weight: 600; }
.folder__reels, .folder__n { color: var(--color-text-muted); font-size: var(--text-xs); }
.folder__reels { font-family: var(--font-id); letter-spacing: 0.04em; }
.folder__body { padding: 0 var(--space-3) var(--space-3); }
.folder__files { display: grid; margin: 0; padding: 0; list-style: none; }
.folder__files li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border); }
.folder__file { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; font-size: var(--text-s); }
.folder__file .icon { width: 16px; height: 16px; flex: none; }
.folder__pick { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0; padding: 0; border: 0; }
.folder__pick legend { padding: 0; margin-bottom: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.folder__pick label { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); font-family: var(--font-id); letter-spacing: 0.04em; }
/* Имена людей (состав смены) — основным шрифтом: шрифт ID только для кодов папок и роликов. */
.folder__pick--people label { font-family: var(--font-sans); letter-spacing: normal; }
.folder-new > summary { list-style: none; cursor: pointer; }
.folder-new > summary::-webkit-details-marker { display: none; }
.folder-new[open] { flex: 1 1 100%; }

.reel-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 20px 12px; }
.reel-card { position: relative; min-width: 0; }
.reel-card__link { display: block; color: inherit; text-decoration: none; }
.reel-card__pic { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--radius-s); overflow: hidden; background: var(--color-stage-raised); }
.reel-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-card__ph { position: absolute; inset: 0; display: grid; place-items: center; background: var(--color-stage-line); }
.reel-card__ph b { font: 500 34px/1 var(--font-id); letter-spacing: .04em; color: color-mix(in srgb, var(--color-surface) 16%, transparent); }
.reel-card--queue .reel-card__pic, .reel-card--prep .reel-card__pic { filter: grayscale(.85) brightness(.95); }
.reel-card__num {
  position: absolute; top: 7px; left: 7px; z-index: 2; padding: 1px 7px; border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--color-text) 78%, transparent); color: var(--color-accent-text); font: 500 15px/1.35 var(--font-id); letter-spacing: .04em;
}
.reel-card__ver {
  position: absolute; top: 7px; right: 7px; z-index: 2; padding: 1px 6px; border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent); color: var(--color-text); font-size: 12px; font-weight: 600;
}
.reel-card__band {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 7px 9px;
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reel-card__body { display: block; }
.reel-card__name { display: block; margin-top: var(--space-2); font-size: var(--text-s); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.reel-card__pill, .reel-card__v { display: none; }
.reel-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-muted); }
/* Монтажёр — одной строкой с многоточием: сетка не разъезжается по высоте (макет 02). */
.reel-card__who { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reel-card__fixes { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.reel-card__fixes .icon { width: 16px; height: 16px; }
.reel-card__link:hover .reel-card__name { text-decoration: underline; text-underline-offset: 3px; }
.reel-card__link:focus-visible { outline-offset: 4px; border-radius: var(--radius-s); }

/* Флажок «к отправке» — в углу превью над плашкой статуса, как в макете 02: слово статуса
   целиком, номер и версию не закрывает (аудит F11). Цвет не единственный признак — галочка. */
.reel-card { --band-h: 30px; container-type: inline-size; }
.reel-card__pick { position: absolute; z-index: 3; right: -4px; top: calc(100cqw * 16 / 9 - var(--band-h) - var(--tap) + 4px); display: grid; place-items: center; width: var(--tap); height: var(--tap); cursor: pointer; }
.reel-card__pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.reel-card__box { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-s); background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-text); color: transparent; }
.reel-card__box .icon { width: 15px; height: 15px; stroke-width: 3; }
.reel-card__pick input:checked + .reel-card__box { background: var(--st-accepted); color: var(--color-text); }
.reel-card__pick input:focus-visible + .reel-card__box { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.reel-card:has(input:checked) .reel-card__pic { outline: 3px solid var(--color-text); outline-offset: 2px; }

/* Список: те же карточки строками, превью маленькое, статус плашкой в тексте. */
.reels[data-view="list"] .reel-grid { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); overflow: hidden; }
.reels[data-view="list"] .reel-card + .reel-card { border-top: 1px solid var(--color-border); }
.reels[data-view="list"] .reel-card__link { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-3) 64px var(--space-3) var(--space-4); }
.reels[data-view="list"] .reel-card__link:hover { background: var(--color-surface-sunken); }
.reels[data-view="list"] .reel-card__num { top: 3px; left: 3px; padding: 0 4px; font-size: 12px; }
.reels[data-view="list"] .reel-card__ver, .reels[data-view="list"] .reel-card__band { display: none; }
.reels[data-view="list"] .reel-card__ph b { font-size: 20px; }
.reels[data-view="list"] .reel-card__body { display: grid; gap: var(--space-1); justify-items: start; }
.reels[data-view="list"] .reel-card__name { margin: 0; font-size: var(--text-m); }
.reels[data-view="list"] .reel-card__pill { display: inline-flex; order: 3; }
.reels[data-view="list"] .reel-card__v { display: inline; }
.reels[data-view="list"] .reel-card__meta { margin: 0; justify-content: flex-start; gap: var(--space-4); font-size: var(--text-s); }
.reels[data-view="list"] .reel-card__pick { top: 50%; right: var(--space-2); transform: translateY(-50%); }
.reels[data-view="list"] .reel-card:has(input:checked) .reel-card__pic { outline-offset: 1px; outline-width: 2px; }

/* Нижняя строка выбора: счёт, «Отправить клиенту», подтверждение здесь же. */
.btn--marker { background: var(--st-accepted); border-color: var(--st-accepted); color: var(--color-text); }
.btn--marker:hover { background: var(--st-accepted); border-color: var(--st-accepted); color: var(--color-text); filter: brightness(.94); }
.btn--ghost { background: transparent; border-color: color-mix(in srgb, var(--color-surface) 55%, transparent); color: var(--color-accent-text); }
.btn--ghost:hover { background: color-mix(in srgb, var(--color-surface) 12%, transparent); border-color: var(--color-accent-text); color: var(--color-accent-text); }
.selbar {
  position: sticky; bottom: var(--space-4); z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-4); margin-top: var(--space-4); padding: 10px 10px 10px 18px;
  background: var(--color-text); color: var(--color-accent-text); border-radius: 12px;
}
.selbar__count { display: none; font-weight: 500; }
.selbar__count b { font-weight: 700; }
.reels.is-live .selbar__count { display: inline; }
.reels.is-live .selbar[data-n="0"] { display: none; }
.selbar__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-left: auto; }
.selbar__ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.selbar__ask[hidden], .selbar [data-go][hidden] { display: none; }
.selbar__q { font-weight: 500; }

@media (max-width: 767px) {
  .reels-bar__chips { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--space-4)); padding-right: var(--space-4); }
  .reels-bar__chips .chip { flex: none; }
  .reels-bar { align-items: stretch; }
  .reels-bar__tools { width: 100%; justify-content: space-between; }
  .shift-form__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .shift-upload__pop { left: 0; right: auto; width: calc(100vw - 32px); }
  .reel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
  .reel-card__name { font-size: var(--text-xs); }
  .reel-card__meta { display: none; }
  .reel-card__band { padding: 5px 6px; font-size: 11.5px; }
  .reel-card { --band-h: 25px; }
  .reel-card__num { font-size: 13px; padding: 0 5px; }
  .reel-card__ver { display: none; }
  .reels[data-view="list"] .reel-card__meta { display: flex; }
  .reels[data-view="list"] .reel-card__link { padding-right: 56px; gap: var(--space-3); }
  .reels[data-view="list"] .reel-card__name { font-size: var(--text-s); }
  .selbar { bottom: calc(64px + env(safe-area-inset-bottom) + var(--space-2)); margin-right: calc(-1 * var(--space-2)); margin-left: calc(-1 * var(--space-2)); padding-left: var(--space-4); }
  .selbar__acts, .selbar__ask { width: 100%; margin-left: 0; }
  .selbar__acts > .btn, .selbar__ask > .btn { flex: 1 1 auto; }
}

/* --- Экран ролика: сцена с плеером, версии, чек-лист правок ------------------------------- */
/* Эталон — docs/mockups/04-reel.html. Сцена тёмная (монтажная), справа колонка правок. */
.shell--reel > .page { max-width: none; margin: 0; padding: 0; }
.shell--reel > .topbar { display: none; }
/* Экран ровно в окно: сцена и колонка правок — каждая своей высоты окна, прокрутка внутри. */
.reel-page { display: grid; grid-template-columns: minmax(0, 1fr) 420px; height: 100vh; height: 100dvh; }
.reel-topbar { display: none; }

.reel-stage {
  --stage-muted: color-mix(in srgb, var(--color-accent-text) 68%, var(--color-stage));
  --stage-pin-done: color-mix(in srgb, var(--color-accent-text) 38%, var(--color-stage));
  display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; padding: 18px 28px 24px;
  background: var(--color-stage); color: var(--color-accent-text);
}
.reel-stage a { color: inherit; }
.reel-stage__crumbs { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--stage-muted); font-size: var(--text-s); }
.reel-stage__crumbs a { color: var(--stage-muted); text-decoration: none; }
.reel-stage__crumbs a:hover { color: var(--color-accent-text); text-decoration: underline; }
.reel-stage__crumbs .icon { width: 16px; height: 16px; }
.reel-stage__nav { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; font-size: var(--text-xs); }
.reel-stage__nav a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; border-radius: var(--radius-s); }
.reel-stage__nav a:hover { background: var(--color-stage-raised); color: var(--color-accent-text); }
.reel-stage__nav [aria-disabled] { opacity: .4; }
.reel-stage__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-3); }
.reel-stage__id { margin: 0; color: var(--stage-muted); font: 500 15px var(--font-id); letter-spacing: 0.05em; }
.reel-stage__name { margin: 2px 0 var(--space-2); font-size: 24px; font-weight: 600; line-height: 1.2; }
.reel-vers { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.reel-vers__note { color: var(--stage-muted); font-size: var(--text-xs); white-space: nowrap; }
.reel-stage .btn--light { background: var(--color-accent-text); border-color: var(--color-accent-text); color: var(--color-text); }
.reel-stage .btn--light:hover { background: var(--color-surface-sunken); border-color: var(--color-surface-sunken); color: var(--color-text); }
.reel-stage .btn--dark { background: var(--color-stage-raised); border-color: var(--color-stage-line); color: var(--color-accent-text); }
.reel-stage .btn--dark:hover { background: var(--color-stage-line); border-color: var(--color-stage-line); color: var(--color-accent-text); }
.reel-stage .btn--marker { color: var(--color-text); }
.reel-upload { position: relative; display: inline-flex; flex-direction: column; align-items: stretch; }
.reel-upload .upl__input { z-index: 1; }
.reel-upload__btn { position: relative; cursor: pointer; }
.reel-upload .upl__list { position: absolute; z-index: 5; top: calc(100% + var(--space-2)); right: 0; width: 320px; max-width: 80vw; margin: 0; padding: 0 var(--space-3); list-style: none; background: var(--color-stage-raised); border: 1px solid var(--color-stage-line); border-radius: var(--radius-m); color: var(--color-accent-text); }
.reel-upload .upl__list:empty { display: none; }
.reel-upload .upl__item { border-color: var(--color-stage-line); }
.reel-upload .upl__status { color: var(--stage-muted); }
.reel-upload .upl__actions .btn { min-height: 36px; }

.vpick { position: relative; }
.vpick > summary {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 14px;
  list-style: none; cursor: pointer; white-space: nowrap; font-weight: 600;
  background: var(--color-stage-raised); border: 1px solid var(--color-stage-line); border-radius: var(--radius-m);
}
.vpick > summary::-webkit-details-marker { display: none; }
.vpick > summary:hover { border-color: var(--stage-muted); }
.vpick[open] > summary .icon { transform: rotate(180deg); }
.vpick--empty > summary { cursor: default; color: var(--stage-muted); }
.vpick__list {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: grid; min-width: 300px; margin: 0; padding: var(--space-1);
  list-style: none; background: var(--color-stage-raised); border: 1px solid var(--color-stage-line);
  border-radius: var(--radius-m); box-shadow: var(--shadow-2);
}
.vpick__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius-s); color: var(--color-accent-text); text-decoration: none; }
a.vpick__item:hover { background: var(--color-stage-line); color: var(--color-accent-text); }
.vpick__item[aria-current="true"] { background: var(--color-stage-line); }
.vpick__item--wait { color: var(--stage-muted); }
.vpick__num { font: 600 var(--text-m) var(--font-id); letter-spacing: 0.04em; }
.vpick__meta { color: var(--stage-muted); font-size: var(--text-xs); }
.vpick__pill, .vpills .vpick__pill { padding: 1px 8px; border-radius: 10px; background: var(--color-stage-line); color: var(--color-accent-text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.vpick__pill--client { background: var(--st-review); color: var(--st-review-text); }
.vpick__pill--final { background: var(--st-accepted); color: var(--st-accepted-text); }

.rsteps { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--space-3); padding: 0; list-style: none; font-size: var(--text-xs); color: var(--stage-muted); }
.rsteps__item { padding: 3px 8px; border-radius: var(--radius-s); background: var(--color-stage-raised); }
.rsteps__item--done { color: color-mix(in srgb, var(--st-confirmed) 40%, var(--color-accent-text)); }
.rsteps__item--now { font-weight: 600; }
.rsteps__item--skip { background: transparent; box-shadow: inset 0 0 0 1px var(--color-stage-raised); }

/* Главное действие и «Ещё» — в шапке сцены рядом с версиями (макет 04: строки действий нет). */
.reel-vers form { margin: 0; }
.reel-vers .btn { min-height: 40px; }
.reel-vers__wait { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; color: var(--stage-muted); font-size: var(--text-xs); }
.reel-vers .confirm__ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-accent-text); font-size: var(--text-xs); }
.reel-more__who { margin: 0; color: var(--stage-muted); font-size: var(--text-s); }
.reel-more__who b { color: var(--color-accent-text); font-weight: 600; }
.reel-assign { display: inline-flex; align-items: center; gap: var(--space-2); }
.reel-assign select { min-height: 40px; background: var(--color-stage-raised); border-color: var(--color-stage-line); color: var(--color-accent-text); }
.reel-more { position: relative; }
.reel-more > summary { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-m); color: var(--stage-muted); cursor: pointer; list-style: none; font-weight: 500; }
.reel-more > summary::-webkit-details-marker { display: none; }
.reel-more > summary:hover, .reel-more[open] > summary { background: var(--color-stage-raised); color: var(--color-accent-text); }
.reel-more__panel { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: grid; gap: var(--space-3); width: 340px; max-width: 86vw; padding: var(--space-3); background: var(--color-stage-raised); border: 1px solid var(--color-stage-line); border-radius: var(--radius-m); box-shadow: var(--shadow-2); }
.reel-more__panel form { display: grid; gap: var(--space-2); }
.reel-more__panel label { color: var(--stage-muted); font-size: var(--text-xs); }
.reel-more__panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]), .reel-more__panel select { width: 100%; min-height: 40px; background: var(--color-stage); border-color: var(--color-stage-line); color: var(--color-accent-text); }
.reel-more__panel .btn { min-height: 40px; }
.reel-more__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.reel-more__panel .reel-more__pair input[type="date"] { width: auto; }

/* Факты над названием: код, срок монтажа и «взял» — подписи, не кнопки. Просрочен — красной плашкой. */
.reel-stage__idline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); margin: 0; }
.reel-due, .reel-taken { display: inline-flex; align-items: center; gap: 5px; color: var(--stage-muted); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.reel-due .icon, .reel-taken .icon, .reel-proposed .icon { width: 14px; height: 14px; }
.reel-editor { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
.reel-due--late { padding: 2px 8px; border-radius: var(--radius-s); background: var(--st-revisions); color: var(--st-revisions-text); font-weight: 600; }
.reel-taken .icon { color: var(--color-lime); }
/* «предложен v3 · Лёша, 14:20» — рядом с «клиент видит v3»: лаймовая точка-маркер, как кнопка показа. */
.reel-proposed {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--color-lime); color: var(--color-lime); font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
.reel-assign input[type="date"] { min-height: 40px; background: var(--color-stage-raised); border-color: var(--color-stage-line); color: var(--color-accent-text); color-scheme: dark; }
.reel-more__panel input[type="date"] { color-scheme: dark; }

/* «Отметить решение клиента» — первым блоком «Ещё»: решение, «где и когда», правки со слов клиента. */
.reel-more__panel:has(.reel-decide) { width: 400px; }
.reel-decide { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-stage-line); }
.reel-decide__title { margin: 0; color: var(--color-accent-text); font-size: var(--text-m); font-weight: 600; }
.reel-decide__hint { margin: 0; color: var(--stage-muted); font-size: var(--text-xs); line-height: 1.4; }
.reel-decide__choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.reel-decide__choice { position: relative; display: inline-flex; cursor: pointer; }
.reel-more__panel .reel-decide__choice { color: var(--color-accent-text); font-size: var(--text-s); }
.reel-decide__choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reel-decide__choice span {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--color-stage-line); font-weight: 500;
}
.reel-decide__choice:hover span { box-shadow: inset 0 0 0 1px var(--stage-muted); }
.reel-decide__choice input:checked + span { background: var(--color-accent-text); color: var(--color-text); box-shadow: none; font-weight: 600; }
.reel-decide__choice input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.reel-decide__notes { display: grid; gap: var(--space-2); }
.reel-more__panel textarea { width: 100%; background: var(--color-stage); border-color: var(--color-stage-line); color: var(--color-accent-text); resize: vertical; }
.reel-more__panel .field__error { padding: 6px 10px; border-radius: var(--radius-s); background: var(--color-danger-soft); color: var(--color-danger); font-size: var(--text-xs); }
.reel-more__panel [aria-invalid="true"] { border-color: var(--color-danger-soft); }

/* Вкладка «Ролики»: предложенный исполнителем ролик — плашка с лаймовой кромкой; срок при назначении сменой. */
.reel-card__band--proposed { box-shadow: inset 4px 0 0 var(--color-lime); }
.shift-act__due { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.shift-act__due input { min-height: var(--tap); }

.reel-video { display: flex; flex-direction: column; }
.reel-video .player { max-width: none; }
.reel-video .player__video { display: block; width: auto; height: clamp(260px, calc(100vh - 410px), 560px); aspect-ratio: 9 / 16; margin: 0 auto; object-fit: contain; background: var(--color-video); border-radius: var(--radius-s); }
.reel-video .player__bar { display: none; }
.reel-video .player__problem { margin-top: var(--space-2); color: var(--st-review); text-align: center; }
.reel-empty { display: grid; place-content: center; justify-items: center; gap: var(--space-2); min-height: 320px; margin: 0 0 var(--space-3); padding: var(--space-5); border: 1px dashed var(--color-stage-line); border-radius: var(--radius-m); color: var(--stage-muted); text-align: center; }
.reel-empty b { color: var(--color-accent-text); font-size: var(--text-m); }
.reel-empty p { margin: 0; }

/* Панель плеера на сцене: свои тёмные кнопки, метки на шкале цветом, отрезок — полосой. */
.reel-stage .pui { margin-top: var(--space-2); gap: 0; }
.reel-stage .pui__rail { margin: 0 8px; height: 22px; }
.reel-stage .pui__mark { width: 22px; height: 22px; }
.reel-stage .pui__mark::after { top: 6px; bottom: 6px; width: 10px; margin-left: -5px; border-radius: 50%; background: var(--color-brand); box-shadow: 0 0 0 2px var(--color-stage); }
.reel-stage .pui__mark--done::after { background: var(--stage-pin-done); }
.reel-stage .pui__mark--span { transform: none; min-width: 12px; }
.reel-stage .pui__mark--span::after { left: 0; right: 0; width: auto; margin-left: 0; border-radius: var(--radius-s); }
.reel-stage .pui__mark:hover { background: none; }
.reel-stage .pui__mark:hover::after { box-shadow: 0 0 0 2px var(--color-stage), 0 0 0 4px var(--color-accent-text); }
.reel-stage .pui__range { height: 30px; accent-color: var(--color-accent-text); }
.reel-stage .pui__row { gap: var(--space-3); color: var(--color-accent-text); }
.reel-stage .pui__btn { min-width: 40px; min-height: 40px; padding: 0 var(--space-2); background: none; border-color: transparent; color: var(--stage-muted); }
.reel-stage .pui__btn:hover { background: var(--color-stage-raised); border-color: transparent; color: var(--color-accent-text); }
.reel-stage .pui__btn .icon { width: 20px; height: 20px; }
.reel-stage .pui__play { min-width: 40px; width: 40px; min-height: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--color-accent-text); border-color: var(--color-accent-text); color: var(--color-stage); }
.reel-stage .pui__play:hover { background: var(--color-surface-sunken); border-color: var(--color-surface-sunken); color: var(--color-stage); }
.reel-stage .pui__play .icon { width: 20px; height: 20px; }
.reel-stage .pui__time { margin-left: 0; color: var(--color-accent-text); font: 500 15px var(--font-id); letter-spacing: 0.04em; }
.pui__hint { margin-left: auto; color: var(--stage-muted); font-size: var(--text-xs); white-space: nowrap; }
.pui__hint + .pui__btn { margin-left: 0; }

/* Колонка справа: вкладки, чек-лист, строка ввода правки. */
.reel-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--color-surface); border-left: 1px solid var(--color-border); }
.reel-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--color-border); }
.reel-tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 10px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--color-text-muted); font-weight: 500; text-decoration: none; white-space: nowrap; }
.reel-tabs a:hover { color: var(--color-text); }
.reel-tabs a[aria-current="page"] { color: var(--color-text); font-weight: 600; border-bottom-color: var(--color-text); }
.reel-tabs__n { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 500; }
.reel-panel { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.reel-panel[hidden] { display: none; }
.reel-panel--scroll { overflow-y: auto; padding: var(--space-4) 18px var(--space-5); }
.reel-panel--scroll h2 { margin: 0 0 var(--space-2); font-size: var(--text-m); }
.reel-panel--scroll h2:not(:first-child) { margin-top: var(--space-5); }

.checklist { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.checklist__head { padding: 16px 18px 12px; border-bottom: 1px solid var(--color-border); }
.progress { display: flex; align-items: center; gap: var(--space-3); }
.progress__big { font: 600 30px/1 var(--font-id); white-space: nowrap; }
.progress__sub { color: var(--color-text-muted); font-size: var(--text-s); }
.progress__bar { flex: 1; height: 8px; overflow: hidden; border-radius: var(--radius-s); background: var(--color-bg); }
.progress__bar i { display: block; height: 100%; background: var(--color-ok); }
.checklist__round { margin: 10px 0 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.checklist__round b { color: var(--color-text); }
.checklist__extra { margin: var(--space-2) 0 0; }
.checklist__extra .btn { min-height: 36px; }
.checklist__filters { display: flex; gap: 6px; margin-top: var(--space-3); }
.checklist .chip { min-height: 32px; padding: 0 12px; font-size: var(--text-s); gap: 6px; }
.checklist .chip b { font-weight: 600; color: var(--color-text-muted); }
.checklist .chip[aria-current="true"] b { color: var(--color-border-strong); }
.fixes-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.fixes { margin: 0; padding: 0; list-style: none; }
.fixes__more { display: block; padding: 12px 18px; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-s); text-decoration: none; }
.fixes__more:hover { color: var(--color-text); background: var(--color-bg); }
.fixes__empty { padding: var(--space-5) 18px; color: var(--color-text-muted); }
.fixes__empty b { display: block; color: var(--color-text); }

.fix { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--color-border); }
.fix--current { background: var(--color-warning-soft); }
.fix__check { margin: 0; }
.fix__box {
  display: grid; place-items: center; width: 28px; min-width: 0; height: 28px; min-height: 0; padding: 0; margin-top: -2px;
  background: var(--color-surface); border: 2px solid var(--color-text); border-radius: var(--radius-s); color: var(--color-accent-text);
}
.fix__box:hover { background: var(--color-accent-soft); border-color: var(--color-text); color: var(--color-accent-text); }
.fix__box .icon { width: 18px; height: 18px; }
.fix__box--static { cursor: default; border-color: var(--color-border-strong); }
.fix__box--static:hover { background: var(--color-surface); }
.fix--done .fix__box { background: var(--color-ok); border-color: var(--color-ok); }
.fix--done .fix__box--static { background: var(--color-ok); border-color: var(--color-ok); }
.fix__top { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 8px; color: var(--color-text-muted); font-size: var(--text-xs); }
.fix__top > * { flex: 0 0 auto; }
.fix__top > .fix__spacer { flex: 1 1 0; min-width: 0; }
.fix__top > .fix__who { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fix__top .icon { width: 14px; height: 14px; }
.fix__spacer { flex: 1; }
.fix__del { display: inline-flex; align-items: center; }
.fix__del-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.fix__del-btn:hover, .fix__del-btn:focus-visible { background: var(--color-bg); color: var(--color-danger); }
.fix__del-ask { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text); font-weight: 600; }
.fix__del-ask .btn { min-height: 28px; padding: 2px 10px; font-size: var(--text-xs); }
.tc-chip { display: inline-flex; align-items: center; min-height: 0; padding: 4px 6px; border: 0; border-radius: var(--radius-s); background: var(--color-bg); color: var(--color-text); font: 600 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; cursor: pointer; }
.tc-chip:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.tc-chip--none { background: var(--color-bg); color: var(--color-text-muted); font-family: var(--font-sans); letter-spacing: 0; cursor: default; }
.fix--done .tc-chip { background: var(--color-bg); color: var(--color-text-muted); }
.tag { padding: 2px 7px; border-radius: var(--radius-s); background: var(--color-bg); color: var(--color-text); font-size: 12px; font-weight: 600; }
.tag--sense { background: var(--color-accent-soft); color: var(--color-text); box-shadow: inset 0 0 0 1.5px var(--color-text); }
.fix__text { margin: 4px 0 0; }
.fix--done .fix__text { color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: var(--color-border-strong); }
.fix__reply { display: flex; gap: 6px; margin: 6px 0 0; color: var(--color-text-muted); font-size: var(--text-s); }
.fix__reply .icon { margin-top: 3px; }
.ava { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-avatar); color: var(--color-avatar-text); font-size: 11px; font-weight: 700; }
.fix .ava--empty { background: var(--color-bg); color: var(--color-text-muted); }
/* Метка и исполнитель у супервайзера: виден тот же ярлык или кружок, поверх — невидимый список. */
.fix__sel { position: relative; display: inline-flex; margin: 0; }
.fix__sel select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.fix__sel:hover .tag, .fix__sel:hover .ava { box-shadow: inset 0 0 0 1.5px var(--color-text); }
.fix__sel:focus-within .tag, .fix__sel:focus-within .ava { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.tag--empty { background: none; color: var(--color-text-muted); font-weight: 500; box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.fix__sel noscript .btn { min-height: 26px; margin-left: 4px; padding: 0 6px; font-size: 12px; }
/* Ответ на правку — по клику на её текст; строка ввода раскрывается под ним. */
.fix__ans > summary { display: block; list-style: none; cursor: pointer; border-radius: var(--radius-s); }
.fix__ans > summary::-webkit-details-marker { display: none; }
.fix__ans > summary:hover { background: var(--color-bg); box-shadow: 0 0 0 4px var(--color-bg); }
.fix__ans form { display: flex; gap: var(--space-2); margin: 8px 0 0; }
.fix__ans input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]) { flex: 1; min-width: 0; min-height: 36px; }
.fix__ans .btn { min-height: 36px; }

.composer { padding: 12px 16px 16px; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.composer__field { display: flex; align-items: flex-start; gap: var(--space-2); padding: 7px 8px; border: 1.5px solid var(--color-text); border-radius: var(--radius-m); background: var(--color-surface); }
.composer__field:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]).composer__tc {
  width: 4.6em; min-height: 0; padding: 5px 6px; border: 0; border-radius: var(--radius-s); background: var(--color-bg); color: var(--color-text);
  font: 600 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; text-align: center;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]).composer__tc[hidden] { display: none; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]).composer__tc:disabled { background: var(--color-bg); color: var(--color-text-muted); }
/* Пустое поле — не плашка «0:00», а пустая рамка: таймкода нет, пока ролик не смотрели. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]).composer__tc:placeholder-shown { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]).composer__tc::placeholder { color: var(--color-text-muted); font-weight: 400; }
.composer__dash { align-self: center; color: var(--color-text-muted); }
.composer__dash[hidden] { display: none; }
.composer__text { flex: 1; min-width: 0; min-height: 28px; max-height: 120px; padding: 2px 0; border: 0; background: none; color: var(--color-text); font: inherit; line-height: 1.4; resize: none; outline: 0; }
.composer__send { min-width: 32px; width: 32px; min-height: 32px; height: 32px; padding: 0; background: none; border-color: transparent; color: var(--color-text); }
.composer__send:hover { background: var(--color-accent-soft); border-color: transparent; color: var(--color-text); }
.composer__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.composer__opts > * { display: inline-flex; align-items: center; gap: 6px; }
.composer__opts label { cursor: pointer; }
.composer__opts input[type="checkbox"] { width: 16px; height: 16px; }
.composer__opts .btn { min-height: 32px; padding: 0 var(--space-2); font-size: var(--text-xs); }
.composer__opt { min-height: 28px; padding: 0 10px; border: 1px solid var(--color-border-strong); border-radius: 14px; background: none; color: var(--color-text-muted); font: inherit; cursor: pointer; }
.composer__opt:hover { border-color: var(--color-text); color: var(--color-text); }
.composer__opt[hidden] { display: none; }
.composer__opts .icon { width: 14px; height: 14px; }

.vrows { margin: 0; padding: 0; list-style: none; }
.vrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-3); padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.vrow__num { font: 600 var(--text-l) var(--font-id); letter-spacing: 0.04em; }
.vrow__meta { color: var(--color-text-muted); font-size: var(--text-s); }
.vrow__acts { display: flex; align-items: center; gap: var(--space-2); }
.vrow__acts .btn { min-height: 36px; padding: 0 var(--space-3); }
.vpills { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 2; }
.vpills .vpick__pill { background: var(--color-bg); color: var(--color-text); }
.vpills .vpick__pill--client { background: var(--st-review); color: var(--st-review-text); }
.vpills .vpick__pill--final { background: var(--st-accepted); color: var(--st-accepted-text); }
.reel-upzone .upl__zone { min-height: 96px; }
.reel-facts { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.reel-facts li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--space-3); color: var(--color-text-muted); font-size: var(--text-s); }
.reel-facts b { color: var(--color-text); font-weight: 600; }

/* «Из сценария»: идея и сценарий с тем же номером; вкладка «Сценарий» справа. */
.origin { display: grid; gap: var(--space-4); }
.origin h2 { margin: 0; font-size: var(--text-m); }
.origin__unit { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.origin__unit:last-child { border-bottom: 0; }
.origin__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.origin__kind { font: 600 var(--text-l) var(--font-id); letter-spacing: 0.04em; }
.origin__state { padding: 2px var(--space-2); border-radius: var(--radius-s); background: var(--color-surface-sunken); font-size: var(--text-xs); font-weight: 600; }
.origin__state--accepted { background: var(--st-accepted); color: var(--st-accepted-text); }
.origin__state--revisions { background: var(--st-revisions); color: var(--st-revisions-text); }
.origin__state--rejected { background: var(--color-danger-soft); color: var(--color-danger); }
.origin__title { margin: 0; font-weight: 600; }
.origin__link { margin: 0; font-size: var(--text-s); }
.origin__link a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text); text-decoration: underline; }
.origin__link .icon { width: 16px; height: 16px; }
.origin__lines { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.origin__line { display: grid; gap: 2px; padding-left: var(--space-3); border-left: 3px solid var(--color-border-strong); font-size: var(--text-s); }
.origin__line small { color: var(--color-text-muted); font-size: var(--text-xs); }
.origin__line--decided { border-left-color: var(--color-text); }
.origin__line--replaced { border-left-color: var(--color-warning); }
.origin__none { margin: 0; font-size: var(--text-s); }
/* «Из сценария» коротко над вкладками экрана ролика: видно без клика, не вытесняет правки. */
/* «Из сценария» одной строкой над вкладками, раскрывается на месте (макет 19, вариант А; аудит F14). */
.origin-brief { flex: none; border-bottom: 1px solid var(--color-border); background: var(--color-surface-sunken); }
.origin-brief__line {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 12px 0 18px;
  list-style: none; cursor: pointer; white-space: nowrap; overflow: hidden; font-size: var(--text-s);
}
.origin-brief__line::-webkit-details-marker { display: none; }
.origin-brief__line:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.origin-brief__title { font-size: var(--text-xs); color: var(--color-text-muted); }
.origin-brief__pair { display: inline-flex; flex: none; align-items: center; gap: 6px; }
.origin-brief__pair b { font-weight: 600; }
.origin-brief__go { display: inline-flex; margin-left: auto; color: var(--color-text-muted); }
.origin-brief__go .icon { width: 16px; height: 16px; transition: transform var(--duration-fast); }
.origin-brief[open] .origin-brief__go .icon { transform: rotate(180deg); }
.origin-brief__list { display: grid; gap: var(--space-3); margin: 0; padding: 0 18px var(--space-3); list-style: none; }
@media (max-width: 767px) {
  .origin-brief__line { gap: 6px; padding: 0 8px 0 var(--space-4); }
  .origin-brief__title { display: none; }
}
.origin-brief__unit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); row-gap: 2px; }
.origin-brief__kind { font: 600 var(--text-m) var(--font-id); letter-spacing: 0.04em; }
.origin-brief__name, .origin-brief__note, .origin-brief__link { grid-column: 1 / -1; margin: 0; font-size: var(--text-s); }
.origin-brief__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.origin-brief__note { padding-left: var(--space-2); border-left: 3px solid var(--st-revisions); color: var(--color-text); }
.origin-brief__link { display: inline-flex; justify-self: start; align-items: center; gap: var(--space-1); color: var(--color-text); text-decoration: underline; }
.origin-brief__link .icon { width: 16px; height: 16px; }
.folder-view__name { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-1); font-size: var(--text-s); font-weight: 600; }
.folder-view__name .icon { width: 16px; height: 16px; }
.folder-view__name small { color: var(--color-text-muted); font: 500 var(--text-xs) var(--font-id); letter-spacing: 0.04em; }

@media (max-width: 1100px) {
  .reel-page { grid-template-columns: minmax(0, 1fr) 360px; }
  .reel-stage { padding-left: var(--space-5); padding-right: var(--space-5); }
}
@media (max-width: 767px) {
  .reel-page { display: block; height: auto; }
  .reel-stage { overflow: visible; }
  .reel-topbar {
    display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-4);
    background: var(--color-stage); border-bottom: 1px solid var(--color-stage-line); color: var(--color-accent-text);
  }
  .reel-topbar a { display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); margin-left: -10px; color: var(--color-accent-text); }
  .reel-topbar__id { font: 600 17px var(--font-id); letter-spacing: 0.04em; }
  .reel-topbar .reel-status { margin-left: auto; }
  .reel-stage { padding: var(--space-3) var(--space-4) var(--space-4); }
  .reel-stage__crumbs, .reel-stage__id, .rsteps { display: none; }
  .reel-stage__top { flex-direction: column; gap: var(--space-2); }
  .reel-stage__name { font-size: var(--text-xl); margin-bottom: 0; }
  .reel-vers { justify-content: flex-start; width: 100%; }
  .reel-vers .reel-upload { width: 100%; }
  .reel-vers .btn--light { width: 100%; }
  .reel-upload .upl__list { position: static; width: auto; max-width: none; margin-top: var(--space-2); }
  .vpick__list { min-width: 0; width: calc(100vw - 2 * var(--space-4)); }
  .reel-vers { position: relative; }
  .reel-vers > form, .reel-vers > .reel-assign { flex: 1 1 auto; }
  .reel-vers > form > .btn { width: 100%; }
  .reel-more { position: static; }
  .reel-more__panel, .reel-more__panel:has(.reel-decide) { left: 0; right: 0; width: auto; max-width: none; }
  .reel-proposed { white-space: normal; }
  .reel-video .player__video { width: 100%; height: auto; max-width: 360px; }
  .reel-stage .pui__row { gap: var(--space-2); flex-wrap: nowrap; }
  .reel-stage .pui { min-width: 0; }
  .reel-stage .pui__btn { flex: 0 0 auto; min-width: 36px; padding: 0 var(--space-1); }
  .reel-stage .pui__mute { display: none; }
  .reel-stage .pui__play { flex: 0 0 40px; }
  .reel-stage .pui__time { flex: 0 1 auto; order: 0; margin-right: auto; text-align: left; }
  .pui__hint { display: none; }
  .reel-side { height: auto; overflow: visible; border-left: 0; }
  .reel-tabs { overflow-x: auto; }
  .reel-panel { display: block; }
  .reel-panel--scroll { overflow: visible; }
  .checklist { display: block; }
  .fixes-scroll { overflow: visible; }
  .checklist .chip { min-height: 36px; }
  .composer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* --- Зоны нажатия (аудит F23) ----------------------------------------------------------------
   Плотные кнопки и чипы на ноутбуке остаются 34–38 px (не меньше 24 px по WCAG 2.5.8), а на
   сенсорных экранах дотягиваются до --tap. Флажок правки и «Изменить» во встрече — не меньше 24 px
   везде; на телефоне у флажка невидимая подложка 44×44. */
@media (pointer: coarse) {
  .inbox-chip, .units-chips .chip, .inbox-row .btn--s, .units-screen .btn--s, .unit-doc .btn--s,
  .bitem__go, .plimit > summary.btn--s, .unit__form input:not([type="radio"]),
  .unit-decide__note input, .unit__edit { min-height: var(--tap); }
  .creel__pos a { min-width: var(--tap); min-height: var(--tap); }
  .fix__box { position: relative; }
  .fix__box::after { content: ""; position: absolute; inset: -8px; }
}

/* --- Лист со строками людей, меню строки, «Ещё» шапки (макет 20, вариант А; аудит F18) ---- */
.sheet { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); margin: 0 0 var(--space-4); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px var(--space-4) 10px; }
.sheet__title { margin: 0; font-size: 17px; font-weight: 600; }
.sheet__body { padding: 0 var(--space-4) var(--space-4); }
.mrow-list { margin: 0; padding: 0; list-style: none; }
.mrow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px var(--space-4); border-top: 1px solid var(--color-border); }
.mrow--empty { display: block; }
.mrow .ava { width: 32px; height: 32px; font-size: var(--text-xs); }
.mrow__who { min-width: 0; }
.mrow__who b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.mrow__who small { color: var(--color-text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.sheet__add { border-top: 1px solid var(--color-border); }
.sheet__addline { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-4); color: var(--color-text-muted); font-weight: 500; list-style: none; cursor: pointer; }
.sheet__addline::-webkit-details-marker { display: none; }
.sheet__addline:hover { color: var(--color-text); }
.sheet__form { padding: 0 var(--space-4) var(--space-3); }
.sheet__form-hint { padding: 0 var(--space-4) var(--space-3); margin: 0; }
.access-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: 10px var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-bg); border-radius: 0 0 var(--radius-m) var(--radius-m); font-size: var(--text-s); }
.access-line > .icon { width: 16px; height: 16px; color: var(--color-text-muted); }
.access-line__more > summary { list-style: none; min-height: 32px; padding: 0 var(--space-2); text-decoration: underline; }
.access-line__more > summary::-webkit-details-marker { display: none; }
.access-line__more[open] { flex-basis: 100%; }
.sheet__terms { margin: 0; padding: 10px var(--space-4) var(--space-3); font-size: var(--text-s); white-space: pre-wrap; }
.team-tab { max-width: 640px; }
/* Редкое — только по «Ещё» шапки: закрытый лист не показываем (без JS — nojs.css). */
.rare-sec:not([open]) { display: none; }
.rare-sec__summary { list-style: none; cursor: pointer; }
.rare-sec__summary::-webkit-details-marker { display: none; }
.rare-sec[open] .rare-sec__summary .icon { transform: rotate(180deg); }
/* Меню строки и «Ещё»: <details>, всплывающий лист с тенью всплытия. */
.row-menu { position: relative; }
.row-menu > summary { list-style: none; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu__btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-m); color: var(--color-text-muted); }
.row-menu__btn:hover, .row-menu[open] > .row-menu__btn { background: var(--color-bg); color: var(--color-text); }
.row-menu__pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); box-shadow: var(--shadow-2); }
.row-menu__pop .confirm { display: block; }
.head-menu__item { display: flex; gap: var(--space-2); align-items: flex-start; padding: 10px; border-radius: var(--radius-s); color: var(--color-text); text-decoration: none; font-weight: 500; }
.head-menu__item:hover { background: var(--color-bg); }
.head-menu__item small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 400; }
.head-menu__pop { width: 270px; }
@media (pointer: coarse) { .row-menu__btn { width: var(--tap); height: var(--tap); } }
/* «Люди»: строки с аватаром и ролью (макет 21; аудит F21). */
.people-page { max-width: 820px; }
.people-row { grid-template-columns: 32px minmax(0, 1fr) auto auto; }
.people-row__role .people__role { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.people-row__role select { min-height: 36px; }
.people-row__roletext { color: var(--color-text-muted); font-size: var(--text-s); }
.people__off .mrow__who b { color: var(--color-text-muted); font-weight: 500; }
.people__off .ava { opacity: .5; }
@media (max-width: 767px) {
  .people-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .people-row__role { grid-column: 2 / -1; grid-row: 2; }
}
/* «Журнал» по дням (макет 21; аудит F21). */
.audit__chips { margin: var(--space-3) 0; }
.audit__day { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-m); font-weight: 600; }
.audit__list { margin: 0; padding: 0; list-style: none; }
.audit__row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-3); padding: 10px var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-s); }
.audit__row:first-child { border-top: 0; }
.audit__when { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.audit__what { overflow-wrap: anywhere; }
.audit__what b { font-weight: 600; }
.audit__obj { color: var(--color-text-muted); }
/* Строка вкладок проекта и «Ещё» справа (макет 20; аудит F18): меню вне прокручиваемых вкладок. */
.ws-tabsrow { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-5); border-bottom: 1px solid var(--color-border-strong); }
.ws-tabsrow .ws-tabs { flex: 1 1 auto; min-width: 0; margin: 0; border-bottom: 0; }
.ws-tabsrow .head-menu { flex: none; }
@media (max-width: 767px) { .ws-tabsrow .ws-tabs { margin-right: 0; } }