/* ΛCOLYTE — общий слой: палитра, стекло, движение.
   Подключается на всех страницах последним, поэтому правит их сверху:
   дизайн меняется здесь, а не в двадцати файлах. */

/* ── Палитра ────────────────────────────────────────────────────────────────
   Цвета в сервисе почти нет — и это осознанно. Интерфейс серо-чёрный,
   а цветом отмечено только то, на что человек обязан среагировать:

     зелёный  — деньги и всё, что заработано или сделано;
     коралл   — ошибка, просрочка, убыток. Больше ничего;
     янтарь   — «посмотри сюда», приглушённый, редко.

   Всё остальное — оттенки белого. Категории, направления, теги и метки
   различаются светлотой, а не цветом: так взгляд цепляется за важное,
   а не за пестроту.

   🔴 У «ты сейчас здесь» ЦВЕТА НЕТ ВООБЩЕ — и это главное решение всей
   палитры, принятое 10.08.2026. Акцент успел побывать белым, жёлтым и
   кроваво-красным за одну неделю; каждый раз он оказывался самым ярким
   пятном экрана, и Андрей просил «чтобы не вырывало глаза». Меняли оттенок,
   а проблема была не в оттенке: цветная заливка на стеклянной плите громче
   любых данных под ней, каким бы цветом её ни красили.

   Ответ подсказал брендбук самой одежды (`docs/brendbuk-odezhdy.md`):
   у бренда фирменный не цвет, а МАТЕРИАЛ. Вся съёмка чёрно-белая и
   зернистая, «дорого» там делают мембрана, рипстоп, фурнитура и блик света
   на ткани. Интерфейс говорит тем же:

     «выбрано»  — плита светлее на 10 % и светящаяся грань сверху
       (`--edge`). Ни засечки, ни цветной подложки;
     главное действие — графитовая поверхность `--surface-hi` с рамкой,
       гранью и косым отсветом, как свет на нейлоне. Не заливка цветом,
       а объём: кнопку видно по материалу, а не по яркости;
     фактура — сетка рипстопа на плитах каркаса (`--ripstop`) и плёночное
       зерно в фоне. Обе на пределе видимости: их не замечают, но без них
       стекло выглядит «цифровым».

   Правило на будущее: **цветом в этом интерфейсе отмечают только данные**
   (деньги, ошибка, внимание). Место, выбор и действие — светлотой и
   материалом. Если снова захочется покрасить активный пункт — это симптом
   того, что ему не хватает контраста, а не цвета.

   Зерно живёт в фоновом слое под стеклом, а не поверх страницы: поверх оно
   размыло бы цифры в таблицах, ради которых сервис и открывают.
   ────────────────────────────────────────────────────────────────────── */
:root{
  /* поверхности: стекло поверх глубокого чёрного */
  --bg:#070707;
  --card:rgba(255,255,255,.045);      /* полупрозрачная — под ней виден фон */
  --card2:rgba(255,255,255,.028);     /* вложенная плашка */
  --solid:#121212;                    /* когда прозрачность неуместна */
  --fg:#f4f4f4;
  /* .45 давал ровно 4,47:1 на фоне страницы — на волосок ниже порога AA,
     и это цвет всего пояснительного текста сервиса. .52 даёт 4,9 на фоне
     и 5,7 на карточке: запас есть, а текст по-прежнему явно второстепенный. */
  --muted:rgba(255,255,255,.52);
  --faint:rgba(255,255,255,.28);      /* третий уровень текста */
  --rule:rgba(255,255,255,.07);
  --rule2:rgba(255,255,255,.13);
  --hover:rgba(255,255,255,.06);
  /* «Ты здесь» — свет, а не цвет. Тройка оставлена белой намеренно: весь
     общий слой разбавляет её как `rgba(var(--accent-rgb),.10)`, и подложка
     выбранного получается тем же белым, что и остальные поверхности, только
     плотнее. Захочется когда-нибудь вернуть цвет — меняется одна строка,
     и он разольётся по всем «выбранным» местам разом. */
  --accent-rgb:255,255,255;
  --accent:#e9eaec;                   /* мелкие сплошные метки: «сегодня», аватар */
  --accent-fg:#0b0b0c;                /* 17:1 на них — читается и в 11 пикселей */

  /* Поверхности выше карточки: главная кнопка и всё, что должно читаться
     как предмет, а не как заливка. Светлее фона ровно настолько, чтобы
     стать заметнее всего на экране, не став ярче текста. */
  /* 🔴 Величины подобраны замером, а не на глаз. Выбранная вкладка после
     наложения прозрачностей садится на #202020; при первой попытке кнопка
     была #26262a — светлее всего на шесть пунктов, и «главное действие»
     терялось среди выбранных чипов. Разрыв должен читаться сразу. */
  --surface-hi:#303036;
  --surface-hi-h:#3a3a41;             /* под курсором — на ступень выше */

  /* Светящаяся грань сверху. Один и тот же блик на всём, что «поднято»:
     выбранный пункт, главная кнопка, плиты каркаса. Это он делает
     поверхность материалом, а не прямоугольником. */
  --edge:inset 0 1px 0 rgba(255,255,255,.14);

  /* Сетка рипстопа — ткань их же курток. Шаг 22px, контраст на пределе
     видимости: работает как фактура, а не как рисунок. */
  --ripstop:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 22px);

  /* формы: округлее, чем было — интерфейс мягче на вид */
  --r:22px;                            /* карточки и панели */
  --r-sm:14px;                         /* поля, кнопки, мелкие плашки */
  --r-pill:999px;                      /* чипы и бейджи */

  /* Смыслы. Хранятся тройками чисел, а не готовым цветом: почти всюду они
     нужны не сплошными, а полупрозрачными — рамка .3, подложка .1, заливка
     .06. Готовый цвет так не разбавишь, поэтому цифры 255,106,92 были
     переписаны руками сорок раз в двадцати файлах, каждый со своей
     прозрачностью. Теперь красный меняется в одной строке. */
  --ok-rgb:90,209,138;
  --warn-rgb:255,106,92;
  --amber-rgb:217,167,95;              /* приглушён: внимание, но не тревога */
  --ok:rgb(var(--ok-rgb));
  --warn:rgb(var(--warn-rgb));
  --amber:rgb(var(--amber-rgb));

  /* «цветные» роли сведены к оттенкам белого — цвет здесь ничего не сообщал */
  --info:rgba(255,255,255,.62);
  --violet:rgba(255,255,255,.5);
  --brand:rgba(255,255,255,.36);

  /* ── Отделы в календаре ──────────────────────────────────────────────────
     🔴 Единственное место, где нарушено правило «цветом отмечают только
     данные». Нарушено осознанно, 11.08.2026, и вот чем оправдано.

     В недельной сетке одновременно видно тридцать полос. Отличить «мои
     съёмки» от чужих оплат светлотой нельзя: светлота уже занята — ею
     сказано «выбрано», «сегодня», «поднято». Четыре оттенка серого рядом
     превращаются в кашу, на чём мы уже обожглись (см. ui.js: направление
     пришлось дописывать словом, потому что две точки из четырёх не
     различались). Здесь цвет — не украшение, а способ найти своё за один
     взгляд; ровно за это Андрей и похвалил Apple Calendar.

     Поблажка узкая, и границы у неё жёсткие:
       • цвет живёт только в полосе 3 px слева от события и в точке месяца.
         Заливки цветом нет: плита остаётся серой, текст остаётся белым;
       • направление ВСЕГДА написано словом рядом. Цвет ускоряет поиск, но
         ничего не сообщает в одиночку — этого требует и WCAG 1.4.1;
       • все четыре сильно приглушены и выровнены по светлоте, чтобы ни один
         не выигрывал внимание у денег и ошибок. Ярче их в сервисе
         по-прежнему только зелёный и коралловый, и это правильно.

     Красим не отдел, а его семью. Отделов девять — девять приглушённых
     цветов рядом не различит никто, а четыре семьи различаются легко.
     «Общее» и «Руководство» цвета не имеют вовсе: это не направление работы,
     а «всё остальное», и молчание тут честнее лишнего оттенка.

     Захочется погасить — четыре строки ниже переводятся в оттенки серого,
     остальной код не меняется. */
  --dept-wh:#7a92aa;                   /* склад: логистика, товарный контроль */
  --dept-sale:#6ca684;                 /* продажи */
  --dept-prod:#b2966e;                 /* продукт: продакт, дизайн */
  --dept-promo:#9686ba;                /* продвижение: маркетинг, PR */
  --dept-none:rgba(255,255,255,.34);   /* общее и руководство — без цвета */

  /* осветлённые варианты для текста на собственной подложке */
  --ok-fg:#8fe0b4;
  --warn-fg:#ff9086;
  --amber-fg:#e7c58a;
  --info-fg:rgba(255,255,255,.72);

  /* Производные от сигнальных цветов: рамка и подложка.
     Раньше их собирали руками в каждом файле — rgba(var(--warn-rgb),.3)
     встречалось девять раз в пяти файлах, и достаточно было ошибиться
     в одной цифре, чтобы рамки перестали совпадать. */
  --ok-line:rgba(var(--ok-rgb),.35);
  --ok-bg:rgba(var(--ok-rgb),.10);
  --warn-line:rgba(var(--warn-rgb),.3);
  --warn-bg:rgba(var(--warn-rgb),.10);
  --amber-line:rgba(var(--amber-rgb),.3);
  --amber-bg:rgba(var(--amber-rgb),.08);
  /* Прозрачность рамок взята ровно такой, какой была в коде (.35 / .3 / .3),
     чтобы вынос в токены ничего не сдвинул. Что она у трёх ролей разная —
     это след ручного набора, а не решение; свести к одной величине стоит
     отдельно и осознанно. */

  /* Высота липкой шапки каркаса. Нужна страницам, у которых есть свои
     липкие блоки: без неё они прилипают под шапку и наполовину скрыты. */
  --ac-top-h:64px;

  /* Каркас: панели не примыкают к краям окна, а лежат на нём отдельными
     плитами. Отступ и скругление живут здесь, потому что их держат сразу
     трое — рельс, календарь и полоса вкладок, — и разъехаться им нельзя. */
  --ac-gap:14px;
  --ac-panel-r:28px;

  /* Одна кривая на весь сервис: быстрый выход, мягкое приземление. Была
     переписана числами в сорока местах, и каждое новое движение угадывало
     её заново — расходились и кривая, и длительность. */
  --ease:cubic-bezier(.22,1,.36,1);

  /* лиги и медали — единственное место, где цвет предметный */
  --bronze:#c08a63;
  --silver:#cdd3da;
  --gold:#e8c169;
  --plat:#a9d8e8;
}

/* ── Стекло ────────────────────────────────────────────────────────────────
   За полупрозрачными поверхностями должно быть что размывать, иначе стекло
   выглядит просто серым. Даём фону мягкое свечение — почти незаметное,
   но именно оно создаёт глубину. ─────────────────────────────────────── */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 12% -8%,  rgba(255,255,255,.07),  transparent 60%),
    radial-gradient(50vw 45vh at 92% 6%,   rgba(255,255,255,.045), transparent 62%),
    radial-gradient(70vw 60vh at 50% 108%, rgba(255,255,255,.035), transparent 65%);
}

