@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/oswald-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/oswald-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/oswald-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/oswald-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{--ink:#101119;--panel:#181A24;--panel2:#1F2230;--line:#2C3040;--warm:#FFB454;--rose:#FF6B7A;
  --mint:#4ED4A0;--blue:#8AA2FF;--text:#E9EBF3;--dim:#9AA0B8;--mute:#8A90A8;--r:12px;
  /* Край того, на что нажимают. Прежний --line давал 1,3:1 к фону карточки
     при норме 3:1 — форма из восьми полей была видна только по намёку.
     Замер после: 3,3:1 в тёмной, 3,2:1 в светлой. */
  --edge:#646B85;
  /* Шкала: до этого в файле жили 25 кеглей и 14 скруглений, каждый раз
     заново придуманных. Новое пишем только этими значениями. */
  --t1:.6875rem;--t2:.75rem;--t3:.8125rem;--t4:.875rem;--t5:1rem;--t6:1.1875rem;--t7:1.625rem;
  --r1:8px;--r2:12px;--r3:16px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px}
/* Светлое оформление. Тёплый акцент остаётся тем же, но текстовые его версии
   затемнены — на белом #FFB454 не читается. */
body.light{
  --ink:#F4F6FA; --panel:#FFFFFF; --panel2:#EDF0F6; --line:#DBE0EA;
  /* Замер на второй заливке: было 4,32:1 у зелёного и 4,55:1 у тёплого
     при норме 4,5 — этим набраны суммы «получено» и подписи в деньгах.
     Стало 5,78:1 и 5,39:1. */
  --warm:#8A5600; --rose:#B62F42; --mint:#0E6A4B; --blue:#3A55C0;
  /* Край полей и кнопок: #8891A6 давал 2,92:1 на фоне страницы и 2,77:1
     на второй заливке при норме 3:1. Стало 3,51 и 3,33. */
  --edge:#7A8398;
  --text:#171A24; --dim:#565C71; --mute:#5C6276;
}
/* именно background-color, а не background: сокращённая запись обнуляет
   background-image, а им нарисована стрелка списка — в светлом оформлении
   список становился неотличим от обычного поля */
