/* ═══════════════════════════════════════════════════════════════════════════
   ДИЗАЙН-СИСТЕМА DETAILING CITY OS · слой компонентов
   ───────────────────────────────────────────────────────────────────────────
   ЧТО ЭТО. Один набор готовых кирпичей, из которых собираются экраны: кнопка,
   поле, карточка, строка списка, чип, бейдж, таблица, окно, пустой экран.
   Каталог со всеми — /static/ds/kit.html.

   ОТКУДА ПРАВИЛА. Поведение и состояния сняты с отраслевых эталонов:
     · ui.shadcn.com — всё поведение в базовом классе, вариант меняет только цвет;
     · Radix / Material — шкала размеров, фокус с клавиатуры, отключённое состояние;
     · Open Props (ds/open-props.min.css, MIT) — шкалы отступов, радиусов, теней,
       переходов. Это библиотека ТОКЕНОВ: она ничего не рисует и не навязывает вид,
       поэтому её можно взять целиком, не переписывая существующие экраны.

   ЧЕГО ЗДЕСЬ НЕТ И ПОЧЕМУ. Готовые библиотеки компонентов (shadcn, MUI, Ant)
   написаны под React со сборкой, а у нас одна страница на чистом JS: их нельзя
   подключить, не переписав весь интерфейс. Веб-компоненты (Shoelace) подключить
   можно, но они приносят свой визуальный язык и требуют переписать разметку во
   всех 15 000 строках — для работающей боевой системы это неоправданный риск
   (CONSTITUTION §13: стабильное ядро — актив). Поэтому берём у отрасли ПРАВИЛА
   и ТОКЕНЫ, а компоненты держим свои, тонким слоем рядом со старым кодом.

   КАК ВНЕДРЯЕТСЯ. Классы с приставкой ui- ничего не переопределяют: старые
   экраны продолжают работать на прежних классах, новые собираются из этих.
   Экран переводится целиком и по одному — как переносили мобильную оболочку.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ТОКЕНЫ ─────────────────────────────────────────────────────────────
   Цвета берём из ядра (:root в index.html) — палитра одна на всю систему.
   Здесь только то, чего в ядре не было: шкалы размеров, радиусов, теней,
   типографики. Значения не выдуманы: это шкалы Open Props, сведённые к тем
   ступеням, которые реально нужны CRM. Разнобой, который был на экранах
   (восемь радиусов и восемь размеров шрифта), сводится к этим ступеням. */
:root{
  /* Отступы — шаг 4px. Всё, что между элементами, берётся отсюда. */
  --ui-1: 4px;   --ui-2: 8px;   --ui-3: 12px;  --ui-4: 16px;
  --ui-5: 20px;  --ui-6: 24px;  --ui-8: 32px;  --ui-10: 40px;

  /* Радиусы — три, не восемь: мелкий (чип, бейдж), обычный (кнопка, поле),
     крупный (карточка, окно). Капсула — только для статусов и вкладок. */
  --ui-r-sm: 8px;  --ui-r: 12px;  --ui-r-lg: 16px;  --ui-r-full: 9999px;

  /* Типографика — шесть ступеней. Мельче 12px в интерфейсе не бывает:
     это нижняя граница читаемости на рабочем мониторе и на телефоне. */
  --ui-t-xs: 12px;   --ui-t-sm: 13.5px;  --ui-t-md: 14px;
  --ui-t-lg: 16px;   --ui-t-xl: 20px;    --ui-t-2xl: 26px;

  /* Высоты целей. 36 — плотная таблица, 44 — минимум для пальца (Apple HIG),
     56 — главное действие экрана. */
  --ui-h-sm: 36px;  --ui-h: 44px;  --ui-h-lg: 56px;

  /* Тени — три уровня: лежит на фоне, приподнято, плавает над экраном. */
  --ui-sh-1: 0 1px 2px rgba(13,37,61,.06);
  --ui-sh-2: 0 2px 8px rgba(13,37,61,.08);
  --ui-sh-3: 0 12px 32px rgba(13,37,61,.16);

  /* Переход один на всё: цвет и тень 120 мс, движение 100 мс. */
  --ui-tr: 120ms cubic-bezier(.2,.8,.3,1);
}