/* Плёночное зерно — вся съёмка бренда зернистая, и без него стекло выглядит
   стерильно-цифровым.

   🔴 Слой лежит ПОД содержимым (`z-index:-1`), а не поверх страницы. Поверх
   он бы честнее имитировал плёнку, но сервис открывают ради цифр в таблицах,
   и шум по мелкому тексту съедает именно их. Здесь зерно попадает под стекло
   панелей и читается как фактура фона — ровно то, что нужно, и бесплатно
   для читаемости. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.4"/></svg>');
}

/* крупные поверхности размывают фон — как панели в iOS */
.panel, .card, .sheet, .memo, .idcard, form, .giftout, .expl, .warnbox{
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}
/* Мелкие плитки блюр не получают: их много, и на телефоне это дорого.

   `.ac-tile` здесь не украшение, а подпись: раньше в списке стояли `.p`,
   `.st` и `.it`, и общий слой красил всё, что так называется. В каталоге
   `.p` — это цена, и она получала фон карточки и скругление 22 пикселя:
   число сидело в ненужной плашке, похожей на поле ввода. Угадывать по
   двухбуквенным именам нельзя — страница сама говорит, что она плитка. */
.k, .tot, .cell, .s1, .pc, .fcard, .medal, .ac-tile{
  background:var(--card);
  border-color:var(--rule);
}
/* «.cell» на главной — день календаря, а не плитка: пустые дни остаются пустыми */
.calcells .cell.pad{ background:none; border-color:transparent; box-shadow:none }

/* ── Выручка по месяцам ─────────────────────────────────────────────────────
   Это график, а не ряд кнопок. Заливалась вся плитка целиком, и на общей
   ширине двенадцать залитых прямоугольников читались как сегментированный
   переключатель — сужение не помогло, потому что дело было в заливке.
   Теперь закрашена только сама колонка, все они стоят на общей базовой
   линии, а у оси подписаны концы. ─────────────────────────────────────── */
.ymini{
  display:flex; align-items:flex-end; gap:0;
  height:46px; max-width:520px; margin-top:18px;
  border-bottom:1px solid var(--rule2);
}
.ymini .mb{
  flex:1; display:flex; align-items:flex-end; justify-content:center;
  height:100%; background:none; border:0; border-radius:0; min-height:0;
}
.ymini .mb i{
  display:block; width:8px; min-height:2px; border-radius:2px 2px 0 0;
  background:rgba(255,255,255,.34); transition:background .13s;
}
.ymini .mb:hover{ background:none }
.ymini .mb:hover i{ background:var(--fg) }
.ymini .mb.cur{ background:none }
.ymini .mb.cur i{ background:var(--ok) }
/* Ось месяцев: по подписи под каждым столбцом, а не только по краям —
   иначе средние столбцы приходится отсчитывать пальцем от января. */
.ymini-x{
  display:flex; max-width:520px;
  margin-top:6px; font-size:11px; color:rgba(255,255,255,.5);
}
.ymini-x span{ flex:1; text-align:center }
.ymini-x span.on{ color:var(--fg) }

/* Строка-читалка под графиком. Вместо всплывающей подсказки: та не работает
   на телефоне и появляется с задержкой. Здесь по умолчанию стоит полезный
   факт (лучший месяц), а при наведении показывается месяц под курсором —
   место занято всегда, поэтому вёрстка не прыгает. */
.ymini-read{
  max-width:520px; margin-top:8px; font-size:12px; color:var(--muted);
  min-height:1.4em; line-height:1.4;
}
.ymini-read b{ color:var(--fg); font-weight:700; font-variant-numeric:tabular-nums }

/* скругления подтягиваем везде, где страницы задали своё */
.panel, .card, .sheet, .memo, .idcard, form, .expl{ border-radius:var(--r) }
.k, .tot, .cell, .s1, .pc, .medal, .fcard, .giftout, .alert, .notice, .warnbox,
.drop, .addbtn, .addrow, .newbtn{ border-radius:var(--r-sm) }
input, select, textarea, button, .mini, .save, .gobtn, .allbtn, .helpbtn,
.kitbtn, .print-btn, .closebtn{ border-radius:var(--r-sm) }
.chip, .badge, .tag, .kind, .level, .kitlink, .pill{ border-radius:var(--r-pill) }
.tabs{ border-radius:calc(var(--r-sm) + 4px) }
.tabs button{ border-radius:calc(var(--r-sm) - 3px) }

/* Липкая шапка страницы переехала в каркас (см. «Каркас» в конце файла):
   знак, раздел, оповещения и профиль теперь одни на все двадцать страниц,
   а собственные шапки со ссылкой «← На главную» из них удалены. */

/* Затемнение под модалкой тоже стеклянное. Плотность одна на все четыре
   страницы с листами: было .55, .62 и .7 — разная темнота одного и того же
   действия читается как разная важность, хотя окно везде одинаковое. */
.modal{
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  /* Зазор до края экрана. Общий слой скругляет листу все четыре угла, а без
     зазора нижние два упирались в край — скругление читалось как обрезка. */
  padding:12px 12px max(12px, env(safe-area-inset-bottom));
}
@media(min-width:600px){ .modal{ padding:20px } }

/* ── Всплывающее НЕ бывает прозрачным ───────────────────────────────────────
   Меню, панели и подсказки ложатся поверх текста. Полупрозрачная подложка
   здесь означает, что сквозь пункты меню читается содержимое страницы —
   и не читается ничего. Поэтому у них своя плотная основа. ───────────── */
.menu, .notifpanel, .tourTip, .popover, .dropdown{
  background:rgba(16,16,16,.97) !important;
  border:1px solid var(--rule2);
  box-shadow:0 18px 46px rgba(0,0,0,.6);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  border-radius:var(--r-sm);
}
/* модальный лист тоже должен быть плотным — на нём заполняют формы */
.sheet{ background:rgba(17,17,17,.96) }

/* поля ввода на стекле: заметный, но негромкий контур */
/* 🔴 Цвет текста здесь обязателен. Фон мы задаём тёмный, а цвет буквы
   браузер оставляет свой — чёрный. Страница, которая не покрасила поля
   сама, получала чёрное по тёмному: 13.08.2026 Андрей набирал сумму
   выплаты вслепую. Фон без цвета — половина правила, и эта половина молча
   ломает каждую новую форму. */
input, select, textarea{ background:rgba(0,0,0,.28); color:var(--fg) }
input:focus, select:focus, textarea:focus{ background:rgba(0,0,0,.4) }
input::placeholder, textarea::placeholder{ color:var(--faint) }

/* появление страницы: лёгкий подъём вместо резкой вспышки */
@keyframes acEnter { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
.wrap { animation: acEnter .38s cubic-bezier(.22,1,.36,1) both }

/* блоки внутри страницы появляются по очереди — взгляд успевает идти сверху вниз */
@keyframes acRise { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:none } }
.ac-stagger > * { animation: acRise .42s cubic-bezier(.22,1,.36,1) both }
.ac-stagger > *:nth-child(1){ animation-delay:.02s }
.ac-stagger > *:nth-child(2){ animation-delay:.06s }
.ac-stagger > *:nth-child(3){ animation-delay:.10s }
.ac-stagger > *:nth-child(4){ animation-delay:.14s }
.ac-stagger > *:nth-child(5){ animation-delay:.18s }
.ac-stagger > *:nth-child(6){ animation-delay:.22s }

/* карточки чуть приподнимаются — сервис отзывается на касание */
.card, .k, .pc, .b, .medal, .tot, .panel, .ac-tile {
  transition: transform .16s cubic-bezier(.22,1,.36,1), border-color .16s, background .16s;
}
.card:hover, .k:hover, .tot:hover, .ac-tile:hover { transform: translateY(-2px) }

/* кнопки: нажатие ощущается физически */
button, .newbtn, .save, .mini, .chip, .rchip {
  transition: transform .12s cubic-bezier(.22,1,.36,1), background .14s, border-color .14s, color .14s;
}
button:active, .newbtn:active, .save:active, .mini:active, .chip:active { transform: scale(.97) }

/* фирменный знак: Λ едва заметно оживает при наведении */
.brand { transition: letter-spacing .25s cubic-bezier(.22,1,.36,1) }
.brand:hover { letter-spacing: .09em }

/* ссылки «назад» уезжают влево, как будто уже ведут обратно */
.back { transition: transform .16s cubic-bezier(.22,1,.36,1), color .15s; display:inline-block }
.back:hover { transform: translateX(-3px) }

/* строки списков подсвечиваются мягко, без рывка */
.person, .m, .prow, .dayev, .lrow, .row, .sz, .tp { transition: background .14s }

/* полосы прогресса заполняются, а не появляются */
.bar > i, .hbar > i, .mbar > i, .track > i, .ybar > i {
  transition: width .9s cubic-bezier(.22,1,.36,1);
}

/* «скелет» вместо голого слова «Загружаем» */
@keyframes acShimmer { 0%{background-position:-320px 0} 100%{background-position:320px 0} }
.ac-skel {
  height: 14px; border-radius: 7px; margin: 10px 0;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 100%);
  background-size: 320px 100%;
  animation: acShimmer 1.15s linear infinite;
}
.ac-skel.w60 { width:60% } .ac-skel.w40 { width:40% } .ac-skel.tall { height:52px; border-radius:12px }

/* праздник: когда план взят — короткий салют, один раз */
.ac-confetti { position:fixed; inset:0; pointer-events:none; z-index:400; overflow:hidden }
.ac-confetti i {
  position:absolute; top:-14px; width:8px; height:13px; border-radius:2px; opacity:0;
  animation: acFall linear forwards;
}
@keyframes acFall {
  0%   { opacity:0; transform:translateY(-10px) rotate(0) }
  8%   { opacity:1 }
  100% { opacity:0; transform:translateY(105vh) rotate(760deg) }
}

/* Страховка от горизонтального переполнения на телефонах: колонки сеток
   должны уметь сжиматься, иначе таблица распирает всю страницу вбок. */
/* Горизонтальный сдвиг гасим, но hidden делает body скролл-контейнером
   и ломает position:sticky. Там, где браузер умеет clip, берём его. */
html, body { max-width: 100%; overflow-x: hidden }
@supports (overflow-x: clip) { html, body { overflow-x: clip } }
.grid, .kpi, .totals, .st3, .grid2, .grid4, .ngrid, .medals, .cards, .calcells, .caldow, .cells, .rounds {
  min-width: 0;
}
.grid > *, .kpi > *, .totals > *, .grid2 > *, .grid4 > *, .cells > *, .calcells > * { min-width: 0 }
table { max-width: 100% }

