/* ==========================================================================
   AVE-START — мобильный стартовый экран «Эфира». Утверждённая владельцем композиция 09.09:
     · сверху — вертикальный БАРАБАН аудио-каналов: один в центре выделен, соседи притемнены и
       уходят за край, листается пальцем вверх-вниз;
     · в середине — календарь: цифры прямо на чёрном, под занятыми днями цветные точки проектов,
       сегодня — залитый кружок;
     · снизу — дела дня узкими плоскими плашками.
   Плоско: ни теней, ни градиентов, ни кромок. Цвет несёт смысл: цвет проекта у точки и у плашки,
   просрочка красная, закрытое серое. Токены — .ave-root (public/ave/tokens/*.css).
   Экран рисуется ТОЛЬКО на телефоне (гейт в ave-start.js), десктопный welcome не трогаем.
   ========================================================================== */

.ave-start {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  background: var(--bg);
  font-family: var(--font-mono);
  color: var(--ink);
  overflow: hidden;
}
.ave-start * { box-sizing: border-box; }

/* Боковая панель НЕ переопределяется: выезжает сбоку полоской, как во всём мобильном приложении
   (владелец 09.09 попробовал полноэкранную и вернул прежнее поведение). */
/* dev-плашка «DEV :порт» на этом экране лишняя (просьба владельца). На боевом домене её и так нет —
   envBadge в app.js выходит по hostname, — так что на бою прятать нечего. */
body.as-start-on .env-badge { display: none !important; }

/* пока смонтирован новый экран — старый welcome, верхняя строка и мобильная плашка не нужны */
#app.as-on #welcome { display: none !important; }
body.as-start-on #ave-mvbar { display: none !important; }
body.as-start-on .main-head { display: none !important; }

/* Верхний отступ: 10px плюс env(safe-area-inset-top) — на случай, если в мету когда-нибудь добавят
   viewport-fit=cover. Сейчас env даёт ноль, и это ПРАВИЛЬНО: без viewport-fit iOS сам держит страницу
   ниже строки состояния (проверено на живом айфоне 10.09 — лого сидело на 123px от верха экрана,
   потому что к системным 59px я добавлял ещё 62 своих). Никаких запасов сверх env здесь быть не должно. */
.as-body {
  flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 92px;   /* низ = место под поднятую кнопку «Меню» */
}
.as-row { display: flex; align-items: center; gap: 8px; }
.as-lbl {
  font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2);
}
/* Шапка — ОДНО лого по ЦЕНТРУ (решения владельца 09.09: «убрал бы саму фразу AVE Chat», «лого
   сдвинем в центр»). Тап открывает боковую панель штатной кнопкой #btn-burger. Кнопка не тянется
   на всю строку: невидимая полоса во весь экран, открывающая панель, читалась бы как случайный тап.
   ⚠️ z-index ОБЯЗАТЕЛЕН: барабан подтянут под шапку (margin-top:-44px), и его верхние 70px разгона
   прозрачны из-за маски, но ЖИВЫ для касаний — без своего слоя лого не нажималось вообще (жалоба
   владельца 09.09). Проверка кликом из JS этого не ловила: клик не делает hit-testing, тап делает. */
.as-brand {
  align-self: center; position: relative; z-index: 3;
  display: flex; align-items: center; padding: 2px 10px 6px;
  border: 0; background: none; font-family: inherit; color: var(--ink); text-align: left;
}
.as-brand img { width: 40px; height: 40px; display: block; }
.as-sechead { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 0 8px; }
/* заголовок «Сегодня» лежал вплотную к последнему ряду плиток календаря */
/* список дел опущен ниже — воздух под календарём (просьба владельца), а не вплотную к плиткам */
.as-thead { margin-top: 18px; margin-bottom: 6px; }
.as-sechead .t { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.as-sechead .c { font-size: 10.5px; color: var(--muted); display: block; margin-top: 2px; }
/* «Сегодня» и счётчик дел — в одну строку (владелец: «сам блок ужми»): двухэтажный заголовок
   съедал 16px там, где помещается ещё одно дело. */
.as-thead > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.as-thead .c { display: inline; margin-top: 0; white-space: nowrap; }
.as-sechead .a {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); background: none; border: 0; font-family: inherit; padding: 0 0 2px;
}
.as-sechead .a.act { color: var(--signal); }
/* ---------- аватар: скруглённый КВАДРАТ, не круг (правило AVE) ---------- */
.as-av {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px;
  display: grid; place-items: center; font-size: 8px; font-weight: 800; color: var(--bg);
  background-size: cover; background-position: center; overflow: hidden;
}
.as-av.sm { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px; font-size: 9px; }
.as-av.lg { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; font-size: 12px; }
.as-stack { display: flex; }
.as-stack .as-av { margin-left: -6px; box-shadow: 0 0 0 2px var(--bg); }
.as-stack .as-av:first-child { margin-left: 0; }
.as-ld { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--muted-2); }
.as-ld.on { background: var(--ch-voice); }
/* Иконка канала в строке барабана: общий dot-глиф voice (размеры канве ставит сам DotIcons.draw). */
.as-wico { flex: 0 0 auto; display: block; }