/* Компьютерный образец Attio28.10; мобильные размеры касаний остаются в :root. */
html:not(.dc-hand){
  --ui-r-sm:5px; --ui-r:6px; --ui-r-lg:10px; --ui-r-full:5px;
  --ui-t-sm:12px; --ui-t-md:13px; --ui-t-2xl:22px;
  --ui-h-sm:30px; --ui-h:32px; --ui-h-lg:36px;
  --ui-sh-1:none; --ui-sh-2:none;
}

/* ── 2. КНОПКА ─────────────────────────────────────────────────────────────
   Вариантов ТРИ, как и на телефоне: главное действие, второе действие,
   опасное. Всё поведение — в базовом классе, вариант меняет только цвет.
   Размеры: sm (плотные таблицы), обычный, lg (главная кнопка экрана). */
.ui-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--ui-2);
  min-height:var(--ui-h); padding:var(--ui-2) var(--ui-4); box-sizing:border-box;
  border:1px solid transparent; border-radius:var(--ui-r);
  font-family:inherit; font-size:var(--ui-t-md); font-weight:500; line-height:1.2;
  max-width:100%; min-width:0; white-space:normal; overflow-wrap:anywhere; text-align:center; text-decoration:none;
  cursor:pointer; transition:background-color var(--ui-tr), border-color var(--ui-tr),
                              color var(--ui-tr), box-shadow var(--ui-tr), transform 100ms ease-out;
  -webkit-tap-highlight-color:transparent;
}
.ui-btn > svg, .ui-btn > i{ width:18px; height:18px; flex:0 0 auto; }
.ui-btn:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }
/* Отключённая кнопка не принимает нажатие вовсе — «мёртвых» тапов не бывает. */
.ui-btn[disabled], .ui-btn[aria-disabled="true"]{ opacity:.5; cursor:default; pointer-events:none; }
.ui-btn:active{ transform:scale(.98); }

.ui-btn-primary{ background:var(--acc-soft); color:var(--acc); }
.ui-btn-primary:hover{ background:var(--card2); }
.ui-btn-primary:active{ background:var(--card2); color:var(--acc-press); }

.ui-btn-ghost{ background:var(--card); color:var(--tx); border-color:var(--line); }
.ui-btn-ghost:hover{ border-color:var(--acc); color:var(--acc); }
.ui-btn-ghost:active{ background:var(--card2); }

.ui-btn-danger{ background:var(--red-soft); color:var(--red); }
.ui-btn-danger:hover{ filter:brightness(.94); }

.ui-btn-sm{ min-height:var(--ui-h-sm); padding:var(--ui-1) var(--ui-3); font-size:var(--ui-t-sm); border-radius:var(--ui-r-sm); }
.ui-btn-lg{ min-height:var(--ui-h-lg); padding:var(--ui-3) var(--ui-6); font-size:var(--ui-t-lg); border-radius:var(--ui-r); }
.ui-btn-block{ width:100%; }
/* Кнопка-иконка: квадратная, подпись живёт в title/aria-label. */
.ui-btn-icon{ width:var(--ui-h); padding:0; }
.ui-btn-icon.ui-btn-sm{ width:var(--ui-h-sm); }

/* ── 3. ПОЛЯ ВВОДА ─────────────────────────────────────────────────────────
   Метка сверху, подсказка снизу, ошибка вместо подсказки. Меньше 16px на
   телефоне ставить нельзя: Safari увеличивает страницу при фокусе. */
/* Форма — поля в столбик с одинаковым просветом. Без неё подпись следующего поля
   прилипает к предыдущему полю и форма читается сплошной лентой. */