/* уважение к тем, кому анимации мешают */
/* Просьба уменьшить движение — это просьба убрать перемещения, а не всю
   обратную связь. Раньше здесь глушилось вообще всё, вместе с подсветкой
   при наведении и проявлением страницы: интерфейс переставал отвечать на
   действия и выглядел сломанным. Теперь выключено то, что двигается, а
   смена цвета, прозрачности и тени остаётся. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-property:opacity, background-color, border-color, color,
      box-shadow, outline-color, fill, stroke !important;
    transition-duration:.13s !important;
  }
  html{ scroll-behavior:auto !important }
  /* появление страницы остаётся — но только проявлением, без подъёма */
  .wrap{ animation:acFade .2s ease both !important }
}
@keyframes acFade { from { opacity:0 } to { opacity:1 } }


/* ── Полировка стекла ───────────────────────────────────────────────────── */

/* свет ложится на верхнюю грань — поверхность читается как объём, а не заливка */
.panel, .card, .sheet, .memo, .idcard, form, .k, .tot, .cell, .s1, .pc, .ac-tile{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

/* наведение чуть добавляет света вместо смены цвета */
.card:hover, .k:hover, .tot:hover, .ac-tile:hover{
  background:rgba(255,255,255,.062);
  border-color:var(--rule2);
}

/* ── Типографика: одинаковая на всех страницах ──────────────────────────── */
h1{ font-size:27px; letter-spacing:-.025em; line-height:1.12 }
.lead{ font-size:14px; line-height:1.5 }
h2{ letter-spacing:.11em }
@media(max-width:520px){ h1{ font-size:24px } }

/* числа везде моноширинные по ширине — колонки не пляшут */
.num, .v, .val, .rval, .amt, .kprice .v{ font-variant-numeric:tabular-nums }

/* фото и превью — те же скругления, что у карточек */
.ph, .shot, .shots img, .avawrap img{ border-radius:calc(var(--r) - 6px) }
.ph{ background:var(--card2) }

/* прогресс-полосы мягче */
.bar, .ybar, .track, .split{ border-radius:var(--r-pill) }
.bar>i, .ybar>i, .track>i, .split i:first-child{ border-radius:var(--r-pill) 0 0 var(--r-pill) }

/* разделители тоньше — на стекле жирная линия выглядит грубо */
.row, .lrow, .dayev, .file, .prow, .payrow, .fcard{ border-bottom-color:rgba(255,255,255,.06) }


/* ── Разрушающие действия ───────────────────────────────────────────────────
   Кнопка «удалить» в покое не красная. Красный — это сигнал, и если им
   подсвечены три крестика на каждом экране, он перестаёт что-либо значить.
   Цвет появляется в момент, когда человек тянется к кнопке. ───────────── */
.xbtn, .rowdel, .del, .mini.warn, .iconb.warn, button.danger{
  color:var(--muted);
  border-color:var(--rule2);
  background:transparent;
}
.xbtn:hover, .rowdel:hover, .del:hover, .mini.warn:hover, .iconb.warn:hover,
button.danger:hover, .xbtn:focus-visible, .del:focus-visible{
  color:var(--warn);
  border-color:rgba(var(--warn-rgb),.45);
  background:rgba(var(--warn-rgb),.1);
}

/* то же для крестиков поверх фотографий */
.shot .ops button.warn{ color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.35) }
.shot .ops button.warn:hover{ color:var(--warn-fg); border-color:rgba(var(--warn-rgb),.6) }


/* ── Главное действие ───────────────────────────────────────────────────────
   «Сохранить», «Войти», «Создать» — двадцать страниц красили эту кнопку
   сплошным цветом. Цвет перебирали трижды за неделю (белый, жёлтый, красный,
   притушенный красный), и каждый раз кнопка оставалась самым громким пятном
   экрана: дело было в заливке, а не в оттенке.

   Теперь кнопка не залита, а СДЕЛАНА ИЗ ЧЕГО-ТО. Графитовая поверхность на
   ступень светлее карточки, светящаяся грань сверху и косой отсвет поперёк —
   как свет, скользнувший по нейлону. Её видно первой на экране, потому что
   она единственный предмет с объёмом, а не потому что она ярче всех.

   Отсвет — `background-image` поверх `background-color`, и это не педантизм:
   если задать фон шорткодом `background`, наведение сотрёт градиент, и
   кнопка на ховере станет плоской.

   Список селекторов длинный по двум причинам. Специфичность должна совпасть
   с правилом страницы или превысить его: `.rowbtn button.primary` весит
   больше, чем просто `button.primary`, и его нужно повторить целиком — иначе
   общий слой проиграет, несмотря на то что подключается последним.

   🔴 И `.save` — не всегда эта кнопка. На kb, tasks и pr класс `.save`
   занят другой парой: сплошная белая заливка с тёмным текстом, самостоятельное
   решение той страницы, доставшееся ей раньше и не про акцент вовсе. Блок
   на голый `.save` перекрасил бы и её — не тот смысл. Поэтому `.save`
   берётся только через `data-section` тех шести страниц, где он
   действительно акцентный: их прошлый вид проверен построчно. */
button.primary, .gobtn, .closebtn, .cbtn, .send, .btn.primary, .addpay button,
.rowbtn button.primary, .acc button.primary, .sheet button.primary, .tourTip button.primary,
body[data-section="batches"] .save, body[data-section="checklist"] .save,
body[data-section="catalog"] .save, body[data-section="work"] .save,
body[data-section="admin"] .save, body[data-section="files"] .save{
  background-color:var(--surface-hi);
  background-image:linear-gradient(108deg, transparent 22%,
    rgba(255,255,255,.06) 44%, rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.045) 57%, transparent 76%);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  box-shadow:var(--edge);
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
/* Наведение поднимает поверхность на ступень, отсвет остаётся на месте. */
button.primary:hover, .gobtn:hover, .closebtn:hover, .cbtn:hover,
.send:hover, .btn.primary:hover, .addpay button:hover,
.rowbtn button.primary:hover, .acc button.primary:hover,
.sheet button.primary:hover, .tourTip button.primary:hover,
body[data-section="batches"] .save:hover, body[data-section="checklist"] .save:hover,
body[data-section="catalog"] .save:hover, body[data-section="work"] .save:hover,
body[data-section="admin"] .save:hover, body[data-section="files"] .save:hover{
  background-color:var(--surface-hi-h);
  border-color:rgba(255,255,255,.26);
  opacity:1;
}


/* ── Выбранное из ряда ──────────────────────────────────────────────────────
   Чипы фильтров, вкладки внутри страницы, отрезки переключателей. Двадцать
   страниц заливали выбранное акцентом целиком, и на экране с четырьмя рядами
   фильтров получалось четыре ярких пятна ради одного смысла — «вот этот».

   Грамматика теперь общая с рельсом: плита светлее соседей, светящаяся
   грань сверху, белая подпись. Ни цвета, ни засечки. Главная кнопка выше
   остаётся заметнее всех за счёт объёма — у неё рамка и косой отсвет,
   которых у чипа нет.

   Правится отсюда, а не в двадцати файлах: общий слой подключается на
   страницах последним, вес селекторов тот же, поэтому побеждает он. ────── */
.chip.on, .pchip.on, .rchip.on, .tabs button.on, .seg button.on{
  background:rgba(var(--accent-rgb),.10);
  border-color:rgba(var(--accent-rgb),.20);
  color:#fff;
  box-shadow:var(--edge);
}
/* Наведение на невыбранный чип светлеет нейтрально, а не примеряет цвет
   заранее: иначе «выбрано» и «мышь пролетела мимо» выглядят одинаково.

   🔴 Ловушка: `.chip` в календаре — это НЕ фильтр, а подпись события внутри
   клетки дня, обычный <span> без роли. Правило `.chip:hover` рисовало бы под
   каждой строкой события светлую плашку, и сетка месяца покрывалась ложными
   чипами. Поэтому наведение достаётся только тому, что и правда нажимают:
   кнопке, ссылке или элементу с ролью (фильтры на четырёх страницах —
   `<span class="chip" role="radio">`, тоже настоящие). */
:is(.chip, .pchip, .rchip)[role]:hover:not(.on),
button:is(.chip, .pchip, .rchip):hover:not(.on),
a:is(.chip, .pchip, .rchip):hover:not(.on){
  /* наведение остаётся нейтральным: цвет — только у выбранного */
  background:rgba(255,255,255,.07);
  border-color:var(--rule2);
  color:var(--fg);
}

/* Крупные контейнеры — плиты, как рельс: под ними мягкая тень, только тише.
   Мелким карточкам её не даём: их на экране бывает по двадцать, и двадцать
   теней превращают страницу в кашу. Им хватает света на верхней грани. */
.panel, .idcard{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 14px 34px rgba(0,0,0,.22);
}
/* Лист выезжает то снизу, то из центра, поэтому тень без смещения: она
   одинаково честна в обоих положениях. */
.sheet{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 64px rgba(0,0,0,.55);
}

/* 🔴 На доске задач `.sheet` — это НЕ лист, а затемнение во весь экран;
   сама карточка внутри называется `.sheet-in`. Общий слой красил затемнение
   как плиту: `background:rgba(17,17,17,.96)` во весь экран — и доска за ним
   пропадала совсем, вместо того чтобы просматриваться сквозь тёмное стекло.

   Отличаем по содержимому, а не по странице: у затемнения внутри лежит
   `.sheet-in`, у настоящего листа — нет. Браузер без `:has()` просто не
   применит правило и получит сегодняшнее поведение, хуже не станет. */
.sheet:has(> .sheet-in){
  background:rgba(0,0,0,.55);
  border-radius:0;
  box-shadow:none;
}
/* …а плитой становится карточка внутри, как ей и положено. */
.sheet-in{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 24px 60px rgba(0,0,0,.5);
}

/* Поле в фокусе греется, а не белеет: «ты сейчас здесь» во всём сервисе
   говорит акцент, и у курсора в поле смысл ровно тот же.

   Список длинный не от лени, а от веса селекторов. Восемь страниц пишут
   `.search:focus`, ещё девять мест — `.frow input:focus`, `.acc input:focus`,
   `td input:focus`: это два класса против элемента с псевдоклассом, вес выше,
   и одним `input:focus` их не перебить. Отсюда вариант через `body.ac-framed`
   — он тяжелее любого из них, а общий слой подключается последним, поэтому
   при равном весе выигрывает всё равно он. Строка без `body` нужна страницам
   без каркаса: вход, восстановление пароля, знакомство. */
input:focus, select:focus, textarea:focus,
.search:focus, input.f:focus,
body.ac-framed input:focus,
body.ac-framed select:focus,
body.ac-framed textarea:focus{ border-color:rgba(var(--accent-rgb),.62) }


/* ── Мелочи, которые видны всегда ──────────────────────────────────────────
   Полосы прокрутки, выделение текста и кольцо фокуса рисует браузер, и по
   умолчанию он рисует их из другого интерфейса: серая плашка справа, синее
   выделение, синяя рамка. На тёмном стекле это единственные три места, где
   было видно, что сервис собран не целиком. ────────────────────────────── */

/* 🔴 Кнопка не наследует цвет текста: браузер ставит ей свой `buttontext`,
   а он на тёмной теме почти чёрный. Пока у кнопки есть своё правило с
   цветом — не видно; как только страница делает кнопкой целый блок и цвет
   задаёт только вложенным элементам, надпись на ней чернеет. Именно так
   пропали числа в сетке месяца: клетка дня — это <button>.

   `:where()` держит вес нулевым, поэтому любое правило страницы сильнее —
   правило чинит только те кнопки, которым цвет не задали вовсе. */