/* ---------- БАРАБАН аудио-каналов ---------- */
/* Окно в три строки. Строки прилипают к центру, крайние затухают маской; выделенная — та, что в центре.
   Владелец 09.09: «не читается, что это ролл» — поэтому у барабана появились три опоры:
     · ОКНО ВЫБОРА — плашка под центральной строкой (как у колеса выбора в телефоне) с янтарной
       засечкой слева: видно, что выбор происходит в центре, а строки едут сквозь него;
     · ЛИНЕЙКА ПОЛОЖЕНИЯ справа — по засечке на канал, активная янтарная: видно, сколько всего каналов
       и где мы среди них (без неё две видимые строки читались просто как список);
     · боковые строки притемнены сильнее и чуть уменьшены, но занятая комната (.live) не гаснет
       до конца — «сидит там кто-то» видно, не листая. */
/* Разгон барабана (по 42px сверху и снизу, чтобы крайняя строка доезжала до центра) подтянут под
   шапку: иначе между лого и первой комнатой висела бы пустая полоса. */
.as-wheelwrap { position: relative; margin-top: -44px; }
.as-wheelwrap .lane {          /* окно выбора: под строками, тапы не перехватывает */
  position: absolute; left: 0; right: 13px; top: 50%; height: 56px; margin-top: -28px;
  border-radius: 11px; background: var(--panel); pointer-events: none;
}
.as-wheelwrap .lane::before {  /* засечка выбора */
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -9px; width: 3px; height: 18px;
  border-radius: 0 2px 2px 0; background: var(--signal);
}
.as-wrail {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px; pointer-events: none;
}
/* Засечка активного канала длиннее и янтарная — как точки-страницы у карусели: сразу видно,
   сколько каналов и который сейчас в окне. */
.as-wrail i {
  width: 3px; height: 8px; border-radius: 2px; display: block;
  background: color-mix(in srgb, var(--muted-2) 55%, transparent);
  transition: height .18s cubic-bezier(.2,.7,.3,1);
}
.as-wrail i.on { height: 16px; background: var(--signal); }
.as-wheel {
  position: relative; z-index: 1; height: 196px; overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 70px 0;            /* чтобы первую и последнюю строку тоже можно было поставить в центр */
  /* окно 196px = строка 56 + по 70 на соседей: маска раскрывается ровно на границах центральной строки */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 36%, #000 64%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 36%, #000 64%, transparent);
}
.as-wheel::-webkit-scrollbar { display: none; }
.as-wrow {
  height: 56px; scroll-snap-align: center;
  display: flex; align-items: center; gap: 10px; padding: 0 22px 0 12px;
  width: 100%; border: 0; background: none; font-family: inherit; text-align: left;
  color: var(--ink); opacity: .3; transform: scale(.94); transform-origin: left center;
  transition: opacity .18s cubic-bezier(.2,.7,.3,1), transform .18s cubic-bezier(.2,.7,.3,1);
}
.as-wrow.live { opacity: .55; }
.as-wrow.on { opacity: 1; transform: none; }
/* В строке 56px название и «кто внутри» стоят друг под другом: раньше они шли одной строкой через
   точку, и длинный состав комнаты обрезал сам себя. */