.ui-form{ display:flex; flex-direction:column; gap:var(--ui-4); }
.ui-field{ display:flex; flex-direction:column; gap:6px; }
.ui-label{ font-size:var(--ui-t-xs); color:var(--mut); }
.ui-input, .ui-select, .ui-textarea{
  width:100%; box-sizing:border-box; min-height:var(--ui-h);
  padding:0 var(--ui-3); border:1px solid var(--line); border-radius:var(--ui-r);
  background:var(--card); color:var(--tx); font-family:inherit; font-size:var(--ui-t-md); font-weight:400; line-height:1.35;
  transition:border-color var(--ui-tr), box-shadow var(--ui-tr);
}
.ui-textarea{ padding:10px var(--ui-3); min-height:96px; resize:vertical; }
.ui-select{ appearance:none; -webkit-appearance:none; padding-right:var(--ui-8);
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus{
  outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 14%, transparent);
}
.ui-input[disabled], .ui-select[disabled], .ui-textarea[disabled]{ background:var(--card2); color:var(--mut); cursor:default; }
.ui-hint{ font-size:var(--ui-t-xs); color:var(--mut); }
.ui-field-err .ui-input, .ui-field-err .ui-select, .ui-field-err .ui-textarea{ border-color:var(--red); }
.ui-err{ font-size:var(--ui-t-xs); color:var(--red); }

/* ── 4. КАРТОЧКА И СЕКЦИЯ ──────────────────────────────────────────────────
   Карточка — объект. Не «каждый блок в рамке»: рамка означает «это отдельная
   вещь», иначе экран рассыпается на одинаковые коробки. */
.ui-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--ui-r-lg);
  padding:var(--ui-4); box-shadow:var(--ui-sh-1); }
.ui-card-h{ display:flex; align-items:center; justify-content:space-between; gap:var(--ui-3);
  margin-bottom:var(--ui-3); }
.ui-card-t{ font-family:inherit; font-size:var(--ui-t-lg); font-weight:600; line-height:1.25; letter-spacing:-.01em; }
.ui-sec-t{ font-size:var(--ui-t-xs); color:var(--mut); text-transform:uppercase;
  letter-spacing:.06em; margin:var(--ui-6) 0 var(--ui-2); }

/* ── 5. СТРОКА СПИСКА ──────────────────────────────────────────────────────
   Строки живут внутри одной карты с разделителями, а не каждая в своей рамке. */
.ui-list{ background:var(--card); border:1px solid var(--line); border-radius:var(--ui-r-lg); overflow:hidden; }
.ui-row{ display:flex; align-items:center; gap:var(--ui-3); width:100%; box-sizing:border-box;
  min-height:var(--ui-h); padding:var(--ui-3) var(--ui-4); background:none; border:none;
  font:inherit; color:var(--tx); text-align:left; cursor:pointer; transition:background-color var(--ui-tr); }
.ui-row + .ui-row{ border-top:1px solid var(--line); }
.ui-row:hover{ background:var(--card2); }
.ui-row-b{ flex:1; min-width:0; }
.ui-row-t{ display:block; font-size:var(--ui-t-md); font-weight:500; }
.ui-row-s{ display:block; font-size:var(--ui-t-xs); color:var(--mut); margin-top:2px; }
.ui-row-ch{ flex:0 0 auto; color:var(--mut2); }
.ui-row-flat{ cursor:default; }
.ui-row-flat:hover{ background:none; }

/* ── 6. ЧИП И БЕЙДЖ ────────────────────────────────────────────────────────
   Чип — выбор (фильтр), бейдж — состояние. Их путают: чип нажимается, бейдж нет. */
.ui-chip{ display:inline-flex; align-items:center; gap:6px; min-height:var(--ui-h-sm);
  padding:0 var(--ui-3); border:1px solid var(--line); border-radius:var(--ui-r-full);
  background:var(--card); color:var(--tx); font-family:inherit; font-size:var(--ui-t-sm); font-weight:400; line-height:1; cursor:pointer;
  white-space:nowrap; transition:background-color var(--ui-tr), border-color var(--ui-tr), color var(--ui-tr); }