:where(button){ color:inherit }

*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent }
::-webkit-scrollbar{ width:11px; height:11px }
::-webkit-scrollbar-track{ background:transparent }
/* Прозрачная рамка вместо поля: так «палец» получается тоньше жёлоба и не
   прилипает к краю, а `background-clip` не даёт заливке залезть под неё. */
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14); background-clip:content-box;
  border:3px solid transparent; border-radius:8px;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.28); background-clip:content-box }
::-webkit-scrollbar-corner{ background:transparent }

::selection{ background:rgba(255,255,255,.22); color:#fff }

/* Кольцо фокуса одинаковое везде. `:where()` держит вес нулевым: там, где у
   компонента правило своё, оно по-прежнему главнее — правило ниже только
   закрывает дыры, а не спорит с уже написанным. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid rgba(255,255,255,.85);
  outline-offset:2px;
}


/* ═══ Каркас ════════════════════════════════════════════════════════════════
   Три постоянные зоны: рельс разделов, содержимое, календарь команды.
   Перерисовывается только середина — рельс и шапка одни на все страницы.

   Форм навигации ровно две, и обе полноценные:
     ≥ 900px  — боковой рельс с подписями;
     < 900px  — нижняя панель вкладок.
   Промежуточной «иконочной» формы нет: иконочного языка у сервиса нет,
   а подписи короткие. Работу «где я» делает залитая пилюля. ─────────────── */

body.ac-framed{ padding:0 }
body.ac-locked{ overflow:hidden }

/* 🔴 На широком экране прокручивается СЕРЕДИНА, а не страница целиком.
   Раньше шапка «липла» к верху обычной прокрутки, и содержимое проезжало
   под ней. Пока шапка была прямоугольной во всю ширину, это не мешало —
   но у плиты со скруглением и полем сверху содержимое лезло бы в зазор
   между ней и краем окна, и каркас разваливался бы на глазах.

   Поэтому каркас работает как окно приложения: оболочка ростом ровно в
   экран, рельс, шапка и календарь стоят намертво, у содержимого своя
   прокрутка. Заодно исчезла причина, по которой страницам приходилось
   вычитать `--ac-top-h` из своих липких блоков.

   На телефоне остаётся обычная прокрутка страницы: там рельс — выдвижная
   панель, а внутренний скролл ломает и прятание адресной строки в браузере,
   и подтягивание страницы для обновления. */
/* 🔴 Ширина колонки рельса живёт в переменной, и это единственный способ
   сделать сворачивание плавным. Напрашивалось анимировать сам
   `grid-template-columns`, но по спецификации он интерполируется, только
   если дорожки — чистые длины; у нас вторая это `minmax(0,1fr)`, и браузер
   молча переключает значение рывком, даже не начиная переход (проверено:
   события `transitionrun` не приходят вовсе).

   Зарегистрированная через `@property` переменная-длина анимируется честно,
   а сетка просто читает её. Браузер без поддержки `@property` получит
   мгновенное переключение — ровно прежнее поведение, ничего не сломается. */
@property --rail-w{ syntax:"<length>"; inherits:true; initial-value:258px }

body{ --rail-w:258px }
body.ac-framed{ transition:--rail-w .34s var(--ease) }
body.ac-rail-off{ --rail-w:0px }

.ac-shell{
  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr);
  min-height:100dvh;
}
@media(min-width:900px){
  .ac-shell{ height:100dvh; min-height:0; overflow:hidden }
}
@media(min-width:1280px){ .ac-shell{ grid-template-columns:var(--rail-w) minmax(0,1fr) 344px } }

/* ── Рельс ───────────────────────────────────────────────────────────────────
   Рельс не примыкает к краю окна, а лежит на нём отдельной плитой: стекло,
   тонкая светлая рамка, мягкая тень под ней. Смысл не в украшении — так
   видно, что навигация это не часть страницы, а слой над ней, и содержимое
   уезжает под неё, а не упирается в стену.

   Плита сидит в колонке сетки на своих полях, а не `position:fixed`: тогда
   сворачивание рельса остаётся одной сменой `grid-template-columns`, и
   ничего не всплывает поверх содержимого. ──────────────────────────────── */

.ac-rail{
  position:sticky; top:var(--ac-gap); align-self:start;
  /* Своё box-sizing, а не надежда на сброс страницы: с полем внутри и высотой
     от экрана рельс иначе оказывается выше экрана ровно на свои отступы. */
  box-sizing:border-box;
  height:calc(100dvh - var(--ac-gap)*2);
  margin:var(--ac-gap) 0 var(--ac-gap) var(--ac-gap);
  overflow:hidden;
  display:flex; flex-direction:column;
  padding:0 10px max(12px,env(safe-area-inset-bottom));
  background-color:rgba(255,255,255,.038);
  /* Сетка рипстопа — ткань их же курток; на пределе видимости, но плита
     перестаёт быть плоским прямоугольником стекла. */
  background-image:var(--ripstop);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--ac-panel-r);
  box-shadow:0 24px 56px rgba(0,0,0,.42), var(--edge);
  backdrop-filter:blur(30px) saturate(140%);
  -webkit-backdrop-filter:blur(30px) saturate(140%);
}
/* Шапка рельса ростом с шапку страницы: логотип слева стоит на одной линии
   с названием раздела справа, и верх экрана читается одной строкой. */
.ac-rail-head{ display:flex; align-items:center; gap:10px; flex:none;
  height:62px; padding:0 6px; margin:0 0 8px; border-bottom:1px solid var(--rule) }
.ac-logo{
  width:28px; height:28px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; line-height:1; color:#fff;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  border-radius:9px; box-shadow:var(--edge);
}
.ac-mark{ flex:1; min-width:0; display:flex; align-items:center; gap:9px;
  font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg) }
.ac-collapse{
  font-family:inherit; font-size:15px; line-height:1; width:30px; height:30px; flex:none;
  color:rgba(255,255,255,.55); background:transparent; border:1px solid transparent;
  border-radius:9px; cursor:pointer; transition:color .18s, background .18s;
}
.ac-collapse:hover{ color:var(--fg); background:rgba(255,255,255,.06) }

/* Прокручивается только список разделов: «Пульт» и «Выйти» прижаты к низу
   и не должны уезжать под срез у того, кто видит все шестнадцать пунктов. */
.ac-nav{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; margin:0 -4px; padding:0 4px }
.ac-grp + .ac-grp{ margin-top:3px }
/* «Главная» закреплена сверху отдельно от групп: подписи над ней нет,
   и отступ до первой группы больше — это корень, а не раздел. */
.ac-pin + .ac-grp{ margin-top:10px }

.ac-grp-h{ display:flex; align-items:center; gap:4px; margin:0 }
/* Строка группы ростом и формой такая же, как пункт: рельс читается одним
   столбцом одинаковых строк, а не подписями и списками под ними. Отличают
   её значок слева, стрелка справа и приглушённый цвет. Кнопкой она стала,
   когда Андрей попросил уметь скрывать подпункты, оставляя сам раздел. */
.ac-grp-t{
  flex:1; min-width:0; display:flex; align-items:center; gap:11px;
  min-height:42px; padding:0 11px;
  font-family:inherit; font-size:14px; font-weight:500; letter-spacing:0;
  text-transform:none; text-align:left;
  color:rgba(255,255,255,.74); background:transparent; border:0;
  border-radius:12px; cursor:pointer;
  transition:color .18s, background .18s;
}
.ac-grp-n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ac-grp-t:hover{ color:var(--fg); background:rgba(255,255,255,.05) }
.ac-grp-t:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:2px }
/* Стрелка разворачивается на пол-оборота, а не прыгает на новое место:
   сам поворот и есть сообщение о том, что случилось со списком под ней. */
.ac-chev{
  width:15px; height:15px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.45; transform:rotate(-180deg);
  transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .18s;
}
.ac-grp-t:hover .ac-chev{ opacity:.8 }
.ac-grp.shut .ac-chev{ transform:none }
.ac-grp-t:hover .ac-ico{ opacity:.85 }
/* Свёрнутая группа, внутри которой открытая страница, не должна терять
   «ты здесь»: строка раздела забирает подсветку себе. */
.ac-grp.shut.has-on .ac-grp-t{ color:var(--fg) }
.ac-grp.shut.has-on .ac-grp-t .ac-ico{ opacity:1; color:#fff }
.ac-grp.shut.has-on .ac-grp-t{ background:rgba(var(--accent-rgb),.07) }

/* Сворачивание плавное, а не рывком: `0fr → 1fr` по строке сетки схлопывает
   ровно на высоту содержимого, без магических max-height, которые всегда
   либо режут длинный список, либо тормозят короткий.

   🔴 Переход играет, только если класс `shut` переключают на месте. Раньше
   обработчик перерисовывал рельс целиком — новый узел рождался уже свёрнутым,
   стартовать переходу было не с чего, и список складывался рывком. */
.ac-grp-b{ display:grid; grid-template-rows:1fr;
  transition:grid-template-rows .34s cubic-bezier(.22,1,.36,1) }
.ac-grp-b > div{ overflow:hidden; min-height:0;
  opacity:1; transition:opacity .26s ease .08s }
.ac-grp.shut .ac-grp-b{ grid-template-rows:0fr }
.ac-grp.shut .ac-grp-b > div{ opacity:0; transition-delay:0s }

/* Линия-связь у группы: пункты висят на ней, как ветки. Без неё восемнадцать
   строк — сплошной столбец, и глазу негде отделить «Склад» от «Продакта».
   Линия живёт на внутреннем блоке, поэтому при сворачивании исчезает вместе
   с высотой — отдельно гасить нечего. «Главная» закреплена вне групп и линии
   не получает: она сама себе корень.

   Отступ подобран так, чтобы линия шла ровно под значком группы: подпункт
   виден продолжением своего раздела, а не соседней строкой. */
.ac-grp:not(.ac-pin) .ac-grp-b > div{
  margin:1px 0 5px 19px; padding-left:12px; border-left:1px solid var(--rule);
}

/* Порядок разделов — только в режиме «Настроить»: стрелки у каждой группы
   постоянно висели бы шумом ради действия, которое делают раз в жизни. */
.ac-ord{ display:flex; gap:2px; flex:none }
.ac-ord button{
  font-family:inherit; font-size:11px; line-height:1; width:20px; height:20px;
  color:rgba(255,255,255,.55); background:transparent;
  border:1px solid var(--rule); border-radius:5px; cursor:pointer;
  transition:color .13s, border-color .13s;
}
.ac-ord button:hover:not([disabled]){ color:var(--fg); border-color:var(--rule2) }
.ac-ord button[disabled]{ opacity:.3; cursor:default }
body.ac-tuning .ac-grp:not(.ac-pin){ outline:1px dashed var(--rule); outline-offset:3px;
  border-radius:14px }
.ac-item{
  position:relative;
  display:flex; align-items:center; gap:11px;
  width:100%; min-height:40px; padding:0 11px; margin:1px 0;
  font-family:inherit; font-size:13.5px; font-weight:500; text-align:left;
  color:rgba(255,255,255,.76); background:transparent; border:0;
  border-radius:12px; cursor:pointer;
  transition:background .18s, color .18s;
}
/* Значок раздела. Заливки нет, цвет берётся от текста. Приглушён: он
   помогает найти строку, а не спорит с ней за внимание. */
.ac-ico{
  width:16px; height:16px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.6; transition:opacity .18s, color .18s;
}
.ac-item:hover .ac-ico{ opacity:.85 }
/* Значок на выбранном белеет, а не краснеет: он лежит на красноватой плите,
   и красным по красному силуэт пропадает. Цвет несёт подложка и засечка. */
.ac-item.on .ac-ico{ opacity:1; color:#fff }
.ac-item-n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ac-item-c{ font-size:11.5px; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.5) }
.ac-item:hover{ background:rgba(255,255,255,.05); color:var(--fg) }

/* «Ты здесь» — поднятая плита, а не цветная строка.

   Отличают её от наведения три вещи разом: подложка вдвое плотнее (.10
   против .05), светящаяся грань сверху и белый значок вместо приглушённого.
   Наведение не рисует ни грани, ни белого значка, поэтому спутать нельзя.

   🔴 Здесь была цветная засечка 3px на левом краю. Убрана намеренно:
   вертикальная цветная полоса у пункта списка — самый заезженный приём
   тёмных панелей, его же вычищали из семи других мест сервиса. Грань
   говорит то же самое и звучит как материал, а не как маркер. */
.ac-item.on{
  background:rgba(var(--accent-rgb),.10);
  color:#fff; font-weight:600;
  box-shadow:var(--edge);
}
.ac-item.on .ac-item-c{ color:rgba(255,255,255,.62) }
.ac-item:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:2px }