body.light input,body.light select,body.light textarea{background-color:#FFFFFF}
/* Было: тёмно-коричневый текст на светло-оранжевом — заказчик: «коричневый
   с чёрным не сочетаются». Стало: белым по насыщенному тёплому. */
body.light .btn.primary{background:#A85F00;border-color:#8F5000;color:#FFFFFF}
body.light .btn.primary:hover{background:#8F5000;border-color:#7A4400}
body.light .modal{background:rgba(24,28,40,.42)}
body.light .modal-box{box-shadow:0 24px 60px rgba(30,40,70,.22)}
body.light .kv{border-bottom-color:rgba(0,0,0,.09)}
body.light .side-foot{border-top-color:var(--line)}
body.light .ev-dot.tone-draft{background:#F1F4FA}
body.light .chk .box.on{color:#FFFFFF}
/* Настоящие галочки в формах рисуются через input[type=checkbox]:checked+.box —
   у него светлого переопределения не было, и в светлой теме галочка выходила
   почти чёрной на зелёном (заказчик: «чёрный с зелёным не сочетаются»). */
body.light .chk input[type="checkbox"]:checked + .box{color:#FFFFFF}
/* Тёмный глиф на тёплой заливке в светлой теме нечитаем — делаем белым (было ~2,85:1). */
body.light .q-n,body.light .lp-num{color:#fff}
body.light .pick input:checked+span,body.light .pick input:checked+span::after{color:#fff}
body.light .auth-wrap{background:radial-gradient(900px 460px at 50% -10%,rgba(255,180,84,.3),transparent 70%),var(--ink)}
body.light .mark .name{color:#12151E}
body.light .mark-sub{color:#8A5A00}
body.light .banner{color:#7A4C00}
body.light nav.menu button.on{box-shadow:inset 2px 0 0 #E09A2C}
body.light .day.today{border-color:rgba(224,154,44,.75)}
body.light .pill.warm{color:#7A4C00;background:rgba(255,180,84,.24);border-color:rgba(196,134,28,.5)}
body.light .side-card.me{border-color:rgba(224,154,44,.7);box-shadow:0 0 0 1px rgba(224,154,44,.18) inset}
.theme-fab{position:fixed;top:16px;right:16px;z-index:55;width:44px;height:40px;
  display:flex;align-items:center;justify-content:center;font-size:1.0625rem;line-height:1}
/* В светлой теме --warm тёмно-коричневый: заливка им нечитаема.
   Всё, что залито тёплым, держим фирменным оранжевым в обеих темах. */
/* Тёплая заливка — только у главного действия. Выбранный вид показываем
   так же, как в тёмной теме: спокойный фон и тёплая черта снизу. Иначе
   на «Датах» тёплым горели три разные вещи разом. */
body.light .seg button.on{background:#FFFFFF;color:#1A1D26}
body.light .ava{background:#FFB454;color:#32200A}
.bell{position:relative;flex:none;width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;font-size:.875rem}
.badge{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  /* Белое на розовом давало 2,75 к 1 — цифра читалась пятном. Берём
     тёмно-вишнёвый фон, на нём белая цифра держит норму. */
  background:#B3122A;color:#fff;font-size:.6875rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--panel)}
.notif{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.notif:last-child{border-bottom:none}
.notif .dot{width:8px;height:8px;border-radius:50%;background:var(--warm);flex:none;margin-top:6px}
.notif.read .dot{background:transparent;border:1px solid var(--line)}
.notif .t{font-weight:600;font-size:.8438rem}
.notif .b{font-size:.7812rem;color:var(--dim);margin-top:2px}
.notif .w{font-size:.6875rem;color:var(--mute);margin-top:3px}

/* сет-лист длинный — не центрируем его по вертикали, иначе ломается прокрутка */
#jamScreen{align-items:flex-start;padding-top:30px;padding-bottom:60px}

.faq-q{padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:.8438rem;font-weight:600}
.faq-q:before{content:"\25B8  ";color:var(--warm)}
.faq-a{display:none;padding:0 0 10px 14px;font-size:.8125rem;color:var(--dim);line-height:1.65}
.faq-a.open{display:block}
.faq-q.open:before{content:"\25BE  "}

/* сет-лист джема: таблица с колонками по ролям — как на портале */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filter-btn{padding:7px 14px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);
  color:var(--dim);font-size:.8125rem;font-weight:500}
.filter-btn.on{border-color:var(--warm);background:rgba(255,180,84,.12);color:var(--warm)}
/* Поиск по сет-листу и «Отметить все» стоят парой: рост у них один
   (поле и .btn — по 40, на телефоне по 44), ширину не задаём в разметке —
   инлайн сильнее медиа-запроса, и на телефоне ряд рассыпался бы. */
.sl-find{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.sl-find input[type=search]{max-width:280px}
@media(max-width:620px){
  /* На телефоне пара не помещается в строку: ставим друг под другом
     во всю ширину — иначе поле 280 и кнопка 176 читаются ступенькой. */
  .sl-find input[type=search],.sl-find .btn{flex:1 1 100%;max-width:none}
}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sl-table{border-collapse:collapse;width:100%;min-width:820px;font-size:.8125rem}
.sl-table th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--line);color:var(--mute);
  font-weight:600;font-size:.7188rem;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase}
.sl-table td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
/* Галочка отбора стояла в углу ячейки и не совпадала по высоте со строкой:
   заказчик увидел это первым. Своя колонка, ровно по центру. */
.sl-table th.pick-cell,.sl-table td.pick-cell{width:38px;text-align:center;padding:0;vertical-align:top}
/* Заказчик: «нажимаю — галочка не ставится». Квадрат 19×19 стоял посреди
   ячейки высотой в полторы сотни точек: промахнуться легче, чем попасть.
   Нажимаемой делаем ВСЮ ячейку — метка растягивается на неё целиком. */
/* height:100% у метки внутри ячейки таблицы не работает — ячейке высоту
   задают соседи. Растягиваем метку абсолютно: тогда нажимаемой становится
   вся колонка, от верха строки до низа. */
.sl-table td.pick-cell{position:relative}
.sl-table td.pick-cell .chk{position:absolute;inset:0;display:flex;
  align-items:flex-start;justify-content:center;padding:12px 8px;border-bottom:0;cursor:pointer}
.sl-table th.pick-cell .chk{display:flex;align-items:center;justify-content:center;
  width:100%;min-height:40px;padding:8px;border-bottom:0;cursor:pointer}
.sl-table td.pick-cell:hover .box,.sl-table th.pick-cell:hover .box{border-color:var(--warm)}
.sl-table .pick-cell .chk input[type=checkbox]{width:100%;height:100%;left:0;top:0}
/* Цвет здесь значит ровно одно. Раньше тёплым были залиты и утверждённые
   строки, и заполненные ячейки, и «состав собран», и мои фишки — таблица
   выглядела сплошным кремом, и понять по цвету было нечего.
     зелёный — готово: номер утверждён, состав собран
     тёплый  — про меня: где играю я
     серый   — обычное состояние
     блёклое — отклонён */
.sl-table tr.row-approved td:first-child{box-shadow:inset 3px 0 0 var(--mint)}
.sl-table tr.row-rejected{opacity:.5}
.sl-table tr.row-rejected .track-title{text-decoration:line-through}
.sl-table tr[draggable=true]{cursor:grab}
/* Подсветка строки — только там, где есть мышь. Айфон после нажатия
   держит строку «наведённой», и серый фон залипал на последней нажатой. */
@media(hover:hover){ .sl-table tbody tr:hover td{background:rgba(127,127,127,.06)} }
.sl-table td.cell-empty{background:rgba(127,127,127,.05)}
.sl-table td.cell-filled{background:transparent}
.sl-table td.cell-core{background:rgba(78,212,160,.06)}
.num-cell{text-align:center;font-weight:700;color:var(--dim);font-size:.9375rem;white-space:nowrap}
.drag-handle{cursor:grab;color:var(--mute)}
.track-cell{min-width:170px}
.track-title{font-weight:600;color:var(--text)}
.track-artist{font-size:.75rem;color:var(--dim)}
/* Комментарий автора («играет хасбенд», «клавиши сыграю сама») — это его
   слова, а не метка сервиса. Тёплый цвет читался как предупреждение,
   поэтому даём курсив, свой шрифт и приглушённый цвет. */
/* Комментарий автора теперь живёт в облачке у названия и строкой
   не выводится; правило оставлено для печати, где облачка нет. */
/* Имя в ячейке — кнопка: открывает карточку участника. */
.cell-open{background:none;border:none;padding:0;margin:0;color:inherit;font:inherit;
  cursor:pointer;text-align:left}
.cell-open:hover{text-decoration:underline}
/* Подпись партии («вторая гитара») — что человек играет, а не кто он.
   Свой цвет: не серый как служебное и не как имя. */
/* Подпись партии («вторая гитара») переносится по словам: с nowrap она
   растягивала колонку с 123 до 205 точек — на портале Jagger перенос разрешён. */
/* «Ритм», «Лид.гитара» — уточнение партии. Синим это был четвёртый цвет
   в таблице, где уже есть серый, зелёный и тёплый. Отделяем не цветом,
   а начертанием: приглушённый курсив. */
.cell-label{font-size:.6562rem;color:var(--mute);font-style:italic;
  white-space:normal;overflow-wrap:break-word}
/* Карандаш вместо кнопки «Изменить»: место в строке дорогое. */
.pen{background:none;border:none;padding:0 0 0 4px;margin:0;font-size:.75rem;cursor:pointer;line-height:1}
.pen:hover{filter:brightness(1.25)}
/* Облачко комментария рядом с названием номера. */
.tip.tip-bubble{width:auto;height:auto;min-width:17px;border:none;background:none;
  font-size:.8125rem;color:var(--warm);margin-left:4px}
.tip.tip-bubble:hover{color:var(--warm)}
.track-proposer{font-size:.6875rem;color:var(--mute);margin-top:3px}
.track-note{font-size:.7188rem;color:var(--rose);margin-top:3px}
/* «Состав собран» — это готовность, значит зелёный и тихий: раньше
   ярко-оранжевая плашка перетягивала внимание с названия номера. */
.core-badge{display:inline-block;font-size:.625rem;font-weight:600;color:var(--mint);
  background:rgba(78,212,160,.12);border:1px solid rgba(78,212,160,.35);
  padding:1px 7px;border-radius:10px;margin-top:3px}
/* В светлой теме зелёный на светло-зелёной заливке давал 4,2:1 — ниже нормы.
   Замер в браузере: с этим цветом 5,6:1. */
body.light .core-badge{color:#0E6A4B}
.cell-name{display:inline-flex;align-items:center;gap:4px;background:var(--panel2);border:1px solid var(--line);
  border-radius:7px;padding:2px 7px;margin:2px 3px 2px 0;font-size:.75rem}
/* настоящее имя рядом со сценическим — подсказка, а не заголовок */
.cell-real{color:var(--mute);font-size:.6875rem}
/* расшифровка цветов под фильтрами сет-листа */
.lg-bar,.lg-dim,.lg-warm,.lg-core{display:inline-block;width:10px;height:10px;border-radius:3px;
  vertical-align:-1px;margin-right:4px}
.lg-bar{background:var(--mint)}
.lg-dim{background:var(--line);opacity:.6}
.lg-warm{background:transparent;border:1.5px solid var(--warm)}
.lg-core{background:rgba(78,212,160,.18);border:1px solid rgba(78,212,160,.45)}
.cell-name.mine{border-color:rgba(255,180,84,.55);color:var(--warm)}
/* Красный крестик у каждого имени превращал таблицу в крапинку.
   Он тихий, а красным становится, когда до него дотянулись. */
.cell-x{background:none;border:none;color:var(--mute);font-size:.75rem;padding:0;cursor:pointer;line-height:1;
  transition:color .12s}
.cell-x:hover,.cell-x:focus-visible{color:var(--rose)}
/* Плюсиков в таблице по семь на строку — это самое частое, что видно,
   и самое неважное. Тёплыми они кричали громче имён и составов.
   Держим тихими, тёплый показываем только под курсором. */
.cell-add{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:6px;
  border:1px dashed var(--edge);background:transparent;color:var(--mute);font-size:.875rem;
  cursor:pointer;margin:2px 0;padding:0;transition:color .12s,border-color .12s,background .12s}
.cell-add:hover,.cell-add:focus-visible{border-color:rgba(255,180,84,.6);
  background:rgba(255,180,84,.12);color:var(--warm)}
/* Стрелки порядка у ведущего. Перетаскивание оставлено для мыши, но
   на тач-экране событий drag не бывает — там работают только они. */
.ord{display:inline-flex;flex-direction:column;gap:2px;margin-left:6px;vertical-align:middle}
.ord-b{background:var(--panel2);border:1px solid var(--line);color:var(--dim);
  border-radius:5px;width:24px;height:15px;line-height:1;font-size:.5625rem;padding:0;cursor:pointer}
.ord-b:hover{border-color:var(--warm);color:var(--warm)}
@media(hover:none){.drag-handle{display:none}}
.ord-b[disabled]{opacity:.3;cursor:default}
.ord-b[disabled]:hover{border-color:var(--line);color:var(--dim)}
.cell-dash{color:var(--mute)}
/* Заказчик: «в одну строку и утвердить, и отклонить». Столбиком они
   растягивали строку номера втрое; в ряд помещаются, если разрешить
   перенос и снять nowrap у ячейки. */
/* Метка состояния и «Удалить» стоят в одну строку — колонке нужно
   место под обе: 131 + 6 + 63 не влезали в 200 и переносились. */
.status-cell{min-width:240px;white-space:normal}
.status-cell > .pill,.status-cell > .pill-btn{margin-bottom:6px}
.admin-acts{display:inline-flex;flex-wrap:wrap;gap:4px;margin-top:0;vertical-align:middle}
/* .btn.sm объявлена ниже по файлу и при равной силе побеждала — поэтому
   здесь тот же вес плюс класс: иначе кнопки оставались 31 точку. */
.admin-acts .btn.sm,.status-cell .btn.sm{font-size:.6875rem;padding:0 8px;height:26px}
.track-input-row{padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--panel2)}
/* Печать отдельным листом (printSheet): на экране лист скрыт, на бумаге —
   только он. Убирается при следующем нажатии, а не по afterprint: айфон
   присылает afterprint сразу и потом перерисовывает лист при смене
   масштаба — прежде в перерисованный лист уходила сама страница. */
#printSheet{display:none}
@media print{
  /* Прячем всё, что лежит в body рядом с листом: оболочку, окна, всплывашки.
     :not(#printSheet) даёт правилу вес id — сильнее любого .shell.on. */
  body.print-sheet > :not(#printSheet){display:none!important}
  body.print-sheet{margin:0!important;padding:0!important;background:#fff!important}
  body.print-sheet #printSheet{display:block!important;color:#000}
  .side,#themeFab,.filter-row,.cell-add,.cell-x,.admin-acts,.btn,.drag-handle,
  #jamForms,#jrText,#jamFaq,#jamRulesCard,#jamWhoCard,
  .banner,#jamHint,.hint,.page-sub{display:none!important}
  body{background:#fff!important;color:#000!important}
  .card{border:none!important;background:#fff!important;box-shadow:none!important}
  .sl-table{min-width:0;width:100%}
  .sl-table th{background:#eee!important;color:#000!important;border:1px solid #000!important}
  .sl-table td{border:1px solid #000!important;color:#000!important;background:#fff!important}
  .cell-name{background:#fff!important;border:1px solid #555!important;color:#000!important}
  .track-title,.num-cell{color:#000!important;font-weight:700}
  .pill{color:#000!important;background:#ddd!important;border-color:#999!important}
  .track-artist,.track-proposer,.track-note,.cell-dash{color:#333!important}
  /* на бумаге облачко не наведёшь — показываем комментарий текстом */
  .tip.tip-bubble{display:block!important;color:#333!important;font-size:.6875rem!important;margin:2px 0 0!important}
  .tip.tip-bubble::before{content:attr(data-t)}
  .tip.tip-bubble::after{display:none!important}
  .core-badge{background:#ddd!important;color:#000!important}
  .sl-table tr.row-approved td{border-top:2px solid #d39e00!important;border-bottom:2px solid #d39e00!important}
  .table-scroll{overflow:visible!important}

  /* Заказчик: «при печати лишняя первая страница и текст „Состав"
     с плюсиками». В лист уезжала вся обвязка страницы — шапка сущности,
     переключатель вкладок, поиск, отбор и полоса массовых действий.
     Печатаем только сам сет-лист. */
  .topbar,.mob-top,.tabs,.tabs-row,.tabs-sel,.seg,.plan-bar,#slBulk,
  .pick-cell,.ord,.sl-st .task-st-menu,.pen,.mn-b,.chk,
  input,select,textarea,.find-res,.eyebrow.no-print{display:none!important}
  /* Отступы страницы съедали лист и давали пустую первую страницу. */
  #main{padding:0!important;margin:0!important}
  .shell,.shell.on{display:block!important;grid-template-columns:none!important}
  .card{margin:0!important;padding:0!important}
  @page{margin:10mm}

  /* Лист «Сет-лист» собирается из одних утверждённых (printApproved),
     поэтому прятать чужие строки печатью больше не нужно. Кружок «?»
     у заголовка на бумаге ни к чему. */
  #printSheet .tip-btn,#printSheet .sl-closed{display:none!important}
  /* В листе «Сет-лист» только утверждённые — колонка «Статус» там пустая по смыслу. */
  #printSheet .status-cell,#printSheet .st-col{display:none!important}
}
/* Лист «Сет-лист» (printApproved) — своя таблица для бумаги: ширины колонок
   заданы, имена обычным текстом, строка номера не рвётся между страницами. */
#printSheet .slp{width:100%;border-collapse:collapse;table-layout:fixed;
  font-size:.75rem;line-height:1.3;color:#000}
#printSheet .slp th{font:600 .6875rem/1.2 Inter,Arial,sans-serif;text-transform:uppercase;
  letter-spacing:.04em;text-align:left;background:#eee;border:1px solid #999;padding:4px 5px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
#printSheet .slp td{border:1px solid #999;padding:4px 5px;vertical-align:top;overflow-wrap:break-word}
#printSheet .slp thead{display:table-header-group}
#printSheet .slp tr{break-inside:avoid;page-break-inside:avoid}
#printSheet .slp .slp-n{text-align:center;font-weight:700;font-size:.875rem}
#printSheet .slp .slp-t b{font-size:.8125rem}
#printSheet .slp .slp-a{color:#444;font-size:.6875rem}
#printSheet .slp .slp-c{color:#555;font-style:italic;font-size:.6875rem;margin-top:2px}
#printSheet .slp .slp-p+.slp-p{margin-top:3px}
#printSheet .slp .slp-st,#printSheet .slp .slp-lbl{color:#555;font-size:.625rem}
#printSheet .slp .slp-lbl{font-style:italic}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ink);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.875rem;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:.875rem;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--warm);outline-offset:2px}
/* Значок пункта меню — приглушённый и одного тона; у выбранного пункта
   он перекрашивается вместе с текстом. Разноцветные эмодзи рябили:
   зелёная галка у «Задач» читалась как «всё выполнено». */
nav.menu .mi{filter:grayscale(1);opacity:.72;transition:filter .12s,opacity .12s;
  width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px}
nav.menu button.on .mi,nav.menu button:hover .mi{filter:none;opacity:1}
/* линейные значки красятся цветом пункта — поэтому им ни серости, ни прозрачности */
nav.menu .mi svg{width:18px;height:18px;display:block}
/* Значок нарисован в currentColor, поэтому цвет ему задаётся одной строкой.
   В покое — тот же серый, что и подпись пункта; при наведении и у выбранного
   пункта — тёплый: заказчик просил, чтобы он тогда был цветным. */
nav.menu .mi:has(svg){filter:none;opacity:1}
nav.menu button.on .mi svg,nav.menu button:hover .mi svg{color:var(--warm)}

.eyebrow{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600}
/* Название карточки было мельче и бледнее её содержимого: 11px прописными
   против 14px текста. Заголовок карточки — отдельное дело от мелкой подписи. */
.card > .eyebrow:first-child{font-size:.8125rem;letter-spacing:.04em;color:var(--dim);font-weight:700}
/* Счётчик в заголовке — кружок ростом с «?», а не полноразмерная метка:
   обычная метка наезжала на соседний значок и ломала строку. */
.eyebrow .pill{display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 4px;font-size:.6562rem;font-weight:700;
  letter-spacing:0;border-radius:999px;vertical-align:middle;line-height:1;
  color:var(--dim);background:var(--panel2);border:1px solid var(--line);
  margin:0 3px;position:relative;top:-1px}
.eyebrow .pill.warm{color:var(--warm);border-color:rgba(255,180,84,.45)}
.eyebrow .pill.mint{color:var(--mint);border-color:rgba(78,212,160,.45)}
/* Флекс на заголовке делать нельзя: текст становится отдельным элементом
   строки, и на узком экране заголовок разъезжается на три строки.
   Достаточно, чтобы счётчик был маленьким и стоял по центру строки. */
/* Кружок «?» рядом с заголовком: подсказку читают один раз, поэтому она
   не занимает места, но всегда под рукой. */
/* Подсказка при наведении: пояснение не занимает места в форме,
   но всегда под рукой. На телефоне открывается по нажатию. */
.tip{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;margin-left:5px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel2);color:var(--mute);font-size:.625rem;font-weight:700;cursor:help;
  vertical-align:middle;line-height:1;user-select:none}
.tip:hover{border-color:var(--warm);color:var(--warm)}
/* Кружок съезжал на пиксель вниз в надзаголовках и заголовках разделов.
   vertical-align:middle равняет середину значка по середине СТРОЧНОЙ буквы,
   а там всё набрано прописными — их середина выше на (cap−x)/2 ≈ 0.1em.
   Правим только эти два места: в подписях полей текст обычный, и там
   middle как раз верен. Замер: было +1px, стало 0. */
.eyebrow .tip,.page .tip{top:-.1em}
/* Подсказка висела внутри окна с прокруткой и обрезалась его краем —
   текст был виден наполовину. Держим её в верхнем слое экрана, координаты
   ставит tipMove() при наведении. */
/* text-transform и letter-spacing наследовались от .eyebrow, и подсказка
   выходила капсом вразрядку — читать её было тяжело. */
.tip::after{content:attr(data-t);text-transform:none;letter-spacing:0;
  font-weight:400;font-family:Inter,system-ui,sans-serif;color:var(--text);
  position:fixed;left:var(--tx,50%);top:var(--ty,0);
  transform:translate(-50%,-100%);width:max-content;max-width:min(300px,calc(100vw - 24px));padding:9px 11px;
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  font-size:.7812rem;line-height:1.5;
  text-align:left;white-space:normal;opacity:0;visibility:hidden;transition:opacity .12s;
  box-shadow:0 12px 34px rgba(0,0,0,.5);z-index:60;pointer-events:none}
.tip:hover::after,.tip:focus::after{opacity:1;visibility:visible}
/* если места сверху нет — показываем под значком */
.tip.tip-down::after{transform:translate(-50%,0)}

/* Тёплым было покрашено семь разных смыслов сразу. Ссылка — синяя,
   тёплый остаётся за главным действием и за «вас ждут». */
/* У <button> текст по умолчанию по центру. Пока название влезало в строку,
   это было не видно; двухстрочное («Музыка из фильмов, мультфильмов и игр»)
   встало посередине колонки. inherit — чтобы ссылка вела себя как текст вокруг. */
.link-btn{background:none;border:0;padding:0;margin:0;color:var(--blue);cursor:pointer;
  font:inherit;text-align:inherit;text-decoration:underline;text-underline-offset:2px}

code{background:var(--panel2);border:1px solid var(--line);border-radius:5px;
  padding:1px 5px;font-size:.75rem;font-family:ui-monospace,Menlo,Consolas,monospace}
.display{font-family:Oswald,sans-serif;font-weight:600;letter-spacing:.02em;text-transform:uppercase}

.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(900px 460px at 50% -10%,rgba(255,180,84,.16),transparent 70%),var(--ink)}
.auth{width:100%;max-width:400px}

/* ---------- СТАРТОВАЯ СТРАНИЦА ----------
   Первое, что видит человек с улицы: чем это ему поможет, и рядом —
   вход с регистрацией, чтобы не искать кнопку. */
.lp{display:block;align-items:stretch;padding:0;overflow-x:hidden}
/* справа всегда держим место под уголок с переключателем оформления —
   он висит поверх страницы и иначе накрывает кнопку «Войти» */
.lp-top{max-width:1180px;margin:0 auto;padding:20px 70px 20px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.lp-top .mark .name{font-size:1.625rem}
.lp-top .mark-sub{margin:0 0 0 8px;font-size:.6875rem}
.lp-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.lp-nav a{color:var(--dim);text-decoration:none;font-size:.8438rem}
.lp-nav a:hover{color:var(--text)}

/* Снимки сервиса на витрине: три экрана в ряд, на телефоне — один
   под другим. Показываем настоящие страницы, а не рисунки. */
.lp-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:1180px;margin:0 auto}
.lp-shots figure{margin:0}
.lp-shots img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block}
.lp-shots figcaption{font-size:.7812rem;color:var(--dim);margin-top:8px;line-height:1.5}
.lp-hero{max-width:1180px;margin:0 auto;padding:26px 24px 40px;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,400px);gap:44px;align-items:start}
.lp-h1{font-family:Oswald,sans-serif;font-size:clamp(30px,4.4vw,52px);line-height:1.06;
  font-weight:600;margin:10px 0 16px;letter-spacing:.005em}
.lp-lead{color:var(--dim);font-size:1rem;line-height:1.65;margin:0 0 18px;max-width:560px}
.lp-lead b{color:var(--text)}
.lp-ticks{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:9px}
.lp-ticks li{position:relative;padding-left:26px;color:var(--dim);font-size:.9062rem;line-height:1.5}
.lp-ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--warm);font-weight:700}
.lp-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lp-note{color:var(--mute);font-size:.7812rem}
.lp-auth{max-width:400px;margin:0;position:sticky;top:20px}


.lp-sec{max-width:1180px;margin:0 auto;padding:14px 24px 52px}
.lp-h2{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(21px,2.6vw,30px);font-weight:600;margin:0 0 20px}

.lp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lp-step{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;position:relative}
.lp-step h3{font-size:1.0312rem;margin:12px 0 8px}
.lp-step p{color:var(--dim);font-size:.875rem;line-height:1.6;margin:0}
.lp-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--warm);color:#241703;font-weight:700;font-size:.9375rem}


.lp-plans{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.lp-plan{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 24px;
  min-width:170px}
.lp-plan .p-n{color:var(--mute);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase}
.lp-plan .p-v{font-family:Oswald,sans-serif;font-size:1.875rem;font-weight:600;margin:6px 0 2px}
.lp-plan .p-d{color:var(--dim);font-size:.7812rem}

.lp-foot{max-width:1180px;margin:0 auto;padding:26px 24px 44px;border-top:1px solid var(--line);
  color:var(--mute);font-size:.7812rem;text-align:center;line-height:1.9}
.lp-foot a{color:var(--mute);text-decoration:none}
.lp-foot a:hover{color:var(--dim)}

/* Экраны бывают всякие: от узкого телефона до широкого монитора.
   Ломаем макет по содержимому, а не по «модным» размерам устройств. */

/* широкий монитор: не растягиваем текст в бесконечную строку */
@media(min-width:1500px){
  .lp-top,.lp-hero,.lp-sec,.lp-foot{max-width:1320px}
}

/* планшет в альбомной и узкий ноутбук: две колонки ещё держатся,
   но кабинет сужаем, чтобы заголовок не переносился по слогам */
@media(max-width:1180px){
  .lp-hero{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:32px}
}

/* планшет книжной: кабинет уезжает под текст */
@media(max-width:980px){
  .lp-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:32px}
  .lp-auth{position:static;max-width:520px}
  .lp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-sec{padding-left:20px;padding-right:20px}
  .lp-hero,.lp-foot{padding-left:20px;padding-right:20px}
  .lp-top{padding-left:20px}
}

/* большой телефон и маленький планшет */
@media(max-width:720px){
  .lp-top{padding-top:16px;padding-bottom:14px}
  .lp-top .mark .name{font-size:1.375rem}
  .lp-top .mark-sub{font-size:.625rem}
  .lp-nav{gap:14px}
  .lp-nav a{font-size:.7812rem}
  .lp-steps{grid-template-columns:minmax(0,1fr)}
  .lp-lead{font-size:.9375rem}
  .lp-ticks li{font-size:.875rem}
  .lp-sec{padding-bottom:38px}
  /* нарисованную карточку даты на узком не сжимаем до нечитаемого,
     а даём прокрутить вбок — так видно, что внутри */
  .lp-svg{min-width:620px}
}

/* телефон */
@media(max-width:560px){
  /* Прячем только пункты меню. Кнопка входа остаётся: вернувшийся клиент
     не должен прокручивать весь первый экран, чтобы найти форму.
     Пишем через .lp-nav — у .btn правило display стоит ниже по файлу
     и при равной силе побеждало бы оно. */
  .lp-nav a{display:none}
  .lp-nav .lp-enter{display:inline-flex}
  .lp-top{gap:10px}
  .lp-auth{max-width:none}
  .lp-plans{gap:10px}
  .lp-plan{flex:1 1 140px;min-width:0;padding:16px 18px}
  .lp-plan .p-v{font-size:1.5625rem}
  .lp-cta .btn{width:100%}
  .lp-note{width:100%}
  .lp-sec,.lp-hero,.lp-foot{padding-left:16px;padding-right:16px}
  .lp-top{padding-left:16px}
  .lp-card,.lp-step{padding:18px}
  .lp-foot{font-size:.75rem}
}

/* очень узкий (iPhone SE и подобные) */
@media(max-width:380px){
  .lp-h1{font-size:1.625rem}
  .lp-top .mark .name{font-size:1.25rem}
  .lp-plan{flex:1 1 100%}
}

/* низкий экран в альбомной ориентации: липкий кабинет только мешает */
@media(max-height:620px){
  .lp-auth{position:static}
}
.mark{display:flex;align-items:center;gap:10px}
.mark .dot{width:9px;height:9px;border-radius:50%;background:var(--warm);box-shadow:0 0 16px var(--warm)}
.mark .name{font-family:Oswald,sans-serif;font-size:2.125rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;line-height:1}
.mark-sub{font-family:Oswald,sans-serif;font-size:.8125rem;letter-spacing:.22em;text-transform:uppercase;color:var(--warm);margin:0 0 12px 19px}

/* знак в шапке бокового меню */
.brand{display:flex;align-items:center;gap:9px;padding:0 4px 12px;border-bottom:1px solid var(--line);margin-bottom:2px}
.brand img{width:30px;height:30px;border-radius:8px;flex:none}
.brand .b1{font-family:Oswald,sans-serif;font-size:.9375rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;line-height:1}
.brand .b2{font-family:Oswald,sans-serif;font-size:.6562rem;letter-spacing:.2em;text-transform:uppercase;color:var(--warm);margin-top:3px;line-height:1}
.auth-sub{color:var(--dim);margin-bottom:22px;font-size:.8438rem}
.card+.card{margin-top:14px}
/* внутри сетки карточки стоят рядом, а не друг под другом — отступ там лишний
   и опускал правую колонку на 14 точек ниже левой на каждом таком экране */
.grid>.card+.card{margin-top:0}
/* кружок под фотографию: кликается, при наведении подсвечивается */
/* строка сущности в переключателе */
.sp-row{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:8px;padding:11px 12px;
  background:var(--panel2);border:1px solid var(--line);border-radius:11px;color:var(--text);
  cursor:pointer;font:inherit}
.sp-row:hover{border-color:var(--mute)}
/* Длинное описание в списках режем двумя строками: иначе один многословный
   артист занимает пол-окна, а соседние строки читаются как одна каша. */
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.35}
.sp-row.on{border-color:var(--warm)}
/* карточка тарифа: одинаковая высота, видно, что на неё жмут */
.plan-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:74px;padding:12px 8px;background:var(--panel2);border:1px solid var(--line);
  border-radius:11px;color:var(--text);cursor:pointer;font:inherit;text-align:center}
.plan-btn:hover{border-color:var(--warm)}
.plan-btn .display{font-family:Oswald,sans-serif;font-size:1.125rem;line-height:1}
/* версия сервиса — тихо, в углу */
/* Прозрачность поверх приглушённого цвета роняла контраст до 2,7:1.
   Приглушать надо самим цветом — тогда и норма держится. */
.ver{position:fixed;right:10px;bottom:8px;z-index:6;background:var(--ink);padding:2px 6px;border-radius:6px;font-size:.6562rem;color:var(--mute);
  pointer-events:none;z-index:5;letter-spacing:.04em}
/* На телефоне уголок с версией ложился поверх полосы прокрутки таблиц.
   Метка нужна для проверки сборки, поэтому не прячем, а сдвигаем в поток. */
@media(max-width:820px){
  .ver{position:static;display:block;text-align:center;margin:14px auto 22px;width:max-content}
}
.photo-pick{cursor:pointer;overflow:hidden;position:relative;transition:box-shadow .15s}
.photo-pick:hover{box-shadow:0 0 0 2px var(--warm)}
.card-open{cursor:pointer;transition:border-color .15s}
.card-open:hover{border-color:var(--warm)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.75rem;color:var(--dim);margin-bottom:6px}
input,select,textarea{width:100%;background:var(--ink);border:1px solid var(--edge);border-radius:9px;
  padding:10px 12px;color:var(--text);box-sizing:border-box;line-height:1.35}
/* Поля той же высоты, что и кнопки: ряд из кнопки и поля был лесенкой. */
input:not([type=checkbox]):not([type=radio]),select{height:40px}
table input:not([type=checkbox]),table select{height:33px;padding:5px 9px;font-size:.8125rem}
/* Подсказку в пустом поле браузер красит своим серым — он не из нашей палитры
   и читается как уже вписанное значение. Задаём свой цвет явно. */
input::placeholder,textarea::placeholder{color:var(--mute);opacity:1}
/* Список рисуется системой и потому выходил другого роста и с чужой стрелкой.
   Убираем системный вид и рисуем свою — тогда список ровно как поле ввода. */
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:34px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat}
select:hover{border-color:var(--mute)}
select option{background:var(--panel);color:var(--text)}
textarea{height:auto;min-height:84px}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:none}
.btn{background:var(--panel2);border:1px solid var(--edge);border-radius:9px;color:var(--text);font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 14px;line-height:1;
  text-decoration:none;box-sizing:border-box;vertical-align:middle}
.btn{transition:background .12s,border-color .12s,transform .06s}
.btn:hover{border-color:var(--mute)}
.btn:active{transform:translateY(1px)}
.seg button,nav.menu button,.tabs button{transition:background .12s,color .12s}
.seg button:active,.tabs button:active{transform:translateY(1px)}
.btn.primary{background:var(--warm);border-color:var(--warm);color:#241703;font-weight:600}
.btn.ghost{background:transparent}
/* Кнопка-переключатель в ряду обычных кнопок: «Я играю» в шапке сет-листа.
   Тёплая заливка тут не годится — она за главным действием; берём тот же
   тихий вид, что у отборов (.filter-btn.on). */
.btn.on{border-color:var(--warm);background:rgba(255,180,84,.12);color:var(--warm)}
.btn.sm{height:32px;padding:0 11px;font-size:.7812rem}
.btn.full{width:100%;display:flex}
.btn.danger{color:var(--rose)}
/* решение, о котором нельзя не заметить: чёрный список */
/* Состояние, а не действие: без рамки, тише — чтобы не путалось с кнопкой. */
.pill.state{border-color:transparent;background:transparent;color:var(--mute);padding-left:0}
/* Названия сторон переносим только по разделителю, а не посреди слова. */
.side-line{overflow-wrap:normal;word-break:keep-all}
/* «В прошлый раз»: .kv расталкивал пару по краям (замер: 424–506 точек
   пустоты), и выводы начинались в трёх разных местах. Дата — своей
   колонкой, выводы — единым левым краем. */
/* «О себе» бывает на десять строк и разъезжает карточки в «Команде».
   Показываем две строки, остальное — при наведении и в самой карточке. */
.pn-bio{font-size:.75rem;color:var(--dim);margin-top:6px;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Значение в «Коротко о дате» — обычным цветом; карандаш при наведении.
   Шесть синих подчёркиваний подряд читались как ссылки наружу. */
.task-st{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.task-st-menu{display:inline-flex;gap:5px;flex-wrap:wrap}
.card-open:focus-visible,.kan-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.dup-row{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px;background:var(--panel2)}
.dup-why{font-size:.7188rem;letter-spacing:.06em;text-transform:uppercase;color:var(--warm);
  font-weight:700;margin-bottom:10px}
.dup-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dup-side{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
@media(max-width:620px){ .dup-pair{grid-template-columns:minmax(0,1fr)} }
.res-other{margin-top:5px;font-size:.75rem;color:var(--mute);display:flex;flex-direction:column;gap:2px}
.res-other b{color:var(--dim)}
.past-row{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:16px;
  align-items:start;padding:8px 0;border-bottom:1px solid var(--line)}
.past-row:last-child{border-bottom:none}
@media(max-width:620px){ .past-row{grid-template-columns:minmax(0,1fr);gap:4px} }
/* В строке отбора четыре элемента шли тремя высотами (42/40/32).
   У .seg своя рамка, поэтому кнопкам внутри даём 38 — внешняя станет 40. */
.list-filters .seg{height:40px;vertical-align:middle}
.list-filters .seg button{height:38px;line-height:2.375rem}
/* Высота как у соседних вкладок: 32 против 41 читалось как чужая кнопка,
   да и пальцем в неё попадали хуже. */
/* Ряд вкладок листается вбок, и «＋ ещё» оказывалась за краем: на новой
   дате скрыто пять вкладок, а вернуть их нечем. Липнет к правому краю. */
.tab-add{background:var(--panel);border:1px dashed var(--line);color:var(--mute);border-radius:8px;
  padding:0 10px;height:41px;font:inherit;font-size:.7812rem;cursor:pointer;margin-left:6px;white-space:nowrap;
  align-self:center;position:sticky;right:0;z-index:2;box-shadow:-10px 0 12px var(--panel)}
.tab-add:hover{color:var(--text);border-color:var(--edge,var(--line))}
.sheet-poster{display:block;max-width:220px;max-height:150px;width:auto;height:auto;
  border-radius:8px;border:1px solid var(--line);margin:0 0 10px}
@media print{ .sheet-poster{max-width:150px;max-height:110px} }
/* Рамка обнимает саму картинку: при width:100% вертикальная афиша
   (штатный случай) сжималась внутри коробки и по бокам оставались поля. */
.poster-wrap{margin-top:10px;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:var(--panel2);width:max-content;max-width:100%}
.poster-img{display:block;max-width:100%;max-height:420px;width:auto;height:auto;cursor:zoom-in}
/* Пустая афиша держит место, и файл можно бросить мышью. */
.poster-drop{margin-top:10px;border:1px dashed var(--line);border-radius:10px;min-height:180px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--mute);font-size:.8438rem;text-align:center;padding:16px;transition:.15s}
.poster-drop.over{border-color:var(--warm);color:var(--text);background:var(--panel2)}
/* Кружок «?», который открывает окно (у обычного .tip окна нет). */
/* Договорённости, взаиморасчёт и билеты — рядом, а не простынёй.
   На узком экране встают друг под друга. */
/* На телефоне полоса вставала столбиком 195×203 посреди экрана и
   накрывала форму: ширина считалась по содержимому, а номер сборки
   в <b> не переносится. Делаем полосой во всю ширину. */
@media(max-width:620px){
  .newbuild{left:8px;right:8px;transform:none;width:auto;max-width:none;
    justify-content:space-between;font-size:.7812rem;padding:10px 12px}
  .newbuild b{white-space:nowrap}
}
/* Где я: раздел крупно, сущность рядом мелко. */
.mt-where{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15;overflow:hidden}
.mt-where b{font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-where i{font-style:normal;font-size:.6875rem;color:var(--mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Колокольчик и тема есть в верхней полосе — в ящике они дублировались. */
@media(max-width:900px){ .side-only{display:none} }
/* Заказчик: «условия и билеты — одинакового размера облачками».
   Поэтому здесь stretch, а не start: карточки равняются по высоте. */
.deal-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;align-items:stretch;margin-bottom:14px}
.deal-row > .card{margin:0}
.settle-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:12px 14px}
.settle-txt{flex:1 1 240px;min-width:0;font-size:var(--t5)}
@media(max-width:820px){ .deal-row{grid-template-columns:minmax(0,1fr)} }
.tip-btn{width:18px;height:18px;border-radius:50%;border:1px solid var(--edge);
  background:var(--panel2);color:var(--mute);font-size:.6875rem;line-height:1;cursor:pointer;
  padding:0;margin-left:6px;position:relative;top:-.1em;vertical-align:middle}
.tip-btn:hover{color:var(--text);border-color:var(--mute)}
.tip-btn::after{content:"";position:absolute;inset:-11px}
.perk-list{margin:8px 0 4px;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--dim);font-size:.875rem;line-height:1.5}
.perk-list b{color:var(--text)}
.btn.danger-solid{border-color:var(--rose);color:var(--rose);background:rgba(255,107,122,.10);font-weight:600}
.btn.danger-solid:hover{background:rgba(255,107,122,.18);border-color:var(--rose)}
/* Прозрачность поверх тёплой заливки давала грязно-коричневый прямоугольник —
   похоже на сбой, а не на запрет. Задаём цвета явно. */
.btn[disabled],.btn[disabled]:hover{background:var(--panel2);border-color:var(--line);
  color:var(--mute);cursor:default;opacity:1;box-shadow:none;transform:none}
/* Переключатель видов: одна рамка, кнопки одной высоты, без эмодзи в две строки */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel2);flex:none}
/* Внутри 38, а не 40: у .seg своя рамка в 1px с каждой стороны, и внешняя
   высота должна совпасть с кнопкой рядом — 40. Иначе переключатель на два
   пикселя выше соседних кнопок, и ряд читается как неровный. */
.seg button{background:none;border:none;color:var(--dim);font:inherit;font-size:.8125rem;font-weight:500;
  padding:0 15px;height:38px;line-height:2.375rem;cursor:pointer;white-space:nowrap}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--text)}
/* Тёплая заливка остаётся только за главным действием. Выбранное состояние
   показываем рамкой и плотностью: раньше на экране «Задачи» тёплыми были
   одновременно вид, отбор и кнопка «Новая задача». */
.seg button.on{background:var(--panel);color:var(--text);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--warm)}
/* всё, что стоит в шапке рядом с переключателем, той же высоты */
.topbar .btn,.topbar .btn.sm{height:40px;padding:0 15px;font-size:.8125rem}
.tabs2{display:flex;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:3px;margin-bottom:16px}
.tabs2 button{flex:1;background:none;border:none;padding:8px;border-radius:8px;color:var(--dim);font-size:.8438rem;
  transition:background .12s,color .12s}
/* 124: активная вкладка входа отличалась почти неразличимо, а это первый
   экран сервиса. Добавляем тёплую черту и жирный текст. */
.tabs2 button.on{background:var(--panel);color:var(--text);font-weight:650;
  box-shadow:inset 0 -2px 0 var(--warm)}
.msg{font-size:.7812rem;margin-top:10px;min-height:16px}
.msg.err{color:var(--rose)}
.msg.ok{color:var(--mint)}
.hint{font-size:.7812rem;color:var(--mute);margin-top:14px;text-align:center}

.shell{display:none;min-height:100vh;grid-template-columns:238px 1fr}
.shell.on{display:grid}
/* Страницы по публичной ссылке (лист дня, райдер, страница клуба) рисуются
   в тот же #main, а он лежит ВНУТРИ .shell — при display:none у оболочки
   человек видел белый лист. Показываем оболочку одной колонкой, без меню. */
.shell.bare{display:block}
.shell.bare > .side{display:none}
.side{background:var(--panel);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:14px;
  position:sticky;top:0;height:100vh;overflow:hidden}
.ws{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;text-align:left;width:100%;color:var(--text)}
.ws:hover{border-color:var(--mute)}
.ws .lbl{font-size:.6562rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:600}
.ws .nm{font-weight:600;font-size:.8438rem;margin-top:3px;display:flex;justify-content:space-between;gap:6px;align-items:center}
.ws .nm>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* padding-bottom: без него последний пункт («Помощь») обрезался посередине
   на невысоких окнах, и раздел просто не находили */
/* Ссылка на другие приложения — в самом низу меню, отдельно от пунктов:
   это уход с сайта, а не раздел сервиса. */
.ico{width:15px;height:15px;flex:none;vertical-align:-2px}
.btn .ico{vertical-align:middle}
.msg-x .ico{width:13px;height:13px;vertical-align:middle}
.btn .ico{margin-right:-1px}
.menu-out{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 10px;
  border-top:1px solid var(--line);color:var(--mute);font-size:.7812rem;text-decoration:none}
.menu-out:hover{color:var(--warm)}
nav.menu{display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0;flex:1;padding-bottom:14px;
  /* у краёв прокрутки строка не обрубается, а растворяется — сразу видно,
     что список продолжается за границей */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%)}
.menu-group{display:flex;flex-direction:column;gap:2px}
.menu-group+.menu-group{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

nav.menu button{display:flex;align-items:center;gap:10px;background:none;border:none;border-radius:9px;padding:9px 10px;text-align:left;color:var(--dim);font-size:.8438rem;width:100%}
nav.menu button:hover{background:var(--panel2);color:var(--text)}
nav.menu button.on{background:var(--panel2);color:var(--text);font-weight:600;box-shadow:inset 2px 0 0 var(--warm)}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:12px}

/* Разделы меню сворачиваются по одному: у кого-то полтора десятка пунктов,
   а работает он каждый день с двумя. Заголовок раздела — кнопка. */
.menu-title{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;
  cursor:pointer;text-align:left;font:inherit;font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);font-weight:600;padding:4px 10px 6px;border-radius:7px}
.menu-title:hover{color:var(--text);background:var(--panel2)}
.menu-title .arw{margin-left:auto;font-size:.6875rem;transition:transform .15s}
.menu-group.fold .menu-title .arw{transform:rotate(-90deg)}
.menu-group.fold .menu-items{display:none}
.menu-title .cnt{font-size:.6875rem;letter-spacing:0}
/* цифра у пункта меню: сколько непрочитанного в чате, сколько задач висит */
.menu-items .cnt{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;font-size:.6562rem;font-weight:700;
  background:var(--panel2);color:var(--dim)}
.menu-items .cnt.warm{background:var(--warm);color:#241703}
.menu-items .cnt.rose{background:var(--rose);color:#2A0A0E}
/* «Вас ждут» — тот же красный, что у колокольчика: это один и тот же
   сигнал, и цвет должен быть один. В светлой теме тёплая заливка
   (#9A6000) с тёмной цифрой читалась как коричневое пятно — цифры
   в ней было не разобрать. */
.menu-items .cnt.alert{background:var(--rose);color:#2A0A0E}
body.light .menu-items .cnt.alert{color:#fff}
body.light .menu-items .cnt.warm{color:#fff}
body.light .menu-items .cnt.rose{color:#fff}
/* ---- чат команды и обсуждение задачи ---- */
.chat-card{display:flex;flex-direction:column}
.chat-scroll{max-height:min(58vh,520px);overflow-y:auto;display:flex;flex-direction:column;gap:8px;
  padding:4px 2px 8px}
.msg-row{display:flex;gap:8px;align-items:flex-end}
.msg-row.mine{justify-content:flex-end}
.msg-ava{flex:0 0 auto;width:30px;height:30px;border-radius:50%;overflow:hidden;
  background:var(--panel2);display:flex;align-items:center;justify-content:center;
  font-size:.6875rem;font-weight:700;color:var(--dim)}
.msg-ava img{width:100%;height:100%;object-fit:cover;display:block}
.msg-bubble{display:inline-block;max-width:min(78%,560px);background:var(--panel2);
  border:1px solid var(--line);border-radius:12px;padding:7px 11px 5px;position:relative}
.msg-row.mine .msg-bubble{background:rgba(255,180,84,.13);border-color:rgba(255,180,84,.35)}
.msg-who{display:block;font-size:.7188rem;font-weight:600;color:var(--warm);margin-bottom:2px}
.msg-text{display:block;font-size:.8438rem;line-height:1.45;word-break:break-word}
.msg-time{display:block;font-size:.6562rem;color:var(--mute);margin-top:3px;text-align:right}
/* Три кнопки у сообщения — ответить, поправить, убрать. Одна из них
   значок, две знаки: без общей высоты они стоят на полпикселя врозь.
   Держим их одной коробкой и равняем по середине. */
.msg-x{background:none;border:0;color:var(--mute);cursor:pointer;font-size:.6562rem;padding:0 0 0 6px;
  opacity:0;transition:opacity .12s;vertical-align:middle;
  display:inline-flex;align-items:center;justify-content:center;height:16px;line-height:1}
.msg-bubble:hover .msg-x{opacity:1}
/* На тач-экране наведения нет — крестик показываем всегда, иначе своё
   сообщение с телефона убрать нечем. */
@media(hover:none){.msg-x{opacity:.75;font-size:.8125rem;padding:4px 2px 4px 8px}}
.msg-x:hover{color:var(--rose)}
.chat-send{display:flex;gap:8px;align-items:flex-end;border-top:1px solid var(--line);padding-top:10px}
/* Подписка списком: цветная полоса слева у строки. Заливку не берём —
   в таблице на полсотни строк она превращается в кашу (тот же урок,
   что с сет-листом джема в сборке 57). */
tr.plan-paid  td:first-child{box-shadow:inset 3px 0 0 var(--mint)}
/* артист не платит — полоса синяя, чтобы не путать с оплатившими */
tr.plan-free  td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
tr.plan-trial td:first-child{box-shadow:inset 3px 0 0 var(--warm)}
tr.plan-soon  td:first-child{box-shadow:inset 3px 0 0 var(--rose)}
tr.plan-over  td:first-child{box-shadow:inset 3px 0 0 var(--rose)}
tr.plan-over{opacity:.72}
.pl-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;
  vertical-align:middle}
.pl-paid{background:var(--mint)} .pl-trial{background:var(--warm)}
.pl-soon{background:var(--rose)} .pl-over{background:var(--rose);opacity:.6}
/* Приход и расход в карточке даты: две широкие колонки, на узком экране
   друг под другом. Раньше это была .grid.g2 внутри правой половины экрана —
   на строку оставалось меньше трети ширины. */
/* Свёрнутая карточка: виден только заголовок. Нажимается он же. */
/* Метки в заголовке («период», название сущности) не переносились и при
   длинных значениях наезжали на само название — заказчик прислал снимок
   «СВОД ЗА ПЕРИОД». Разрешаем перенос, стрелка сворачивания остаётся
   справа на первой строке. */
.card > .eyebrow.fold-h{cursor:pointer;user-select:none;display:flex;align-items:center;
  gap:6px;flex-wrap:wrap;row-gap:4px}
.card > .eyebrow.fold-h .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.card > .eyebrow.fold-h::after{content:"▾";margin-left:auto;font-size:.875rem;opacity:1;
  transition:transform .15s}
.card.fold > .eyebrow.fold-h::after{transform:rotate(-90deg)}
/* !important обязателен: у части блоков display задан прямо в разметке,
   а встроенный стиль сильнее любого правила из таблицы. */
.card.fold > *{display:none!important}
.card.fold > .eyebrow.fold-h{display:flex!important}
.card.fold{padding-top:14px;padding-bottom:14px}
/* Карточка даты в первом экране: то, что покупают, видно за две секунды. */
.lp-right{display:flex;flex-direction:column;gap:14px}
.lp-mini{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  box-shadow:0 18px 40px rgba(0,0,0,.25)}
.lp-mini-h{display:flex;justify-content:space-between;align-items:center;font-size:.7812rem;
  color:var(--dim);padding-bottom:10px;border-bottom:1px solid var(--line)}
.lp-mini-ok{color:var(--mint);font-weight:600}
.lp-mini-r{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:.8125rem;
  border-bottom:1px solid var(--line)}
.lp-mini-r b{color:var(--mute);font-weight:500;font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em}
.lp-mini-t{display:flex;gap:6px;flex-wrap:wrap;padding-top:10px}
.lp-mini-t span{font-size:.6875rem;color:var(--dim);border:1px solid var(--line);
  border-radius:99px;padding:3px 9px}

/* Доказательства на витрине: обещания против живых чисел. */

/* Сезонная строка на витрине. */

/* Выступление прошло, а итогов нет: тёплая пунктирная рамка. Не красная —
   это не ошибка, а «допишите, пока помните». */
.ev-dot.nores{border:1px dashed var(--warm)}
.span-ev.nores{border:1px dashed var(--warm)}
/* Деньги календарём: семь дней плюс колонка недельного итога.
   Цвет значит одно: зелёное пришло, красное ушло, тёплое ещё предстоит. */
/* Итог недели — не восьмой день: отделяем его полосой и другим фоном,
   иначе колонка читается как ещё одна дата (заказчик так и прочитал). */
.mc-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) 18px 124px;gap:6px;
  font-size:.6562rem;letter-spacing:.1em;color:var(--mute);margin-bottom:6px}
.mc-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) 18px 124px;gap:6px;margin-bottom:6px}
/* Неделя без колонки итога: семь дней. Класс, а не стиль в разметке, —
   иначе правило для телефона (два дня в ряд) перебить его не может. */
.mc-row-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.mc-gap{border-right:1px solid var(--line);margin:2px 8px}
.mc-wh{text-align:right;color:var(--warm)}
.mc-day{border:1px solid var(--line);border-radius:10px;padding:6px 8px;min-height:74px;
  background:var(--panel);display:flex;flex-direction:column;gap:2px}
.mc-day.off{background:transparent;border-color:transparent}
.mc-day.has{cursor:pointer}
.mc-day.has:hover{border-color:var(--edge)}
.mc-day.now{border-color:var(--warm)}
.mc-n{font-size:.7188rem;color:var(--mute);font-variant-numeric:tabular-nums}
.mc-v{font-size:.75rem;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-v.in{color:var(--mint)} .mc-v.out{color:var(--rose)} .mc-v.plan{color:var(--warm);font-size:.6875rem}
/* День в окне: одно событие — одна строка, подробности разворачиваются */
.day-grp{border-bottom:1px solid var(--line)}
.day-grp:last-child{border-bottom:0}
.day-head{display:flex;width:100%;gap:12px;align-items:center;justify-content:space-between;
  background:none;border:0;color:var(--text);text-align:left;padding:10px 0;cursor:pointer;font:inherit}
.day-head .arw{display:inline-block;margin-left:8px;font-size:.625rem;color:var(--mute);transition:transform .15s}
.day-grp.open .day-head .arw{transform:rotate(180deg)}
.day-body{display:none;padding:0 0 10px 0}
.day-grp.open .day-body{display:block}
/* за что именно этот день — чтобы не открывать окно ради названия */
.mc-who{font-size:.6562rem;color:var(--mute);margin-top:auto;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mc-week{border:0;border-radius:10px;padding:6px 10px;background:var(--panel2);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:2px;font-size:.75rem}
@media (max-width:820px){
  .mc-head{display:none}
  .mc-row,.mc-row-7{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mc-day.off{display:none}
  /* Месяц из 31 дня — это 16 рядов по два, почти все пустые: около 1200
     точек прокрутки ради нескольких дней с движением денег. На телефоне
     день без денег сворачиваем в тонкую строку. */
  .mc-row,.mc-row-7{align-items:start}
  .mc-day:not(.has):not(.now){min-height:0;padding:3px 8px;opacity:.55}
  .mc-day:not(.has):not(.now) .mc-v,.mc-day:not(.has):not(.now) .mc-who{display:none}
  .mc-gap{display:none}
  /* свод за период был на 4 точки шире своего места — крайняя цифра
     обрезалась на волосок, а на узких телефонах сильнее */
  .mc-week{grid-column:1/-1;align-items:flex-start;
    border-left:3px solid var(--warm);border-radius:8px}
  .mc-wdays{font-size:.6562rem;color:var(--mute)}
  .mc-week::before{content:"Итог недели";font-size:.6562rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--mute)}
}
/* Лист «День концерта»: две колонки на широком экране, одна на телефоне.
   При печати уходит всё лишнее — на бумаге нужен только лист. */
.sheet-head{margin:10px 0 14px}
.sheet-t{font-family:Oswald,sans-serif;font-size:1.375rem;text-transform:uppercase;letter-spacing:.01em}
.sheet-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:820px){ .sheet-cols{grid-template-columns:minmax(0,1fr);gap:14px} }
@media print{
  body{background:#fff;color:#000}
  nav.menu,.topbar,.tabs,.ver,.no-print,.plan-bar,.banner,.sides{display:none!important}
  #main{margin:0;padding:0}
  .card.sheet{border:0;box-shadow:none;padding:0}
  .sheet-cols{grid-template-columns:1fr 1fr;gap:18px}
  .kv{break-inside:avoid}
}
/* Деньги даты одной таблицей — точно по рисунку заказчика от 12.08:
   строки без линеек, черта только после «Приход общий» и «Расход общий»,
   ИТОГ прописными и крупно. */
.mn-tab{display:grid;grid-template-columns:1fr auto auto auto;gap:0 22px;
  align-items:baseline;font-variant-numeric:tabular-nums;margin-top:10px}
.mn-tab > div{padding:6px 0;text-align:right}
.mn-tab .mn-n{text-align:left;padding-left:16px}
.mn-tab .mn-h{color:var(--mute);font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.08em;padding:0 0 2px}
.mn-tab .mn-sec{grid-column:1/-1;text-align:left;
  font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.04em;
  color:var(--dim);padding:16px 0 4px}
.mn-tab .mn-tot{font-weight:600;padding-top:8px}
.mn-tab .mn-tot-k{text-align:left}
.mn-tab .mn-line{grid-column:1/-1;height:1px;background:var(--line);padding:0;margin:8px 0 0}
.mn-tab .mn-fin{font-family:Oswald,sans-serif;font-size:1.1875rem;text-transform:uppercase;
  letter-spacing:.03em;padding-top:12px}
/* Факт отделён вертикальной чертой — так просил заказчик. */
.mn-tab .mn-f{border-left:1px solid var(--line);padding-left:22px}
.mn-tab .mn-act{white-space:nowrap;padding-left:10px}
/* Кнопки строки маленькие: раньше это были .btn sm, и они распирали
   колонку, сдвигая цифры факта относительно итогов. */
.mn-b{width:26px;height:26px;padding:0;line-height:1;font-size:.75rem;
  background:none;border:1px solid var(--line);border-radius:7px;color:var(--dim);
  cursor:pointer;margin-left:4px}
.mn-b:hover{border-color:var(--mute);color:var(--text)}
.mn-b-x:hover{border-color:var(--rose);color:var(--rose)}
@media(max-width:620px){
  .mn-tab{grid-template-columns:1fr auto auto;gap:0 12px}
  .mn-tab .mn-act{grid-column:1/-1;text-align:right;padding-top:0}
}
/* Раздел «Чаты»: список слева, переписка справа */
.chat-wrap{display:grid;grid-template-columns:270px minmax(0,1fr);gap:14px;align-items:start}
/* Кнопка возврата к списку переписок: видна только на телефоне.
   Объявляем ДО телефонного блока — при равной силе побеждает то,
   что ниже по файлу, и раньше она пряталась всегда. */
/* Кнопки во всю ширину, идущие подряд, слипались в одну деталь:
   заказчик прислал снимок, где «Вход в сервис ▾» и «Сохранить» читались
   как одна кнопка. Зазор между любыми соседними широкими кнопками. */
.btn.full + .btn.full{margin-top:8px}
.btn.full + .page-sub + .btn.full{margin-top:8px}
/* Между кнопками может стоять свёрнутый блок (display:none) — тогда они
   уже не соседи, и правило выше не срабатывает. В окнах отступ даём всем. */
.modal-box > .btn.full{margin-top:10px}
.ch-back{display:none}
.chat-side{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.ch-row{display:block;width:100%;text-align:left;background:none;border:1px solid transparent;
  border-radius:9px;padding:8px 10px;cursor:pointer;color:var(--text);margin-bottom:2px}
.ch-row:hover{background:var(--panel2)}
.ch-row.on{background:var(--panel2);border-color:var(--line)}
.ch-row .ch-t{display:block;font-weight:600;font-size:.8438rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ch-row .ch-s{display:block;color:var(--mute);font-size:.7188rem;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Полоса «отвечаете на…» / «правите…» над полем ввода */
.ch-bar{display:flex;align-items:center;gap:8px;font-size:.7812rem;color:var(--dim);
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  padding:6px 8px;margin-top:8px}
/* Цитата внутри сообщения */
.msg-quote{display:block;font-size:.75rem;color:var(--dim);border-left:2px solid var(--warm);
  padding:2px 0 2px 8px;margin-bottom:4px;opacity:.9;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.msg-quote b{color:var(--warm);margin-right:5px}
@media(max-width:900px){
  .chat-wrap{grid-template-columns:minmax(0,1fr)}
  /* Список переписок вставал над разговором и занимал до тысячи точек:
     чтобы прочитать сообщение, надо было пролистать весь список.
     На телефоне показываем что-то одно. */
  .chat-wrap.show-talk .chat-side{display:none}
  .chat-wrap.show-list .chat-card{display:none}
  .ch-back{display:inline-flex}
}
.chat-send textarea{flex:1;height:auto;min-height:41px;max-height:160px;resize:none;margin:0}
/* в таблицах поля мельче — там строка и так тесная */
table input,table select{height:33px;padding:6px 10px}
table select{padding-right:30px;background-position:calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px)}
@media(max-width:820px){ .chat-scroll{max-height:52vh} .msg-bubble{max-width:88%} }
/* ---- доска задач ---- */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.kan-col{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:12px}
.kan-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.kan-n{margin-left:auto;color:var(--mute);font-size:.75rem}
.kan-body{display:flex;flex-direction:column;gap:8px;min-height:40px}
.kan-card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;
  cursor:pointer;transition:border-color .12s}
.kan-card:hover{border-color:var(--warm)}
@media(max-width:1100px){ .kanban{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:640px){ .kanban{grid-template-columns:minmax(0,1fr)} }

/* ---- метка-переключатель: нажал и поменял, без окна правки ---- */
/* Рамка `--line` на карточке давала 1,2:1 — метка-кнопка не читалась
   как кнопка вовсе. Берём тот же край, что у обычных кнопок. */
.pill-btn{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:99px;
  font-size:.6875rem;font-weight:600;letter-spacing:.01em;cursor:pointer;
  border:1px solid var(--edge,var(--mute));background:var(--panel2);color:var(--dim);
  transition:filter .12s,border-color .12s}
.pill-btn:hover{filter:brightness(1.25)}
/* На телефоне наведения нет, и нажимаемая метка выглядела точно как
   обычная подпись — по ним и жали наугад. Даём постоянный признак. */
.pill-btn::after{content:"⌄";margin-left:5px;font-size:.5625rem;opacity:.75}
.pill-btn:active{transform:translateY(1px)}
/* Цвет берём из палитры, а не числом: в светлой теме #4ED4A0 на белом
   давал 1,7:1 — подсвеченная метка была нечитаема (проверка сборки 70). */
.pill-btn.mint{background:rgba(78,212,160,.16);border-color:rgba(78,212,160,.4);color:var(--mint)}
.pill-btn.warm{background:rgba(255,180,84,.16);border-color:rgba(255,180,84,.42);color:var(--warm)}
.pill-btn.rose{background:rgba(255,107,122,.14);border-color:rgba(255,107,122,.4);color:var(--rose)}
/* ---- массовые действия в списке дат ---- */
.ev-pick,#pickAll{width:16px;height:16px;accent-color:var(--warm);cursor:pointer}
tr.row-on td{background:rgba(255,180,84,.07)}
.bulk-bar{border-color:rgba(255,180,84,.35);
  background:linear-gradient(90deg,rgba(255,180,84,.07),transparent)}
.bulk-bar .divider{margin:12px 0}
.menu-items{display:flex;flex-direction:column;gap:2px}
.main{padding:22px 26px 60px;min-width:0}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
h1.page{font-family:Oswald,sans-serif;font-size:1.625rem;font-weight:600;margin:2px 0;text-transform:uppercase;letter-spacing:.02em}
.page-sub{color:var(--dim);font-size:.8125rem;max-width:640px}
.pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:3px 10px;font-size:.7188rem;color:var(--dim);white-space:nowrap}
.pill.warm{border-color:rgba(255,180,84,.4);color:var(--warm);background:rgba(255,180,84,.1)}
.pill.mint{border-color:rgba(78,212,160,.4);color:var(--mint);background:rgba(78,212,160,.1)}
.pill.rose{border-color:rgba(255,107,122,.4);color:var(--rose);background:rgba(255,107,122,.1)}
.pill.blue{border-color:rgba(110,139,255,.4);color:var(--blue);background:rgba(110,139,255,.1)}
.divider{height:1px;background:var(--line);margin:14px 0}
.grid{display:grid;gap:14px;align-items:start}
/* Карточка сразу после сетки прилипала к ней вплотную: правило .card+.card
   не срабатывает, потому что перед ней не карточка, а сама сетка. */
.grid+.card,.grid+.grid,.card+.grid{margin-top:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
.empty{color:var(--mute);text-align:center;padding:24px 10px;font-size:.8438rem}
/* Три состояния рисовались одинаково: «Загружаю…», «Пусто» и текст ошибки
   было не отличить. Загрузка — полосы по форме будущего содержимого,
   ошибка — розовая полоса слева. */
.skel{display:block;height:12px;border-radius:6px;margin:8px 0;
  background:linear-gradient(90deg,var(--panel2),var(--line),var(--panel2));
  background-size:200% 100%;animation:skel 1.2s linear infinite}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.err-box{border-left:3px solid var(--rose);background:rgba(255,107,122,.08);
  border-radius:8px;padding:10px 12px;color:var(--text);font-size:.8438rem}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
/* Одиннадцать вкладок в строку не помещались, и «Итоги» уезжали во вторую —
   черта, отделяющая личное, оставалась в первой и теряла смысл. Полоса
   листается вбок на любой ширине, как уже сделано на телефоне. */
.tabs{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none}
.tabs button{background:none;border:none;padding:9px 12px;color:var(--dim);font-size:.8438rem;border-bottom:2px solid transparent}
.tabs button.on{color:var(--text);font-weight:600;border-bottom-color:var(--warm)}
/* Кружок всегда квадратный. В карточке-колонке (правило «ровные ряды
   в списках») фотография оказывалась единственным элементом строки, и flex
   растягивал её по высоте: 34 на 143 точки. height тут не спасает — размер
   считает flex, поэтому ставим потолок. */
.ava{width:34px;height:34px;max-height:34px;border-radius:9px;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex:none}
.modal{display:none;position:fixed;inset:0;background:rgba(6,7,11,.78);z-index:60;padding:24px 16px;overflow:auto}
.modal.on{display:flex;align-items:flex-start;justify-content:center}
/* высокие окна (карточка человека, состав смены) не должны обрезаться экраном */
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:100%;max-width:560px;margin:auto;padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.55);
  max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.modal-head h3{margin:0;font-family:Oswald,sans-serif;font-size:1.1875rem;text-transform:uppercase;letter-spacing:.03em}
.x{background:none;border:1px solid var(--line);border-radius:8px;color:var(--dim);padding:5px 9px;line-height:1}
.banner{background:linear-gradient(90deg,rgba(255,180,84,.13),transparent);border:1px solid rgba(255,180,84,.28);border-radius:10px;padding:10px 14px;font-size:.7812rem;color:var(--warm);margin-bottom:16px}
/* Красная полоса: срок кончается на днях. Тёплая — «скоро», красная — «пора». */
.banner.err{background:linear-gradient(90deg,rgba(255,107,122,.13),transparent);
  border-color:rgba(255,107,122,.32);color:var(--rose)}
.banner .link-btn{color:inherit}
.type-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:left;color:var(--text);width:100%}
.type-card:hover{border-color:var(--warm)}
/* артисту сервис бесплатен — его карточка выделена спокойным зелёным краем */
.type-card.type-free{border-color:color-mix(in srgb,var(--mint) 55%,transparent)}
.type-card .ic{font-size:1.5rem}
.type-card .n{font-family:Oswald,sans-serif;font-size:1.0625rem;text-transform:uppercase;letter-spacing:.03em;margin-top:6px}
.type-card .d{color:var(--dim);font-size:.7812rem;margin-top:4px}
.mob-top{display:none}

/* календарь */
/* сетка недели и дня */
.span-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.span-grid.one{grid-template-columns:1fr}
.span-col{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;
  display:flex;flex-direction:column;gap:6px;min-height:150px}
.span-col.today{border-color:rgba(255,180,84,.45)}
.span-head{display:flex;align-items:baseline;gap:6px;padding:2px 4px 6px;border-bottom:1px solid var(--line)}
.span-dow{font-size:.6562rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600}
.span-num{font-family:Oswald,sans-serif;font-size:1.1875rem}
.span-mon{font-size:.7188rem;color:var(--mute)}
.span-body{display:flex;flex-direction:column;gap:6px;flex:1}
.span-ev{display:flex;align-items:flex-start;gap:8px;text-align:left;width:100%;
  background:var(--panel2);border:1px solid var(--line);border-left-width:3px;border-radius:9px;
  padding:8px 9px;color:var(--text);font-size:.7812rem;cursor:pointer}
.span-ev:hover{border-color:var(--mute)}
/* День, на который тянут дату, и сама перетаскиваемая дата */
.day.drop-on,.span-col.drop-on{outline:2px dashed var(--warm);outline-offset:-2px;
  background:rgba(255,180,84,.08)}
.ev-dot.drag,.span-ev.drag{cursor:grab}
.ev-dot.drag:active,.span-ev.drag:active{cursor:grabbing}
.span-t{font-family:Oswald,sans-serif;font-size:.8125rem;color:inherit;flex:none;min-width:38px}
.span-add{margin-top:auto;background:none;border:1px dashed var(--line);border-radius:9px;padding:7px;
  color:var(--mute);font-size:.75rem;cursor:pointer;width:100%}
.span-add:hover{color:var(--text);border-color:var(--mute)}
.span-ev.tone-ok{border-left-color:var(--blue)}
.span-ev.tone-done{border-left-color:var(--mint)}
.span-ev.tone-draft{border-left-color:var(--mute)}
.span-ev.tone-past{border-left-color:var(--mute);opacity:.6}
.span-ev.tone-off{border-left-color:var(--rose);opacity:.6;text-decoration:line-through}
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
/* На телефоне заголовок сжимался соседями до 35 пикселей и ломался
   на две строки: «АВГУС / Т 2026». Замер на 375px до правки — ровно так.
   Не даём его сжимать и переносить. */
.cal-title{font-family:Oswald,sans-serif;font-size:1.1875rem;text-transform:uppercase;letter-spacing:.03em;
  min-width:190px;flex:0 0 auto;white-space:nowrap}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
/* Список дат под сеткой — только на телефоне: в ячейке 46px название
   не поместится, а знать, что за дата, нужно. */
.cal-list{display:none;margin-top:14px}
.cal-row-wrap{display:flex;align-items:stretch;gap:6px}
.cal-row-wrap .cal-row{flex:1;min-width:0}
.cal-move{flex:none;align-self:center}
.cal-row{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-bottom:8px;color:var(--text);cursor:pointer}
.cal-row-d{flex:0 0 54px;display:flex;flex-direction:column;line-height:1.25}
.cal-row-d b{font-size:.875rem}
.cal-row-d span{font-size:.6875rem;color:var(--mute);text-transform:uppercase}
.cal-row-t{flex:1;min-width:0;font-size:.8438rem;font-weight:600}
.cal-row-s{display:block;font-size:.7188rem;color:var(--mute);font-weight:400;margin-top:2px}
.cal .dow{font-size:.6562rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-align:center;padding:4px 0;font-weight:600}
.day{background:var(--panel);border:1px solid var(--line);border-radius:10px;min-height:92px;padding:6px;text-align:left;color:var(--text);display:flex;flex-direction:column;gap:4px;transition:border-color .15s}
.day:hover{border-color:var(--mute)}
/* Дни соседнего месяца раньше гасились прозрачностью .35 — контраст числа
   падал до 1,9:1, первая неделя выглядела дыркой в сетке. Гасим фоном,
   а не прозрачностью: сами даты в этих днях должны оставаться читаемыми. */
.day.off{background:var(--ink)}
.day.off .num{color:var(--mute)}
.day.off .ev-dot{opacity:.8}
.day .num{font-family:Oswald,sans-serif;font-size:.875rem;color:var(--dim)}
.day.today{border-color:rgba(255,180,84,.45)}
.day.today .num{color:var(--warm)}
.ev-dot{border-radius:7px;padding:4px 6px;font-size:.6875rem;line-height:1.25;border:1px solid var(--line);background:var(--panel2);overflow:hidden;cursor:pointer;text-align:left;width:100%;color:var(--text)}
.ev-dot .t{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Черновик и согласование человек не различает — они и подписаны одинаково.
   Раньше в сетке они были разных цветов, а в легенде под сеткой стояли три
   метки: синий цвет не был расшифрован нигде. Красим одинаково. */
/* Виды дат в календаре. Серый — ещё не решено, синий — подтверждено
   и впереди, зелёный — проведено, красный — отменено, тёплый — ждут
   вашего ответа (единственное, где от человека что-то требуется). */
.ev-dot.tone-draft{border-color:var(--line);background:var(--panel2)}
.ev-dot.tone-ok{border-color:rgba(110,139,255,.45);background:rgba(110,139,255,.12)}
.ev-dot.tone-done{border-color:rgba(78,212,160,.45);background:rgba(78,212,160,.12)}
.ev-dot.tone-past{border-color:var(--line);background:var(--panel2);opacity:.55}
.ev-dot.tone-off{border-color:rgba(255,107,122,.45);background:rgba(255,107,122,.08);
  text-decoration:line-through;opacity:.7}
.ev-dot.tone-wait,.span-ev.tone-wait{border-color:var(--warm);background:rgba(255,180,84,.16);
  box-shadow:inset 3px 0 0 var(--warm)}
/* Прошедшая дата без итогов — тот же зелёный, но пунктиром: «допишите». */
.ev-dot.tone-done.nores{border-style:dashed;border-color:var(--warm)}
/* Ключи легенды: квадратик того же цвета, что и в сетке. */
.tone-key{display:inline-flex;align-items:center;gap:6px;font-size:.7188rem;color:var(--dim)}
.tone-key::before{content:"";width:11px;height:11px;border-radius:3px;border:1px solid var(--line);
  background:var(--panel2)}
.tone-key.tone-ok::before{border-color:rgba(110,139,255,.55);background:rgba(110,139,255,.22)}
.tone-key.tone-done::before{border-color:rgba(78,212,160,.55);background:rgba(78,212,160,.22)}
.tone-key.tone-past::before{opacity:.5}
.tone-key.tone-off::before{border-color:rgba(255,107,122,.55);background:rgba(255,107,122,.18)}
.tone-key.tone-wait::before{border-color:var(--warm);background:rgba(255,180,84,.3)}
.legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
/* поиск по всему сервису — в боковой панели над меню */
/* глазок «показать пароль» внутри поля */
.pass-wrap{position:relative;display:block}
.pass-wrap input{padding-right:44px}
.pass-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;background:none;border:0;cursor:pointer;font-size:.9375rem;
  color:var(--dim);border-radius:8px;line-height:1}
.pass-eye:hover{background:var(--panel2)}
.pass-eye:focus-visible{outline:2px solid var(--warm);outline-offset:1px}
/* строка «с чего начать» на первом экране */
.step{display:flex;align-items:center;gap:10px;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px}
/* крестик «этот совет мне не нужен» — тихий, розовеет при наведении */
.step-x{width:28px;height:28px;flex:0 0 28px;border:0;background:none;color:var(--mute);
  font-size:.8125rem;line-height:1;border-radius:8px;cursor:pointer;margin-left:4px}
.step-x:hover{background:var(--panel);color:var(--rose)}
@media(hover:none){.step-x{width:36px;height:36px;flex:0 0 36px}}
.step.done{opacity:.6}
.step .mark{flex:none;width:22px;height:22px;border-radius:99px;display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--line);font-size:.75rem;color:var(--mute)}
.step.done .mark{background:var(--mint);border-color:var(--mint);color:var(--ink);font-weight:700}
/* свёрнутые правила и вопросы на публичной странице джема */
/* display у самого summary менять нельзя: браузер перестаёт считать его
   шапкой, и свёрнутая карточка занимает столько же места, сколько раскрытая.
   Выравнивание делаем обёрткой внутри. */
.rd-tabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
/* Галочка отбора у карточки контрагента. Своя, а не системная: общее правило
   для input задаёт ширину 100% и рамку, и настоящая галочка превращалась
   в огромный прямоугольник (грабли 12.0–12.8). */
.pick{position:relative;display:inline-flex;flex:none;cursor:pointer;width:19px;height:19px}
.pick input{position:absolute;inset:0;width:19px;height:19px;opacity:0;margin:0;padding:0;cursor:pointer}
.pick span{width:19px;height:19px;border:1.5px solid var(--line);border-radius:6px;background:var(--panel);
  display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#241703;transition:.12s}
.pick input:checked+span{background:var(--warm);border-color:var(--warm)}
.pick input:checked+span::after{content:"✓"}
.pick input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.rd-pick{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:12px}
.rd-role{margin:12px 0 4px;font:600 .6875rem/1 Oswald,sans-serif;text-transform:uppercase;
  letter-spacing:.12em;color:var(--warm)}
.rd-role:first-child{margin-top:2px}
/* Черта в ряду вкладок: слева общее, справа своё */
.tabs-cut{width:1px;align-self:stretch;background:var(--line);margin:0 10px}
/* Замок на самих вкладках «Заметки» и «Итоги» — линейный значок сайта
   в цвете подписи вкладки (сборка 890; прежде один эмодзи 🔒 перед ними). */
.tabs button .tab-lock{display:inline-flex;vertical-align:-2px;margin-right:5px}
.tabs button .tab-lock .ico{width:13px;height:13px}
@media(max-width:720px){.tabs-cut{display:none}}
.jam-rules>summary{list-style:none;cursor:pointer;display:block}
.jam-rules>summary::-webkit-details-marker{display:none}
.jam-rules>summary::marker{content:""}
.jam-rules>summary>.sum-in{display:flex;align-items:center;gap:10px;min-width:0}
/* блок «отмечается само» внутри карточки — без своей рамки и отступов */
.auto-line{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:.7812rem}
/* «Вышла новая сборка» — внизу по центру, поверх всего. */
.newbuild{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:120;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:calc(100vw - 24px);
  width:max-content;
  padding:11px 14px;border-radius:12px;border:1px solid var(--warm);
  background:var(--panel2);color:var(--text);font-size:.8125rem;
  box-shadow:0 12px 34px rgba(0,0,0,.35)}
/* Два вопроса, которые путали: номер слева, «сейчас так», кнопка, пример. */
.q-box{display:flex;gap:12px;padding:12px;margin-top:10px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel2)}
.q-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--warm);color:#241703;
  font:700 .8125rem/1.5rem Inter,system-ui,sans-serif;text-align:center}
.q-t{font-weight:600;font-size:.875rem}
.q-now{font-size:.7812rem;color:var(--dim);margin-top:3px}
/* Технический и бытовой райдер — два столбца, между ними черта. */
/* Общий райдер коллектива — не такой, как остальные: его никто не пишет
   целиком, он складывается из частей музыкантов. Отделяем синей полосой
   и меткой, а не заливкой: тёплая значила бы «от вас чего-то ждут»,
   зелёная — «готово», и оба смысла тут неверны. */
.card.rd-band{box-shadow:inset 3px 0 0 var(--blue)}
.rd-band .rd-part{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.rd-band .rd-part .pill{font-size:.6875rem}
.rd-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media(max-width:620px){.rd-acts .btn.sm{padding:0 10px;gap:5px}}
/* Свободные вечера клуба: артист сразу видит, куда можно проситься.
   Занятые дни показываем приглушённо, но не прячем — иначе непонятно,
   что список вообще про календарь. */
.free-days{display:flex;gap:6px;flex-wrap:wrap;max-height:150px;overflow:auto;padding:2px}
.free-days .fd{background:var(--panel2);border:1px solid var(--edge);border-radius:8px;
  color:var(--text);font:inherit;font-size:.75rem;padding:6px 9px;cursor:pointer;white-space:nowrap}
.free-days .fd.busy{opacity:.35;cursor:default;text-decoration:line-through}
.free-days .fd.on{background:var(--warm);border-color:var(--warm);color:#fff;font-weight:600}
body.light .free-days .fd.on{background:#A85F00;border-color:#A85F00}
.rd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.rd-split .rd-col{min-width:0;padding:0 18px}
.rd-split .rd-col:first-child{padding-left:0;border-right:1px solid var(--line)}
.rd-split .rd-col:last-child{padding-right:0}
@media(max-width:820px){
  .rd-split{grid-template-columns:minmax(0,1fr);gap:18px}
  .rd-split .rd-col{padding:0}
  .rd-split .rd-col:first-child{border-right:0;border-bottom:1px solid var(--line);padding-bottom:18px}
}
/* выбор значка роли: готовые вместо ручного ввода эмодзи */
.ico-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px;
  max-height:210px;overflow-y:auto}
.ico-pick .ico{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  font-size:1.125rem;border:1px solid var(--line);background:var(--panel2);color:var(--text);
  border-radius:10px;cursor:pointer;padding:0}
.ico-pick .ico:hover{border-color:var(--warm)}
.ico-pick .ico.on{border-color:var(--warm);box-shadow:inset 0 0 0 1px var(--warm)}
.jam-rules>summary .jam-more{margin-left:auto;font-size:0;color:var(--mute);white-space:nowrap}
.jam-rules>summary .jam-more::before{font-size:.75rem;content:"Развернуть"}
.jam-rules[open]>summary .jam-more::before{content:"Свернуть"}
.jam-rules[open]>summary .jam-more::after{content:" ▴"}
.jam-rules:not([open])>summary .jam-more::after{content:" ▾"}
.jam-rules>summary:focus-visible{outline:2px solid var(--warm);outline-offset:3px;border-radius:8px}
/* переписка сторон внутри даты */
.talk-box{max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin-top:10px}
.talk-row{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:9px 12px}
.talk-row.mine{border-color:rgba(255,180,84,.4);background:rgba(255,180,84,.07)}
.talk-who{font-size:.7188rem;color:var(--mute);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.talk-when{margin-left:auto;font-variant-numeric:tabular-nums}
.talk-body{margin-top:4px;font-size:.8438rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
/* ---------- общий проход по оформлению (фазы 6-8) ---------- */

/* 120: числа в столбик. Суммы были прижаты вправо, но цифры разной ширины,
   и «180 000 ₽» не совпадало разрядами с «40 000 ₽». */
.display,.kv .v,table td,.pill,.badge,.cnt,.money,.num{font-variant-numeric:tabular-nums}
/* Счётчик в заголовке карточки наследовал приглушённый цвет надзаголовка
   и давал 3,5:1. Свой цвет — читается и не спорит с названием. */
.eyebrow .cnt,.menu-title .cnt{color:var(--dim)}

/* 121: пояснения тянулись на всю ширину — до 150 знаков в строку,
   глаз терял начало следующей. */
.page-sub,.banner,.empty,.hint,.lockbox,.perk-list{max-width:74ch}

/* 122: самый мелкий текст на экране был у кнопки сворачивания раздела меню,
   по которой надо и попадать, и читать её. */
.menu-title{font-size:.6875rem!important;color:var(--dim)!important}

/* 115: пунктирные разделители читались как «черновик». */
.kv{border-bottom:1px solid var(--line)!important}

/* 117: метка и кнопка выглядели одинаково, и на «подтвердил» жали. */
.pill{cursor:default}
/* Сообщество — карточка внутри карточки: слева данные и кнопки,
   справа подписка со сроком (заказчик, сборка 631). */
.vk-grp{border:1px solid var(--line);border-radius:var(--r2,10px);background:var(--panel2);
  padding:14px;margin-bottom:12px}
.vk-grp-in{gap:14px;align-items:stretch}
.vk-grp-pay{border-left:1px solid var(--line);padding-left:14px}
@media(max-width:900px){ .vk-grp-pay{border-left:0;border-top:1px solid var(--line);
  padding-left:0;padding-top:12px} }
/* Две колонки «Публикации ВК» — одного роста и с одинаковыми карточками. */
/* Список в окне-вопросе: длинный перечень постов не должен растягивать
   окно на весь экран — он прокручивается внутри себя. */
.ask-list{max-height:min(46vh,360px);overflow-y:auto;margin-bottom:10px}
.pub-cols{align-items:stretch}
/* Заказчик: «план постов обрезается на середине, хотя облачко идёт до низа».
   Список жил с фиксированной высотой (56vh) и прокручивался внутри, пока
   сама карточка была растянута под соседнюю колонку. Теперь список
   заполняет карточку целиком, а прокрутка появляется, только когда постов
   и правда больше, чем помещается. */
.pub-cols > div > .card{display:flex;flex-direction:column}
#vkPlanList .vk-scroll{max-height:none;flex:1 1 auto;min-height:0}
/* Очередь постов: узкий список слева, пост справа. */
@media(min-width:901px){ .pub-30{grid-template-columns:minmax(0,30%) minmax(0,1fr)} }
/* Открытый пункт подсвечен — видно, что именно смотришь справа. */
.vk-plan.on{border-color:var(--warm);box-shadow:inset 3px 0 0 var(--warm)}
.vk-grp2{font:600 .6875rem/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin:14px 0 8px}
.pub-cols > div{display:flex;flex-direction:column;gap:14px}
/* Правило «карточка тянется на всю колонку» писалось, когда справа была
   ОДНА карточка. С сборки 769 черновик разделён на шесть, и flex:1
   растягивал каждую: под «Фото к посту» зияла пустота в пол-экрана
   (заказчик: «уменьшить размер облачка»). Тянется только список постов
   слева — ему это и нужно. */
.pub-cols > div > .card{flex:0 0 auto;margin:0}
#vkPlanList > .card{flex:1 1 auto;min-height:0}
/* Заказчик: «кручу список постов вниз до бесконечности и не вижу, что
   справа». На широком экране левая колонка липнет к верху и листается
   ВНУТРИ себя: пост справа при этом всё время на виду. */
@media(min-width:901px){
  .pub-30 > div:first-child{position:sticky;top:14px;align-self:start;
    max-height:calc(100vh - 28px)}
  #vkPlanList > .card{max-height:calc(100vh - 28px)}
  #vkPlanList .vk-scroll{overflow-y:auto;max-height:none}
}
/* Ряд кнопок плана: одна строка, на узком экране листается вбок.
   Заказчик: «все кнопки сделать в один ряд». */
/* Колонка стала узкой (30 %), и один ряд туда не влезает: кнопки
   переносятся, чтобы все были на виду, а не уезжали за край. */
.vk-bar{display:flex;gap:8px;align-items:center;margin:0 0 10px;flex-wrap:wrap}
.vk-bar > *{flex:0 0 auto}
/* Подзаголовок внутри формы: длинный список полей делится на шаги,
   иначе читается сплошным полотном (заказчик, сборка 617). */
.fsec{font:600 .6875rem/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.card > .eyebrow + .fsec{margin-top:10px;padding-top:0;border-top:0}
/* Заказчик: «облачко сделать общего размера, а то одно меньше, одно больше».
   В строке плана меток четыре — задаём им один рост и одну высоту значка. */
.vk-plan .pill{height:24px;padding:0 10px;box-sizing:border-box}
.vk-plan .pill .ico{width:14px;height:14px}
.pill-btn{cursor:pointer}

/* 125+123: в светлом карточка почти не отделялась от фона, а поле ввода
   сливалось с карточкой — форма из восьми полей была белым листом. */
body.light .card{box-shadow:0 1px 2px rgba(20,30,60,.06)}
body.light input,body.light select,body.light textarea{background-color:#F7F9FC}
body.light input:focus,body.light select:focus,body.light textarea:focus{background-color:#FFFFFF}

/* 130: пустая таблица высотой в строку, а под ней полэкрана воздуха —
   это читалось как «сервис не загрузился». */
.empty{min-height:96px;display:flex;flex-direction:column;justify-content:center}

/* 133: шесть разных наведений сводим к двум. */
.card-open:hover,.kan-card:hover,.type-card:hover,.plan-btn:hover,.day:hover,
.sp-row:hover,.ws:hover{border-color:var(--warm)}

/* 141: «Удалить дату» стояла вплотную к справочной строке. */

/* 137: уголок с версией лежал поверх содержимого. */
.main{padding-bottom:34px}

/* 139: числа дней слева, подписи дней недели по центру — сетка перекошена. */
.cal .dow{text-align:left!important;padding-left:6px}

/* 157: у полей фокус выглядел иначе, чем у всего остального: правило для
   полей перебивало общую тёплую обводку, и человек терял ритм формы. */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--warm);outline-offset:1px;border-color:var(--blue)}

/* 155: у крестика не было названия и он был мельче цели попадания. */
.x{min-width:32px;min-height:32px}

/* 156: обход клавиатурой начинался с меню — пятнадцать нажатий до содержимого. */
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--warm);color:var(--ink);
  padding:10px 16px;border-radius:0 0 10px 0;font-weight:650;text-decoration:none}
.skip:focus{left:0}

/* 149: на телефоне двадцать целей были меньше 44 точек, причём самые частые. */
@media(max-width:900px){
  .btn{height:44px;padding:0 16px}
  .btn.sm{height:40px;padding:0 13px}
  .topbar .btn,.topbar .btn.sm{height:44px}
  .seg button{height:42px;line-height:2.625rem}
  .mob-top .btn.sm{width:44px!important;height:44px}
  .x{min-width:40px;min-height:40px}
  input:not([type=checkbox]):not([type=radio]),select{height:44px}
  /* Поле мельче 16px — и Safari на айфоне сам увеличивает страницу,
     когда в него встаёшь. Обратно её приходится сводить пальцами. */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:max(16px,1rem)}
  table input:not([type=checkbox]),table select{font-size:max(16px,1rem);height:40px}
  /* Отбор в «Датах» и «Деньгах»: 38px отменяли общее правило 44. */
  .list-filters select,.list-filters input{height:44px}
  /* В ящике меню общее .btn{padding:0 16px} съедало значок: на колокольчик
     оставалось шесть точек ширины. */
  .side .bell,nav.menu .bell{width:44px;height:44px;padding:0;flex:none}
  /* Кружок «?» — на телефоне это кнопка: подсказка открывается нажатием. */
  /* Кружок «?» остаётся 20 точек, но нажимается как 44: под ним
     невидимый запас. Туда убраны почти все пояснения сервиса. */
  .tip{width:20px;height:20px;font-size:.75rem}
  .tip::before{content:"";position:absolute;inset:-12px;border-radius:50%}
  /* Фильтры сет-листа — то, чем музыкант пользуется первым делом. */
  .filter-btn{padding:11px 15px}
  /* Плюсик «встать на роль» — основное действие музыканта в джеме. */
  .cell-add{width:34px;height:34px}
  .cell-x{padding:7px;font-size:.875rem}
  .pen{padding:6px;font-size:.9375rem}
  /* Подчёркнутые значения в «Коротко о дате» и ссылки «нет: райдер ·
     документы» — это кнопки высотой 19 точек. Область нажатия
     расширяем невидимым слоем, чтобы строки не разъехались. */
  .link-btn{position:relative}
  .link-btn::after{content:"";position:absolute;inset:-11px -4px}
  .span-add{padding:11px 7px}
  /* Названия дат списком под сеткой — до 900 включительно: в ячейке
     70–100 точек название всё равно режется до «🎤 Дж…». */
  .cal-list{display:block}

  /* ---- Партия 22–29, 36: попадание пальцем ----
     Норма 40 точек. Где вид менять нельзя, добавляем невидимый запас
     области нажатия через ::before — приём из правки 67–87. */

  /* 22. Карандаш и крестик у строк: деньги, проходки, программа, мерч.
     Зазор 4 точки между «изменить» и «удалить» — на тач-экране это
     промах, который стирает запись о деньгах. Разводим на 12. */
  .mn-b{width:40px;height:40px;font-size:.9375rem}
  .mn-b-x{margin-left:12px}

  /* Задачи: колонка состояния на широком экране 230 точек, на телефоне
     карточка и так во всю ширину — переключатели помещаются */
  .task-st{min-width:0}

  /* 23. Метки-переключатели: промах здесь МЕНЯЕТ данные, а не открывает окно */
  .pill-btn{height:40px;padding:0 14px;position:relative}
  .pill-btn::before{content:"";position:absolute;inset:-4px -2px}

  /* 24. Джем: крестик роли и имя участника */
  .cell-x{padding:9px;font-size:.9375rem}
  /* НО в самой таблице сет-листа плотность важнее: правило «не меньше 40
     точек» раздуло фишку имени с 22 до 59, и на экран влезало два номера
     вместо четырёх. Цель нажатия здесь — сам текст имени, как на портале
     Jagger; промах ничего не меняет, открывается соседняя карточка. */
  .sl-table .cell-open{padding:2px 0}
  .sl-table .cell-open::before{content:none}
  .sl-table .cell-x{padding:0 2px;font-size:.75rem;min-width:0}
  .sl-table .cell-name{padding:3px 7px}
  .sl-table .pen{padding:2px;font-size:.8125rem}
  /* Ячейке роли нужна ширина, иначе «Лена Крылова» переносится на две
     строки и строка растёт. На портале Jagger min-width:112 — берём так же:
     лист чуть шире, зато номеров на экране больше. */
  .sl-table td[data-role]{min-width:118px}
  .sl-table .cell-name{max-width:100%}
  /* Длинные имена («Наталия Чупрынина») всё равно переносятся — делаем
     перенос плотным: две строки занимают 28 точек вместо 39. */
  .sl-table .cell-open{line-height:1.15}
  /* Запас области нажатия вешаем на САМИ кнопки. Раньше он стоял
     на оболочке .cell-name и ложился поверх её кнопок: на телефоне
     нельзя было ни открыть карточку участника, ни уйти с роли. */
  .cell-name{padding:4px 8px}
  .cell-open{position:relative;padding:8px 2px}
  .cell-open::before{content:"";position:absolute;inset:-6px -6px}
  .cell-x{position:relative;padding:9px 11px;font-size:.9375rem;min-width:40px}
  .cell-x::before{content:"";position:absolute;inset:-4px -4px}

  /* 25. «Правила джема» и «Как пользоваться» — полоска была 18 точек */
  .jam-rules>summary>.sum-in{min-height:44px;padding:2px 0}

  /* 26. Экран входа: переключатель «Вход · Регистрация» и глазок пароля */
  .tabs2 button{min-height:44px}
  .pass-eye{width:44px;height:44px;font-size:1.0625rem}
  .pass-wrap input{padding-right:52px}

  /* 27. Полоска, которой сворачивается карточка */
  .card > .eyebrow.fold-h{min-height:44px}
  .card > .eyebrow.fold-h::after{font-size:.875rem}

  /* 28. Кружочки оборудования в райдере, значки должности, галочки в «Постах ВК» */
  .vk-chips button{min-height:36px;padding:0 12px}
  .ico-pick{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
  .ico-pick .ico{width:44px;height:44px;font-size:1.25rem}
  .vk-item input[type=checkbox]{width:22px;height:22px;flex:none;margin:0}

  /* 2. Галочка даты в списке: вид прежний, нажимается как 40 точек */
  table.mob-cards td .pick::before{content:"";position:absolute;inset:-11px}

  /* 29. Галочка «пришёл» в проходках: нажимается вся ячейка */
  table.mob-cards td .chk{min-height:44px}

  /* Телефон и телеграм на листе «День концерта» — обычные ссылки, а не
     кнопки, и запас нажатия им никто не дал: 16 точек по буквам. Вечером
     в темноте по такой строке не попасть. */
  .sheet .kv a{position:relative;display:inline-block;padding:6px 2px}
  .sheet .kv a::before{content:"";position:absolute;inset:-6px -6px}

  /* 36. Страница джема: 24 точки полей с каждой стороны — 13 % экрана */
  .auth-wrap{padding:24px 12px}
}

/* 146: в карточке даты на телефоне полтора экрана уходило на управление. */
@media(max-width:620px){
  .sides{grid-template-columns:minmax(0,1fr)}
  /* flex-wrap из базового правила отменял прокрутку: вкладки вставали
     в три ряда и съедали 120 точек до содержимого карточки. */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;
    flex-wrap:nowrap;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{white-space:nowrap;flex:none}
  /* Правый край растворяется — так видно, что вкладки продолжаются
     (тот же приём, что у бокового меню). */
  .tabs{-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
    mask-image:linear-gradient(90deg,#000 90%,transparent);
    /* липнет под шапкой (63 точки): иначе при прокрутке содержимого
       вкладки уезжают, и вернуться к соседней нечем */
    position:sticky;top:62px;z-index:20;background:var(--ink)}
  .chat-send{flex-direction:column;align-items:stretch}
  .chat-send .btn{width:100%}
}

/* размеры аватарки: крупная в шапке карточки, мелкая в списках выбора */
.ava-lg{width:52px;height:52px;max-height:52px;font-size:1.0625rem;border-radius:14px;flex:none}
.ava-sm{width:30px;height:30px;max-height:30px;font-size:.7188rem;flex:none}
.ava img{border-radius:inherit}
/* заголовок-кнопка для сортировки таблиц */
.th-sort{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;white-space:nowrap;letter-spacing:inherit;text-transform:inherit}
.th-sort:hover{color:var(--text)}
.th-sort.on{color:var(--warm)}
.th-sort:focus-visible{outline:2px solid var(--warm);outline-offset:2px;border-radius:4px}
.find-res{display:none;position:absolute;left:0;right:0;top:40px;z-index:30;
  background:var(--panel2);border:1px solid var(--line);border-radius:11px;
  box-shadow:0 14px 34px rgba(0,0,0,.4);max-height:60vh;overflow:auto;padding:5px}
.find-res.on{display:block}
.find-res.up{top:auto;bottom:100%;margin-bottom:4px}
@media(max-width:900px){ .find-res{max-height:min(46vh,180px)} }

.find-row{display:block;width:100%;text-align:left;background:none;border:0;
  border-radius:8px;padding:7px 9px;cursor:pointer;color:var(--text);font:inherit}
.find-row:hover,.find-row:focus-visible{background:var(--panel)}
.find-row .fn{display:block;font-size:.8125rem;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.find-row .fs{display:block;font-size:.7188rem;color:var(--mute)}
.find-empty{padding:12px 10px;font-size:.8125rem;color:var(--mute)}
/* пункт чек-листа, который сервис отмечает сам: нажимать его незачем */
.chk.auto .box{cursor:default;opacity:.9}
.chk.auto .who{color:var(--mute);font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em}
/* полоса отбора над списком дат */
.list-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:-4px 0 10px}
/* Отрицательный отступ сверху был рассчитан на строку под заголовком раздела.
   Когда над отбором оказалась карточка («В кассе сейчас»), он подтянул строку
   вплотную — кнопки читались как наехавшие. Та же грабля, что в 16.3:
   правило «.card + .card» не срабатывает, если сосед другого вида. */
.card+.list-filters,.grid+.list-filters{margin-top:14px}
.list-filters+.card,.list-filters+.grid{margin-top:14px}
.list-filters select,.list-filters input{height:40px;width:auto;flex:0 1 auto}
@media(max-width:620px){
  .list-filters{gap:6px}
  .list-filters .seg{width:100%}
  /* height обязателен и здесь: правило 44px из блока 900 стоит выше
     по файлу, а при равной силе побеждает нижнее. */
  .list-filters select,.list-filters input{flex:1 1 100%;max-width:none!important;height:44px}
  /* В «Деньгах» четыре поля отбора во всю ширину съедали пол-экрана
     до самих цифр. Ставим по два в ряд: два дня и два списка. */
  /* min-width:0 обязателен: иначе список не сжимается уже самого длинного
     названия контрагента и занимает целую строку. */
  .mn-filters input[type=date],.mn-filters select{flex:1 1 calc(50% - 4px);min-width:0}
  /* То же в «Датах»: до первой даты уходило около 550 точек — почти весь
     первый экран. Списки по два в ряд, поиск строкой во всю ширину. */
  .list-filters select{flex:1 1 calc(50% - 4px);min-width:0}
  /* «Все контрагенты» не помещались в 123 точки и обрезались до
     «Все контрагент» — в «Деньгах» этот список пускаем во всю ширину. */
  .mn-filters select{flex:1 1 100%}
  .list-filters input[type=search]{flex:1 1 100%}
  /* Три плашки стояли столбиком по 120 точек — на экране помещалась
     одна, а человек заходит сюда ради всех трёх сразу. Собираем каждую
     в две строки: подпись и число рядом. Отступы у чисел заданы прямо
     в разметке, поэтому здесь !important. */
  .mn-tiles{gap:8px}
  .mn-tiles .card{padding:10px 12px;display:grid;column-gap:10px;
    grid-template-columns:auto 1fr;grid-template-areas:"e n" "s s";align-items:baseline}
  .mn-tiles .eyebrow{grid-area:e;margin:0}
  .mn-tiles .display{grid-area:n;margin-top:0!important;text-align:right}
  .mn-tiles .page-sub{grid-area:s;margin-top:2px!important}
  /* Таблица → карточки. Тот же приём, что у сет-листа джема: разметка
     не меняется, название колонки печатается из data-l перед значением.
     Иначе «Разница» и кнопки уезжают за правый край, а числа рвутся
     на четыре строки. */
  table.mob-cards{display:block;min-width:0}
  table.mob-cards thead{display:none}
  table.mob-cards tbody,table.mob-cards tfoot,table.mob-cards tr,table.mob-cards td{display:block;width:auto}
  table.mob-cards tr{border:1px solid var(--line);border-radius:12px;background:var(--panel);
    padding:8px 10px;margin-bottom:8px}
  table.mob-cards td{border:none;padding:4px 0;position:relative;min-height:20px}
  table.mob-cards td[data-l]{padding-left:92px}
  table.mob-cards td[data-l]::before{content:attr(data-l);position:absolute;left:0;top:5px;
    width:86px;color:var(--mute);font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em}
  table.mob-cards td[data-l=""]{padding-left:0}
  table.mob-cards td[data-l=""]::before{content:none}
  table.mob-cards td:empty{display:none}
  /* Галочка отбора и дата — одной строкой: иначе квадратик занимает
     отдельную строку в каждой карточке. */
  table.mob-cards td:has(>.ev-pick){position:absolute;right:10px;width:auto;padding:0}
  table.mob-cards tr:has(.ev-pick){position:relative}
}
.row-past{opacity:.5}

/* карточка события */
.sides{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.side-card{flex:1;min-width:190px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.side-card .r{font-size:.6562rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600}
.side-card .n{font-weight:600;margin-top:3px}
.side-card .s{font-size:.75rem;color:var(--dim);margin-top:2px}
.side-card.me{border-color:rgba(255,180,84,.45);box-shadow:0 0 0 1px rgba(255,180,84,.15) inset}
.lockbox{border:1px dashed var(--line);border-radius:10px;padding:14px;color:var(--mute);font-size:.8125rem;text-align:center}
.chk{position:relative;display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
/* Настоящая галочка попадала под общее правило для полей ввода — ширина 100 %,
   отступы, рамка — и рисовалась огромным прямоугольником. Прячем её,
   состояние показывает соседний квадратик. */
.chk input[type=checkbox]{position:absolute;width:19px;height:19px;margin:0;padding:0;
  opacity:0;cursor:pointer;z-index:1}
.chk input[type=checkbox]:checked+.box{background:var(--mint);border-color:var(--mint);color:#0B2018;font-weight:700}
.chk input[type=checkbox]:checked+.box::after{content:"✓"}
.chk input[type=checkbox]:focus-visible+.box{outline:2px solid var(--warm);outline-offset:2px}
.chk:last-child{border-bottom:none}
.chk .box{width:19px;height:19px;border-radius:6px;border:1px solid var(--line);background:var(--ink);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--ink);cursor:pointer;flex:none}
.chk .box.on{background:var(--mint);border-color:var(--mint);color:#0B2018;font-weight:700}
.chk .t{font-size:.8438rem}
.chk .who{margin-left:auto;font-size:.7188rem;color:var(--mute);white-space:nowrap}
.chk .x{min-width:34px;margin-left:8px;padding:2px 7px;font-size:.6875rem}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.07);font-size:.8125rem}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--mute)}
.kv .v{text-align:right;font-weight:500}
.rider-ok{color:var(--mint)}
.rider-no{color:var(--rose)}
.rider-maybe{color:var(--warm)}
/* полоса о подписке */
.plan-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-radius:11px;
  padding:11px 14px;margin-bottom:16px;font-size:.8125rem;line-height:1.5}
.plan-bar.soon{border:1px solid rgba(255,180,84,.4);background:rgba(255,180,84,.10);color:var(--text)}
.plan-bar.over{border:1px solid rgba(255,107,122,.45);background:rgba(255,107,122,.12);color:var(--text)}
.plan-bar.demo{border:1px solid rgba(110,139,255,.45);background:rgba(110,139,255,.11);color:var(--text)}
/* всплывающая строка: своя, а не окно браузера */
.toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(16px);
  max-width:min(520px,calc(100vw - 32px));background:var(--panel2);color:var(--text);
  border:1px solid var(--line);border-left:3px solid var(--warm);
  box-shadow:0 10px 30px rgba(0,0,0,.35);border-radius:11px;padding:11px 16px;
  font-size:.875rem;line-height:1.4;opacity:0;pointer-events:none;z-index:80;
  transition:opacity .18s,transform .18s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-left-color:var(--mint)}
.toast.err{border-left-color:var(--rose)}
/* Пока открыто окно, всплывающая строка встаёт СВЕРХУ: снизу она ложилась
   ровно на кнопку «Сохранить» и закрывала её целиком (замер: 44 из 44). */
body.modal-on .toast{bottom:auto;top:calc(14px + env(safe-area-inset-top));z-index:70}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}
.plan-bar .btn{margin-left:auto;flex:none}
.bar{height:5px;background:var(--panel2);border-radius:99px;margin-top:4px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--warm);border-radius:99px}
/* Ближайшие даты — компактные карточки в ряд. Раньше каждая занимала
   полосу во всю ширину и несла в основном воздух. */
/* auto-fit, а не auto-fill: когда дат две, они растягиваются на всю
   ширину и встают одним рядом, а не жмутся к левому краю. */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:10px;margin-top:10px;align-items:stretch}
/* «.card+.card{margin-top:14px}» сдвигал вторую и третью карточки вниз:
   в ряду они получались на 14 точек ниже первой. Зазор держит сама сетка. */
.dash-grid>.card{margin:0}
.dash-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:12px 13px}
/* джем открывается своей страницей, поэтому карточка бывает ссылкой —
   но выглядеть должна как карточка, а не как подчёркнутый синий текст */
a.dash-card,a.dash-card:hover{color:var(--text);text-decoration:none}
.dc-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.dc-date{font-family:Oswald,sans-serif;font-size:1.0625rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.dc-date i{font-style:normal;font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--mute);margin-left:3px}
.dc-title{font-size:.9062rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.dc-sub{font-size:.75rem;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-bar{margin-top:2px}
.dc-miss{display:flex;gap:4px;flex-wrap:wrap}
.dc-miss .pill{font-size:.6562rem;padding:1px 7px}
@media(max-width:560px){ .dash-grid{grid-template-columns:minmax(0,1fr)} }
.bar i{display:block;height:100%}

/* пост-ассистент ВКонтакте */
.vk-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:10px}
.vk-tabs button{background:none;border:1px solid transparent;color:var(--dim);font:inherit;font-size:.8125rem;
  padding:7px 13px;border-radius:9px;cursor:pointer}
.vk-tabs button:hover{color:var(--text);background:var(--panel2)}
.vk-tabs button.on{background:var(--panel2);border-color:var(--line);color:var(--warm)}
.vk-modes{display:flex;gap:6px;flex-wrap:wrap}
.vk-modes button{flex:1;min-width:120px;background:var(--panel2);border:1px solid var(--line);color:var(--dim);
  font:inherit;font-size:.7812rem;padding:8px 10px;border-radius:9px;cursor:pointer}
.vk-modes button.on{border-color:var(--warm);color:var(--warm)}
.vk-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.vk-chips button{background:var(--panel2);border:1px solid var(--line);color:var(--dim);font:inherit;
  font-size:.75rem;padding:5px 10px;border-radius:999px;cursor:pointer}
.vk-chips button.on{border-color:var(--warm);color:var(--warm)}
.vk-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:6px;cursor:pointer;background:var(--panel2)}
.vk-item.sel{border-color:var(--warm)}
.vk-ava{width:36px;height:36px;border-radius:50%;background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--dim);
  flex-shrink:0;overflow:hidden}
.vk-ava img{width:100%;height:100%;object-fit:cover}
.vk-preview{white-space:pre-wrap;line-height:1.65;font-size:.8438rem;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:10px}
.vk-mini{white-space:pre-wrap;font-size:.75rem;color:var(--dim);background:var(--panel2);
  border-radius:8px;padding:8px;margin-top:6px}
.vk-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.vk-thumb{position:relative;width:62px;height:62px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.vk-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* «1-е» — фото, которое уйдёт в ближайший пост: дальше очередь идёт по кругу */
.gal-first{position:absolute;left:3px;bottom:3px;background:var(--warm);color:#fff;
  font-size:.5938rem;padding:1px 5px;border-radius:6px;font-weight:600}
body.light .gal-first{color:#fff}
.vk-thumb button{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;
  border:none;background:rgba(0,0,0,.65);color:#fff;font-size:.6875rem;line-height:1;cursor:pointer;padding:0}
.vk-check{display:flex;align-items:flex-start;gap:8px;font-size:.8125rem;cursor:pointer}
.vk-check input{width:16px;height:16px;accent-color:var(--warm);flex-shrink:0;margin-top:2px}
.vk-plan{border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:8px;background:var(--panel2)}
/* длинные списки не растягивают страницу, а прокручиваются внутри карточки */
.vk-scroll{max-height:min(56vh,560px);overflow-y:auto;overscroll-behavior:contain;
  padding-right:6px;margin-right:-6px}
.vk-scroll::-webkit-scrollbar{width:8px}
.vk-scroll::-webkit-scrollbar-track{background:transparent}
.vk-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.vk-scroll::-webkit-scrollbar-thumb:hover{background:var(--mute)}
@media(max-width:900px){ .vk-scroll{max-height:min(64vh,520px)} }

@media(max-width:900px){
  .shell.on{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  /* Высоту ящика задаёт inset (top:0 и bottom:0), а НЕ 100dvh: на Android
     панель браузера то появляется, то исчезает, и dvh обновляется
     с задержкой — низ с профилем и тарифом уезжал под панель, и заказчик
     не мог до него добраться. Плюс запас под системную полосу и прокрутка
     на случай низкого экрана. */
  .side.open{display:flex;position:fixed;inset:0 auto 0 0;width:250px;z-index:50;
    height:auto;max-height:none;overflow-y:auto;
    padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  /* затемнение позади ящика: раньше открытое меню нечем было закрыть */
  /* Затемнение — отдельный слой, а не псевдоэлемент панели: раньше нажатие
     по нему приходило внутрь меню, и «ткнуть мимо» не срабатывало. */
  .side-veil{display:none}
  .side-veil.on{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:49;border:0}
  .mob-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .main{padding:16px;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .cal{gap:4px}.day{min-height:64px;padding:4px;border-radius:8px}
  .seg{width:100%}.seg button{flex:1;padding:0 6px;font-size:.7812rem}
  .span-grid{grid-template-columns:minmax(0,1fr)}.span-col{min-height:0}
  .ev-dot{font-size:.625rem;padding:2px 4px}
  .cal-title{min-width:0;flex:1;font-size:1rem}
}

/* ================= ТЕЛЕФОН: календарь =================
   Эти правила обязаны стоять ПОСЛЕ базовых: у .cal-list и .ev-dot .t
   такая же сила селектора, и при равной силе побеждает то, что ниже.
   Первая попытка лежала выше базовых — и не срабатывала вовсе. */
@media(max-width:560px){
  /* Месяц: в ячейке 46px название не помещается никогда — оставляем точку,
     а сами названия идут списком под сеткой. */
  .cal-list{display:block}
  .cal{gap:4px}
  .day{min-height:56px;padding:4px 3px}
  /* Обнуляем и у видов статуса: у них два класса, и одиночный .ev-dot
     их не перебивает — плашка так и осталась бы серым прямоугольником. */
  .ev-dot,.ev-dot.tone-draft,.ev-dot.tone-ok,.ev-dot.tone-done,.ev-dot.tone-past,
  .ev-dot.tone-off,.ev-dot.tone-wait,body.light .ev-dot.tone-draft{
    padding:0;border:none;background:none;box-shadow:none;opacity:1;
    width:100%;display:flex;justify-content:center;text-decoration:none}
  .ev-dot .t{display:none}
  /* Кружок 9 точек нажимать нечем, а промах по нему открывал «Новую дату».
     Даты открывают из списка под сеткой, поэтому точка — просто метка. */
  .ev-dot{pointer-events:none}
  .ev-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dim)}
  .ev-dot.tone-ok::before{background:var(--blue)}
  .ev-dot.tone-done::before{background:var(--mint)}
  .ev-dot.tone-off::before{background:var(--rose)}
  .ev-dot.tone-wait::before{background:var(--warm);box-shadow:0 0 0 3px rgba(255,180,84,.28)}
  .legend{display:none}
  /* Заголовок месяца занимает свою строку: иначе соседи сжимали его
     до 35 пикселей и «АВГУСТ 2026» ломался пополам. */
  .cal-head{flex-wrap:wrap;gap:8px}
  /* Название месяца занимало строку целиком, а стрелки и «Сегодня»
     уезжали под него — справа от названия пустовало полэкрана.
     Пусть встаёт в общий ряд: «← Август 2026 → Сегодня». */
  .cal-title{flex:0 1 auto;order:0;font-size:1.125rem;min-width:0;text-align:left}
  .cal-head .pill{margin-left:0!important}
}

/* ================= ТЕЛЕФОН: пальцем, а не мышкой =================
   Всё, что ниже, — про экран до 560px. Стоит в самом конце таблицы стилей:
   у половины правил такая же сила селектора, как у базовых, и при равной
   силе побеждает то, что ниже по файлу. */
@media(max-width:560px){

  /* 2. Верхняя строка (☰, название сущности, колокольчик) остаётся
     на месте при прокрутке — иначе до меню надо мотать список наверх. */
  .mob-top{position:sticky;top:0;z-index:30;background:var(--ink);
    margin:-16px -16px 12px;padding:9px 16px;
    border-bottom:1px solid var(--line)}

  /* 3. Окна снизу, во всю ширину: так до кнопок достаёт большой палец,
     и не теряются 32 пикселя по бокам. 100dvh — потому что адресная
     строка Safari то появляется, то исчезает, и vh считает её неверно. */
  .modal{padding:0}
  .modal-box{max-width:none;border-radius:16px 16px 0 0;margin:auto 0 0;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom));
    max-height:92dvh}
  .side{height:100dvh}
  /* Шапка окна с крестиком остаётся на месте при прокрутке. В высоких
     формах («+ Приход», «Новая дата») содержимое длиннее экрана, и ✕
     уезжал вверх — закрыть окно, передумав, было нечем. */
  .modal-box{padding-top:0}
  .modal-head{position:sticky;top:0;z-index:2;background:var(--panel);
    margin:0 -16px 12px;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
  /* Крестик закрепили ещё в 67–87, а главное действие нет — до «Сохранить»
     каждый раз мотали («Доход» — 1174 точки при видимых 745). Кнопка
     во всю ширину внутри окна прилипает к низу. */
  /* Липкая кнопка «Сохранить» больше не липкая. Она висела над формой
     и накрывала то поле, что оказывалось под ней: заказчик трижды
     присылал снимки, где за ней прятались «Заметка» с сообщением
     об ошибке и «Стороны» с площадкой. Кнопка стоит в конце формы,
     как везде; до неё просто доскроллить. */
  .modal-box{padding-bottom:calc(18px + env(safe-area-inset-bottom))}

  /* 4. Мелкие значки — под палец. Видимая часть остаётся прежней,
     растёт область нажатия. */
  .pick{width:22px;height:22px}
  .pick span{width:22px;height:22px}
  .pick input{inset:-9px;width:40px;height:40px}
  .chk .box{width:22px;height:22px}
  .vk-thumb button{width:26px;height:26px}
  nav.menu button{min-height:44px}
  /* Заголовок группы («🎸 Музыкант») — это кнопка сворачивания,
     а высота у неё была 17 точек. */
  .menu-title{min-height:40px;padding:6px 0}
  /* Таблицы «Денег» не забирают прокрутку себе: палец, попавший
     в такую таблицу, листал её вместо страницы. */
  .vk-scroll{max-height:none;overflow-y:visible}

  /* 5. Ничего мельче 11 пикселей: на телефоне это уже не читается. */
  .menu-title .arw{font-size:.6875rem}
  .menu-title .cnt{font-size:.6875rem}
  .core-badge{font-size:.6875rem}
  .brand .b2{font-size:.625rem;letter-spacing:.16em}

  /* 6. Ряд вкладок листается вбок и не режется по краю. */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;
    scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{padding:11px 13px;white-space:nowrap}
}

/* Облачко комментария у номера — 17×13 точек, пальцем не попасть.
   Вид не трогаем, расширяем область нажатия невидимым слоем.
   Только screen: при печати этот же ::before печатает текст
   комментария (см. блок @media print), и content:"" стёр бы его. */
@media screen and (max-width:900px){
  .tip.tip-bubble{position:relative}
  .tip.tip-bubble::before{content:"";position:absolute;inset:-14px}
}

/* «Коротко о дате»: семь значений подряд, каждое — кнопка. Строка была
   20 точек, шаг 35, и невидимые запасы соседей упирались друг в друга:
   нажатие чуть ниже «Статуса» открывало «Стороны». Разводим до 44. */
/* Свёрнутая полоса массовых действий: видна только первая строка */
/* !important обязателен: у этих строк display задан прямо в разметке,
   а встроенный стиль сильнее любого правила из таблицы (грабли 128–130). */
.bulk-bar.bulk-short > *:not(:first-child){display:none!important}
.list-more-b{display:none}
@media(max-width:620px){
  .list-more-b{display:inline-flex}
  .list-more{display:none;width:100%}
  .list-more.on{display:flex;gap:6px;flex-wrap:wrap;width:100%}
}
/* Плашки «Деньги в пути» на «Ближайшем» — кнопки: ведут в «Деньги»
   и открывают список должников. Вид как у обычного блока, но нажимается. */
.g-pic{margin:10px 0 2px;padding:10px;background:var(--panel2);border-radius:12px;overflow-x:auto}
/* Строка долга: название · сумма · кнопки — в один ряд. Кнопки справа
   на том же уровне, а не под суммой. Заказчик: «расширить окно и справа
   от строчки сделать плюсик частью/полностью». */
.debt-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line)}
.debt-name{min-width:0}
.debt-sum{white-space:nowrap;text-align:right}
/* «+ часть» и «Получили» обе меняют деньги, а стояли в шести точках:
   промах закрывал весь долг целиком. По сервису норма 12–14. */
.debt-act{display:flex;gap:14px;flex:none}
.cash-big{font:inherit;font-family:Oswald,sans-serif;font-size:1.5rem;font-weight:700;
  font-variant-numeric:tabular-nums;padding:0;text-decoration:none}
button.cash-big{cursor:pointer;border:0;background:none}
button.cash-big:hover{text-decoration:underline}
@media(max-width:620px){
  .debt-row{grid-template-columns:1fr auto}
  .debt-act{grid-column:1/-1;justify-content:flex-end}
}
.dash-money{background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%}
.dash-money:disabled{cursor:default;opacity:1}
.dash-money:not(:disabled):hover .eyebrow{color:var(--warm)}
.btn.sides-toggle,.sides-short{display:none}
/* Строка имён сторон — это кнопка, но выглядеть должна строкой: снимаем
   всё, что браузер рисует у <button>. Область нажатия держим 40 точек —
   правило проекта для тач-экрана. */
.sides-short{width:100%;background:none;border:0;padding:0;font:inherit;
  color:var(--dim);text-align:left;cursor:pointer}
.sides-car{color:var(--mute);margin-left:2px}
@media(max-width:620px){
  .btn.sides-toggle{display:flex;margin-bottom:6px}
  .sides-short{display:flex;align-items:center;min-height:40px;margin:0 0 10px}
  .sides{display:none}
  .sides.on{display:grid}
}
@media(max-width:900px){
}

/* 5. Вечером дату открывают ради «Дня концерта», а он седьмой в ряду
   из одиннадцати вкладок: тащить вбок 680 точек. На телефоне ставим
   его вторым — сразу после «Общего». */

/* Проходка одной строкой. Правила стоят В КОНЦЕ файла: общее
   table.mob-cards tr{display:block} объявлено ниже блока «до 900»,
   и при равной силе побеждало оно — строка так и оставалась в пять строк. */
@media(max-width:900px){
  table.gs-table tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 10px}
  table.gs-table td{padding:0}
  table.gs-table td[data-l]{padding-left:0}
  table.gs-table td[data-l]::before{content:none}
  table.gs-table td:nth-child(2){flex:1;min-width:0}
  table.gs-table td:nth-child(5){margin-left:auto}
}

/* ============ ТЕЛЕФОН: сет-лист остаётся таблицей ============
   Заказчик сравнил с порталом Jagger и попросил сделать так же: там
   сет-лист на телефоне НЕ разворачивается в карточки, а остаётся
   таблицей с прокруткой вбок — видно сразу несколько ролей, и лист
   короткий. Прежний вариант «каждая строка карточкой» давал простыню:
   один номер занимал целый экран.

   Чего в Jagger нет и что мы добавляем: название номера прилипает
   слева при прокрутке вбок — иначе, уехав к «Клавишам», человек уже
   не помнит, чей это состав. Ровно из-за этого мы когда-то и ушли
   в карточки; липкая колонка решает это, не растягивая лист. */
@media(max-width:700px){
  /* прокрутка вбок во всю ширину экрана, без полей карточки */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin:0 -12px;padding:0 12px}
  .sl-table{min-width:640px;font-size:.7812rem}
  .sl-table th{padding:7px 8px;font-size:.6875rem;white-space:nowrap;
    position:sticky;top:0;z-index:3;background:var(--panel)}
  .sl-table td{padding:7px 8px}

  /* Номер — узкой колонкой; ухватку ⠿ прячем, тянуть пальцем нечем,
     для порядка есть стрелки ▲▾. */
  .num-cell{width:34px;padding:7px 4px!important;font-size:.8125rem}
  .num-cell .drag-handle{display:none}
  /* Пальцем в кнопку 30×24 попасть трудно, а промах по ▲ вместо ▾ двигает
     номер в обратную сторону — это правка данных, а не показа. Держим тот
     же запас, что у прочих кнопок.
     Прежде размер стоял в двух местах: 40×40 в @media(hover:none) и 30×24
     здесь. Оба правила одной силы, побеждало то, что ниже, — и на телефоне
     кнопка оставалась 30×24 при шрифте 14px. Источник правды один. */
  .num-cell .ord{gap:6px}
  .ord-b{width:40px;height:40px;font-size:.875rem}

  /* Название прилипает слева: при прокрутке вбок видно, чей это состав. */
  .sl-table .track-cell{position:sticky;left:0;z-index:2;background:var(--panel);
    min-width:118px;max-width:132px;
    box-shadow:6px 0 8px -6px rgba(0,0,0,.28);
    /* Safari на айфоне иногда рисовал фишки соседней колонки ПОВЕРХ
       липкой (снимок заказчика 11.09). Свой слой держит её сверху. */
    transform:translateZ(0)}
  /* Закрепляется сам заголовок «Трек» (класс track-cell), а не «второй
     по счёту»: у ведущего первой идёт колонка галочек, вторым оказывался
     «#», и над названиями при прокрутке висел «#». */
  .sl-table thead th.track-cell{top:0;z-index:5;background:var(--panel2)}
  /* Липкая колонка обязана быть сплошной в любом состоянии строки.
     Подсветка «tr:hover td» сильнее по весу и заменяла сплошной фон
     полупрозрачным — сквозь название просвечивали фишки соседних
     колонок (снимок заказчика 11.09, 23:09). Подсветку кладём слоем
     поверх сплошного цвета. */
  .sl-table tbody tr td.track-cell,
  .sl-table tbody tr:hover td.track-cell{background-color:var(--panel)}
  .sl-table tbody tr:hover td.track-cell{
    background-image:linear-gradient(rgba(127,127,127,.06),rgba(127,127,127,.06))}
  .track-title{font-size:.8125rem;line-height:1.25}
  .track-artist,.track-proposer{font-size:.6562rem}

  /* Фишка с именем компактнее, но нажимаемая. */
  .cell-name{padding:3px 7px;font-size:.7188rem;margin:2px 3px 2px 0}
  .cell-add{width:26px;height:26px;font-size:.875rem}
  .cell-label{font-size:.625rem}

  /* Строка статуса и кнопки модерации — своей колонкой, не растягивают лист. */
  /* «Утвердить» и «Отклонить» должны стоять в ряд и на телефоне.
     У ячейки ещё 10 точек отступа с каждой стороны, поэтому 180 не хватало:
     доступно было 160 при нужных 168. Даём 200 и делаем кнопки компактнее. */
  .status-cell{min-width:176px}   /* метка и крестик в одну строку */
  .admin-acts .btn.sm{font-size:.6562rem;padding:0 6px}
  .admin-acts{display:flex;gap:4px;flex-wrap:wrap}
  .admin-acts .btn{padding:0 8px;height:28px;font-size:.7188rem}

  /* Редкое действие в первый экран не пускаем. */
  .sl-rare{display:none}

  /* Строка была 150 точек: «состав собран» шёл плашкой на две строки,
     плюс служебное «добавил такой-то». На телефоне это лишнее —
     метка становится строчкой, кто добавил, прячется (видно в карточке). */
  .core-badge{display:inline;padding:0;border:none;background:none;
    font-size:.6562rem;color:var(--mint);white-space:nowrap}
  .track-proposer{display:none}
  /* Карандаш теперь при названии и на телефоне нужен — прятать его нельзя.
     Пальцу даём запас: сама иконка мелкая. */
  .track-cell .pen{padding:6px;font-size:.875rem;position:relative}
  .track-cell .pen::after{content:"";position:absolute;inset:-8px}
  /* Отбор и стрелки — в одну узкую колонку, без лишнего воздуха. */
  .sl-table td:first-child{width:26px;padding:6px 2px!important}
  .sl-table .pick{transform:scale(.9)}
}

/* Колонки вкладки «Общее» держат зазор сами (gap:14). Правило
   «.card+.card{margin-top:14}» добавляло второй отступ, и справа
   получалось 28 против 14 слева. */
.ev-main .ev-col > *{margin:0}

/* Вкладка «Общее»: на телефоне колонки схлопываются одна за другой,
   и проходки оказались бы раньше плана дня. Раскрываем обёртки
   и задаём порядок карточек по смыслу. display:contents с !important —
   у обёрток display задан прямо в разметке, а встроенный стиль сильнее. */
@media (max-width:820px){
  .ev-main .ev-col{display:contents!important}
  /* Порядок задал заказчик (сборка 859): сводка о мероприятии, задачи
     (с 860-й — одна карточка вместе с готовностью), партнёры и спонсоры,
     проходки, история. У «Партнёров» места в этом списке не было — без
     order они вставали первыми (order:0). */
  .ev-day{order:1} .ev-ready{order:2}
  .ev-part{order:3} .ev-guests{order:4} .ev-main .past-card{order:5}
  /* при display:contents карточки становятся ячейками сетки, но в DOM
     остаются внутри обёртки — селектор «> .card» по ней не сработает.
     Свои отступы снимаем, зазор держит сама сетка. */
  .ev-main .ev-col > *{margin:0!important}
}

/* Афиша: на телефоне зона перетаскивания не нужна — там нечем перетаскивать.
   Остаётся кнопка, блок с 210 точек сжимается до 56. */
@media (max-width:900px){
  .poster-drop{min-height:0;padding:12px}
  .poster-drop .drop-hint{display:none}
}

/* Задачи: содержимое ячеек разной высоты (у одной две строки, у другой одна),
   а ячейки равнялись по середине — ряд читался «лесенкой». Равняем по верху,
   как в списке дат, и метке «как идёт» даём тот же отступ, что и тексту. */
.tasks-tbl td{vertical-align:top}
.tasks-tbl td .task-st{margin-top:2px}

/* Отбор и порядок в задачах — одной строкой, на телефоне по два в ряд. */
.task-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
/* Пять кнопок отбора рвались так, что «Все» уходила на свою строку.
   На телефоне ужимаем поля и зазор — пять кнопок встают в один ряд. */
@media (max-width:620px){
  .task-chips{display:flex;gap:5px;flex-wrap:wrap;width:100%}
  .task-chips .btn{padding-left:9px;padding-right:9px;flex:0 1 auto}
  .task-chips .btn .pill{margin-left:3px;padding:0 4px}
}
.task-tools select{width:auto;min-width:0;max-width:230px;flex:0 1 auto}
@media(max-width:620px){ .task-tools select{flex:1 1 46%;max-width:none} }

/* Ряд «Дата · Начало · Статус». Ширины стояли прямо в разметке
   (1fr .8fr 1.4fr), но у поля даты своя большая наименьшая ширина —
   она съедала место, и списку статуса оставалось 61 точка из 390.
   На телефоне ставим их друг под другом. */
.row-dts{display:grid;gap:12px;grid-template-columns:1fr .8fr 1.4fr}
@media(max-width:640px){ .row-dts{grid-template-columns:minmax(0,1fr)} }
/* Три даты одной строкой, но с переносом: у datetime-local своя наименьшая
   ширина, и на узкой колонке кабинета три равных столбца её не вмещают. */
.row-dates{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:620px){ .row-dates{grid-template-columns:minmax(0,1fr)} }
@media(max-width:900px){
  /* липкая кнопка «Сохранить» накрывала последнюю строку пояснения */
  .modal-box{padding-bottom:76px}
}

/* Ряд вкладок даты и кнопка «＋ ещё». Кнопка была липкой ВНУТРИ полосы
   прокрутки и накрывала соседние вкладки: на телефоне читалось
   «Тайминг + ещё⊙Состав». Теперь она стоит рядом с полосой, а не над ней. */
.tabs-row{display:flex;align-items:stretch;gap:6px;min-width:0}
.tabs-row .tabs{flex:1;min-width:0}
.tabs-row .tab-add{position:static !important;flex:none;align-self:center}
.tab-add{background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  padding:7px 10px;color:var(--dim);font-size:.8125rem;white-space:nowrap}
.tab-add:hover{border-color:var(--warm);color:var(--warm)}
/* Подсказка по нажатию — то же, что при наведении. */
.tip.tap::after{opacity:1;visibility:visible}

/* Safari на айфоне центрирует значение в полях даты и времени — рядом
   с подписями, набранными слева, это читалось как «поле не на месте».
   Равняем по левому краю, как во всех остальных полях. */
/* Поля даты и времени на айфоне имеют СВОЮ наименьшую ширину: `width:100%`
   её не пересиливает, и поле вылезает за правый край окна — заказчик прислал
   это дважды. Лечится снятием собственного вида плюс `min-width:0`.
   Выбор значения при этом остаётся родным — его рисует сам браузер. */
input[type=date],input[type=time],input[type=datetime-local]{
  text-align:left;min-width:0;max-width:100%;display:block;
  -webkit-appearance:none;appearance:none}
/* Пока афиша грузится, на её месте видна не пустая рамка, а полоска. */
.poster-wrap{background:var(--panel2);border-radius:11px;min-height:80px}

/* Выходные — суббота и воскресенье — заметны во всех календарях.
   Заказчик: «везде выделять выходные». Отделяем ТОЛЬКО фоном ячейки:
   тёплый в сервисе значит «от вас чего-то ждут», и им набрано одно
   «сегодня». Раньше тёплыми были и числа выходных, и дни недели в шапке —
   сегодняшняя суббота отличалась от соседней только рамкой. */
.cal .day.wknd{background:var(--panel2)}
.mc-day.wknd{background:var(--panel2)}
.span-col.wknd{background:var(--panel2)}
/* карточка даты в выходном столбце — светлее самого столбца; «ждут ответа» свою тёплую заливку сохраняет */
.span-col.wknd .span-ev:not(.tone-wait){background:var(--panel)}
.mc-wd{color:var(--mute);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
/* «Сегодня» — единственное тёплое место календаря */
.span-col.today .span-num{color:var(--warm)}
.mc-day.now .mc-n{color:var(--warm);font-weight:700}

/* «Где я участвую»: имя сущности сверху, под ним подписанные строки —
   без подписей три значения в ряд читались как набор слов. */
.pl-row{padding:10px 0;border-bottom:1px solid var(--line)}
.pl-row:last-child{border-bottom:0}
.pl-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pl-line{display:flex;gap:10px;align-items:baseline;font-size:.8125rem;margin-top:3px}
.pl-lab{color:var(--mute);font-size:.7188rem;min-width:130px;flex:none}
@media(max-width:560px){ .pl-lab{min-width:104px} }

/* Переключатель состояния номера в сет-листе: колонка узкая,
   поэтому раскрытые состояния встают столбиком под текущим. */
.sl-st{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px}
.sl-st .task-st-menu{display:flex;flex-direction:column;gap:4px}
.status-cell .admin-acts{margin-top:6px}

/* Ухватка порядка: она одна и тянет строку. Делаем её заметнее и крупнее
   под палец — раньше строка ехала от нажатия в любом месте. */
.drag-handle{display:inline-block;padding:2px 4px;border-radius:6px;
  cursor:grab;touch-action:none;user-select:none}
.drag-handle:hover{background:var(--panel2);color:var(--text)}
.drag-handle:active{cursor:grabbing}

/* Состояние номера и «Удалить» — в одну строку. Заказчик: «кнопку
   „Удалить" можно правее, чтобы не делать две строчки». Раскрытые
   состояния при этом уходят вниз под саму метку, а не расталкивают
   кнопку. Флекс кладём в обёртку, а не на <td>: display:flex на ячейке
   ломает колонки таблицы (грабля сборки 359). */
.st-wrap{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
.status-cell > .st-wrap > .pill,.status-cell > .st-wrap > .pill-btn{margin-bottom:0}

/* Метка состояния и «Удалить» — одного роста и с одинаковыми
   скруглениями. Заказчик: «сделать размеры одинаковые». Метка была
   20 точек и капсулой, кнопка — 26 и со скруглением 9: рядом это
   читалось как два разных элемента. */
.status-cell .pill-btn,.status-cell .btn.sm{height:26px;font-size:.6875rem;
  border-radius:9px;padding:0 10px;box-sizing:border-box}
.status-cell .pill-btn{font-weight:600}
/* Заказчик: «кнопку „Удалить" можно просто крестиком». Квадратная, одного
   роста с меткой состояния; надпись ушла в подсказку. */
.status-cell .btn.sm.sl-del{width:26px;padding:0;font-size:.8125rem;line-height:1;flex:none}
/* Строка выбора музыканта: имя слева, инструмент справа. Кнопкой .btn
   это выглядело рвано — у неё содержимое по центру, и длинное имя
   переносилось посередине, а роли улетали вправо. */
/* «Где» и «Вы в этом джеме» — одной строкой, двумя карточками; ниже так же
   «чего не хватает» и «что это за сервис». На узком экране встают друг
   под друга. */
.jam-head{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.jam-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;margin-bottom:14px;align-items:stretch}
.jam-row > *{margin:0;max-width:none}   /* у .banner своя ширина в 74ch — в ряду её снимаем */
/* Полоса режима концерта — во всю ширину: при 74ch её текст занимал две
   строки (заказчик: «можно на полную строчку, чтобы одну длинную»). */
.banner.wide{max-width:none}
@media(max-width:820px){ .jam-row{grid-template-columns:minmax(0,1fr)} }
@media(max-width:700px){ .jam-head{gap:10px} .jam-head>div{min-width:0} }
.hp-row{display:flex;align-items:baseline;gap:12px;width:100%;margin-bottom:6px;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;min-height:40px;cursor:pointer;text-align:left;font:inherit;color:var(--text)}
.hp-row:hover{border-color:var(--warm)}
.hp-name{flex:1;min-width:0;font-weight:600;font-size:.8438rem}
.hp-role{flex:0 0 auto;max-width:45%;text-align:right;color:var(--dim);font-size:.75rem}
/* Колонка сузилась — «Удалить» больше не занимает места словом. */
.status-cell{min-width:190px}

/* Кнопки черновика поста: все одного роста, в один ряд, «Опубликовать»
   прижата вправо. Раньше «Удалить» и «Опубликовать» были другого размера
   и переносились второй строкой. */
/* Карточка черновика узкая (450 точек), а кнопок пять — в одну строку
   они не влезают физически. Поэтому не «прижимаем» ничего вправо,
   а даём им растягиваться: ряды заполняются ровно, все одного роста. */
.vk-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.vk-acts .btn{height:32px;flex:1 1 130px;justify-content:center;white-space:nowrap}

/* --- Телефон: ряд вкладок даты становится списком ---------------------
   Восемь вкладок в ленту не влезают: 889 точек при видимых 266.
   Список занимает одну строку, ничего не листается и видно, где ты.
   Правило стоит в конце таблицы: при равной силе побеждает то, что ниже. */
.tabs-sel{display:none}
@media (max-width:620px){
  /* Нижний отступ жил у самой ленты (.tabs{margin-bottom:16px}). Спрятали
     ленту — и содержимое встало вплотную к списку: зазор был ровно 0,
     карточка «Готовность» налезала на выпадающий список. Отступ
     переезжает на всю строку. */
  .tabs-row{margin-bottom:16px}
  .tabs-row .tabs{display:none !important}
  .page-head + .tabs{display:none !important}
  .tabs-sel + .tabs{display:none !important}
  .tabs-sel{display:block;flex:1;min-width:0;width:100%;height:40px;margin-bottom:12px}
  .tabs-row .tabs-sel{margin-bottom:0}
  .tabs-row .tab-add{position:static !important}
}

/* --- Телефон: шапка карточки даты --------------------------------------
   199 точек до первой карточки: кнопка «Назад» 44, надзаголовок, имя даты
   в две строки 78 и рядом со статусом его же пересказ («Все согласны,
   дата занята»). Пересказ на телефоне лишний — статус написан рядом. */
@media (max-width:620px){
  #main > .topbar > div > .page{font-size:1.25rem;line-height:1.2}
  #main > .topbar .pill.state{display:none}
  #main > .topbar .btn.sm.ghost{height:32px}
}

/* Заказчик отметил главную кнопку витрины: две кнопки во всю ширину
   в десяти точках друг от друга читаются как одна деталь. */
@media (max-width:620px){
  .lp-cta{gap:14px}
  .lp-cta .lp-note{margin-top:2px}
}

/* --- Телефон: статус и кнопки даты в одну строку -----------------------
   Заказчик: «надо стараться, чтобы все объекты были в одну линию, чтобы
   не было пустого места из-за того, что переносится строчка». Статус
   стоял один на строке, а «Повторить» и «Изменить» уезжали на следующую —
   справа от статуса оставалась пустота во весь экран.
   `display:contents` у обёрток делает их детей ячейками одной строки:
   «Назад», надзаголовок и название занимают строку целиком, а статус
   и кнопки становятся соседями и переносятся только если правда не влезли. */
@media (max-width:620px){
  /* `justify-content:space-between` из общего правила .topbar на узком
     экране растаскивал строку по краям: между статусом и «Повторить»
     зияли 72 точки. Прижимаем к левому краю — переносится только то,
     что правда не влезло, и без дыр. */
  #main > .topbar{display:flex;flex-wrap:wrap;align-items:center;
    justify-content:flex-start;gap:6px}
  /* `!important` обязателен: у обёртки кнопок `display:flex` задан прямо
     в разметке, а встроенный стиль сильнее правила из таблицы. Без него
     кнопки остались бы одним блоком и при длинном статусе переносились
     обе разом (грабли 128–130 и 222–225 — уже третий раз). */
  #main > .topbar > div{display:contents !important}
  #main > .topbar > div > .btn.sm.ghost,
  #main > .topbar > div > .eyebrow,
  #main > .topbar > div > .page{flex:0 0 100%}
  #main > .topbar .ev-status{margin-top:0 !important}
  /* Десяти точек не хватало, чтобы всё встало в строку: замер 353 при
     доступных 343. Ужимаем поля кнопок и зазор — становится 337.
     Обёртка кнопок тоже `display:contents`, поэтому при длинном статусе
     («Черновик / согласование», 183) переносится ОДНА кнопка, а не обе:
     пустого места справа не остаётся. */
  #main > .topbar .ev-acts .btn{padding-left:9px;padding-right:9px}
}

/* Кнопки в карточке человека не влезали в три ряда: колонка рядом
   с фотографией всего 221 точка, а кнопкам нужно 320. Раз перенос
   неизбежен — пусть заполняют строку, а не жмутся влево с пустотой. */
@media (max-width:620px){
  .pn-acts .btn{flex:1 1 auto}
}

/* Строка «← период → Сегодня» в календаре денег: с зазором 8 не хватало
   одной точки, и кнопка уезжала на строку ниже. */
@media (max-width:620px){
  .mn-nav{gap:6px !important}
}

/* --- Телефон: карточка человека ----------------------------------------
   Из 276 точек карточки 130 занимали три кнопки, стоявшие столбиком:
   колонка рядом с фотографией всего 221 точка, а кнопкам нужно 320.
   `display:contents` у тела карточки выпускает кнопки на всю её ширину
   (305), и там они встают в один ряд. Замер: карточка 276 → 186,
   раздел «Команда» 4247 → около 3100. */
@media (max-width:620px){
  .pn-card .pn-body{display:contents !important}
  /* Порядок задаём числами: имя первым, метки ролей и доступа (.pn-tags,
     одним блоком с 916-й) — рядом справа, остальное строками ниже. */
  .pn-card .pn-body > *{flex:0 0 100%;min-width:0;order:3}
  .pn-card .pn-body > .pn-name{flex:1 1 auto;align-self:center;order:0}
  .pn-card .pn-acts{order:4;margin-top:8px !important}
  .pn-acts .btn{flex:0 1 auto}
}

/* Сворачиваемый раздел профиля: заголовок выглядит как заголовок,
   но нажимается. Область нажатия — вся строка, не меньше 40 точек. */

/* Длинные таблицы на телефоне: показываем первые пять строк, остальное
   по кнопке. `tfoot` («Всего по проектам») не прячем — итог нужен всегда. */
/* `.btn` объявлен ниже по файлу со своим display, поэтому одиночного
   `.mob-only` мало — нужен селектор той же силы или выше. Эти грабли
   в файле уже четвёртые. */
.mob-only,.btn.mob-only{display:none}
/* Короткая и полная подпись одной кнопки: на телефоне длинные названия
   не дают трём кнопкам встать в строку. */
.t-mob{display:none}
@media(max-width:620px){.t-mob{display:inline}.t-wide{display:none}
  /* Слово важнее значка: без него три кнопки встают в строку. */
  .btn.hide-ico-mob svg{display:none}}
@media (max-width:620px){
  .mob-only,.btn.mob-only{display:flex}
  table.mob-cut tbody tr:nth-child(n+6){display:none}
}

/* Разрушительная кнопка не должна стоять вплотную к соседней: на телефоне
   промах по «Перенести» удалял дату, промах по «Сохранить» — карточку
   контрагента, промах по карандашу — уточнение должности (а на них
   держится состав джема). Отступ задан в разметке инлайном, поэтому
   `!important`. */
@media (max-width:620px){
  .ev-row-acts .btn.danger{margin-left:18px !important}
  /* Одного `margin-top` мало: обе кнопки — inline-flex и стоят на ОДНОЙ
     строке, отступ сверху их не разводит. Делаем «Убрать из списка»
     блочной — она уходит на свою строку под «Сохранить». */
  .ct-del{display:flex !important;width:max-content;margin-top:16px !important}
  .role-del{margin-left:14px}
}

/* Ряд вкладок даты липнет под верхней полосой: карточка длиной 2000 точек,
   и чтобы сменить вкладку, приходилось мотать вверх до самого начала. */
@media (max-width:620px){
  .tabs-row{position:sticky;top:63px;z-index:20;background:var(--ink);
    padding:8px 0 8px;margin-bottom:8px}
}
/* Действия у сообщения в чате: три кнопки размером с ноготь и вплотную,
   две из них меняют данные. Разводим и даём палец. */
@media (max-width:620px){
  /* Настоящий класс — `.msg-x`. Три кнопки шириной с ноготь стояли
     вплотную: промах по ✎ подставлял текст в поле, промах по ✕ удалял
     сообщение. Даём палец и разводим. */
  .msg-x{font-size:.9375rem;padding:8px 6px;min-width:36px;min-height:36px;
    display:inline-flex;align-items:center;justify-content:center;opacity:.8}
  .msg-x + .msg-x{margin-left:8px}
}

/* Строка «Что ещё нужно сделать» + сторона + «+».
   На компьютере как было: поле растягивается, список до 160.
   На телефоне строка неразрывная — иначе кнопка «+» уходила на свою
   строку и съедала целый ряд ради одного значка. Список ужимается до
   содержимого, поле забирает остаток. */
.chk-add{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chk-add #chkNew{flex:1 1 200px;min-width:0}
.chk-add #chkWho{flex:1 1 140px;max-width:160px;min-width:0}
.chk-add .btn{flex:none}
@media (max-width:620px){
  .chk-add{flex-wrap:nowrap}
  .chk-add #chkNew{flex:1 1 60px}
  .chk-add #chkWho{flex:0 1 auto;max-width:150px}
}

/* Строка новой проходки: имя · сколько с ним · от кого · убрать.
   На компьютере всё в один ряд. На телефоне четыре поля в 305 точек
   не влезают (имени осталось бы 78), поэтому список «от кого» переходит
   на вторую строку — а имя, «+N» и крестик остаются вместе. */
.gs-row{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,160px) 36px;
  gap:6px;align-items:center;margin-bottom:6px}
.gs-row .gs-x{padding:0;width:36px}
@media (max-width:620px){
  .gs-row{grid-template-columns:minmax(0,1fr) 62px 40px;
    grid-template-areas:"n p x" "s s s";row-gap:8px;column-gap:8px;margin-bottom:12px}
  .gs-row .gs-n{grid-area:n}
  .gs-row .gs-p{grid-area:p}
  .gs-row .gs-x{grid-area:x;width:40px}
  .gs-row .gs-s{grid-area:s}
}

/* Описание сущности из каталога в списке контрагентов — не длиннее двух
   строк. Заказчик: «на стартовой странице очень много текста, сократить
   максимум две строчки». Целиком оно есть в карточке контрагента. */
.ct-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.35}
/* Окно «как добавить»: путь кнопкой, под ним строка, что он даёт. */
.way-list{display:flex;flex-direction:column;gap:2px}
.way-list .btn.full{margin-top:10px;justify-content:flex-start;text-align:left}
.way-note{font-size:.7812rem;color:var(--dim);padding:0 2px 4px}
/* Новости: пункты списком, с отступом под маркер. */
.news-list{margin:10px 0 0;padding-left:18px;color:var(--dim);font-size:.8125rem;line-height:1.6}
.news-list li{margin-bottom:7px}
.news-list li::marker{color:var(--warm)}
/* Шапка карточки человека: лицо, имя и «написать» одной строкой.
   Кнопка стояла отдельной строкой над фотографией и на неё налезала. */
/* Стрелки периода в «Деньгах»: середина — название отрезка и возврат
   к текущему, по краям шаг назад и вперёд тем же размером. */
.mn-nav button:first-child,.mn-nav button:last-child{min-width:38px;font-size:.9375rem}
.mn-nav button:nth-child(2){font-variant-numeric:tabular-nums}
@media(max-width:620px){.mn-nav{width:100%}.mn-nav button:nth-child(2){flex:1}}
/* Материалы: строка списка и строка ввода — ссылка, что это, кто снимал. */
.md-row{display:flex;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.md-row:last-of-type{border-bottom:0}
.md-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.md-x{flex:0 0 auto}
.md-new input{flex:1;min-width:0}
.md-new input:nth-child(2){flex:.8}
.md-new input:nth-child(3){flex:.7}
@media(max-width:620px){.md-new{flex-wrap:wrap}.md-new input{flex:1 1 100%}}
/* Крутящийся кружок «идёт работа»: без него человек не понимал,
   принял сервер публикацию или нет. */
.spin{display:inline-block;width:14px;height:14px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--line);border-top-color:var(--warm);animation:spin .8s linear infinite}
.btn .spin{width:13px;height:13px;margin-right:2px;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}
.pn-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pn-head .ava{width:54px;height:54px;max-height:54px;flex:0 0 auto;font-size:1.125rem}
/* Имя · Фамилия · Как объявлять: на телефоне первые два в ряд,
   псевдоним во всю ширину — так короче, чем три поля столбиком. */
@media(max-width:620px){
  .row-name{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .row-name .field:last-child{grid-column:1 / -1}
}
/* Главная фотография помечена, у остальных — звёздочка «сделать главной». */
.vk-thumb.gal-main{outline:2px solid var(--warm);outline-offset:1px}
.gal-set{position:absolute;left:4px;bottom:4px;width:24px;height:24px;border-radius:50%;
  border:0;background:rgba(0,0,0,.55);color:#fff;font-size:.8125rem;line-height:1;cursor:pointer}
.gal-set:hover{background:var(--warm);color:#fff}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.ph-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r1);display:block;border:1px solid var(--line)}
/* Публичная страница райдера: заголовок блока — это содержимое, а не
   служебная подпись, поэтому обычный жирный текст, а не .eyebrow. */
.rd-head{font-weight:700;font-size:.9375rem;color:var(--text);margin:14px 0 6px;
  padding-bottom:5px;border-bottom:1px solid var(--line)}
.rd-logo{width:64px;height:64px;border-radius:var(--r2);object-fit:cover;
  border:1px solid var(--line);flex:0 0 auto}
@media(max-width:620px){.rd-logo{width:52px;height:52px}}

/* Кружок «?» раздела, когда заголовок спрятан как повтор липкой полосы. */
.head-tip{margin-top:2px}

/* ---------- ссылки ----------
   Заказчик: «чтоб не были просто синим подчёркнутым некрасивым шрифтом —
   пусть цвет меняют при наведении». В покое ссылка набрана цветом текста
   вокруг, с тихой чертой; под курсором становится синей, и черта — в цвет.
   Цвет, заданный в самой ссылке (суммы, «расход» розовым), инлайновый
   и сильнее — он остаётся: там цвет несёт смысл. */
.link-btn,
#main a:not(.btn):not(.dash-card),
.modal-box a:not(.btn){
  color:inherit;
  text-decoration:none;
  text-underline-offset:3px;
  transition:color .12s ease;
}
/* Черта появляется только под курсором — тогда видно, что нажимается,
   а в покое строка читается как обычный текст. */
.link-btn:hover, .link-btn:focus-visible,
#main a:not(.btn):not(.dash-card):hover,
#main a:not(.btn):not(.dash-card):focus-visible,
.modal-box a:not(.btn):hover,
.modal-box a:not(.btn):focus-visible{
  color:var(--blue);
  text-decoration:underline;
  text-decoration-thickness:1px;
}

/* Имя стороны на дате — заголовок плашки, а не строка текста:
   заказчик просил «пожирнее и чуть побольше, как было раньше». */
.side-card .n{font-size:.9688rem;font-weight:700;line-height:1.3}

/* Реферальные карточки лежат в обёртке #refBox без класса, поэтому правила
   «.card + .card» и «.card + .grid» между ними и соседями не срабатывали:
   зазор был ровно 0 и карточки слипались. */
#refBox{display:block;margin:14px 0}

/* ---------- ровные ряды в списках ----------
   Карточки контрагентов и людей были разной высоты: у одного есть
   описание, у другого нет, и ряд выходил рваным. В сетке карточка
   растягивается на высоту ряда, а её содержимое прижимается кверху. */
.grid.g2 > .card.card-open,
.grid.g3 > .card.card-open{ align-self:stretch; display:flex; flex-direction:column }
.grid.g2 > .card.card-open > *:first-child,
.grid.g3 > .card.card-open > *:first-child{ flex:1 }

/* Строка «Оформление» с кнопкой правки справа. На узком экране список
   сжимался до 60 точек и название шаблона было не прочесть — там строка
   переносится, а кнопка встаёт под ней. */
@media(max-width:620px){
  .tpl-row{flex-wrap:wrap}
  .tpl-row select{min-width:180px}
  .tpl-row #vkEditBtn{margin-left:0}
}

/* ── Кнопки-выбор: «Кем я работаю», «Что я играю» ──────────────────
   Раньше это были строки .chk с чертой снизу — квадратик сверху, подпись
   под ним и подчёркивание. Заказчик: «красивые кнопки сделать».
   Отмеченное показываем зелёным: это «включено», а не «вас ждут»
   (тёплый в сервисе значит другое). */
.pick-chip{position:relative;display:inline-flex;margin:0}
.pick-chip input[type=checkbox]{position:absolute;left:0;top:0;width:100%;height:100%;
  margin:0;padding:0;opacity:0;cursor:pointer;z-index:1}
.pick-chip .ch-in{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;
  border:1px solid var(--edge);border-radius:999px;background:transparent;
  font-size:.8125rem;line-height:1;color:var(--dim);white-space:nowrap;
  /* color в переходе не участвует: он берётся из переменной темы, и при
     смене оформления браузер оставлял анимированное значение прежним —
     в светлой теме подпись оставалась светлой (замер 2,59:1). */
  transition:border-color .12s,background .12s}
.pick-chip:hover .ch-in{color:var(--text)}
.pick-chip .dot{flex:none;width:17px;height:17px;border-radius:50%;
  border:1.5px solid var(--edge);display:inline-flex;align-items:center;justify-content:center;
  font-size:.625rem;font-weight:700;line-height:1;color:transparent;
  transition:background .12s,border-color .12s}
.pick-chip input:checked + .ch-in{border-color:var(--mint);background:var(--panel2);color:var(--text);font-weight:600}
/* Глиф поверх --mint нельзя задавать одним цветом: в тёмной теме зелёный
   светлый, в светлой тёмный. Белая галочка давала 1,87:1 (норма 4,5). */
.pick-chip input:checked + .ch-in .dot{background:var(--mint);border-color:var(--mint);color:#0B2018}
body.light .pick-chip input:checked + .ch-in .dot{color:#FFFFFF}
.pick-chip input:checked + .ch-in .dot::after{content:"✓"}
.pick-chip input:focus-visible + .ch-in{outline:2px solid var(--blue);outline-offset:2px}
.chips-row{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:900px){
  /* палец: не меньше 40 точек */
  .pick-chip .ch-in{height:40px;padding:0 15px;font-size:.8438rem}
}

/* Шапка «Дат» (11.09.2026). Заказчик: «уменьшить количество верхних кнопок».
   Вид (месяц · неделя · день · список) и «это место / все мои» стали
   двумя списками, «Расписание» убрано. На компьютере — одна строка,
   на телефоне — списки в первой строке, кнопки во второй. */
.dates-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dates-sels,.dates-btns{display:flex;align-items:center;gap:8px}
.dates-sel{width:auto;max-width:230px;min-width:0}
.head-tip-slot{display:inline-flex;align-items:center}
.head-tip-slot:empty{display:none}
@media (max-width:620px){
  /* Обёртка .dates-ctl — прямой ребёнок .topbar и на телефоне
     становится display:contents (правило выше), поэтому строки
     задаются её детям. */
  #main > .topbar .dates-sels,
  #main > .topbar .dates-btns{flex:0 0 100%}
  /* Вид («Месяц», «Неделя») короткий — ему ширину по содержимому,
     а остаток отдаём названию рабочего места: при равных долях
     «Демо-агентство» обрезалось до «Демо-агентс». */
  .dates-sels .dates-sel{flex:1 1 0;max-width:none}
  .dates-sels .dates-sel:first-child{flex:0 0 auto;width:auto}
  .dates-btns .btn{flex:1 1 0;min-width:0}
  /* «дат в месяце: N» на телефоне лишняя: даты перечислены под сеткой. */
  .cal-head > .pill{display:none}
}

/* Окно «Что печатаем»: у кнопки две строки — название и пояснение. */
.btn.full.pr-opt{height:auto;min-height:56px;padding:10px 14px;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:3px;text-align:left;white-space:normal}
.btn.full.pr-opt + .btn.full.pr-opt{margin-top:10px}
.btn.full.pr-opt b{font-size:.875rem}
.btn.full.pr-opt span{font-size:.75rem;font-weight:400;color:var(--dim);line-height:1.35}

/* Сет-лист на телефоне (11.09.2026). Заказчик: «очень нагромождённый
   дизайн в телефоне, ничего не понятно». Пять кнопок отбора вставали
   в три строки — там отбор одним списком; стрелки ▲▼ у каждого номера
   показываются только в режиме «Поменять порядок». */
.sl-fsel{display:none}
.sl-order-bar{display:none}
.eyebrow .sl-closed{text-transform:none;letter-spacing:0;margin-left:6px;vertical-align:middle}
@media (max-width:700px){
  #slWrap .filter-row{display:none}
  .sl-fsel{display:block;width:100%;margin-top:12px}
}
@media (max-width:700px),(hover:none){
  #slWrap:not(.sl-order) .ord{display:none}
  #slWrap.sl-order .sl-order-bar{display:flex;flex-wrap:nowrap;align-items:center;gap:10px}
  .sl-order-bar > span{flex:1 1 auto;min-width:0}
  .sl-order-bar > .btn{flex:none}
}

/* Сет-лист на телефоне: закреплённая колонка «Трек» (11.09.2026).
   Заказчик прислал снимки: при прокрутке вбок слева от названия
   видны обрывки имён («Эл», «Се»), а в одной строке фишки налезли
   на название. Полоса прокрутки держала слева внутренний отступ
   12 точек: липкая колонка встаёт ПОСЛЕ отступа, а содержимое
   уезжает до самого края — в полоску и просвечивал «Вокал».
   Отступ заменён прозрачной рамкой: рамка не прокручивается,
   просвечивать нечему, а без прокрутки всё стоит как прежде. */
@media(max-width:700px){
  #slWrap .table-scroll{padding-left:0;border-left:12px solid transparent;
    -webkit-overflow-scrolling:auto}
  /* Внутри прокручиваемых ячеек не оставляем «приподнятых» элементов:
     на айфоне именно они иногда рисовались поверх липкой колонки.
     Запас нажатия крестика — полями с отрицательным отступом:
     размер фишки прежний, а попасть по-прежнему можно. */
  .sl-table .cell-open{position:static}
  .sl-table .cell-x{position:static;padding:4px 5px;margin:-4px -3px}
  .sl-table .cell-x::before{content:none}
}
/* Палец, чуть задержавшийся на таблице при прокрутке вбок, выделял
   имена синим и вызывал лупу. В таблице сет-листа выделять нечего:
   имя открывает карточку участника. */
@media(hover:none){
  .sl-table{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
}

/* «Задачи» на вкладке «Общее» (сборка 860): задачи команды стоят в одном
   списке с пунктами даты и выглядят так же — квадратик, название, кто,
   крестик. Квадратик у задачи — кнопка: ей нужен свой сброс и запас
   нажатия до 40 точек (строка целиком не нажимается — название открывает
   саму задачу). Отменённую приглушаем цветом, а не прозрачностью. */
.chk-task .box{appearance:none;-webkit-appearance:none;padding:0;line-height:1;
  position:relative;font-size:.75rem}
.chk-task .box::before{content:"";position:absolute;inset:-10px}
.chk-sub{display:block;margin-top:2px;font-size:.7188rem;color:var(--mute)}
.chk-sub.late{color:var(--rose)}
.chk-task.off .box{color:var(--mute)}
.chk-task.off .t .link-btn{color:var(--mute);text-decoration:line-through}

/* Форма подачи треков на телефоне (сборка 861): свёрнута — над сет-листом
   одна кнопка «＋ Добавить трек», раскрыта — поля на том же месте.
   Раньше форма стояла под всем сет-листом, в 4,6 экрана от верха. */
.jam-add:not(.open){padding:0;border:0;background:none;box-shadow:none}
.jam-add:not(.open) .jam-add-body{display:none}
.jam-add.open .jam-add-go{display:none}

/* ───────── Проверка 12.09: партия правок по списку из 134 пунктов ─────────
   Правила для телефона и общие правки вида — здесь, в самом конце: при равной
   силе побеждает то, что ниже по файлу (грабля 67–87). */

/* 27: строка списка дат открывает дату целиком — показываем, что она нажимается */
table.mob-cards tr.ev-row{cursor:pointer}
@media(hover:hover){ table.mob-cards tr.ev-row:hover td{background:rgba(127,127,127,.05)} }
/* 33: на узком компьютере у «Перенести» остаётся значок — иначе кнопка
   и корзина уезжали за край таблицы (1024 точки) */
@media(min-width:621px) and (max-width:1180px){ .ev-row-acts .mv-txt{display:none} }
/* 104: на телефоне полоса действий с отмеченными стоит у нижнего края:
   отметил дату внизу списка — полоса видна сразу, а не за тысячу точек выше */
@media(max-width:620px){
  .bulk-bar{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));
    z-index:60;margin:0!important;max-height:72vh;overflow:auto;
    box-shadow:0 10px 30px rgba(0,0,0,.38)}
  #slBulk{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));
    z-index:60;margin:0!important;box-shadow:0 10px 30px rgba(0,0,0,.38)}
  body.bulk-on #main{padding-bottom:170px}
}
/* 75: кружок выбора фотографии (профиль, настройки места, профиль музыканта)
   задуман 62×62, а общий потолок .ava{max-height:34px} сплющивал его
   в «таблетку» 62×34 и уменьшал фото профиля вдвое */
.ava.photo-pick{width:62px;height:62px;max-height:62px;min-width:62px;font-size:1.125rem;border-radius:14px}
/* 24: «итогов нет» на телефоне — тонкий тёплый ободок вокруг точки.
   Раньше правило с тремя классами (.tone-done.nores) возвращало точке
   рамку толщиной 3 точки пунктиром — выглядело как сбой */
@media(max-width:560px){
  .ev-dot.nores,.ev-dot.tone-done.nores,.ev-dot.tone-ok.nores,.ev-dot.tone-past.nores{border:none}
  .ev-dot.nores::before{box-shadow:0 0 0 2px var(--panel),0 0 0 3.5px var(--warm)}
  .cal-move{white-space:nowrap}
}
/* 86: печать сет-листа. Лист A4 уже 900 точек, и телефонные правила
   кружка «?» (20×20, запас нажатия position:absolute) действовали и на
   бумаге: текст комментария ложился поверх названия номера. На бумаге
   комментарий — обычная строка текста, а таблица сжимается до листа. */
@media print{
  .tip.tip-bubble{position:static!important;width:auto!important;height:auto!important;
    border:0!important;background:none!important;border-radius:0!important}
  .tip.tip-bubble::before{position:static!important;inset:auto!important}
  .sl-table{width:100%!important;min-width:0!important;font-size:.6562rem!important}
  .sl-table th,.sl-table td,.sl-table .cell-name,.sl-table .cell-label{white-space:normal!important;
    word-break:break-word}
  .sl-table .track-cell{position:static!important;min-width:0!important}
  .sl-table th,.sl-table td{padding:4px 5px!important}
}
/* 45: «Назад» — маленькая стрелка в строке вида и дня, а не широкая кнопка
   на своей строке; стороны — одной строкой на любом экране */
.ev-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ev-back{width:32px;height:32px;flex:none;border-radius:8px;border:1px solid var(--edge,var(--line));
  background:var(--panel);color:var(--text);font-size:.9375rem;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;position:relative}
.ev-back::before{content:"";position:absolute;inset:-6px}
.ev-back:hover{border-color:var(--warm);color:var(--warm)}
.sides-short{display:flex;align-items:center;min-height:36px;margin:0 0 10px;flex-wrap:wrap;gap:4px}
.sides:not(.on){display:none}
/* 46: ряд вкладок не влез — список, как на телефоне */
.tabs-row.tabs-over .tabs{display:none!important}
.tabs-row.tabs-over .tabs-sel{display:block;flex:1;min-width:0;width:auto;height:40px;margin:0}
/* 52: телефон в листе дня не рвётся посреди номера */
a[href^="tel:"]{white-space:nowrap}
@media print{ a[href^="tel:"]{white-space:nowrap} }
/* 56: короткие поля (время, числа итогов) на телефоне — по два в ряд,
   а не по одному: четыре поля занимали 380 точек */
@media(max-width:900px){ .grid.g2.g2k{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ===== Проверка 12.09, партия 2: даты ===== */
/* 25: метка статуса того же цвета, что точка в месяце и полоска в неделе */
.pill.past{border-style:dashed;color:var(--mute)}
.pill-btn.blue{background:rgba(110,139,255,.14);border-color:rgba(110,139,255,.4);color:var(--blue)}
.pill-btn.past{background:var(--panel2);border-style:dashed;color:var(--mute)}
.tip.tip-pre::after{white-space:pre-line}
/* 31: план дня — время узкой колонкой, текст всегда от одного края */
.kv.plan{justify-content:flex-start}
.kv.plan .k{flex:0 0 46px}
.kv.plan .v{flex:1 1 auto;min-width:0;text-align:left}
/* 35: карточка недели — время над названием, стороны одной строкой */
.span-ev{flex-direction:column;align-items:stretch;gap:2px;min-width:0}
.span-t{min-width:0;font-size:.7812rem}
.span-name{display:block;font-weight:600;overflow-wrap:anywhere;line-height:1.3}
.span-sides{display:block;color:var(--mute);font-size:.7188rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
  /* пустой день — тонкая строка, а не карточка в сто точек */
  .span-col.empty{flex-direction:row;align-items:center;gap:10px;padding:4px 6px 4px 10px;min-height:0}
  .span-col.empty .span-head{border-bottom:none;padding:0;flex:1 1 auto;min-width:0}
  .span-col.empty .span-body{flex:0 0 auto}
  .span-col.empty .span-add{width:auto;margin:0;padding:0 12px;min-height:36px}
}
/* 31: на бумаге день был чёрным прямоугольником — в печати светлые цвета */
@media print{
  :root,body,body.light{--ink:#fff!important;--panel:#fff!important;--panel2:#fff!important;
    --text:#111!important;--dim:#333!important;--mute:#555!important;--line:#bbb!important}
  .span-col,.span-ev{background:#fff!important;box-shadow:none!important}
  .span-add,.legend,.dates-ctl{display:none!important}
}
/* 38: на 320 точках строка списков была 325 при месте 288 — у flex-элемента
   min-width:auto не даёт ему стать уже содержимого. Разрешаем сжиматься. */
@media (max-width:620px){
  #main > .topbar .dates-sels,#main > .topbar .dates-btns{min-width:0}
}

/* ===== Проверка 12.09, партия 3: деньги, контрагенты, команда ===== */
/* 69: «Свои статьи» на телефоне — две строки вместо шести:
   «06.09 · Подписка» и «− 999 ₽ · расход · оплачено · ✎ ✕» */
@media (max-width:620px){
  table.mn-own tr{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 8px}
  table.mn-own td{padding:0!important;min-height:0}
  table.mn-own td[data-l]::before{content:none!important}
  /* первая строка: дата · название · ✎ ✕; вторая: сумма · вид · оплачено.
     Разрыв строки — пустым ::after во всю ширину. */
  table.mn-own td:nth-child(1){order:1;color:var(--mute);font-size:.75rem}
  table.mn-own td:nth-child(2){order:2;flex:1 1 0;min-width:0;font-weight:600}
  table.mn-own td:nth-child(6){order:3;margin-left:auto}
  table.mn-own tr::after{content:"";order:4;flex:0 0 100%;height:0}
  table.mn-own td:nth-child(4){order:5}
  table.mn-own td:nth-child(3){order:6}
  table.mn-own td:nth-child(5){order:7}
  /* «Обороты»: имя и число дат в первой строке, три суммы — во второй */
  table.mn-ct tr{display:flex!important;flex-wrap:wrap;align-items:flex-start;gap:6px 10px}
  table.mn-ct td{padding:0!important;min-height:0}
  table.mn-ct td:nth-child(1){order:1;flex:1 0 calc(100% - 70px);min-width:0}
  table.mn-ct td:nth-child(2){order:2;color:var(--mute);font-size:.75rem;padding-left:0!important}
  table.mn-ct td:nth-child(2)::before{content:"дат: "!important;position:static!important}
  table.mn-ct td:nth-child(n+3){order:3;flex:1 1 0;min-width:0;padding-left:0!important}
  table.mn-ct td:nth-child(n+3)::before{position:static!important;display:block;margin-bottom:2px}
  /* 70: «Свод за период» — отступ под заголовком раздела, строки без лишнего ряда */
  .mn-tab .mn-sec{padding-top:18px}
  .mn-tab .mn-act{display:none}
}
/* 71: отбор «Денег» на телефоне — список «с кем» и порядок в один ряд */
@media (max-width:900px){
  .mn-filters select{flex:1 1 calc(50% - 4px)!important;min-width:0}
}
/* 77: что нужно для джема — отмечено в самих подписях */
/* 78: подсказки «Enter — отправить», «наведите» — только там, где есть мышь */
@media (hover:none){ .desk-only{display:none!important} }
/* 83: «Команда» на компьютере — группы из одного человека по две в ряд */
@media (min-width:901px){
  .team-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
  .team-groups > .card{margin:0}
  .team-groups > .team-group:not(.one){grid-column:1/-1}
  .team-group.one .grid.g2{grid-template-columns:minmax(0,1fr)}
}
/* 83: на компьютере «⋯ Ещё» переносилась отдельной строкой — колонку кнопок
   сжимала метка доступа справа (карточка 169 точек). Раскладка как на
   телефоне: имя, роль и метка сверху, кнопки — во всю ширину карточки. */
.team-groups .pn-card .pn-body{display:contents !important}
.team-groups .pn-card .pn-body > *{flex:0 0 100%;min-width:0;order:3}
.team-groups .pn-card .pn-body > .pn-name{flex:1 1 auto;align-self:center;order:0}
/* 916: метки ролей и доступа — один блок справа (заказчик: «с правой стороны
   ровно значки поставь»). Были два разных: роли прижимались к верху строки,
   доступ — к середине, разница 4 точки; промежуток между ними 12, внутри 5;
   а на узкой карточке доступ уезжал на строку ниже, к левому краю.
   Не помещаются рядом с именем — переносятся вместе и так же к правому краю. */
.pn-tags{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;align-items:center;min-width:0}
.team-groups .pn-card > .pn-tags{flex:0 1 auto;order:1;align-self:center;margin-left:auto}
.team-groups .pn-card .pn-acts{order:4;margin-top:4px !important}
.team-groups .pn-acts .btn{flex:0 1 auto}
/* группы из одного — плотно, без дыр: следующая «одиночная» встаёт рядом */
@media (min-width:901px){ .team-groups{grid-auto-flow:row dense} }

/* ===== Проверка 12.09, партия 4: джем ===== */
/* 90: номер выступления — в закреплённой ячейке «Трек» */
.tr-no{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  margin-right:7px;padding:0 5px;border-radius:6px;font-family:Oswald,sans-serif;font-weight:600;
  font-size:.8125rem;color:var(--dim);background:var(--panel2);vertical-align:1px;
  font-variant-numeric:tabular-nums}
button.tr-no{border:1px solid var(--edge,var(--line));cursor:pointer;color:var(--text)}
button.tr-no:hover,button.tr-no:focus-visible{border-color:var(--warm);color:var(--warm)}
@media (hover:none){ button.tr-no{min-width:32px;height:32px;font-size:.875rem} }
/* «Трек» закреплён и на компьютере: на 1024 точках «Клавиши», «Доп.»
   и «Статус» уходили за край, и было не понять, чей это состав */
@media (min-width:701px){
  .sl-table .track-cell{position:sticky;left:0;z-index:2;background:var(--panel);
    box-shadow:6px 0 8px -6px rgba(0,0,0,.22)}
  .sl-table thead th.track-cell{z-index:5;background:var(--panel2)}
  .sl-table tbody tr td.track-cell,.sl-table tbody tr:hover td.track-cell{background-color:var(--panel)}
}
/* колонка порядка у ведущего — на телефоне только в режиме «поменять порядок» */
@media (max-width:700px){ #slWrap:not(.sl-order) .sl-table .num-cell{display:none} }
/* 99: стрелки одинаковые и крупнее на компьютере */
@media (min-width:701px){ .ord-b{width:28px;height:24px;font-size:.6875rem} }
/* 88: крестик «снять с роли» отодвинут от имени; на телефоне запас нажатия
   полями, без «приподнятых» элементов (правило 857) */
.sl-table .cell-x{margin-left:6px}
@media (max-width:700px){ .sl-table .cell-x{padding:7px 8px;margin:-7px -6px -7px 4px} }
/* 89: «+» на телефоне — вид прежний 26×26, нажимается 40×40 */
.cell-add > span{pointer-events:none}
@media (max-width:700px),(hover:none){
  .sl-table .cell-add{width:40px;height:40px;margin:-6px -7px;border:none;background:none;padding:0}
  .sl-table .cell-add > span{display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;border:1px dashed var(--edge);border-radius:6px}
  .sl-table .cell-add:hover,.sl-table .cell-add:focus-visible{background:none}
  .sl-table .cell-add:hover > span,.sl-table .cell-add:focus-visible > span{
    border-color:rgba(255,180,84,.6);color:var(--warm)}
}
/* 90: копия строки заголовков под верхней полосой */
#slHeadFloat{box-shadow:0 6px 10px -8px rgba(0,0,0,.45)}
#slHeadFloat .sl-table{margin:0;border-collapse:collapse}
#slHeadFloat th{background:var(--panel2)!important;border-bottom:2px solid var(--line)}
@media print{ #slHeadFloat{display:none!important} .sl-table .num-cell{display:none!important} }

/* ===== Проверка 12.09, партия 5: общее ===== */
/* 106: «Удалить» стояло в 4 точках от «Изменить» — промах по карандашу
   удалял строку денег или должность */
.btn.role-del{margin-left:12px}
/* 114: у переключателя рабочих мест и в окне «Рабочие места» стояли белые
   «3» и «18» без значка — значок непрочитанного был только внутри меню.
   Тот же красный кружок везде, где стоит .cnt.alert. */
.cnt.alert{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:99px;font-size:.6875rem;font-weight:700;line-height:1;
  background:var(--rose);color:#2A0A0E;letter-spacing:0}
body.light .cnt.alert{color:#fff}
.ws .cnt.alert{margin-left:6px}
.sp-row .cnt.alert{margin-left:8px}
/* 110: переключатель темы на витрине и на странице джема — в шапке */
.lp-theme{width:40px;padding:0;justify-content:center}
.jam-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.jam-top #themeJam{width:40px;padding:0;justify-content:center;flex:none}
/* 115: на компьютере в кабинете версия — под профилем в меню, а не уголком
   поверх содержимого; на витрине и публичных страницах уголок остаётся.
   Кнопка «Закрыть меню» на компьютере не нужна: её ловил Tab, а внизу
   слева висела светлая полоска 16×6. */
.ver-side{display:none}
.side-veil:not(.on){display:none}
@media (min-width:821px){
  .shell.on ~ .ver{display:none}
  .ver-side{display:block;width:100%;margin-top:8px;padding:4px 6px;background:none;border:0;
    color:var(--mute);font-size:.6562rem;letter-spacing:.04em;text-align:center;cursor:pointer}
  .ver-side:hover{color:var(--dim)}
}

/* ===== Проверка 12.09, партия 6: оформление ===== */
/* 127: пустой квадратик выбора сливался с карточкой — край 1,32:1 при норме 3:1.
   Обводим цветом края полей: 3,0–3,6:1 в обеих темах. */
.chk .box{border-color:var(--edge)}
.pick span{border-color:var(--edge)}
/* 132: полосы прокрутки ряда вкладок, меню и переключателей срезали рамку
   фокуса — от неё оставались две черты. Рамку рисуем внутри кнопки. */
.seg button:focus-visible,nav.menu button:focus-visible,.tabs button:focus-visible,
.vk-tabs button:focus-visible{outline-offset:-2px}
/* 133: смысловые подписи — не мельче 12 точек. Дни недели, «нет: …»,
   подписи сторон, заголовки таблиц, подпись партии в сет-листе, «кто»
   у пункта задач. На вечере и при плохом свете 10,5 точки не прочитать. */
.cal .dow,.span-dow,.mc-wdays,.mc-wd,.mc-n,.span-mon{font-size:.75rem}
.side-card .r{font-size:.75rem}
th,.sl-table th{font-size:.75rem}
.cell-label{font-size:.75rem}
.dc-miss .pill{font-size:.75rem}
.chk .who{font-size:.75rem}

/* ===== Проверка 12.09, партия 7: новичок и первый экран ===== */
/* 21: строка задачи на «Ближайшем» — кнопка: открывает задачу. Название
   основным цветом, под ним дата-мероприятие; справа коротко «12.08 · кто». */
.dash-task{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%;
  padding:8px 0;background:none;border:0;border-bottom:1px dashed var(--line);color:var(--text);
  font:inherit;font-size:.8125rem;text-align:left;cursor:pointer}
.dash-task:last-child{border-bottom:0}
.dash-task:hover .dt-main b{text-decoration:underline;text-decoration-color:var(--edge)}
.dt-main{flex:1;min-width:0}
.dt-main b{font-weight:600}
.dt-ev{display:block;color:var(--mute);font-size:.75rem;margin-top:1px}
.dt-when{flex:none;max-width:46%;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 5: заголовок экрана «Что заводим?» */
.fs-title{font-family:Oswald,sans-serif;font-weight:600;font-size:1.375rem;text-transform:uppercase;
  letter-spacing:.02em;margin:18px 0 0;color:var(--text)}
/* 9: цены — два ряда одинаковых карточек: подписка на сервис и, отдельно, посты ВК */
.lp-plans{display:block}
.lp-plan-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:14px}
.lp-plan-row .lp-plan{min-width:0;flex:none}
.lp-plan-h{font-family:Oswald,sans-serif;font-weight:600;font-size:1.0625rem;text-transform:uppercase;
  letter-spacing:.02em;margin:26px 0 0;color:var(--text)}
@media (max-width:560px){ .lp-plan-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} }
/* 15: полоса показа — одна строка текста и кнопки справа */
.plan-bar.demo .pb-t{flex:1 1 220px;min-width:0}
.plan-bar.demo .pb-b{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
@media (max-width:620px){
  .plan-bar.demo{padding:8px 10px;gap:8px;margin-bottom:12px}
  .plan-bar.demo .pb-b{margin-left:0}
}
/* 17: снимок витрины во весь экран */
.lp-shots img{cursor:zoom-in}
.lp-zoom{position:fixed;inset:0;z-index:120;background:rgba(8,9,14,.9);overflow:auto;
  display:flex;align-items:flex-start;justify-content:flex-start;padding:56px 12px 24px;
  -webkit-overflow-scrolling:touch}
.lp-zoom-in{margin:auto}
.lp-zoom-in img{display:block;width:auto;max-width:min(1280px,94vw);max-height:none;border-radius:10px;
  border:1px solid rgba(255,255,255,.18)}
.lp-zoom-x{position:fixed;top:10px;right:12px;min-width:40px;min-height:40px;background:rgba(20,22,32,.9);
  color:#E9EBF3;border-color:rgba(255,255,255,.3);z-index:121}
/* на телефоне снимок шире экрана — листается пальцем, подписи читаются */
@media (max-width:700px){ .lp-zoom-in img{max-width:none;width:900px} }
/* Места с закончившейся подпиской — своей свёрнутой группой внизу окна
   «Рабочие места» и «Куда войти» (заказчик: «как-то скрывать»). Заголовок
   группы выглядит как подпись других групп, а работает как кнопка. */
.sp-exp-t{display:flex;align-items:center;gap:6px;width:100%;min-height:2.5rem;margin:.875rem 0 .375rem;
  padding:0;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit}
.sp-exp-t:hover{color:var(--text)}
.sp-exp-t:focus-visible{outline:2px solid var(--warm);outline-offset:2px;border-radius:6px}
.sp-exp-ar{margin-left:auto;font-size:.8125rem;letter-spacing:0}
.sp-row.exp .sp-n{color:var(--dim)}
/* 881: сет-лист на компьютере — колонки ролей поровну. Заказчик: «почему
   в ПК-версии так много места для вокала?» Таблица раскладывалась сама
   и отдавала свободное место колонке с самой длинной строкой: у вокала
   в строке по три-четыре имени, и на 1728 точках «Вокал» был 424 против
   141 у «Клавиш» — там имя переносилось на три строки. Теперь служебные
   колонки своей ширины, а роли делят остаток поровну. Наименьшую ширину
   таблицы задаёт сама страница (--sl-min: по 116 на роль), дальше она
   листается вбок с закреплённым «Треком». Телефон и печать не трогаем —
   там раскладка своя. */
@media screen and (min-width:701px){
  .sl-table{table-layout:fixed;min-width:var(--sl-min,820px)}
  .sl-table th.pick-cell{width:38px}
  .sl-table th.num-cell{width:72px}
  .sl-table th.track-cell{width:190px;min-width:0}
  .sl-table th.st-col{width:190px}
  /* узкая колонка: фишка не шире ячейки, длинное слово переносится,
     а не вылезает в соседнюю колонку. Подпись партии («вторая гитара»)
     уходит под имя: в одну строку с ней имя сжималось до буквы в строке. */
  .sl-table .cell-name{max-width:100%;flex-wrap:wrap}
  .sl-table .cell-open,.sl-table .cell-real,.sl-table .track-title{overflow-wrap:anywhere}
}
/* 882: у «Дат» один список вместо двух — «Все мои» стали личным
   календарём. На телефоне список вида, кружок «?» и обе кнопки встают
   одной строкой, если помещаются (от 360 точек): заказчик просил «чтобы
   все объекты были в одну линию, без пустоты из-за переноса». На совсем
   узком экране кнопки уходят второй строкой и растягиваются, как раньше.
   Поля кнопок ужаты с 15 до 10, зазоры с 8 до 4–6: на 375 не хватало
   пяти точек, на 360 (частая ширина у Андроида) — ещё восьми. */
@media (max-width:620px){
  #main > .topbar .dates-sels{flex:0 0 auto;gap:4px}
  #main > .topbar .dates-btns{flex:1 1 auto;min-width:0;gap:6px}
  #main > .topbar .dates-btns .btn{flex:1 1 auto;padding:0 10px}
}

/* 886: вопросы «да / нет» и «впишите» — без жирного шрифта. Заголовком
   раньше становилась вся первая строка вопроса, и объяснение («Она уйдёт
   в „Корзину"…») шло крупным жирным абзацем. Заказчик: «шрифт поправить
   на не жирный». Вопрос — обычным начертанием, крупнее текста; объяснение —
   обычный текст читаемого размера. У вопроса с крестиком (каталог) заголовок
   в строке .modal-head — ему снимаем плакатный Oswald и прописные. */
.modal-box .ask-h{font-size:1.1875rem;font-weight:400;line-height:1.35;margin:0 0 12px;
  color:var(--text);letter-spacing:0;text-wrap:balance}
.modal-head h3.ask-h{font-family:inherit;text-transform:none;margin:0}
.modal-box .ask-t{font-size:.9375rem;max-width:none}

/* 887: «Настройки» → «Серии джемов». Строка серии — название, где обычно
   проходит и сколько впереди, ссылка полем и три кнопки. На широком экране
   кнопки справа от текста, на узком — строкой под ним. */
.jser-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--line)}
.jser-row:last-of-type{border-bottom:0}
.jser-main{flex:1 1 240px;min-width:0;display:grid;gap:4px}
.jser-main b{font-weight:600;overflow-wrap:anywhere}
.jser-main input{font-size:.75rem;margin-top:4px}
.jser-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media (max-width:620px){
  .jser-acts{flex:1 1 100%}
}

/* Группы в чате: во вкладке «Чат» у даты разговоры — кнопками в ряд,
   на телефоне — списком (групп по песням бывает десяток). */
.talk-pills{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.talk-pills .btn.talk-off{color:var(--dim)}
.talk-sel-row{display:none;gap:8px;align-items:center;margin:10px 0 12px}
.talk-sel-row .talk-sel{flex:1;min-width:0;margin:0}
.grp-head{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;
  flex-wrap:wrap;margin:0 0 8px}
.grp-name{min-width:0;overflow-wrap:anywhere}
.grp-name span{color:var(--mute);font-size:.8125rem}
.grp-acts{display:flex;gap:6px;flex-wrap:wrap}
.grp-presets{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.grp-presets select{flex:1 1 200px;min-width:0;width:auto;max-width:360px;margin:0}
/* строка «Группы» на странице джема — во всю ширину карточки «Вы в этом джеме» */
.jam-grp-slot{flex:1 0 100%}
.jam-grp-slot:empty{display:none}
.jam-grp{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px;
  padding-top:10px;border-top:1px solid var(--line)}
.jam-grp .eyebrow{margin:0 4px 0 0}
.jam-grp-hint{color:var(--mute);font-size:.8125rem}
@media (max-width:620px){
  .talk-pills{display:none}
  .talk-sel-row{display:flex}
}

/* Шапка даты на совсем узком экране (320). Заказчик: «Повторить» и
   «Изменить» — в один ряд, кнопки поменьше, если не влезает. Статус 103,
   «Повторить» 88, «Изменить» 104 и два зазора — 307 при доступных 288.
   Карандаш у «Изменить» на таком экране прячем, поля кнопок ужимаем. */
@media (max-width:350px){
  #main > .topbar .ev-acts .btn{padding-left:8px;padding-right:8px}
  #main > .topbar .ev-acts .btn svg{display:none}
}

/* Партнёры и спонсоры (15.09). Заказчик: «уменьшить в мобильной версии,
   объекты кнопок перенести» — на снимке ✏️ и ✕ стояли отдельной строкой
   под каждым партнёром. На телефоне кнопки встают в строку названия,
   третьей колонки нет, подписи «Кто» нет, поля меньше. */
.pt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.pt-name{min-width:0;overflow-wrap:anywhere}
.pt-link{font-weight:700}
.pt-acts-in{display:none;flex:none;gap:6px}
.pt-acts-td{text-align:right;white-space:nowrap}
.pt-from,.pt-win{display:block;font-size:.7188rem;color:var(--mute);margin-top:2px}
.pt-win{color:var(--dim)}
/* Победители — раскрывающийся список с галочками (15.09): кнопками
   на 35 участников выходило полтора экрана. Закрытый — строка ростом
   с поле ввода, открытый — поиск и список с прокруткой. */
.pt-win-dd{position:relative}
.pt-win-btn{display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 34px 0 12px;
  background-color:var(--ink);border:1px solid var(--edge);border-radius:9px;color:var(--text);
  text-align:left;font-size:.875rem;line-height:1.2;
  /* та же стрелка, что у списков выбора: два треугольника фоном */
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat}
body.light .pt-win-btn{background-color:#FFFFFF}
.pt-win-btn:hover{border-color:var(--mute)}
.pt-win-btn:focus-visible{border-color:var(--blue);outline:none}
.pt-win-val{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-win-ph{color:var(--mute)}
#ptWinN{flex:none;display:inline-flex}
#ptWinN:empty{display:none}
.pt-win-dd.open .pt-win-btn{border-color:var(--blue);border-radius:9px 9px 0 0;
  background-image:linear-gradient(135deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(45deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px)}
.pt-win-panel{display:none;border:1px solid var(--blue);border-top:none;border-radius:0 0 9px 9px;
  background:var(--panel);padding:8px}
.pt-win-dd.open .pt-win-panel{display:block}
.pt-win-panel input[type=search]{margin:0 0 6px}
.pt-win-list{max-height:min(46vh,300px);overflow-y:auto;overscroll-behavior:contain}
.pt-win-t{margin:10px 6px 2px;font-size:.6875rem;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.pt-win-list > .pt-win-t:first-child{margin-top:4px}
/* .field label (0,1,1) делал строку блоком: квадратик вставал над именем,
   а имя мелким серым — сила здесь 0,2,1 */
.pt-win-list label.chk{display:flex;align-items:center;gap:10px;margin:0;border-bottom:none;
  padding:0 6px;min-height:40px;border-radius:7px;cursor:pointer;font-size:inherit;color:var(--text)}
.pt-win-list label.chk:hover{background:var(--panel2)}
.pt-win-list .chk .t{font-size:.875rem;line-height:1.3;overflow-wrap:anywhere;padding:6px 0}
.pt-win-empty{margin:6px}
.pt-win-new{display:block;width:100%;min-height:40px;margin-top:6px;padding:0 10px;text-align:left;
  background:transparent;border:1px dashed var(--edge);border-radius:7px;color:var(--text)}
.pt-win-new:hover,.pt-win-new:focus-visible{border-color:var(--blue);outline:none}
.pt-win-foot{display:flex;justify-content:flex-end;margin-top:8px}
@media(max-width:900px){
  /* ростом с поле ввода на телефоне: 44 точки и шрифт не мельче 16 */
  .pt-win-btn{height:44px;font-size:max(16px,1rem)}
  .pt-win-list label.chk{min-height:44px}
}
@media (max-width:620px){
  #partBox table.mob-cards tr{padding:6px 10px;margin-bottom:6px}
  #partBox table.mob-cards td{padding:2px 0}
  #partBox table.mob-cards td[data-l]{padding-left:74px}
  #partBox table.mob-cards td[data-l]::before{width:70px}
  #partBox table.mob-cards td[data-l=""]{padding-left:0}
  #partBox .pt-acts-td{display:none}
  #partBox .pt-acts-in{display:inline-flex}
}

/* Приглашённые участники / Шоукейс — под сет-листом на странице джема (15.09) */
.sc-card{margin-top:14px}
.sc-row{padding:10px 0;border-top:1px solid var(--line)}
.sc-card > .eyebrow + .sc-row{border-top:none;padding-top:6px}
.sc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 12px}
.sc-name{flex:1 1 auto;font-size:1rem;min-width:0;overflow-wrap:anywhere}
.sc-acts{flex:none;display:inline-flex;gap:6px;align-items:center}
.sc-link{display:inline-block;max-width:100%;margin-top:4px;font-size:.875rem;color:var(--blue);
  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
.sc-link:hover,.sc-link:focus-visible{text-decoration:underline}
.sc-press{margin-top:6px;white-space:pre-wrap;line-height:1.6;color:var(--dim);font-size:.875rem;overflow-wrap:anywhere}
.sc-press.cut{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.sc-more{margin-top:4px;font-size:.8125rem}
.sc-terms{margin-top:8px;font-size:.8125rem;color:var(--text);background:var(--panel2);border-radius:9px;padding:8px 10px}
.sc-terms svg{width:14px;height:14px;vertical-align:-2px}
.sc-form{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

/* Закрыть участие в джемах (15.09): полоса у закрытого, строка в карточке
   участника у ведущего, список в «Настройках» */
.jb-bar{margin-top:8px;padding:9px 12px;border-radius:9px;border:1px solid var(--rose);
  background:rgba(255,107,122,.08);color:var(--text);font-size:.875rem;line-height:1.5}
.jb-bar svg{width:15px;height:15px;vertical-align:-2px;color:var(--rose)}
.jb-state{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8125rem;margin-top:10px}
.jb-state > svg{width:14px;height:14px;color:var(--rose);flex:none}
.jb-row{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;
  padding:8px 0;border-top:1px solid var(--line)}
.jb-main{display:flex;flex-direction:column;gap:2px;min-width:0}

/* Верхняя полоса (☰, раздел, колокольчик) липнет на всём телефонном виде —
   до 900, а не только до 560. Ряд вкладок даты с 620 и уже липнет
   с отступом 63 точки ПОД неё; между 561 и 620 полоса уезжала, и ряд
   «Общее ▾ · ＋ ещё» висел посреди экрана поверх содержимого (снимок
   заказчика 15.09). Отступы липких рядов считаются от высоты полосы,
   значит полоса обязана липнуть везде, где липнут они. */
@media(max-width:900px){
  .mob-top{position:sticky;top:0;z-index:30;background:var(--ink);
    margin:-16px -16px 12px;padding:9px 16px;
    border-bottom:1px solid var(--line)}
}

/* «Не закрыто по прошедшим датам» (15.09): вместо меток «нет: деньги» —
   строки словами, каждая ведёт на свою вкладку даты. Тёплый — потому что
   от человека тут и правда ждут действия. */
.tail-row{display:flex;justify-content:space-between;align-items:flex-start;gap:6px 16px;
  flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--line)}
.tail-row:last-child{border-bottom:0}
.tail-ev{min-width:0;flex:1 1 220px}
.tail-day{display:block;color:var(--mute);font-size:.7188rem;margin-top:2px}
.tail-what{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:1 1 260px;min-width:0}
.link-btn.tail-go{color:var(--warm);font-size:.8125rem;text-align:right;line-height:1.35}
.link-btn.tail-go:hover,.link-btn.tail-go:focus-visible{color:var(--blue)}
@media(max-width:900px){
  /* строки стоят стопкой: общий запас нажатия ±11 точек залезал бы
     на соседнюю строку — даём высоту самой кнопке */
  .link-btn.tail-go{min-height:32px}
  .tail-what .link-btn::after{inset:-2px 0}
}
@media(max-width:620px){
  .tail-what{align-items:flex-start}
  .link-btn.tail-go{text-align:left}
}

/* «Партнёры с других дат» (15.09): даты своими блоками, партнёры галочками. */
.ptp-list{margin-top:10px;max-height:min(56vh,440px);overflow-y:auto;overscroll-behavior:contain}
.ptp-date{padding:10px 0;border-top:1px solid var(--line)}
.ptp-date:first-child{border-top:0}
.ptp-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:2px}
.ptp-day{color:var(--mute);font-size:.75rem;white-space:nowrap}
.ptp-list .chk.ptp-row{min-height:40px;padding:6px 0;border-bottom:0}
.ptp-row.ptp-have{display:flex;justify-content:space-between;align-items:center;gap:10px;
  min-height:40px;padding:6px 0 6px 29px;color:var(--dim)}
.ptp-gives{color:var(--dim)}
.ptp-list .t{min-width:0;overflow-wrap:anywhere}

/* Строки денег между сторонами даты (15.09): другая сторона видит строку,
   где «кому / от кого» — она, и отвечает «дошло». Блок ответа — тёплой
   рамкой (от вас ждут), текст обычным цветом: его читают, а не только
   замечают. */
.peer-box{margin:12px 0 4px;padding:10px 14px;border:1px solid rgba(255,180,84,.38);
  border-radius:10px;background:var(--panel2)}
.peer-h{color:var(--warm);font-weight:600;font-size:.8125rem;margin-bottom:2px}
.peer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 14px;padding:9px 0;border-top:1px solid var(--line)}
.peer-h + .peer-row{border-top:0}
.peer-t{flex:1 1 260px;min-width:0;font-size:.8438rem;line-height:1.45;overflow-wrap:anywhere}
.peer-a{display:flex;gap:8px;flex-wrap:wrap}
.peer-st{display:block;font-size:.7188rem;color:var(--mute);margin-top:2px}
.peer-st.ok{color:var(--mint)}
.peer-st.no{color:var(--rose)}
.peer-st.warn{color:var(--warm)}
.peer-hint{margin-top:8px;color:var(--warm)}
@media(max-width:620px){
  .peer-a{width:100%}
  .peer-a .btn{flex:1 1 auto}
}

/* Шоукейс (15.09): зазор снизу — как у всех карточек. Раньше отступ был
   только сверху, и «Вы в этом джеме» прилипала к шоукейсу вплотную (замер: 0). */
.sc-card{margin-bottom:14px}
/* Фотографии участника шоукейса — маленькими копиями под названием */
.sc-photos{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sc-ph{display:block;width:64px;height:64px;flex:none;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel2)}
.sc-ph img{width:100%;height:100%;object-fit:cover;display:block}
.sc-ph:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#scPhBox .vk-thumbs{margin:0 0 8px}
@media(max-width:620px){ .sc-ph{width:56px;height:56px} }

/* Итоги вечера на замке (сборка 914): записанное видно, но поля не правятся,
   пока не нажали «Изменить». Рамку снимаем, фон тихий — поле читается
   как готовое значение, а не как приглашение что-то вписать. */
.res-lock input[readonly],.res-lock input[readonly]:focus{background:var(--panel2);
  border-color:transparent;cursor:default}
.res-lock input[type=number]{-moz-appearance:textfield;appearance:textfield}
.res-lock input[type=number]::-webkit-inner-spin-button,
.res-lock input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* галочка на замке выключена — пусть и выглядит выключенной, иначе её жмут
   и решают, что она сломана; текст приглушаем цветом, а не прозрачностью */
.res-lock .chk{cursor:default}
.res-lock .chk input[type=checkbox]:disabled{cursor:default}
.res-lock .chk input[type=checkbox]:disabled+.box{opacity:.55}
.res-lock .chk > span:last-child{color:var(--dim)}
.rs-note{min-height:6.875rem}
.rs-note-view{padding:10px 12px;border-radius:9px;background:var(--panel2);font-size:.875rem;
  line-height:1.45;min-height:40px;white-space:pre-wrap;overflow-wrap:anywhere}
.res-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* Точка безубыточности (15.09): цена и вместимость правятся прямо
   в карточке. Два коротких числа стоят рядом и на телефоне — поле
   во всю ширину ради «500» только растягивает карточку. */
.be-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  max-width:26rem;margin-top:10px}

/* «Персонал» (15.09): имя своего человека ведёт в его карточку.
   На телефоне наведения нет, поэтому рядом тихая стрелка — видно,
   что строка открывается. Лицо нажимается так же, как имя. */
.crew-nm{font-weight:700}
.crew-go{margin-left:4px;color:var(--mute);font-weight:400}
.crew-nm:hover .crew-go,.crew-nm:focus-visible .crew-go{color:inherit}
.crew-ava-go{display:flex;flex:none;cursor:pointer;border-radius:50%}

/* 920: пояснение над формой входа — пришли по ссылке на дату */
.auth-note{margin:0 0 14px;padding:10px 12px;border-radius:10px;
  background:var(--panel2);color:var(--text);font-size:.8438rem;line-height:1.45}

/* 923: кнопка-выбор с длинным названием («Да, это «Клуб …» · Санкт-Петербург»)
   переносится на вторую строку — высота кнопки фиксирована, и строки
   налезали друг на друга. Такой кнопке высота по содержимому. */
.btn.btn-wrap{height:auto;min-height:44px;padding:10px 14px;line-height:1.35;
  white-space:normal;text-align:left;justify-content:flex-start}

/* 931: карточка контрагента. Заказчик: «в шапке всё сделать в единую
   строку» — кнопки стояли в трёх местах. Теперь «Назад» и все действия
   одной строкой, под ней лицо, имя, что играет и связь. На телефоне
   у кнопок остаются значки, название — в подсказке. */
.ct-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ct-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto;justify-content:flex-end}
.ct-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.ct-head-t{flex:1;min-width:0}
.ct-prof{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px}
.ct-links{font-size:.7812rem;color:var(--mute)}
.ct-bio{font-size:.8125rem;color:var(--dim);margin-top:6px;max-width:70ch;line-height:1.5}
/* рабочие места человека, состав группы, кто ведёт площадку */
.place-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.place-row{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:8px 10px;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--text);
  font:inherit;text-align:left;cursor:pointer}
button.place-row:hover,button.place-row:focus-visible{border-color:var(--mute)}
.place-row.off{cursor:default}
.place-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.place-t b{font-weight:650;overflow-wrap:anywhere}
.place-t span{font-size:.75rem;color:var(--mute)}
.place-go{color:var(--mute);font-size:1.125rem;flex:none}
@media(max-width:620px){
  .ct-bar .ct-t{display:none}
}
/* 931: рабочие места человека в его карточке «Команды» — строкой меток */
.pn-places{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-4px 0 14px}
.pn-places-l{font-size:.75rem;color:var(--mute)}
.pill-link{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:2px 10px;
  border:1px solid var(--line);border-radius:99px;background:var(--panel2);color:var(--text);
  font:inherit;font-size:.7812rem;cursor:pointer}
.pill-link span{color:var(--mute)}
.pill-link:hover,.pill-link:focus-visible{border-color:var(--mute)}
@media(max-width:900px){ .pill-link{min-height:36px} }
/* 936: отклонённые заявки — даты, где вы ответили «не согласен».
   Видны только в отборе «Отклонённые»: бледные и зачёркнутые, как «прошло»,
   чтобы не спорить с живыми датами. */
.ev-dot.tone-nope{border-color:var(--line);background:var(--panel2);opacity:.55;text-decoration:line-through}
.span-ev.tone-nope{border-left-color:var(--mute);opacity:.6;text-decoration:line-through}
.tone-key.tone-nope::before{opacity:.5}
.dates-note{font-size:.8125rem;color:var(--dim);margin:-2px 0 12px}
/* Отбор включён — у списка тёплая черта снизу, как у выбранного вида:
   иначе легко забыть, что часть дат сейчас спрятана. */
.dates-sel.on{box-shadow:inset 0 -2px 0 var(--warm)}
@media(max-width:560px){
  .ev-dot.tone-nope{padding:0;border:none;background:none;box-shadow:none;opacity:1;
    width:100%;display:flex;justify-content:center;text-decoration:none}
  .ev-dot.tone-nope::before{background:var(--mute);opacity:.6}
}
/* 936: передать рабочее место — выбор человека строками, выбранный
   помечен чертой слева, как открытый пункт в списках сервиса */
.dz-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.spt-list{display:flex;flex-direction:column;gap:6px;max-height:min(40vh,320px);overflow-y:auto;padding:2px}
.place-row.spt-row.on{border-color:var(--warm);box-shadow:inset 3px 0 0 var(--warm)}
.spt-row .place-go{color:var(--warm)}