.ui-chip:hover{ border-color:var(--acc); }
.ui-chip.on{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); font-weight:500; }
.ui-badge{ display:inline-flex; align-items:center; height:22px; padding:0 10px;
  border-radius:var(--ui-r-full); font-family:inherit; font-size:11.5px; font-weight:600; line-height:1; white-space:nowrap;
  background:var(--card2); color:var(--mut); }
.ui-badge-ok{ background:var(--grn-soft); color:var(--grn); }
.ui-badge-warn{ background:var(--yel-soft); color:var(--yel); }
.ui-badge-bad{ background:var(--red-soft); color:var(--red); }
.ui-badge-info{ background:var(--acc-soft); color:var(--acc); }

/* ── 7. ТАБЛИЦА ────────────────────────────────────────────────────────────
   Для больших списков на компьютере. Цифры — моноширинные, чтобы колонки
   сходились по разрядам; шапка липкая, иначе на 400 строках теряешь колонки. */
.ui-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--ui-r-lg); background:var(--card); }
.ui-table{ width:100%; border-collapse:collapse; font-size:var(--ui-t-sm); }
.ui-table th{ position:sticky; top:0; z-index:1; background:var(--card2); color:var(--mut);
  font-family:inherit; font-size:var(--ui-t-xs); font-weight:500; line-height:1; text-transform:uppercase; letter-spacing:.05em;
  text-align:left; padding:10px var(--ui-3); white-space:nowrap; }
.ui-table td{ padding:11px var(--ui-3); border-top:1px solid var(--line); vertical-align:middle; }
.ui-table tbody tr:hover{ background:var(--card2); }
.ui-table .num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ── 8. ОКНО ───────────────────────────────────────────────────────────────
   Окно — для короткого действия. Длинную форму делают экраном: в окне не
   видно, сколько осталось, и оно закрывается случайным кликом. */
.ui-overlay{ position:fixed; inset:0; z-index:4000; background:rgba(16,24,40,.45);
  display:flex; align-items:center; justify-content:center; padding:var(--ui-4); }
.ui-modal{ width:min(560px, 100%); max-height:88vh; overflow:auto; background:var(--card);
  border-radius:var(--ui-r-lg); box-shadow:var(--ui-sh-3); padding:var(--ui-5); }
.ui-modal-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--ui-3); margin-bottom:var(--ui-2); }
.ui-modal-t{ font-family:inherit; font-size:var(--ui-t-xl); font-weight:600; line-height:1.25; letter-spacing:-.02em; }
.ui-modal-sub{ font-size:var(--ui-t-sm); color:var(--mut); margin-bottom:var(--ui-4); }
/* Кнопок в окне бывает больше двух — переносим на новую строку, иначе крайние
   уезжают за край окна и до них не добраться. */
.ui-modal-f{ display:flex; flex-wrap:wrap; gap:var(--ui-2); justify-content:flex-end; margin-top:var(--ui-5); }

/* ── 9. ПУСТОЙ ЭКРАН И СОСТОЯНИЯ ───────────────────────────────────────────
   Пустой экран обязан сказать, почему пусто и что сделать. «Ничего не найдено»
   без причины — брак (ADR-0117: экран называет причину отказа). */
.ui-empty{ text-align:center; padding:var(--ui-10) var(--ui-4); color:var(--mut); }
.ui-empty-t{ font-family:inherit; font-size:var(--ui-t-lg); font-weight:500; line-height:1.3; color:var(--tx); margin-bottom:6px; }
.ui-empty-s{ font-size:var(--ui-t-sm); max-width:420px; margin:0 auto var(--ui-4); }
.ui-note{ border-radius:var(--ui-r); padding:var(--ui-3) var(--ui-4); font-size:var(--ui-t-sm); line-height:1.45; }
.ui-note-info{ background:var(--acc-soft); color:var(--acc); }
.ui-note-warn{ background:var(--yel-soft); color:var(--yel); }
.ui-note-bad{ background:var(--red-soft); color:var(--red); }
/* Зелёная — подтверждение того, что проверено и сошлось (сверка документа, оплата). */
.ui-note-ok{ background:var(--grn-soft); color:var(--grn); }