/* Шестнадцать разделов (столько видит руководство) не всегда влезают в
   невысокое окно. Тень над нижней границей показывает, что список ещё
   продолжается: раньше последний пункт просто исчезал без следа. */
.ac-rail-foot{ position:relative; flex:none; padding-top:10px; margin-top:10px;
  border-top:1px solid var(--rule) }
/* Затемнением на стекле мазать нельзя — вышло бы серое пятно поперёк плиты.
   Список уходит в прозрачность своей же маской: ровно тот же сигнал, но
   сквозь него по-прежнему виден фон. */
.ac-nav{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}
.ac-item.ac-quiet{ color:rgba(255,255,255,.58); font-size:13px; min-height:38px }
.ac-item.ac-quiet:hover{ color:var(--fg) }

/* Свёрнутый рельс уезжает целиком — это выбор про ширину содержимого,
   а не подмена подписей значками. Вернуть его — кнопкой «≡» в шапке.

   Уезжает ПЛАВНО, той же кривой, что складываются разделы внутри него:
   раньше панель исчезала рывком, и на фоне мягкого каркаса это выглядело
   как сбой. Едет ширина колонки сетки — `grid-template-columns`
   анимируется, — а сама плита одновременно отъезжает влево и тает.

   🔴 Колонку теперь именно ОБНУЛЯЕМ, а не убираем, и это важно. Прошлая
   версия ставила рельсу `display:none`: элемент выпадал из сетки, и, если
   оставить под него нулевую колонку, все остальные съезжали на позицию —
   календарь вставал на место содержимого, содержимому доставалось 44px.
   Здесь рельс из сетки не выпадает, колонок по-прежнему три, поэтому
   съезжать нечему. `visibility` в конце перехода убирает его из
   клавиатурного обхода: невидимая панель не должна ловить табы. */
.ac-rail{
  transition:margin-left .34s var(--ease), opacity .2s var(--ease),
             transform .34s var(--ease), visibility 0s linear 0s;
}
body.ac-rail-off .ac-rail{
  margin-left:0; opacity:0; transform:translateX(-18px);
  visibility:hidden; transition-delay:0s, 0s, 0s, .34s;
  pointer-events:none;
}

/* ── Шапка ───────────────────────────────────────────────────────────────── */

.ac-main{ min-width:0; min-height:0; display:flex; flex-direction:column }
/* Шапка — такая же плита, как рельс и календарь: свои поля, тот же радиус,
   та же светящаяся грань. Раньше она была прямоугольником во всю ширину и
   упиралась в рельс — единственный прямой угол в каркасе из скруглённых
   плит, и глаз цеплялся именно за него.

   Черты под ней больше нет вовсе: у отдельной плиты граница уже есть —
   это её собственный край. */
.ac-top{
  /* Телефон: обычная липкая полоса во всю ширину. Плита со скруглением там
     не нужна — рядом нет рельса, об который она упиралась бы углом, зато
     полоса честно примыкает к браузерной строке. */
  position:sticky; top:0; z-index:60; flex:none;
  display:flex; align-items:center; gap:12px;
  height:var(--ac-top-h); box-sizing:border-box;
  padding:0 18px;
  background:rgba(7,7,7,.62);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
}
/* Волосок нужен только плоской полосе: у плиты граница уже есть — её край. */
.ac-top::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.11) 14%,
    rgba(255,255,255,.11) 86%, transparent);
}
@media(min-width:900px){
  .ac-top{
    position:relative; top:auto;
    margin:var(--ac-gap) var(--ac-gap) 0;
    padding:0 20px;
    background-color:rgba(255,255,255,.038);
    background-image:var(--ripstop);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--ac-panel-r);
    box-shadow:0 18px 40px rgba(0,0,0,.34), var(--edge);
    backdrop-filter:blur(30px) saturate(140%);
    -webkit-backdrop-filter:blur(30px) saturate(140%);
  }
  .ac-top::after{ display:none }
}
.ac-sect{ flex:1; min-width:0; font-size:14.5px; font-weight:700; letter-spacing:-.01em;
  color:rgba(255,255,255,.92); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ac-top-r{ position:relative; display:flex; align-items:center; gap:8px; flex:none }

.ac-open{
  display:none; flex:none; width:40px; height:40px; line-height:1;
  font-family:inherit; font-size:17px; color:var(--fg);
  background:var(--card); border:1px solid var(--rule2); border-radius:var(--r-sm); cursor:pointer;
}
body.ac-rail-off .ac-open{ display:block }
.ac-open:hover{ border-color:var(--fg) }

/* Кнопки шапки — из того же стекла, что плиты: заливка светлеет при
   наведении, а не обводка вспыхивает белым. Движение мягче. */
.ac-bell{
  position:relative; width:38px; height:38px; flex:none; line-height:1; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  border-radius:50%; cursor:pointer;
  transition:background .18s, border-color .18s;
}
.ac-bell:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18) }
/* Счётчик непрочитанного — единственное место каркаса, где сплошная светлая
   заливка уместна: он размером с ноготь и должен ловить взгляд издалека.
   Светлый на тёмном, а не цветной: цвет в этом интерфейсе занят данными. */
.ac-badge{
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-fg); border-radius:9px;
  font-size:11px; font-weight:800; font-variant-numeric:tabular-nums;
}
.ac-who{ display:flex; align-items:center; gap:9px; padding:5px 13px 5px 5px; flex:none;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-pill); transition:background .18s, border-color .18s }
.ac-who:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18) }
.ac-ava{ width:28px; height:28px; flex:none; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-fg); font-weight:800; font-size:12px }
.ac-ava img{ width:100%; height:100%; object-fit:cover }
.ac-who-t{ font-size:13px; line-height:1.2 }
.ac-who-t small{ display:block; font-size:11px; color:rgba(255,255,255,.58) }

.ac-content{ display:block; flex:1; padding:18px 22px 44px }
@media(min-width:900px){
  /* Своя прокрутка вместо общей страничной — из-за этого содержимое никогда
     не проезжает под шапкой и не лезет в зазор над ней.

     Поля по бокам равны полю плит: карточки внутри встают ровно по краям
     шапки сверху, и три зоны читаются одной сеткой, а не случайно
     положенными друг рядом с другом кусками. */
  .ac-content{
    min-height:0; overflow:auto; overscroll-behavior:contain;
    padding:var(--ac-gap) var(--ac-gap) 40px;
  }
}

/* Ссылка «к содержимому»: не занимает места, пока её не выбрали табом. */
.ac-skip{
  position:fixed; top:10px; left:10px; z-index:200;
  transform:translateY(-160%); transition:transform .15s;
  background:var(--card2); border:1px solid var(--rule2); border-radius:var(--r-sm);
  padding:10px 14px; font-size:13.5px; font-weight:700; color:var(--fg); text-decoration:none;
}
.ac-skip:focus{ transform:none }

/* ── Оповещения ──────────────────────────────────────────────────────────── */

.ac-notif{ display:none; position:absolute; top:calc(100% + 10px); right:0; z-index:70;
  width:min(340px,calc(100vw - 32px)); max-height:min(70vh,520px); overflow:auto; padding:6px }
.ac-notif.open{ display:block }
.ac-notif-h{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px 7px; font-size:14px }
.ac-notif-h button{ font-family:inherit; font-size:12px; color:rgba(255,255,255,.58);
  background:none; border:none; cursor:pointer }
.ac-notif-h button:hover{ color:var(--fg) }
.ac-n{ padding:10px 11px; border-radius:9px; border-top:1px solid var(--rule) }
.ac-n.unread{ background:var(--hover) }
/* Оповещение с адресом — ссылка: по нему видно, что нажать можно, и куда. */
.ac-n.go{ display:block; color:inherit; text-decoration:none; cursor:pointer }
.ac-n.go:hover{ background:var(--hover) }
.ac-n.go:focus-visible{ outline:2px solid var(--fg); outline-offset:-2px }
.ac-n-t{ font-size:13.5px; font-weight:600 }
.ac-n-x{ font-size:13px; color:rgba(255,255,255,.62); margin-top:3px; white-space:pre-line }
.ac-n-w{ font-size:11px; color:rgba(255,255,255,.52); margin-top:5px }
.ac-n-none{ padding:15px 11px; font-size:13px; color:rgba(255,255,255,.58) }

/* ── Календарь команды ───────────────────────────────────────────────────── */