.as-wtxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.as-wname { font-size: 14px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-wsub { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-wrt { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: 0 0 auto; padding-left: 8px; }
.as-wchev { color: var(--muted-2); font-size: 12px; }
.as-empty-rooms { padding: 14px 2px; font-size: 12px; color: var(--muted-2); }
@media (prefers-reduced-motion: reduce) { .as-wrow { transition: none; } }

/* ---------- календарь: ряд пилюль дней недели + плотные плитки дней ---------- */
.as-cal { flex: 0 0 auto; display: flex; flex-direction: column; margin-top: 2px; }
.as-caltop { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.as-caltop .m { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.as-caltop .c { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.as-wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 0 0 4px; }
.as-wk b {
  font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-align: center; text-transform: uppercase;
  color: var(--muted); background: var(--panel); border-radius: 8px; padding: 4px 0 3px;
}
.as-wk b.t { background: var(--danger); color: var(--on-signal); }   /* сегодня — красным (владелец 10.09) */
/* плитки: квадраты, плотно; дни соседнего месяца — пустая клетка без плитки, как в референсе */
.as-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }   /* высота — от aspect-ratio плиток */
/* Плитка снова КВАДРАТНАЯ (владелец 09.09, вторая итерация: «сделай календарь обратно с квадратными
   окошками дней»). Место под это забирает не барабан, а список дел: он опущен ниже. */
.as-d {
  aspect-ratio: 1 / 1; border-radius: 9px; background: var(--panel); position: relative;
  display: flex; flex-direction: column; justify-content: space-between; padding: 5px 5px 4px;
  border: 1.5px solid transparent; font-family: inherit; text-align: left;
}
.as-d.out { background: transparent; pointer-events: none; }
.as-d.out .n, .as-d.out .as-dots { visibility: hidden; }
.as-d .n { font-size: 11px; font-weight: 600; color: var(--ink-dim); line-height: 1; }
/* Сегодня — КРАСНЫМ выделением (владелец 10.09): рамка, число и точка в углу. Красные точки просрочки
   на сегодняшней плитке не встречаются по определению (просрочка = день раньше сегодня). */
.as-d.today { border-color: var(--danger); }
.as-d.today .n { color: var(--danger); font-weight: 800; }
.as-d.today::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--danger);
}
.as-d.pick { border-color: var(--ink); }
.as-dots { display: flex; gap: 2px; height: 5px; align-self: flex-end; }
.as-dots i { width: 5px; height: 5px; border-radius: 2px; display: block; background: var(--signal); }
.as-dots i.late { background: var(--danger); }
.as-dots i.done { background: var(--muted-2); }
/* ---------- дела дня: плашки без цветных миниатюр — точка проекта, название, проект, срок справа ---------- */
/* Дела листаются НА МЕСТЕ: зона забирает остаток высоты, календарь остаётся на экране целиком.
   Скрытая полоса прокрутки + затухание нижнего края (класс .fade вешает JS, только когда есть что
   листать) — иначе обрезанная плашка читается как баг вёрстки, а не как «ниже ещё есть». */
.as-tasks {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start;
  flex: 1 1 0; min-height: 92px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.as-tasks::-webkit-scrollbar { display: none; }
.as-tasks.fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}
.as-pl {
  min-height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 58%, var(--bg)); padding: 6px 12px;
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; font-family: inherit; text-align: left; color: var(--ink);
}
/* Кружок готовности — тот же элемент, что в дневном списке задач (.tk-daychk в tasks-ui.js):
   пустое кольцо у открытого дела, залитый --ok с галочкой у закрытого, красное кольцо у просроченного.
   ПЕРЕКЛЮЧАТЕЛЬ (решение владельца 09.09): тап по кружку закрывает дело, тап по остальной плашке
   открывает карточку. Сам кружок 18px — для пальца мало, поэтому невидимая зона нажатия расширена
   псевдоэлементом; справа она уже, чтобы не воровать тап у названия задачи. */