/* ── 10. ПЛИТКА С ЧИСЛОМ ───────────────────────────────────────────────────
   Показатель: подпись мелко, число крупно, изменение рядом. Крупное число —
   только там, где оно и есть смысл экрана. */
.ui-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--ui-3); }
.ui-stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--ui-r-lg); padding:var(--ui-4); }
.ui-stat-l{ font-size:var(--ui-t-xs); color:var(--mut); }
.ui-stat-v{ font-family:inherit; font-size:var(--ui-t-2xl); font-weight:600; line-height:1.1; letter-spacing:-.025em; margin-top:2px;
  font-variant-numeric:tabular-nums; }
.ui-stat-d{ font-size:var(--ui-t-xs); margin-top:4px; }
.ui-stat-d.up{ color:var(--grn); } .ui-stat-d.down{ color:var(--red); }

/* ── 10б. ПЕРЕПИСКА ────────────────────────────────────────────────────────
   Пузырь сообщения. Свой — справа акцентным, чужой — слева серым: так во всех
   мессенджерах, переучивать людей незачем. Подпись под пузырём мелкая: кто и
   когда, у своих — отметка о прочтении. */
.ui-thread{ display:flex; flex-direction:column; gap:var(--ui-2); }
.ui-msg{ display:flex; }
.ui-msg-in{ justify-content:flex-start; }
.ui-msg-out{ justify-content:flex-end; }
.ui-msg-b{ max-width:82%; padding:8px 12px; border-radius:var(--ui-r);
  background:var(--card2); font-size:var(--ui-t-md); line-height:1.45; }
.ui-msg-out .ui-msg-b{ background:var(--acc-soft); }
.ui-msg-m{ font-size:11px; color:var(--mut); margin-top:3px; }
.ui-msg-atts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ui-msg-atts img{ width:66px; height:66px; object-fit:cover; border-radius:var(--ui-r-sm);
  border:1px solid var(--line); }

/* ── 11. ВКЛАДКИ ───────────────────────────────────────────────────────────*/
.ui-tabs{ display:inline-flex; gap:2px; padding:3px; background:var(--card2); border-radius:var(--ui-r); }
.ui-tab{ min-height:var(--ui-h-sm); padding:0 var(--ui-4); border:none; border-radius:var(--ui-r-sm);
  background:none; color:var(--mut); font-family:inherit; font-size:var(--ui-t-md); font-weight:400; line-height:1; cursor:pointer; transition:all var(--ui-tr); }
.ui-tab.on{ background:var(--card); color:var(--tx); font-weight:500; box-shadow:var(--ui-sh-1); }

/* ── 12. ТЕЛЕФОН ───────────────────────────────────────────────────────────
   Цели крупнее, поля 16px (иначе Safari зумит), кнопки на всю ширину. */
html.dc-hand .ui-btn{ min-height:52px; font-size:var(--ui-t-lg); border-radius:14px; }/* ⛔ РАЗМЕРЫ КНОПОК НА ТЕЛЕФОНЕ — ПО НАШИМ ЖЕ ОСНОВАМ (docs/design/FOUNDATIONS.md §3:
     «кнопка и поле формы: 52 px, маленькая кнопка: 44 px»). Здесь стояло 56 для ВСЕХ
     кнопок и 40 для маленькой — документ не соблюдался, и на «Командировках» два
     вспомогательных действия выглядели как главные (Рустам 24.09.2026: «зачем такие
     огромные кнопки делать, у нас же есть несколько размеров»).
     Роли: sm 44 — вспомогательное действие и строки списков; обычная 52 — форма и
     обычное действие экрана; lg 56 — ГЛАВНОЕ действие экрана и мастер оформления. */html.dc-hand .ui-btn-lg, html.dc-hand .ui-btn-block{ min-height:var(--ui-h-lg); font-size:var(--ui-t-lg); }html.dc-hand .ui-btn-sm{ min-height:44px; font-size:var(--ui-t-sm); }html.dc-hand .ui-input, html.dc-hand .ui-select, html.dc-hand .ui-textarea{ min-height:52px; font-size:var(--ui-t-lg); border:none; background:var(--card2); }html.dc-hand .ui-row{ min-height:56px; }html.dc-hand .ui-modal{ width:100%; border-radius:var(--ui-r-lg) var(--ui-r-lg) 0 0; }html.dc-hand .ui-overlay{ align-items:flex-end; padding:0; }