.ac-day{
  position:fixed; z-index:130;
  top:var(--ac-gap); right:var(--ac-gap); bottom:var(--ac-gap);
  box-sizing:border-box;
  width:min(340px,calc(100vw - var(--ac-gap)*2)); display:flex; flex-direction:column;
  background-color:rgba(16,16,16,.92);
  background-image:var(--ripstop);      /* та же ткань, что у рельса */
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--ac-panel-r);
  box-shadow:0 24px 56px rgba(0,0,0,.5), var(--edge);
  /* Уезжает за край вместе со своим полем, иначе в закрытом виде из-за
     правого края торчала бы полоска в четырнадцать пикселей. */
  transform:translateX(calc(100% + var(--ac-gap)));
  transition:transform .34s cubic-bezier(.22,1,.36,1);
  backdrop-filter:blur(30px) saturate(140%);
  -webkit-backdrop-filter:blur(30px) saturate(140%);
}
.ac-day.open{ transform:none }
@media(min-width:1280px){
  /* На широком экране календарь не выезжает, а просто есть — но теперь только
     если его позвали. Раньше он занимал треть окна у всех и всегда, а нужен
     раз в день (пункт 10 Андрея от 04.08.2026). Крестик здесь тоже нужен:
     закрыть то, что открыл, должно быть можно на месте.

     Здесь он такая же плита, как рельс: та же рамка, тот же радиус, те же
     поля. Две панели по краям держат содержимое между собой. */
  .ac-day{ position:sticky; align-self:start; width:auto;
    top:var(--ac-gap); right:auto; bottom:auto;
    height:calc(100dvh - var(--ac-gap)*2);
    margin:var(--ac-gap) var(--ac-gap) var(--ac-gap) 0;
    transform:none;
    background:rgba(255,255,255,.03);
    box-shadow:0 24px 56px rgba(0,0,0,.32);
  }
  /* Ширину рельса по-прежнему держит переменная — здесь меняется только
     число колонок, когда календарь убран. */
  body.ac-day-off .ac-shell{ grid-template-columns:var(--rail-w) minmax(0,1fr) }
  body.ac-day-off .ac-day{ display:none }
}
/* Кнопка календаря в шапке нужна там, где нет нижних вкладок: на телефоне
   вход в него уже есть, и вторая кнопка только теснила бы имя человека. */
.ac-daybtn{ display:none }
@media(min-width:900px){ .ac-daybtn{ display:inline-flex } }
.ac-day-head{ display:flex; align-items:center; gap:10px; flex:none;
  padding:14px 16px 12px; border-bottom:1px solid var(--rule) }
.ac-day-t{ flex:1; font-size:13px; font-weight:700; letter-spacing:.02em }
.ac-seg{ display:flex; gap:3px; padding:3px; background:var(--card2); border-radius:11px }
.ac-seg button{ font-family:inherit; font-size:11.5px; font-weight:600; padding:5px 9px;
  color:rgba(255,255,255,.62); background:transparent; border:0; border-radius:8px; cursor:pointer }
/* Выбранный отрезок — плита с оттенком, как активный пункт рельса. Чип со
   сплошной заливкой был бы самым ярким пятном экрана ради выбора между
   «сегодня» и «на неделе». */
.ac-seg button.on{ background:rgba(var(--accent-rgb),.11); color:#fff; box-shadow:var(--edge) }
.ac-day-x{ width:30px; height:30px; flex:none; font-size:19px; line-height:1;
  color:rgba(255,255,255,.6); background:transparent; border:1px solid transparent;
  border-radius:8px; cursor:pointer }
.ac-day-x:hover{ color:var(--fg); border-color:var(--rule2) }
.ac-day-body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 14px 8px }
/* Создание события прижато к низу панели: раньше единственным входом в
   форму был клик по дню в сетке месяца, а сетка ушла с главной. */
.ac-day-foot{ flex:none; padding:10px 14px max(14px,env(safe-area-inset-bottom));
  border-top:1px solid var(--rule) }
.ac-day-add{ width:100%; font-family:inherit; font-size:13.5px; font-weight:700;
  color:var(--fg); background:transparent; border:1px solid var(--rule2);
  border-radius:var(--r-sm); padding:11px; cursor:pointer; transition:border-color .14s, background .14s }
.ac-day-add:hover{ border-color:var(--fg); background:rgba(255,255,255,.05) }
.ac-day-add:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:2px }
.ac-day-sub{ font-size:12px; color:rgba(255,255,255,.58); margin:0 4px 12px; text-transform:lowercase }
.ac-day-msg{ font-size:13px; color:rgba(255,255,255,.58); padding:14px 4px; line-height:1.55 }
.ac-retry{ font-family:inherit; font-size:12.5px; font-weight:600; color:var(--fg);
  background:transparent; border:1px solid var(--rule2); border-radius:9px;
  padding:6px 11px; margin-top:9px; cursor:pointer; display:block }
.ac-retry:hover{ border-color:var(--fg) }

/* События без времени — их у нас много (приход партии, оплата фабрике) —
   на линию времени не встают: им блок сверху. */
.ac-allday{ margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--rule) }
.ac-allday-t{ font-size:11px; color:rgba(255,255,255,.52); margin:0 4px 6px }

.ac-line{ list-style:none; margin:0; padding:0 }
.ac-slot{ display:flex; align-items:flex-start; gap:9px; padding:1px 0 }
/* Конец события — второй строкой и тише: «во сколько» читают всегда,
   «до скольки» — только когда прикидывают, что влезет следом. */
.ac-slot-t i{ display:block; font-style:normal; font-weight:600; font-size:10.5px;
  color:rgba(255,255,255,.34) }
.ac-slot-t{ flex:none; width:42px; padding-top:9px; font-size:11.5px; font-weight:700;
  font-variant-numeric:tabular-nums; color:rgba(255,255,255,.58) }
/* Линия текущего времени — единственная разметка на шкале, поэтому тонкая. */
.ac-now{ display:flex; align-items:center; gap:8px; margin:5px 0 5px 51px; }
.ac-now::after{ content:''; flex:1; height:1px; background:var(--ok); opacity:.55 }
.ac-now span{ font-size:10.5px; font-weight:700; color:var(--ok);
  font-variant-numeric:tabular-nums; letter-spacing:.02em }
.ac-now.past{ opacity:.5 }

.ac-ev{ flex:1; min-width:0; display:flex; align-items:flex-start; gap:8px;
  padding:8px 9px; font-family:inherit; text-align:left;
  background:transparent; border:0; border-radius:var(--r-sm); cursor:pointer;
  transition:background .13s }
.ac-ev:hover{ background:rgba(255,255,255,.06) }
.ac-ev:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:1px }
.ac-ev .ac-dot{ width:6px; height:6px; flex:none; margin-top:6px; border-radius:50% }
/* Цвет семьи отделов. Класс приходит с сервера полем group — справочник
   отделов один, и раскладывать его по семьям в трёх файлах значило бы три
   места для ошибки. Пустой group — «Общее» и «Руководство», им нейтральный.
   Одни и те же классы служат и точке в списке, и полосе события на шкале:
   один цвет обязан означать одно и то же на всех экранах. */
.g-wh{ --c:var(--dept-wh) }       .g-sale{ --c:var(--dept-sale) }
.g-prod{ --c:var(--dept-prod) }   .g-promo{ --c:var(--dept-promo) }
.ac-dot{ background:var(--c,var(--dept-none)) }
/* Срок задачи в панели — не событие, и путать их нельзя даже мельком: у
   события точка залита, у задачи квадратик пустой. Тот же приём, что в
   календаре на /calendar: один знак означает одно и то же на всех экранах. */
.ac-ev.ac-task .ac-dot{ border-radius:2px; background:none;
  box-shadow:inset 0 0 0 1.5px var(--c,var(--dept-none)) }
.ac-ev.late .ac-dot{ box-shadow:inset 0 0 0 1.5px var(--warn-fg) }
.ac-ev.late .ac-ev-t{ color:var(--warn-fg) }
.ac-ev-b{ flex:1; min-width:0 }
.ac-ev-t{ display:block; font-size:13.5px; color:var(--fg); line-height:1.35 }
.ac-ev-w{ display:block; font-size:11.5px; color:rgba(255,255,255,.58); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ac-ev-d{ flex:none; font-size:11px; color:rgba(255,255,255,.52); padding-top:2px }

.ac-scrim{ position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px) }

/* ── Нижние вкладки ──────────────────────────────────────────────────────── */

.ac-tabs{ display:none }

@media(max-width:899px){
  .ac-shell{ display:block }
  /* Рельс становится выдвижной панелью — но не единственным путём: всё, что
     в нём есть, доступно и вкладками снизу. */
  /* 🔴 Здесь стояло height:auto — и разделы пропадали с телефона.
     У элемента с position:fixed высота auto отменяет растяжение между top и
     bottom: панель становится ростом с содержимое. Дальше `.ac-nav{flex:1}`
     внутри контейнера без заданной высоты в Safari схлопывается в ноль — от
     всего рельса остаются шапка и подвал, а разделов не видно вовсе.
     Высота должна быть от экрана: тогда список занимает остаток и прокручивается,
     а «Выйти» остаётся внизу. */
  .ac-rail{ position:fixed; z-index:130;
    top:10px; left:10px; bottom:10px; margin:0;
    width:min(286px,86vw); height:calc(100dvh - 20px);
    border:1px solid rgba(255,255,255,.09); border-radius:26px;
    background:rgba(16,16,16,.94);
    /* Уезжает вместе со своим полем — иначе слева торчала бы полоска. */
    transform:translateX(calc(-100% - 14px));
    transition:transform .34s cubic-bezier(.22,1,.36,1) }
  .ac-rail.open{ transform:none }
  /* 🔴 `ac-rail-off` — это выбор, сделанный на компьютере, и он хранится в
     localStorage вместе с человеком. На телефоне сворачивать нечего: рельс
     тут выдвижная панель, и всё, чем он спрятан на широком экране —
     прозрачность, сдвиг, `visibility` — должно быть снято, иначе панель
     просто не откроется. Раньше хватало вернуть `display`, потому что
     прятал её только он. */
  body.ac-rail-off .ac-rail{
    display:flex; opacity:1; visibility:visible; margin:0;
    transform:translateX(calc(-100% - 14px)); pointer-events:auto;
  }
  body.ac-rail-off .ac-rail.open{ transform:none }
  .ac-collapse{ display:none }
  /* в выдвижном рельсе пункт — это касание, а не наведение курсором */
  .ac-item, .ac-grp-t{ min-height:46px }
  .ac-open{ display:block; width:44px; height:44px }
  .ac-bell{ width:44px; height:44px }
  .ac-top{ height:var(--ac-top-h); padding:0 14px; gap:9px }
  :root{ --ac-top-h:58px }
  .ac-who-t{ display:none }
  .ac-who{ padding:5px }
  .ac-content{ padding:14px 15px calc(88px + env(safe-area-inset-bottom)) }

  /* Полоса вкладок парит над содержимым, а не приклеена к краю: между ней и
     низом экрана видно, что страница продолжается под ней, и на телефонах с
     жестовой полосой не спорит с системной чертой. */
  .ac-tabs{
    position:fixed; z-index:80;
    left:10px; right:10px; bottom:max(10px, env(safe-area-inset-bottom));
    display:flex; gap:2px; padding:5px;
    background:rgba(14,14,14,.78);
    border:1px solid rgba(255,255,255,.09); border-radius:24px;
    box-shadow:0 16px 40px rgba(0,0,0,.5);
    backdrop-filter:blur(26px) saturate(140%);
    -webkit-backdrop-filter:blur(26px) saturate(140%);
  }
  /* Значок над подписью: пять вкладок на узком экране оставляют подписи
     ширину в семь букв, а силуэт читается и не сокращённым. */
  .ac-tab{
    flex:1; min-width:0; min-height:50px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; text-align:center;
    padding:6px 2px; font-family:inherit; font-size:10.5px; font-weight:600; line-height:1.15;
    color:rgba(255,255,255,.7); background:transparent; border:0;
    border-radius:19px; cursor:pointer;
    transition:background .18s, color .18s;
  }
  .ac-tab > span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .ac-tab .ac-ico{ width:19px; height:19px; opacity:.72 }
  /* Та же грамматика, что в рельсе: плита с оттенком и белый значок.
     Раньше активная вкладка была залита акцентом целиком и на телефоне
     светилась ярче содержимого страницы. */
  .ac-tab.on{ background:rgba(var(--accent-rgb),.11); color:#fff; font-weight:700; box-shadow:var(--edge) }
  .ac-tab.on .ac-ico{ opacity:1; color:#fff }
  .ac-tab:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:-2px }
}

/* ── Сообщения и вопросы ────────────────────────────────────────────────────
   Заменили alert / confirm / prompt. Системное окно не поддаётся оформлению
   и на телефоне подписано адресом сайта — ровно в тот момент, когда человеку
   тревожно. Здесь тот же плотный материал, что у модальных листов. ──────── */

.ac-toasts{
  position:fixed; z-index:200; display:flex; flex-direction:column; gap:8px;
  right:18px; bottom:18px; width:min(380px, calc(100vw - 36px));
  pointer-events:none;
}
.ac-toast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 12px 13px 15px;
  background:rgba(20,20,20,.97);
  border:1px solid var(--rule2);
  border-radius:var(--r-sm);
  box-shadow:0 14px 38px rgba(0,0,0,.55);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  animation:acToastIn .26s cubic-bezier(.22,1,.36,1) both;
}
@keyframes acToastIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.ac-toast.gone{ opacity:0; transform:translateY(6px); transition:opacity .18s, transform .18s }
.ac-toast-t{ flex:1; min-width:0; font-size:13.5px; line-height:1.45; overflow-wrap:anywhere }
/* Характер сообщения — точкой, как состояние отмечено во всём остальном
   сервисе (направления в календаре, уровень остатка). Цветная полоса слева
   была бы «боковой вкладкой» — самым узнаваемым признаком нарисованного
   на автомате интерфейса, и мы же сами вычищаем её из семи других мест. */