.as-pchk {
  position: relative; width: 17px; height: 17px; flex: 0 0 17px; border-radius: 50%;
  border: 1.6px solid var(--muted-2); background: transparent; cursor: pointer;
  display: grid; place-items: center; font-size: 11px; line-height: 1; color: transparent;
  transition: transform .12s cubic-bezier(.2,.7,.3,1);
}
.as-pchk::before { content: ""; position: absolute; inset: -10px -5px -10px -10px; }
.as-pchk:active { transform: scale(.88); }
@media (prefers-reduced-motion: reduce) { .as-pchk { transition: none; } }
.as-pchk.late { border-color: var(--danger); }
.as-pchk.on { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.as-ptx { min-width: 0; flex: 1; }
/* межстрочный явно: высоту плашки задаёт не min-height, а именно эти две строки */
.as-pname { display: block; font-size: 13px; line-height: 1.25; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* точка цвета проекта в мете — единственное место, где цвет проекта остался в плашке */
.as-pproj i { width: 5px; height: 5px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: middle; }
.as-pl.done .as-pname { color: var(--muted); text-decoration: line-through; }
.as-pproj { display: block; font-size: 9.5px; line-height: 1.2; color: var(--muted-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-pmeta { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--muted-2); }
.as-pl.late .as-pmeta { color: var(--danger); }
.as-pl.add { background: none; border: 1px dashed var(--line); min-height: 42px; }
.as-pl.add .as-pname { color: var(--muted); }
.as-pl.more { background: none; min-height: 30px; padding: 0 14px; justify-content: center; }
.as-pl.more .as-pname { color: var(--muted-2); font-size: 11px; }
/* ---------- низ: одна кнопка «Меню», как было ---------- */
/* крупнее и выше (просьба владельца): палец на телефоне бьёт по 48px увереннее, чем по 40, а нижние
   16px у айфона занимает домашняя полоса */
.as-hub {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px;
  height: 48px; padding: 0 24px; border-radius: 999px; border: 0;
  background: var(--panel); display: flex; align-items: center; gap: 11px; font-family: inherit;
}
.as-hub .bars3 { display: grid; gap: 3px; }
.as-hub .bars3 i { width: 16px; height: 1.6px; border-radius: 2px; display: block; background: var(--ink); }
.as-hub .bars3 i:nth-child(2) { width: 10px; }
.as-hub .cap {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.as-hub .badge { width: 5px; height: 5px; border-radius: 50%; background: var(--signal); display: block; }
.as-hub .badge.off { display: none; }
/* ---------- шторки ---------- */
/* затемнение под шторкой чуть слабее: сквозь матовое стекло экран должен угадываться */
.as-scrim { position: absolute; inset: 0; background: rgba(6, 6, 8, .42); z-index: 3; }
/* МАТОВОЕ СТЕКЛО: полупрозрачная поверхность + размытие того, что под ней (токены --glass-* AVE).
   Тонкая светлая кромка сверху отделяет стекло от затемнения — без неё край шторки теряется. */
.as-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  border-radius: 22px 22px 0 0;
  background: color-mix(in srgb, var(--panel-2) 58%, transparent);
  -webkit-backdrop-filter: var(--glass-blur-strong);
          backdrop-filter: var(--glass-blur-strong);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 10px 18px 18px; max-height: 88%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: as-up .22s cubic-bezier(.2, .7, .3, 1);
  touch-action: pan-y;   /* свайп вниз ведёт шторку (см. swipeToClose), вертикальная прокрутка внутри остаётся */
}
/* если браузер не умеет backdrop-filter — не оставляем полупрозрачную кашу, красим плотно */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .as-sheet { background: var(--panel-2); }
}
@keyframes as-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .as-sheet { animation: none; } }
.as-grab { width: 38px; height: 4px; border-radius: 3px; background: var(--line); margin: 0 auto 14px; }
.as-shhead {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 13px; border-bottom: 1px solid var(--line-2);
}
.as-shhead .t { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.as-shhead .c { font-size: 10.5px; color: var(--muted); }
.as-sheet .as-lbl { margin-top: 16px; }
.as-sheet .as-lbl:first-of-type { margin-top: 15px; }

/* профиль в меню */
.as-me { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.as-me .nm { font-size: 14px; font-weight: 700; }
.as-me .rl { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); margin-top: 2px; }
.as-cog {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid var(--line); background: none; margin-left: 7px;
}
.as-me .as-cog:nth-last-child(3) { margin-left: auto; }
.as-cog svg { width: 16px; height: 16px; }
.as-mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.as-mt {
  border-radius: 14px; background: var(--panel); padding: 12px 10px 11px;
  display: flex; flex-direction: column; gap: 9px; position: relative;
  border: 0; text-align: left; font-family: inherit;
}
.as-mt svg { width: 19px; height: 19px; }
.as-mt .lb { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--ink-dim); }
.as-mt .cnt { position: absolute; top: 9px; right: 10px; font-size: 9px; font-weight: 800; color: var(--signal); }
/* Каналы в меню — две ПЛАШКИ-группы («Текстовые», «Голосовые»), не один плоский список: владелец 10.09
   «перепутаны и не разделены». Слева — dot-глиф своего типа, у голосовых справа — кто сидит. */
.as-chgroup {
  margin-top: 8px; padding: 2px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 62%, transparent);
}
.as-chrow {
  display: flex; align-items: center; gap: 10px; padding: 10px 0; width: 100%; min-height: 44px;
  border: 0; border-bottom: 1px solid var(--line-2); background: none;
  font-family: inherit; text-align: left; color: var(--ink);
}
.as-chrow:last-child { border-bottom: 0; }
.as-chrow .nm { font-size: 13px; font-weight: 600; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-chgroup.text .as-chrow .nm::before { content: "# "; color: var(--ch-text); font-weight: 700; }
.as-chrow .rt { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.as-chrow .cnt { margin-left: auto; font-size: 10px; color: var(--muted-2); }
.as-chrow .cnt.hot { color: var(--signal); font-weight: 700; }
.as-chrow .as-wico { flex: 0 0 auto; }
.as-dotv { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--ch-voice); display: block; }
.as-dotv.off { background: var(--muted-2); }
.as-dott { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 2px; background: var(--ch-text); display: block; }

/* строки дел в шторке дня */
.as-ico { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center; }
.as-ico svg { width: 14px; height: 14px; display: block; }
.as-pill {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 11px;
  border-radius: 14px; background: var(--panel); margin-top: 8px; width: 100%;
  border: 0; font-family: inherit; text-align: left;
}
.as-pill .tx { min-width: 0; flex: 1; display: block; }
.as-pill .tt {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as-pill .mm { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.as-pill .rt { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; color: var(--muted-2); }
.as-pill .rt.late { color: var(--danger); }
.as-pill .rt.sig { color: var(--signal); }
.as-pill.done { opacity: .62; }
.as-pill.done .tt { text-decoration: line-through; color: var(--muted); }
.as-addrow {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  margin-top: 9px; height: 46px; border-radius: 14px; background: none; font-family: inherit;
  border: 1px dashed var(--line); color: var(--muted); font-size: 11.5px; font-weight: 600;
}
.as-mk {
  margin-top: 14px; height: 46px; width: 100%; border-radius: 999px; border: 0; font-family: inherit;
  background: var(--signal); color: var(--on-signal);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.as-mk[disabled] { opacity: .45; }

/* форма создания */
.as-fld { margin-top: 15px; }
.as-fld .k {
  font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 8px;
}
.as-input {
  width: 100%; background: var(--field); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; font-size: 16px; color: var(--ink);   /* 16px: меньше — iOS Safari зумит страницу при фокусе (владелец 10.09) */
  font-family: inherit; -webkit-appearance: none;
}
.as-input::placeholder { color: var(--muted-2); }
.as-input:focus { outline: 0; border-color: var(--signal); }
.as-chips { display: flex; gap: 7px; flex-wrap: wrap; }
/* ряд исполнителей: в одну строку, листается вбок (на бою десятки людей), правый край затухает */
.as-chips.row {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 0 -18px; padding: 0 18px 2px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.as-chips.row::-webkit-scrollbar { display: none; }
.as-chips.row .as-who { flex: 0 0 auto; }
.as-ch {
  font-size: 10.5px; font-weight: 600; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
  background: none; font-family: inherit; white-space: nowrap;
}
.as-ch.on { background: var(--signal); border-color: var(--signal); color: var(--on-signal); font-weight: 700; }
.as-who {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: none; font-family: inherit;
}
.as-who .nm { font-size: 11px; color: var(--muted); }
.as-who.on { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 14%, transparent); }
.as-who.on .nm { color: var(--ink); }
.as-err { margin-top: 10px; font-size: 11px; color: var(--danger); }