@media (prefers-reduced-motion: reduce){
  .ui-btn, .ui-row, .ui-chip, .ui-tab{ transition:none; }
  .ui-btn:active{ transform:none; }
}

/* ── Календарь на компьютере: «Мой календарь» (cal:my) и «Календарь сотрудников» (trips:cal).
   По макетам 01.10.2026 (docs/design/audits/2026-10-01-calendar-desktop-tz.md). Кегли 12/14/16/20/26,
   радиусы 10/14/999. Цвета дня — те же, что на телефоне: выходной #f3f4f8, отсутствие #fff1e7,
   другой город #e0f5f2, день не закрыт #feebe7. */
.tc-page{ max-width:1600px; }
.tc-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.tc-month{ display:flex; align-items:center; gap:12px; }
.tc-month b{ font-size:20px; font-weight:600; min-width:160px; text-align:center; }
.tc-arw{ width:40px; height:40px; border-radius:999px; border:1px solid var(--line); background:var(--card,#fff); font-size:20px; line-height:1; cursor:pointer; color:var(--tx); }
.tc-body{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:16px; align-items:start; }
.tc-people{ background:var(--card,#fff); border:1px solid var(--line); border-radius:14px; padding:12px; position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto; }
.tc-find{ width:100%; margin-bottom:8px; }
.tc-dep{ display:flex; justify-content:space-between; font-size:12px; color:var(--mut); padding:12px 8px 4px; width:100%; border:0; background:none; font-family:inherit; }
.tc-fired{ cursor:pointer; font-size:14px; border-top:1px solid var(--line); margin-top:8px; padding-top:12px; }
.tc-pp{ display:flex; align-items:center; gap:12px; width:100%; border:0; background:none; border-radius:10px; padding:8px; cursor:pointer; text-align:left; font-family:inherit; color:inherit; }
.tc-pp:hover{ background:var(--bg,#f7f8fa); }
.tc-pp.on{ background:var(--acc-soft); }
.tc-pp.on b{ color:var(--acc); }
.tc-pp-b{ min-width:0; display:flex; flex-direction:column; }
.tc-pp-b b{ font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-pp-b span{ font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-more{ border:0; background:none; color:var(--acc); font-size:14px; padding:4px 8px; cursor:pointer; font-family:inherit; }
.tc-av{ width:32px; height:32px; border-radius:999px; background:var(--acc-soft); color:var(--acc); font-size:12px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.tc-av.big{ width:52px; height:52px; font-size:16px; }
.tc-who{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.tc-who b{ display:block; font-size:20px; font-weight:600; }
.tc-who span{ font-size:14px; color:var(--mut); }
.tc-who .red{ display:inline; font-size:14px; color:var(--red); }
.tc-fun{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--card,#fff); border:1px solid var(--line); border-radius:14px; padding:16px 20px; margin-bottom:12px; }
.tc-fun > div{ display:flex; align-items:baseline; gap:8px; }
.tc-fun > div > b{ font-size:26px; font-weight:600; font-variant-numeric:tabular-nums; }
.tc-fun > div > b.grn, .tc-pl b.grn{ color:var(--acc); }
.tc-fun > div > span{ font-size:14px; color:var(--mut); }
.tc-fun > i{ font-style:normal; font-size:20px; color:var(--mut); }
.tc-fun-k{ margin-left:auto; display:flex !important; flex-direction:column; gap:4px; min-width:220px; padding-left:20px; border-left:1px solid var(--line); }
.tc-fun-k div{ display:flex; justify-content:space-between; gap:16px; font-size:14px; }
.tc-fun-k span{ color:var(--mut); }
.tc-pl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin-bottom:16px; }
.tc-pl > div{ border:1px solid var(--line); border-radius:14px; padding:12px 16px; background:var(--card,#fff); }
.tc-pl > div.o{ background:#f3f4f8; border-color:#f3f4f8; }
.tc-pl > div.t{ background:#fff1e7; border-color:#fff1e7; }
.tc-pl > div.t b{ color:#cc4e00; }
.tc-pl > div.r{ background:#feebe7; border-color:#feebe7; }
.tc-pl > div.r b{ color:#d13415; }
.tc-pl b{ display:block; font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.tc-pl b small{ font-size:12px; font-weight:500; color:var(--mut); }
.tc-pl span{ font-size:12px; color:var(--mut); }
.tc-grid2{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start; }
@media (max-width:1200px){ .tc-grid2{ grid-template-columns:minmax(0,1fr); } .tc-body{ grid-template-columns:240px minmax(0,1fr); } }
.tc-tip{ background:var(--acc-soft); color:var(--acc); border-radius:10px; padding:8px 12px; font-size:14px; margin-bottom:12px; }
.tc-pill{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:600; font-style:normal; white-space:nowrap; }
.tc-pill.grn{ background:var(--acc-soft); color:var(--acc); }
.tc-pill.to{ background:#fff; color:#cc4e00; }
.tc-pill.okp{ background:var(--acc-soft); color:var(--acc); }
.tc-pill.wait{ background:#ffefd6; color:#cc4e00; }
.tc-pill.acc{ background:var(--acc-soft); color:var(--acc); }
.tc-list{ background:var(--card,#fff); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.tc-row{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:8px 16px; border:0; border-top:1px solid var(--line); background:none; text-align:left; cursor:pointer; font-family:inherit; color:inherit; box-sizing:border-box; }
.tc-row:first-child{ border-top:0; }
.tc-row:hover{ background:var(--bg,#f7f8fa); }
.tc-row-b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tc-row-b b{ font-size:14px; font-weight:500; }
.tc-row-b span{ font-size:12px; color:var(--mut); }
.tc-ic{ width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:16px; }
.tc-ic.trip{ background:#e0f5f2; color:#008573; } .tc-ic.to{ background:#fff1e7; color:#cc4e00; }
.tc-as{ display:flex; flex-direction:column; }
.tc-as .tc-sec:first-child{ margin-top:0; }
.tc-rate{ display:flex; justify-content:space-between; align-items:center; background:var(--card,#fff); border:1px solid var(--line); border-radius:14px; padding:16px; }
.tc-rate span{ display:block; font-size:14px; color:var(--mut); }
.tc-rate b{ display:block; font-size:26px; font-weight:600; margin-top:4px; }
.tc-note{ font-size:12px; color:var(--mut); margin:8px 4px 0; line-height:1.4; }
.tc-tier{ display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:56px; padding:8px 16px; border-top:1px solid var(--line); font-size:14px; }
.tc-tier:first-child{ border-top:0; }
.tc-tier span{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; color:var(--mut); }
.tc-tier b{ font-size:16px; font-weight:600; }
.tc-tier.on{ background:var(--acc-soft); }
.tc-tier.on b{ color:var(--acc); }
.tc-tier.on .tc-pill{ background:var(--card,#fff); }
.tc-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.tc-pills span{ min-height:32px; padding:4px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card,#fff); font-size:14px; display:inline-flex; align-items:center; }
.tc-rule{ padding:12px 16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.tc-rule:first-child{ border-top:0; }
.tc-rule b{ font-size:14px; font-weight:500; }
.tc-rule span{ font-size:12px; color:var(--mut); }
.tc-actbar{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:50; display:flex; flex-wrap:nowrap; white-space:nowrap; gap:8px; align-items:center;
  background:var(--card,#fff); border:1px solid var(--line); border-radius:14px; padding:8px 12px; box-shadow:0 8px 24px rgba(31,45,92,.16); max-width:calc(100vw - 32px); overflow-x:auto; font-size:14px; }
.tc-actbar > *{ flex:0 0 auto; white-space:nowrap; }
.tc-actbar > *{ flex:0 0 auto; white-space:nowrap; }
.tc-evc{ border:1px solid var(--line); border-radius:14px; padding:16px; margin-top:12px; }
.tc-evh{ display:flex; align-items:center; gap:12px; }
.tc-dg{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin-top:12px; }
.tc-dt{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--card,#fff); cursor:pointer; padding:0; font-family:inherit; color:inherit; text-align:left; }
.tc-dt:hover{ border-color:var(--acc); }
.tc-dt .pv{ height:84px; background:#f3f4f8; display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--mut); font-size:14px; }
.tc-dt .pv img{ width:100%; height:84px; object-fit:cover; display:block; }
.tc-dt .nm{ padding:4px 8px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-dt .nm select{ font-size:12px; padding:0 4px; height:24px; width:100%; }
.tc-dt.add .pv{ background:var(--acc-soft); color:var(--acc); font-size:20px; font-weight:400; }

/* Сетка календаря — прежняя (владелец 01.10.2026: «календарь охуенно выглядит»). */
.tc-wd,.tc-wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.tc-wd div{font-size:12px;color:var(--mut);padding:6px 8px;border-bottom:1px solid var(--line)}
.tc-wk{position:relative;border-bottom:1px solid var(--line);grid-auto-rows:min-content;min-height:72px}
.tc-wk:last-child{border-bottom:0}
.tc-bg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.tc-bg div{border-right:1px solid var(--line)}.tc-bg div:last-child{border-right:0}.tc-bg .we{background:var(--bg,#f7f8fa)}
/* Выходные и отсутствия — подложкой всей клетки (владелец 01.10.2026: «выходные другим цветом,
лёгкими оттенками, красненьким — сейчас просто полотно»). */
.tc-bg .off{background:#fff8f7}.tc-bg .to{background:#fff7ed}.tc-bg .na{background:var(--bg,#f7f8fa)}
.tc-bg div[data-pk]{cursor:pointer}
.tc-num.zero{pointer-events:none}.tc-bar,.tc-off{cursor:pointer}
.tc-dn{position:relative;font-size:12px;padding:4px 8px 0;color:var(--tx)}.tc-dn.out{color:transparent}
.tc-bar{position:relative;margin:2px 4px;border-radius:999px;padding:1px 10px;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-num{position:relative;font-size:11.5px;line-height:1.35;padding:2px 8px 6px;color:var(--mut);cursor:pointer}
.tc-num b{color:var(--tx);font-weight:600}.tc-num.zero{color:var(--mut2,#9aa0aa)}
.tc-num:hover{background:var(--acc-soft);border-radius:8px}
.tc-off{position:relative;font-size:11.5px;line-height:1.35;padding:2px 8px 6px;min-width:0;overflow:hidden}
.tc-dn.sel{cursor:pointer}.tc-dn.sel:hover{color:var(--acc)}
.tc-bg div.pick{background:var(--acc-soft)!important}
.tc-off i{font-style:normal;display:inline-block;border-radius:999px;padding:1px 8px;font-weight:500}
.tc-off .o{background:var(--bg,#f1f3f6);color:var(--mut)}.tc-off .t{background:var(--yel-soft);color:var(--yel)}
.tc-off .s{background:var(--red-soft);color:var(--red)}.tc-off small{display:block;color:var(--mut);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-wd div{ white-space:nowrap; }