.ac-toast-error::before, .ac-toast-ok::before{
  content:''; flex:none; width:7px; height:7px; margin-top:5px;
  border-radius:50%; background:currentColor;
}
.ac-toast-error{ color:var(--warn) }
.ac-toast-ok{ color:var(--ok) }
/* Цвет живёт только в точке: сам текст остаётся обычным. */
.ac-toast-error .ac-toast-t, .ac-toast-ok .ac-toast-t{ color:var(--fg) }
.ac-toast-a{
  flex:none; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--fg);
  background:transparent; border:1px solid var(--rule2); border-radius:9px;
  padding:6px 11px; cursor:pointer;
}
.ac-toast-a:hover{ border-color:var(--fg) }
.ac-toast-x{
  flex:none; width:24px; height:24px; margin:-2px -4px 0 0; line-height:1;
  font-family:inherit; font-size:17px; color:rgba(255,255,255,.5);
  background:transparent; border:0; border-radius:7px; cursor:pointer;
}
.ac-toast-x:hover{ color:var(--fg) }
.ac-toast-a:focus-visible, .ac-toast-x:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:2px }

/* На телефоне сообщения встают над нижними вкладками, а не поверх них. */
@media(max-width:899px){
  .ac-toasts{ left:12px; right:12px; width:auto;
    bottom:calc(72px + max(6px, env(safe-area-inset-bottom))) }
}

.ac-dialog{
  width:min(420px, calc(100vw - 32px));
  /* Нативный <dialog> центрируется через margin:auto, а на каждой странице
     стоит сброс `*{margin:0}` — без этой строки окно прилипает к углу. */
  margin:auto;
  max-height:calc(100dvh - 32px); overflow:auto;
  padding:0; border:1px solid var(--rule2); border-radius:var(--r);
  background:rgba(19,19,19,.98); color:var(--fg);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.ac-dialog::backdrop{ background:rgba(0,0,0,.55); backdrop-filter:blur(4px) }
.ac-dialog[open]{ animation:acDlgIn .24s cubic-bezier(.22,1,.36,1) both }
@keyframes acDlgIn{ from{ opacity:0; transform:translateY(12px) scale(.98) } to{ opacity:1; transform:none } }
.ac-dialog-in{ padding:20px 20px 17px }
.ac-dialog-t{ font-size:16px; font-weight:800; letter-spacing:-.01em; line-height:1.3;
  margin:0; text-transform:none; overflow-wrap:anywhere }
.ac-dialog-x{ font-size:13.5px; color:var(--muted); line-height:1.5; margin-top:7px; overflow-wrap:anywhere }
.ac-dialog-l{ display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin:16px 0 6px }
.ac-dialog-i{ width:100%; font-family:inherit; font-size:16px; color:var(--fg);
  background:rgba(0,0,0,.3); border:1px solid var(--rule2); border-radius:var(--r-sm);
  padding:11px 12px; outline:none }
.ac-dialog-i:focus{ border-color:var(--fg) }
.ac-dialog-e{ font-size:12.5px; color:var(--warn); margin-top:7px; min-height:1px }
.ac-dialog-b{ display:flex; gap:9px; margin-top:19px }
.ac-dialog-b button{ flex:1; font-family:inherit; font-size:14.5px; font-weight:700;
  border-radius:var(--r-sm); padding:12px; cursor:pointer; min-height:44px }
.ac-dialog-no{ background:transparent; border:1px solid var(--rule2); color:var(--fg) }
.ac-dialog-no:hover{ border-color:var(--fg) }
/* Та же поверхность, что у главной кнопки на страницах: рядом с призрачной
   «Отменой» объём читается как «вот это действие», без всякого цвета. */
.ac-dialog-ok{
  background-color:var(--surface-hi);
  background-image:linear-gradient(108deg, transparent 22%,
    rgba(255,255,255,.06) 44%, rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.045) 57%, transparent 76%);
  border:1px solid rgba(255,255,255,.15); color:#fff; box-shadow:var(--edge);
}
.ac-dialog-ok:hover{ background-color:var(--surface-hi-h); border-color:rgba(255,255,255,.26) }
/* Красный — только на удалении, и только на самой кнопке действия. */
.ac-dialog.danger .ac-dialog-ok{ background:var(--warn); border-color:var(--warn); color:#2b0906 }
.ac-dialog-b button:focus-visible{ outline:2px solid rgba(255,255,255,.85); outline-offset:2px }

/* Месячная сетка на главной остаётся: в ней живёт создание события.
   Каркас даёт календарь на всех страницах, но переселять форму — работа
   следующего шага, а не каркаса. Один экран с двумя календарями — цена
   одного шага, и она честнее, чем убрать кнопку «Добавить событие». */

/* ── Видимый фокус ───────────────────────────────────────────────────────── */
/* Раньше кольцо фокуса было только у элементов каркаса, а на страницах его
   не было нигде: пройти сервис с клавиатуры было можно, но не видно, где
   ты находишься. Ставим одно правило на всё и не трогаем :focus без
   -visible — иначе кольцо будет вспыхивать и от мыши. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible{
  outline:2px solid rgba(255,255,255,.85); outline-offset:2px
}
/* У полей ввода своя рамка — кольцо снаружи её же скругления. */
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline-offset:1px }

/* ── Пальцем, а не мышью ─────────────────────────────────────────────────── */
/* Половина сервиса живёт на телефоне и на планшете склада, а кнопки собирались
   под курсор: «время» в смене — 52×24, крестик в расчёте — 28×28, пункты
   шторки — 42 в высоту. Попасть пальцем в 24 пикселя нельзя, промахи люди
   объясняют себе тем, что «сайт тормозит».

   Условие — именно палец (`pointer: coarse`), а не узкий экран: планшет
   склада широкий, но тыкают в него рукой. Узкое окно добавлено, чтобы это
   же правило можно было проверить на десктопе. */
@media (pointer: coarse), (max-width: 899px) {
  .ac-item, .ac-mark, .ac-collapse, .ac-who, .ac-skip,
  button, [role="button"], [role="checkbox"], [role="radio"], [role="link"],
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea{
    min-height:44px;
  }
  /* Круглые и квадратные кнопки-иконки: им нужна и ширина. */
  .rowdel, .xbtn, .tgbtn, .iconb, .ac-collapse, .ac-day-x, .ac-bell, .ac-who,
  .nav button, .cchip button{
    min-width:44px;
  }
  /* Ячейка дня в календаре шириной 44 в неделю из семи дней на экране 375
     не помещается физически — там работает высота (58), и порог 24×24
     из стандарта она проходит с запасом. */
}

/* ── Знак Λ вместо капчи ─────────────────────────────────────────────────── */
/* Появляется не всегда: пока человек не ошибался, вход остаётся в два поля.
   Знак — тот же, что в логотипе, поэтому проверка выглядит частью сервиса,
   а не вставленным чужим виджетом. */
.ac-cap{
  border:1px solid var(--rule2); border-radius:var(--r); padding:14px 14px 11px;
  background:var(--card2); margin-top:16px;
}
.ac-cap-t{ font-size:12.5px; color:var(--muted); text-align:center; margin-bottom:6px }
.ac-cap-s{
  display:block; width:100%; height:auto; touch-action:none; cursor:crosshair;
  user-select:none; -webkit-user-select:none;
}
.ac-cap-g{ stroke:var(--rule2); stroke-width:7; stroke-dasharray:2 11 }
.ac-cap-i{ stroke:var(--fg); stroke-width:7 }
.ac-cap-e{ font-size:12px; color:var(--muted); text-align:center; min-height:16px; margin-top:2px }
.ac-cap.bad .ac-cap-e{ color:var(--warn) }
.ac-cap.bad .ac-cap-i{ stroke:var(--warn) }
.ac-cap.busy{ opacity:.6; pointer-events:none }
.ac-cap.done{ border-color:var(--ok-line); background:var(--ok-bg) }
.ac-cap.done .ac-cap-i{ stroke:var(--ok) }
.ac-cap.done .ac-cap-e{ color:var(--ok) }
.ac-cap.done .ac-cap-s{ cursor:default }
@keyframes acShake{ 0%,100%{transform:none} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.ac-cap.shake{ animation:acShake .22s }
@media (prefers-reduced-motion: reduce){ .ac-cap.shake{ animation:none } }

/* ── Лист события ────────────────────────────────────────────────────────────
   Карточка, форма и список дня. Переехали сюда из главной 12.08.2026: пока
   они жили там, календарь на клик по дню менял страницу, и «Закрыть»
   оставляло человека на главной.

   Всё под .ac-evm намеренно: короткие имена (.modal, .sheet) заняты
   страницами, а общий слой подключается последним и перебил бы их. ───────── */
.ac-evm{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none;
  align-items:flex-end; justify-content:center; z-index:120; padding:0 }
.ac-evm.show{ display:flex }
@media (min-width:600px){ .ac-evm{ align-items:center; padding:20px } }
/* Высоту ограничиваем: длинная форма должна прокручиваться внутри себя,
   иначе кнопки уезжают за край экрана и до них не добраться. */
/* Плита листа непрозрачна намеренно. --card полупрозрачна — под ней виден
   фон, и на главной это работало: за модалкой был ровный тёмный экран. Над
   сеткой календаря сквозь неё просвечивали числа и полосы, и лист переставал
   читаться как отдельный предмет. Тот же тон, но поверх фона страницы. */
.ac-evm-in{ background:linear-gradient(var(--card),var(--card)) var(--bg);
  border:1px solid var(--rule2); width:100%; max-width:460px;
  border-radius:18px 18px 0 0; padding:20px 20px max(20px,env(safe-area-inset-bottom));
  max-height:88vh; max-height:88dvh; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch }
@media (min-width:600px){ .ac-evm-in{ border-radius:18px; max-height:min(88vh,780px) } }
.ac-evm-in h3{ font-size:17px; font-weight:800; letter-spacing:-.01em; margin:0 0 3px }
.ac-evm-sub{ font-size:13px; color:var(--muted); margin-bottom:16px }
.ac-evm-sub a{ text-decoration:underline }
.ac-evm-none{ color:var(--muted); font-size:13px; padding:10px 0 4px; display:block }

/* Строка дня */
.ac-evm-row{ display:flex; align-items:flex-start; gap:10px; padding:12px 0;
  border-bottom:1px solid var(--rule); cursor:pointer }
.ac-evm-row:first-child{ border-top:1px solid var(--rule) }
.ac-evm-row:hover .t{ text-decoration:underline; text-underline-offset:2px }
.ac-evm-row .ac-dot{ width:8px; height:8px; border-radius:50%; flex:none; margin-top:6px }
.ac-evm-row .b{ flex:1; min-width:0 }
.ac-evm-row .t{ font-size:15px }
.ac-evm-row .m{ font-size:12px; color:var(--muted); margin-top:2px }
.ac-evm-row .tm{ font-weight:700; font-size:13px; flex:none }
.ac-evm-row .chev{ color:var(--muted); font-size:18px; line-height:1; flex:none; align-self:center }
.ac-evm-row.multi{ opacity:.72 }
/* Задача — пустой квадратик, событие — залитая точка. Просроченное красным:
   это единственная строка дня, где надо что-то делать прямо сейчас. */
.ac-evm-row.task .ac-dot{ border-radius:2px; background:none;
  box-shadow:inset 0 0 0 1.5px var(--c,var(--dept-none)) }
.ac-evm-row.task.late .ac-dot{ box-shadow:inset 0 0 0 1.5px var(--warn-fg) }
.ac-evm-row.task.late .t{ color:var(--warn-fg) }
.ac-evm-who{ font-size:12px; color:var(--muted); margin-top:5px;
  display:flex; flex-wrap:wrap; gap:4px 10px }
.ac-evm-rp{ display:inline-flex; align-items:center; gap:5px }
.ac-evm-ava{ width:22px; height:22px; border-radius:50%; background:var(--rule2); color:var(--fg);
  display:inline-flex; align-items:center; justify-content:center; overflow:hidden;
  font-size:10px; font-weight:800; flex:none }
.ac-evm-ava img{ width:100%; height:100%; object-fit:cover }

/* Поля карточки */
.ac-evm-f{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--rule); font-size:14.5px }
.ac-evm-f:last-child{ border-bottom:none }
/* 🔴 Метка поля называется .ac-evm-k, а не .k, и это не занудство: `.k` в
   общем слое — плитка, у неё фон, скругление и внутренняя грань (ui.css:229).
   Пока метки звались `.k`, за каждой из них — ОТДЕЛ, ГДЕ, ПОВТОР — стояла
   светлая плашка, и карточка выглядела как набор ореолов вокруг слов. */
.ac-evm-f .ac-evm-k{ color:var(--muted); width:104px; flex:none; font-size:11px;
  text-transform:uppercase; letter-spacing:.04em; padding-top:3px }
.ac-evm-f .ac-evm-v{ flex:1; min-width:0 }
.ac-evm-f .ac-evm-v .ac-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:7px }
.ac-evm-f .ac-evm-v .ac-evm-rp{ margin:0 10px 6px 0 }
/* Привязанные задачи: строка-ссылка на доску. Квадратик тот же, что у сроков
   в календаре, — и залит, когда задача закрыта. */
.ac-evm-task{ display:flex; gap:8px; align-items:flex-start; padding:5px 0; font-size:14px;
  color:var(--fg); text-decoration:none }
.ac-evm-task:hover .tn{ text-decoration:underline }
.ac-evm-task .tk{ width:9px; height:9px; flex:none; border-radius:2px; margin-top:5px;
  box-shadow:inset 0 0 0 1.5px var(--muted) }
.ac-evm-task .tn{ flex:1; min-width:0 }
.ac-evm-task small{ color:var(--faint); font-size:11.5px; flex:none; padding-top:2px }
.ac-evm-task.done{ color:var(--muted) }
.ac-evm-task.done .tk{ background:var(--muted); box-shadow:none }

/* Форма */
.ac-evm-in label{ display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin:14px 0 6px }
.ac-evm-in input, .ac-evm-in select, .ac-evm-in textarea{ width:100%; font-family:inherit;
  /* 16px не для красоты: на iOS поле меньше шестнадцати заставляет Safari
     приближать страницу при фокусе, и лист уезжает за экран. */
  font-size:16px; color:var(--fg); background:var(--bg); border:1px solid var(--rule2);
  border-radius:10px; padding:11px 12px; outline:none }
.ac-evm-in textarea{ min-height:56px; resize:vertical }
.ac-evm-in input:focus-visible, .ac-evm-in select:focus-visible, .ac-evm-in textarea:focus-visible{
  border-color:var(--fg) }
.ac-evm-two{ display:flex; gap:12px }
.ac-evm-two > div{ flex:1; min-width:0 }
.ac-evm-pick{ display:flex; flex-wrap:wrap; gap:7px }
/* Выбор людей с поиском (acPeoplePick) — общий для события и задачи.
   Плитки в своей прокрутке: команда растёт, а форма от этого расти не
   должна — иначе кнопки «Сохранить» опять уедут за край экрана. */
.ac-pick{ display:block }
.ac-pick .ac-pick-q{ width:100%; margin-bottom:8px }
.ac-pick-list{ display:flex; flex-wrap:wrap; gap:7px;
  max-height:172px; overflow-y:auto; overscroll-behavior:contain }
.ac-evm-chip{ font-family:inherit; font-size:13px; padding:5px 12px 5px 6px; border-radius:20px;
  border:1px solid var(--rule2); background:none; color:var(--fg); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px }
.ac-evm-chip.on{ background:var(--accent); color:var(--accent-fg); border-color:var(--accent);
  font-weight:600 }
/* Ответ участника: галочка у имени и счётчик под списком. Отказ гасим, а не
   красим тревожным: «не смогу» — обычный рабочий ответ, а не авария. */
.ac-evm-rp .mk{ font-style:normal; font-size:11px; line-height:1 }
.ac-evm-rp.yes .mk{ color:var(--ok) }
.ac-evm-rp.no{ color:var(--faint) }
.ac-evm-cnt{ font-size:12px; color:var(--muted); margin-top:2px }

/* Две кнопки под карточкой, а не в общем ряду с «Редактировать»: там действия
   организатора, здесь — ответ приглашённого. */
.ac-evm-ans{ display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap }
.ac-evm-ans .q{ flex:1; min-width:90px; font-size:13px; color:var(--muted) }
.ac-evm-ans button{ font-family:inherit; font-size:13.5px; font-weight:700; border-radius:20px;
  padding:8px 15px; cursor:pointer; background:transparent; color:var(--fg);
  border:1px solid var(--rule2) }
.ac-evm-ans button:disabled{ opacity:.5; cursor:default }
.ac-evm-ans button.ok.on{ background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-fg) }
.ac-evm-ans button.no.on{ background:var(--warn-bg); border-color:rgba(var(--warn-rgb),.4);
  color:var(--warn-fg) }

.ac-evm-btns{ display:flex; gap:10px; margin-top:20px }
.ac-evm-btns button{ flex:1; font-family:inherit; font-size:15px; font-weight:700; border-radius:10px;
  padding:13px; cursor:pointer; border:1px solid var(--rule2); background:transparent; color:var(--fg) }
.ac-evm-btns button.pri{ background:var(--accent); color:var(--accent-fg); border-color:var(--accent) }
.ac-evm-in .dng{ width:100%; font-family:inherit; font-size:15px; font-weight:700; border-radius:10px;
  padding:13px; cursor:pointer; background:transparent;
  color:var(--warn); border:1px solid rgba(var(--warn-rgb),.4) }
.ac-evm-in .dng:hover{ background:var(--warn-bg); border-color:var(--warn) }

/* Лист, прижатый к месту события. На скринах Apple попап стоит рядом с тем,
   что человек только что протянул, и за ним виден календарь: видно, куда
   именно легло дело. Фон при этом не затемняем — он и есть тот контекст,
   ради которого попап и делали; клики по нему по-прежнему закрывают лист.

   Только на широком экране. На телефоне «сбоку» не существует: там лист
   остаётся листом снизу, как во всём сервисе. */
@media (min-width:700px){
  .ac-evm.at{ background:none; align-items:flex-start; justify-content:flex-start; padding:0 }
  .ac-evm.at .ac-evm-in{ position:fixed; width:360px; max-width:calc(100vw - 24px);
    max-height:min(78vh,660px); border-radius:16px; padding:16px 17px;
    box-shadow:0 24px 60px rgba(0,0,0,.6) }
  .ac-evm.at .ac-evm-in h3{ font-size:16px }
  .ac-evm.at .ac-evm-btns{ margin-top:16px }
  /* В узком попапе метка встаёт над значением: в две колонки на 360 пикселях
     «Отчёт по продажам за неделю» ломался на четыре строки, а подпись
     «Бэклог · Андрей Пермяков» отъезжала от своей задачи. */
  .ac-evm.at .ac-evm-f{ display:block }
  .ac-evm.at .ac-evm-f .ac-evm-k{ width:auto; padding:0 0 4px }
  .ac-evm.at .ac-evm-task{ flex-wrap:wrap }
  .ac-evm.at .ac-evm-task .tn{ flex:1 0 auto }
  .ac-evm.at .ac-evm-task small{ flex-basis:100%; padding:0 0 0 17px }
}

/* ── Протяжка по сетке ──────────────────────────────────────────────────────
   След, который тянется за пальцем или мышью, пока человек показывает время.
   Это ещё не событие: пока не отпустили — ничего не создано. */
.ac-draft{ position:absolute; left:2px; right:3px; z-index:5; pointer-events:none;
  border-radius:6px; border:1px dashed rgba(255,255,255,.5);
  background:rgba(255,255,255,.1); color:var(--fg);
  font-size:11px; font-weight:700; padding:3px 6px; overflow:hidden }
.ac-draft-cells{ position:absolute; inset:0; pointer-events:none;
  border-radius:6px; border:1px dashed rgba(255,255,255,.5);
  background:rgba(255,255,255,.09) }