html[data-i18n-pending] body { visibility: hidden; }
/* vst-crm — оформление.
   Она открывает это с телефона, одной рукой, пока клиент ждёт ответа.
   Принцип прежний: каждый экран говорит, ЧТО ДЕЛАТЬ, а не просто показывает данные.

   Основа — кит из дашборда watchdog (образец дал Максим 26.08.2026): стеклянные панели
   на токенах, две темы, сетка, которая сама раскладывается в колонки на большом экране.
   Перекрашено под VST: акцент не оранжевый, а фирменное золото с сайта (#B8935A / #9A7642).
   Ноль зависимостей, ноль сборки, ни одного внешнего файла - то же правило, что и в админке.

   Чтобы перекрасить всё приложение, достаточно двух блоков токенов ниже. */

/* Один ужатый формат (П25, Макс 06.10): две видимые высоты. S 34 - всё в строках над списком и календарём (переключатели,
   выпадающие, «+ Записать», стрелки, круглые кнопки, чипы), M 40 - всё в карточках и листах (кнопки, поля, строки, плитки).
   Палец получает 44 прозрачной накладкой (::after или ::before), а не видимой высотой. UI-RULES раздел 3. */
:root { --h-s: 34px; --h-m: 40px; --r-s: 10px; --r-m: 12px; }
:root, [data-theme='dark'] {
  --bg1:#15181c; --bg2:#0f1113;
  /* .76, а не .82: сквозь карточку должен проступать цвет фона (просьба «чтобы посвежее»,
     08.09). Замерено: самый тихий текст под карточкой держит 5.05 при норме 4.5. */
  --panel:rgba(30,34,39,.76); --panel-solid:#1e2227; --strong:rgba(40,45,51,.7);
  --ink:#e8eaed; --muted:#9aa3ad; --faint:#8e96a0;   /* 3.4 → 4.9: и порог, и запас на аврору под карточкой */
  --line:rgba(255,255,255,.09); --edge:rgba(255,255,255,.12); --field:rgba(255,255,255,.06);
  --accent:#c9a86a; --accent-strong:#B8935A; --accent-graphic:var(--accent);      /* золото читаемо на тёмном */
  /* «Деньги · месяц» (П11): прибыль и расходы в полосках и графике; графика от 3:1 к фону карточки (замер стенда). */
  --money-pr:var(--accent); --money-ex:#7c8590;
  --grn:#3fbf77; --red:#e0625e; --yel:#d6a23a; --blue:#6f9fd8;
  --ad-tag-ink:#91b9e8; /* source chip text: contrast on its translucent blue fill */
  --red-ink:#ff8f8a; --warn-ink:#B8935A; --ok-ink:#5fd893;   /* текст пилюли «готово» (.p-ok): --grn давал 4.52 на своей подложке */   /* красный текст на панели («Удалить»): --red на листе давал 3.9 при норме 4.5 */
  --tag-ink:#b4bcc5; --tag-late-ink:#ff8f8a;   /* теги задач (.tdo-tag): --muted давал 3.9, --red у «просрочено» 4.1 (T-fix-tagcontrast) */
  --pr-a:#ff6b66; --pr-b:#e2b356; --pr-c:#8aa4c2;   /* важность А, Б, В: флажок на карточке и список в листе задачи */
  /* Календарь агентства (deliverable 48): цвета врачей не красный, не синий и не жёлтый (они
     у видов событий), отель серо-синий, текст на красном - тёмный (белый на #e0625e не читается). */
  --doc-emre:#a693e6; --doc-baki:#4fb8b0; --doc-urban:#d98bb6; --k-stay:#93a6c4; --k-mine:#bca3f5; --on-red:#1a1409;
  --veil:rgba(0,0,0,.55);
  --gold-soft: color-mix(in srgb, var(--accent) 16%, var(--panel-solid));
  /* Цвета фоновых пятен - ОТДЕЛЬНЫЕ токены, а не семантические --red/--blue: фон меняют по
     вкусу, а красный в приложении значит «ждёт ответа», и трогать его нельзя.
     Порядок важен: aur1 - главный тон (сине-лиловый), aur3 - роза третьим планом. Первая
     проба была розовой в лоб, и Макс сказал верно: «слишком красная, розовая». */
  --aur1:#8f7bd0; --aur2:#5fa3cf; --aur3:#c17fa8;
  --sheen:rgba(255,255,255,.16);
  /* Стекло плавающей панели и цвет активной вкладки на нём.
     🔴 Плотность 0.90, а не 0.72, ЗАМЕРЕНА: под панелью проезжает содержимое, и на светлой
     карточке подпись вкладки падала до 2.69 при норме 4.5. Полупрозрачность, сквозь которую
     не читается навигация, - это не материал, а дефект. */
  --glass:rgba(26,30,35,.90);
  --tab-on:var(--accent);
  --shadow:0 10px 34px rgba(0,0,0,.5); --hl:rgba(255,255,255,.08);
  /* Одна кривая на всё движение. Встроенная ease-out слишком вялая, а ease-in на интерфейсе
     запрещена: она тормозит ровно тот момент, на который человек смотрит. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* Пружина с лёгким перелётом - ТОЛЬКО на возврате после нажатия: палец это физический
     жест, и перелёт там читается как отклик живого предмета. На появлении панелей перелёт
     выглядит развязно, поэтому туда идёт --ease-out. */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Длительности (макет 49, 29.09). Было 14 разных чисел от .14 до .6 с - теперь четыре:
     --dur-1 смена цвета и приглушение; --dur-2 появления, уходы, переходы экранов, раскрытие;
     --dur-3 выезд листов и боковых панелей; --dur-press пружина после нажатия. Уход короче
     появления за счёт своей дистанции, кривая та же (--ease-out): ease-in по-прежнему нельзя.
     Данные (столбики графиков, счётчики, шкалы) и бесконечные индикаторы (запись, «печатает»)
     живут на своих числах: это не отклик интерфейса, а рисунок. */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-press: 220ms;
  /* Праздники (deliverable 49, этап C): --dur-party только у конфетти, вспышки и кольца. Цвета -
     сайта, а не темы (синий, золото, белый одни и те же в обеих темах), поэтому свои токены. */
  --dur-party: 1200ms;
  --p-navy: #0B1B33; --p-navy2: #17325c; --p-gold: #B8935A; --p-gold-hi: #CBA467; --p-white: #ffffff;
  --p-on-navy: #f4efe6; --p-on-navy-dim: rgba(244, 239, 230, .72);
  /* Без этого браузер рисует системные элементы (список select, поля выбора,
     полосы прокрутки) в светлой схеме поверх тёмной страницы, и текст в них не читается. */
  color-scheme: dark;
}
[data-theme='light'] {
  --bg1:#efece5; --bg2:#f8f6f2;
  --panel:rgba(255,255,255,.76); --panel-solid:#ffffff; --strong:rgba(33,27,20,.05);
  --ink:#211b14; --muted:#5f574c; --faint:#746c62;   /* было #8b8377 - 3.6:1, ниже нормы */
  --line:#e6ddd0; --edge:rgba(255,255,255,.7); --field:rgba(33,27,20,.05);
  --accent:#B8935A; --accent-strong:#9A7642; --accent-graphic:#96763e;      /* золото с сайта VST */
  --money-pr:var(--accent-strong); --money-ex:#948b7f;
  --grn:#1a8f4c; --red:#c0392b; --yel:#b7811f; --blue:#34608f;
  --ad-tag-ink:#224d7a;
  --red-ink:#c0392b; --warn-ink:#7a5410; --ok-ink:#11602f;   /* .p-ok: --grn на своей подложке давал 3.13 (R-20261006-T-p15-05827b24-01 F12) */   /* «Пересечение»: --accent-strong давал 4.15 на кнопке */
  --tag-ink:#5f574c; --tag-late-ink:#a5301f;   /* «просрочено» в фиолетовой личной строке: --red давал 3.99 */
  --pr-a:#c0392b; --pr-b:#a87414; --pr-c:#5a7391;
  --doc-emre:#6c5bb8; --doc-baki:#1f7f7a; --doc-urban:#b0487f; --k-stay:#5b6b86; --k-mine:#7350ac; --on-red:#ffffff;
  --veil:rgba(20,14,8,.42);
  --gold-soft: color-mix(in srgb, var(--accent) 16%, var(--panel-solid));
  /* В светлой теме пятна светлее: те же цвета в полную силу дали бы заливку. */
  --aur1:#a693d8; --aur2:#6f9fd8; --aur3:#d492b4;
  --sheen:rgba(255,255,255,.6);
  --glass:rgba(255,255,255,.90);
  /* Золото бренда на белом стекле даёт 2.8 при норме 4.5, и это самое важное состояние
     навигации. Меняем не бренд-токен, а только цвет активной вкладки в светлой теме. */
  --tab-on:#7d5c2e;
  --shadow:0 8px 26px rgba(33,27,20,.12); --hl:rgba(255,255,255,.8);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
/* ⚠️ Отступы безопасных зон берутся как МАКСИМУМ из env() и величины от Telegram
   (--tg-top / --tg-bottom ставит ui.js), а не как их сумма. Складывать нельзя: на
   телефонах, где обе ненулевые, отступ удвоился бы и шапка уехала на пустое место.
   Переменных может не быть вовсе - вне Telegram и на клиентах ниже Bot API 8.0, - тогда
   запасное значение 0px, и работает только env(), как и раньше. */
/* Базовый цвет холста. Нужен именно на html: фон уехал в body::before, у самого body
   фона больше нет, и при перетягивании за край экрана (overscroll) браузер показал бы
   пустоту - белую в любой теме. */
html { background: var(--bg2); }

body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font: 16px/1.45 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  /* Место под плавающую панель: её высота + отрыв от края + запас, чтобы последняя
     карточка не пряталась под стеклом. */
  padding-bottom: calc(96px + max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px)));
}
/* 🔴 Аврора ОТДЕЛЬНЫМ СЛОЕМ, а не фоном body.
   Раньше здесь стоял background-attachment: fixed, а на iOS WKWebView это свойство
   поддержано плохо: фон во весь экран перерисовывался на КАЖДОМ кадре прокрутки. Площадь
   у него 375x812, то есть в тринадцать раз больше самой шапки, - это и был самый дорогой
   элемент кадра, а вовсе не размытие в .bar.
   Фиксированный псевдоэлемент рисуется один раз и при прокрутке не трогается вовсе.

   🌸 Розово-синий с 08.09 (просьба Анастасии через Макса: «чтобы выглядело посвежее,
   розовенький, синенький, чтобы переливалось, но не переливалось» - то есть перелив цвета,
   но БЕЗ анимации). Пятна неподвижны: анимированный фон на телефоне это лишние кадры на
   каждой прокрутке и мешанина под текстом.

   Палитра переделана в тот же день по замечанию Макса («слишком красная, розовая, надо
   смешать»): главный тон теперь сине-лиловый, роза ушла третьим планом вниз, плотности
   снижены с 24/22/20 до 20/20/16 - он же сказал «ночью ярковато».

   Плотности замерены, а не выбраны на глаз. Заголовки секций лежат ПРЯМО НА ФОНЕ, и они
   ограничитель: при 20% они держат 5.0-5.5 при норме 4.5, при 30% падали бы до 4.3. Под
   карточкой самый тихий текст 5.1-5.2 в тёмной теме и 4.8 в светлой. Выше 24% не поднимать. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1250px 900px at 4% -12%, color-mix(in srgb, var(--aur1) 20%, transparent), transparent 66%),
    radial-gradient(1300px 950px at 98% 2%, color-mix(in srgb, var(--aur2) 20%, transparent), transparent 68%),
    radial-gradient(1150px 900px at 88% 96%, color-mix(in srgb, var(--aur3) 16%, transparent), transparent 66%),
    radial-gradient(1050px 800px at 8% 84%, color-mix(in srgb, var(--aur1) 12%, transparent), transparent 64%),
    /* Золото бренда остаётся тихой подсветкой в середине: приложение всё-таки VST. */
    radial-gradient(700px 520px at 50% 46%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 64%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

.hidden, [hidden] { display: none !important; }

/* Обёртка уходящего узла. Ставится на лету в vanish() (ui.js) и уезжает вместе с ним;
   в разметке её нет никогда. Механика та же, что у .fold-body: сетка схлопывается с 1fr
   до 0fr, потому что display и height анимировать нельзя, а места узел занимать перестаёт. */
.vanish-wrap { display: grid; grid-template-rows: 1fr; min-height: 0; }
.vanish-wrap > * { min-height: 0; overflow: hidden; }

/* ⚠️ --faint - самый тихий текст: номер под именем, буквы дней в календаре, плашка
   «холодный», шевроны. Он единственный из токенов НЕ проходил по контрасту (3.4 в тёмной,
   3.6 в светлой при норме 4.5), и правится здесь, а не в каждом месте отдельно.
   Проверять ЗАМЕРОМ в браузере, а не на глаз: наложение полупрозрачных панелей меняет
   результат так, что глазомер врёт - на этом я уже ошибся в разборе интерфейса. */

/* ---------- шапка ---------- */
.bar {
  position: sticky; top: 0; z-index: 6; display: flex; gap: 8px; align-items: center;
  margin: 10px 12px 0; padding: 10px 12px;
  padding-top: calc(10px + max(env(safe-area-inset-top, 0px), var(--tg-top, 0px)));
  background-color: var(--panel); border: 1px solid var(--edge); border-radius: 16px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--hl);
  backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
}
/* Заголовок уступает поиску: с четырьмя кнопками на 375 px на них двоих 185 px, и «Почему
   теряли» (110) режется многоточием, чтобы поиску остались его 96. */
.bar strong { font-size: 17px; white-space: nowrap; letter-spacing: .2px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bar .back {
  border: 0; background: none; font-size: 28px; line-height: 1; padding: 0 4px;
  color: var(--accent); cursor: pointer;
}
.bar input {
  flex: 1 1 96px; min-width: 96px; padding: 9px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--field); font-size: 16px; color: var(--ink);
}
.bar input::placeholder { color: var(--faint); }
.bar input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
/* Кнопки темы и приватности справа в шапке. Иконочные, чтобы не отъедать место у поиска. */
.bar .icobtn {
  border: 1px solid var(--line); background: var(--field); color: var(--muted);
  border-radius: 999px; width: 36px; height: 36px; flex: 0 0 auto; font-size: 16px;
  line-height: 1; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--spring);
}
/* 🔴 Зона касания 44x44 при видимом размере 36. Четыре кнопки в шапке (25.09, Лале):
   содержимого на 375 px 325 px, кнопки 3×36, зазоры 4×8 → заголовку и поиску вместе 185 px.
   Поиск держит ≥ 96 px всегда (flex-basis/min-width), заголовок уступает и режется
   многоточием там, где длиннее 89 px («Напоминания» 101, «Почему теряли» 110). Плейсхолдер
   по месту ставит fitSearch() в app.js: поле уже подписи (меряется canvas) → «Поиск». Замер аналитический,
   подтвердить на телефоне. Прозрачная накладка даёт палец там, где глазу нужна маленькая
   кнопка, и не стоит ни пикселя ширины. */
/* Стрелка «назад» золотом: в тёмной теме это 4.6, а в светлой 2.8 при норме 3.0 для
   крупного текста. Меняем не сам бренд-токен, а берём его же тёмный вариант - только в
   светлой теме, где он и нужен. */
[data-theme='light'] .bar .back { color: var(--accent-strong); }

.bar .icobtn { position: relative; }
.bar .icobtn::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 44px; height: 44px;
}
.bar .icobtn:hover { background: var(--strong); color: var(--ink); }
.bar .icobtn:active { transform: scale(.93); }
/* Personal plan cards share Lale's existing panel and motion tokens. */
/* T3d: own conversations and preference list. */
.seg.lale-tabs {margin:8px 14px;flex-shrink:0}
.seg.lale-tabs > .seg-btn {flex:1 1 auto;padding:0 8px}
.seg.lale-tabs > .seg-btn[aria-pressed='true'] {background-color:var(--strong);box-shadow:inset 0 0 0 1px var(--line),0 1px 3px rgba(0,0,0,.14)}
[data-theme='light'] .seg.lale-tabs > .seg-btn[aria-pressed='true'] {background-color:var(--panel-solid)}
.lale-panel {overflow:auto;min-height:0;flex:1;padding:14px}
.lale-row {display:flex;flex-direction:column;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.lale-chat-open {text-align:left;white-space:normal}
.lale-actions {display:flex;gap:6px;flex-wrap:wrap}
.lale-memory-text {white-space:pre-wrap;overflow-wrap:anywhere}
.lale-row textarea,.lale-memory-add textarea {width:100%;box-sizing:border-box}
.lale-memory-add {margin:12px 0;display:grid;gap:12px;justify-items:start}
#memBox .fold-body {overflow:auto;max-height:55vh}
#memBox details {margin-top:12px}
#memBox details > summary {position:relative;min-height:var(--h-m);padding:8px 0;cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
#memBox details > summary::-webkit-details-marker {display:none}
#memBox details > summary::after {content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
#bot .mem.lale-memory-view {display:flex;flex-direction:column;flex:1;min-height:0;margin-bottom:14px}
#bot .lale-memory-status {flex:none;overflow-wrap:anywhere}
#bot .lale-memory-status:not(:empty) {padding:10px;border-bottom:1px solid var(--line);color:var(--ink)}
#bot .mem.lale-memory-view>.fold-body {flex:1;min-height:0;max-height:none}
#bot .mem.lale-memory-view>.fold-body>.fold-inner {overflow:auto}
.bot-plan-card { display: grid; gap: 12px; margin-top: 12px; }
.bot-plan-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; overflow-wrap: anywhere; }
.bot-plan-date { margin-top: 6px; }
.bot-plan-heard { font-size: 12px; opacity: .8; margin-top: 8px; white-space: pre-wrap; }
.bot-plan-conflict, .bot-plan-status { margin-top: 8px; }
.bot-plan-status:empty { margin-top: 0; }
.bot-plan-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bot-plan-actions .btn { white-space: normal; justify-content: flex-start; text-align: left; max-width: 100%; }
/* П7 п. 1: строка видимости, «Рабочее / Личное», выбор клиента; личная карточка фиолетовая с пунктиром. */
.bot-plan-scope { margin-top: 6px; color: var(--muted); font-size: 13px; }
.bot-plan-ask { margin-top: 8px; }
.bot-plan-scope-seg { margin-top: 10px; }
.bot-plan-scope-seg .seg-btn { flex: 1 1 0; }
.bot-plan-row.k-mine { border: 1px dashed var(--k-mine); background: color-mix(in srgb, var(--k-mine) 15%, var(--panel-solid)); }

/* Лале: круглый аватар в кнопке шапки. Открытый чат подсвечивается кольцом: .bar .icobtn.on красит
   рамку, а на картинке её не видно. 🔴 Без overflow: hidden на самой кнопке: она containing block
   для накладки ::before 44x44, и обрезка резала бы накладку и в отрисовке, и в попадании пальца -
   аватар отзывался бы только на свои 36 px. Круг даёт border-radius самой картинки. */
#botBtn { padding: 0; }
#botBtn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
#botBtn.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }

/* Сетка: на телефоне одна колонка, на большом экране карточки сами встают в несколько.
   Раньше десктоп выглядел узкой полосой на 640px посреди пустого монитора. */
.view { padding: 14px 12px; display: block; }
.view.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
@media (max-width: 719px) { .view.grid { display: block; } }
@media (min-width: 720px) {
  .view { max-width: 1180px; margin: 0 auto; }
  /* На большом экране списки раскладываются в колонки: раньше это была узкая полоса
     на 640px посреди пустого монитора. Плитки и подписи остаются во всю ширину. */
  /* У вкладки «Клиенты» в колонки раскладывается #list-rows, а не весь экран: чипы
     фильтров, кнопка «Новый клиент» и подпись «показано N из M» должны идти во всю
     ширину, а не вставать отдельными плитками в сетке. */
  #day-body, #tasks-body, #list-rows, #stats-body {
    display: grid; gap: 14px; align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }
  #day-body > .stats, #day-body > .note-hint, #day-body > .day-lbl, #day-body > .td-card,
  #stats-body > .stats, #stats-body > .note-hint,
  #tasks-body > .note-hint { grid-column: 1 / -1; }
  #day-body > details.sec, #tasks-body > details.sec,
  #stats-body > details.sec { margin-bottom: 0; }
  /* Карточка клиента - это чтение длинного текста, её наоборот держим узкой. */
  #view-client { max-width: 760px; }
}
.loading { color: var(--muted); padding: 26px 6px; text-align: center; }
.loading.sk { padding: 0; text-align: left; }
/* На компьютере тело экрана - сетка колонок: скелет встаёт во всю ширину, а не в одну клетку. */
.loading.sk > .skel { grid-column: 1 / -1; }

/* ---------- три больших числа ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 16px; }
.stat {
  border: 1px solid var(--edge); border-radius: 16px; background-color: var(--panel);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hl);
  padding: 13px 6px 11px; text-align: center; cursor: pointer; font: inherit; color: inherit;
  transition: transform var(--dur-press) var(--spring), background-color var(--dur-1) var(--ease-out);
  position: relative;
}
/* Плитки - настоящие кнопки, они открывают свой список. На тач-экране наведения нет, и
   нажимаемость раньше не была обозначена ничем: три числа читались как статистика.
   Уголок тихий намеренно - он подсказывает, а не спорит с самим числом. */
.stat::after {
  content: '›'; position: absolute; top: 5px; right: 10px;
  font-size: 16px; line-height: 1; color: var(--faint);
}
.stat b { display: block; font-size: 27px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); }
.stat.s-red b { color: var(--red); }
.stat.s-warm b { color: var(--yel); }
.stat.s-gold b { color: var(--accent); }
.stat:hover { background-color: var(--strong); }
.stat:active { transform: scale(.96); }

/* ---------- секции ---------- */
details.sec { margin-bottom: 16px; }
details.sec > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  min-height: var(--h-m); margin-bottom: 8px; padding: 0 8px 0 12px;
  font-size: 14px; font-weight: 600; line-height: 20px; text-transform: none; letter-spacing: normal;
  color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: var(--r-m);
  white-space: nowrap; user-select: none;
}
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary > span:first-child:not(.chev):not(.pr-chev) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* П42: одна рисованная стрелка. Круг только у списков и блоков карточки. */
details.sec > summary .chev, details.sec > summary .pr-chev, .card[data-panel] > h3 .pchev,
details.fold:not(.sec) > summary .chev, #panel .fold .chev, #memBox details > summary .chev,
details.imp-skip:not(.sec) > summary .chev, .pg-fold > .chev, .tdo-fold > .chev, .pm-history > summary .chev {
  flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px;
  color: var(--muted); font-size: 0; transform: none;
  transition: color var(--dur-2) var(--ease-out);
}
details.sec > summary .chev::before, details.sec > summary .pr-chev::before, .card[data-panel] > h3 .pchev::before,
details.fold:not(.sec) > summary .chev::before, #panel .fold .chev::before, #memBox details > summary .chev::before,
details.imp-skip:not(.sec) > summary .chev::before, .pg-fold > .chev::before, .tdo-fold > .chev::before, .pm-history > summary .chev::before {
  content: ''; box-sizing: border-box; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateX(-2px) rotate(-45deg); transition: transform var(--dur-2) var(--ease-out);
}
details.sec > summary .chev, details.sec > summary .pr-chev, .card[data-panel] > h3 .pchev {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-solid);
}
details.sec[open] > summary .chev, details.sec[open] > summary .pr-chev, .card[data-panel]:not(.folded) > h3 .pchev,
details.fold:not(.sec)[open] > summary .chev, #panel .fold:not(.folded) .chev,
#memBox details[open] > summary .chev, details.imp-skip:not(.sec)[open] > summary .chev,
.pg-fold[aria-expanded='true'] > .chev, .tdo-fold[aria-expanded='true'] > .chev, .pm-history[open] > summary .chev { color: var(--accent-graphic); }
details.sec[open] > summary .chev::before, details.sec[open] > summary .pr-chev::before,
.card[data-panel]:not(.folded) > h3 .pchev::before, details.fold:not(.sec)[open] > summary .chev::before,
#panel .fold:not(.folded) .chev::before, #memBox details[open] > summary .chev::before,
details.imp-skip:not(.sec)[open] > summary .chev::before, .pg-fold[aria-expanded='true'] > .chev::before, .tdo-fold[aria-expanded='true'] > .chev::before,
.pm-history[open] > summary .chev::before {
  transform: translateY(-2px) rotate(45deg);
}
details.fold:not(.sec) > summary .chev, #panel .fold .chev, #memBox details > summary .chev,
details.imp-skip:not(.sec) > summary .chev, .pg-fold > .chev, .tdo-fold > .chev, .pm-history > summary .chev { order: -1; margin-left: 0; }
details.fold:not(.sec) > summary .chev { margin-right: 8px; }
details.sec > summary .cnt {
  flex: none;
  background: var(--field); border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 9px; font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* Появление строк при СМЕНЕ ОТБОРА: список подменяется целиком, и без этого он
   телепортируется. Только первые восемь и по 25 мс - дальше первого экрана эффекта всё
   равно не видно. Догрузку «показать ещё» намеренно не анимируем: новые строки уходят
   ниже сгиба. */
/* После появления обычные стили снова главные: .is-done приглушает задачу, а нажатие
   сжимает .chip. Заливка both навсегда перекрывала их opacity и transform. Конечный кадр
   берётся из обычного стиля, чтобы .is-done проявлялась до .5, без скачка с 1 в конце. */
.rise { animation: rise var(--dur-2) var(--ease-out) backwards; }
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
}

/* Открытие карточки клиента - переход, у него есть направление: содержимое приходит
   снизу. 180 мс, несколько раз в день. */
#view-client:not(.hidden) > #client-body { animation: rise var(--dur-2) var(--ease-out) backwards; }

/* T-p44 (П44, вид 2 «Край соседней», crm/public/ribbon.js): лента карточек выбранного списка «Моего дня».
   Полоса M40 над карточкой (форматы П25): круги ‹ › S34 с пальцем 44, название списка, «2 из 3» и точки внутри рамки;
   длинное название обрезается многоточием и не раздвигает полосу. */
.rib-strip {
  display: flex; align-items: center; gap: 8px; min-height: var(--h-m); padding: 2px 2px; margin: 0 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field); box-sizing: border-box;
}
.rib-arrow {
  position: relative; flex: none; width: var(--h-s); height: var(--h-s); padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;   /* не grid: в сетке накладка ::after встала бы нулевой по центру */
  transition: background-color var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.rib-arrow::after { content: ''; position: absolute; inset: -6px; }   /* от внутреннего края рамки 1: 32 + 12 = 44 */
.rib-arrow .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rib-arrow:hover, .rib-arrow:active { background: var(--strong); }
.rib-arrow:disabled { opacity: .35; cursor: default; background: var(--panel-solid); }
.rib-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rib-mid { flex: 1 1 auto; min-width: 0; display: grid; justify-items: center; }
.rib-title { max-width: 100%; font-size: 13.5px; line-height: 1.2; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rib-sub { display: flex; align-items: center; gap: 6px; max-width: 100%; line-height: 1.2; }
/* Счёт темнее --muted: на заливке полосы --muted в тёмной теме давал 3.9-4.05 при норме 4.5 (своя проверка 12.10). */
.rib-cnt { display: inline-block; font-size: 12px; color: color-mix(in srgb, var(--muted) 60%, var(--ink)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rib-cnt.rib-bump { animation: rib-bump var(--dur-press) var(--ease-out); }
@keyframes rib-bump { 40% { transform: scale(1.18); color: var(--accent-strong); } }
.rib-dots { display: flex; gap: 4px; }
.rib-dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, transparent); }
/* Активная точка через --accent-graphic (ARCH-P42-CONTRAST, решение ARCH-P44-DOTS): в светлой теме --accent на заливке полосы давал
   1.8-2.0 при норме 3.0 для графики; в тёмной токен равен --accent. Заливка полосы --field полупрозрачная, на 375 под ней аврора, и
   один --accent-graphic даёт 2.7: в светлой теме точка на пятую часть темнее чернилами (приём .rib-cnt), замер 3.5 на 375 и 4.0 на 1280. */
.rib-dots i.on { background: var(--accent-graphic); }
[data-theme='light'] .rib-dots i.on { background: color-mix(in srgb, var(--accent-graphic) 80%, var(--ink)); }
/* Кромки соседей: ровный край листа 6 px (без текста), пока страница наверху (до 8 px); дальше уезжают и гаснут. */
.rib-edge {
  position: fixed; z-index: 4; width: 6px; pointer-events: none; box-sizing: border-box;
  bottom: calc(96px + max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px)));
  background: var(--panel-solid); border: 1px solid color-mix(in srgb, var(--ink) 24%, var(--line)); opacity: 0;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.rib-edge-l { border-left: 0; border-radius: 0 6px 6px 0; transform: translateX(-14px); }
.rib-edge-r { border-right: 0; border-radius: 6px 0 0 6px; transform: translateX(14px); }
.rib-edge.rib-edge-in { opacity: 1; transform: none; }
/* Кромки и сосед принадлежат экрану карточки: над перепиской, предложением и калькулятором их нет. */
body:has(#view-client.hidden) .rib-edge, body:has(#view-client.hidden) .rib-peek { display: none; }
/* Соседняя во время жеста: шапка и серые блоки в той же колонке, что карточка; ниже шапки и нижней полосы. */
.rib-peek { position: fixed; z-index: 4; bottom: 0; overflow: hidden; pointer-events: none; }
.rib-slide { transition: transform var(--dur-3) var(--ease-out); }
.rib-drag { transition: none; }
html.rib-dragging, html.rib-dragging * { -webkit-user-select: none; user-select: none; }
/* Вертикаль - прокрутка страницы, бок - лента: браузер не забирает боковое движение пальца. */
#view-client.rib-on { touch-action: pan-y pinch-zoom; }
/* Уезжающая карточка не делает страницу шире экрана (UI-RULES 3, scrollWidth); clip не создаёт прокрутки, липкое на месте. */
#main:has(> #view-client.rib-on) { overflow-x: clip; }
/* Экран после последней карточки. */
.rib-end { display: grid; place-content: center; gap: 6px; min-height: 50vh; padding: 24px 12px; text-align: center; color: var(--muted); }
.rib-end b { font-size: 16px; color: var(--ink); }

/* Смена экрана (макет 49): новый экран проявляется. Только прозрачность: transform сделал бы
   экран контейнером для position: fixed, и плавающая «+» календаря уехала бы на время перехода.
   Заливка backwards, а не both: с both экран навсегда оставался бы отдельным слоем наложения,
   и его z-index потолком для всего fixed внутри. */
.view-in { animation: view-in var(--dur-2) var(--ease-out) backwards; }
@keyframes view-in { from { opacity: 0; } to { opacity: 1; } }
/* Смена языка (T-i18n-a1, П10, Макс 05.10): страница перезагружается, но не щелчком. Уход: содержимое
   гаснет за --dur-1, приход: ждёт сборки экрана прозрачным и проявляется за --dur-2. Прозрачность у body
   целиком (сверка с макетом #P10, M1): панель и экран под ней гаснут одной группой, сквозь полупрозрачную
   панель ничего не просвечивает; аврора body::before гаснет с ними до фона html (--bg2). Только opacity,
   transform у fixed-узлов не трогаем; метки ставит i18n/core.js, при «уменьшить движение» их нет. */
html[data-lang-out] body { opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
html[data-lang-in='wait'] body { opacity: 0; }
html[data-lang-in='go'] body { animation: view-in var(--dur-2) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  html[data-lang-out] body, html[data-lang-in] body { opacity: 1; transition: none; animation: none; }
}
/* Фокус после прихода на нажатой кнопке языка: после касания или мыши без обводки (M2), с клавиатуры как
   обычно. Класс ставит i18n/core.js там, где нет focus({ focusVisible: false }), и снимает по первой клавише. */
button.no-ring:focus-visible, #panel button.no-ring:focus-visible { outline: none; }

/* Скелет вместо «Загружаю…» (макет 49): серые строки на месте будущего списка, чтобы экран не
   схлопывался в одну надпись и не прыгал, когда придут данные. Переливается медленно и тихо;
   при «уменьшить движение» просто стоит серым. */
.skel { display: grid; gap: 9px; padding: 6px 0; }
.skel i {
  display: block; height: 58px; border-radius: 18px; border: 1px solid var(--edge);
  background: linear-gradient(90deg, var(--field) 0%, var(--strong) 50%, var(--field) 100%);
  background-size: 200% 100%; animation: skel 1.4s linear infinite;
}
.skel i:first-child { height: 74px; }
.skel i:nth-child(3) { width: 88%; } .skel i:nth-child(4) { width: 94%; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Появление панели, которой на экране не было: приём .lg-menu из общего набора.
   Без перелёта - на возникновении он выглядит развязно; перелёт живёт только на
   возврате после нажатия. */
.pop-in { animation: pop-in var(--dur-2) var(--ease-out) backwards; }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-5px) scale(.99); }
}

/* ---------- строка клиента ---------- */
.row {
  display: flex; align-items: stretch; background-color: var(--panel);
  border: 1px solid var(--edge); border-left-width: 4px; border-radius: 18px;
  margin-bottom: 9px; overflow: hidden;
  box-shadow: var(--shadow), inset 0 1px 0 var(--hl);
  transition: border-color var(--dur-1) var(--ease-out);
}
/* Кружок с инициалами. Монохромный намеренно: цвет в строке уже занят температурой (левая
   полоса) и статусом (пилюли), см. пояснение у avatar() в app.js. Тень не вешаем - .row её
   уже несёт, а вторая внутри обрезалась бы о её же overflow. */
.row .av {
  flex: 0 0 auto; align-self: center; width: 36px; height: 36px;
  border-radius: 50%; background-color: var(--field); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 700; color: var(--muted); letter-spacing: .2px;
}
.row .av .ico {
  width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.row.heat-hot { border-left-color: var(--red); }
.row.heat-warm { border-left-color: var(--yel); }
.row.heat-cold { border-left-color: var(--faint); }
.row.heat-none { border-left-color: var(--line); }
/* П37: статус сильнее температуры; размеры строки прежние.
   П45c (ARCH-ROW-FILL-FULL, Макс 11.10 «чтобы заливалась вся плашка»): заливка ровная на всю строку, включая колонку
   кнопок, одним светлым тоном поверх прежнего стекла строки, без градиента; левая полоса прежняя. Тот же тон у образцов
   справки «Что значат цвета» (.legend .sw.booked / .ready). */
.row.is-booked {
  border-left-color: var(--grn);
  background-color: color-mix(in srgb, var(--grn) 14%, var(--panel));
}
.row.is-ready {
  border-left-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 20%, var(--panel));
}
/* П37-EDGES (Макс 13.10 по снимку «full» и 14.10 словом «градиентом, до самого края»): у строк со статусом заливка
   градиентом слева направо (у левой полосы насыщеннее, к правому краю светлее) по всей строке вместе с колонкой кнопок,
   до самого края карточки: рамка сверху, справа и снизу прозрачная, блик сверху снят, тень прежняя; левая полоса 4 px
   остаётся. Ровная заливка П45c у этих двух строк заменена градиентом эскиза макета (59-polish-src/p37-edges.js).
   Строки без статуса как были. */
.row.is-booked, .row.is-ready {
  border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent;
  background-origin: border-box; background-clip: border-box;
  background-color: var(--panel);
  box-shadow: var(--shadow);
}
.row.is-booked { background-image: linear-gradient(90deg, color-mix(in srgb, var(--grn) 22%, transparent) 0%,
  color-mix(in srgb, var(--grn) 12%, transparent) 60%, color-mix(in srgb, var(--grn) 8%, transparent) 100%); }
.row.is-ready { background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 32%, transparent) 0%,
  color-mix(in srgb, var(--accent) 16%, transparent) 60%, color-mix(in srgb, var(--accent) 10%, transparent) 100%); }
/* Вторичная подпись должна читаться и на заливке статуса. */
.row.is-booked .ago, .row.is-ready .ago { color: color-mix(in srgb, var(--muted) 40%, var(--ink)); }
/* 🔴 Кружок лежит ВНУТРИ .main, поэтому нажимаемая область начинается от левого края
   карточки, а не после аватара. Замер до правки: строка 351 px, нажималось и подсвечивалось
   234, то есть 67%, и полоса в 51 px слева выглядела частью карточки, ничего не делая. */
.row .main {
  flex: 1; min-width: 0; padding: 11px 13px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: background-color var(--dur-1) var(--ease-out);
}
.row .main > .col { flex: 1; min-width: 0; }
.row .main:hover { background-color: var(--field); }
.row .main:active { background-color: var(--strong); }
/* П45b: строка человека из «Удалённых» (отказ) без карточки: не нажимается и не подсвечивается. */
.row .main.gone { cursor: default; }
/* П43: «По статусу» на «Моём дне»: подпись и кнопка «Статус» в одну строку; ссылка «Все в «Клиентах»» под строками. */
.day-st-line { display: flex; align-items: center; gap: 10px; padding: 6px 2px 10px; }
.day-st-lab { font-size: 12px; font-weight: 700; color: var(--muted); }
.day-st-line .pl-pick-wrap { flex: 1; min-width: 0; }
/* Длинное название своего статуса переносится, а не прячет число «· N» под многоточие (кнопка и строки листа). */
.day-st-pick .pl-pick .pl-pick-t, .day-st-sheet .pl-pick-row .pl-pick-t { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
/* «С рекламы»: в поле «Кампания» и в его листе обрезается только длинное название, число справа от него видно всегда. */
.pl-pick-t.pl-pick-nc { display: flex; align-items: baseline; gap: 4px; }
.pl-pick-nc .pl-pick-nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pick-nc .pl-pick-cnt { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.day-more { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px 4px; flex-wrap: wrap; }
.day-empty { padding: 4px 2px 8px; }
.exp-title:focus:not(:focus-visible), .day-lbl:focus:not(:focus-visible), .att-t:focus:not(:focus-visible) { outline: none; }
.row .main.gone:hover, .row .main.gone:active { background-color: transparent; }
/* Имя занимает всю ширину и обрезается многоточием: пилюль рядом больше нет, а длинное имя
   не должно ломать строку на две (Макс, 08.09). */
.row .nm-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.row b.nm {
  display: block; font-size: 15.5px; font-weight: 700; letter-spacing: .1px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* «Не писать» - единственная метка в строке, и она про безопасность, а не про красоту.
   ⚠️ fill/stroke заданы здесь: правила для .ico в файле точечные (.btn .ico, .row .side .ico,
   .row .av .ico), общего нет, и без них браузер залил бы контур чёрным. Проверить это на
   боевых данных нельзя - метку пока не поставили никому, поэтому и ошибка была бы тихой. */
.row .no-write {
  flex: 0 0 auto; width: 16px; height: 16px; color: var(--red);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Срок под именем: по нему список и отсортирован, но выглядит он теперь тихой строкой,
   а не пилюлей. Высоты строке не добавляет - её пол задают кнопки справа. */
.row .ago { color: var(--faint); font-size: 12.5px; margin-top: 1px; }
/* Кнопки В РЯД, а не в столбик: два элемента по 44 px друг под другом дали бы строку
   114 px, то есть выше той, которую мы и сокращаем. */
.row .side {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-left: 1px solid var(--line);
}
/* 44x44 - меньше палец промахивается, а промах здесь открывает WhatsApp или карточку. */
.row .side a, .row .side button {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 8px;
  border: 1px solid var(--line); background: var(--field); color: var(--accent);
  border-radius: 14px; font-size: 18px; line-height: 1;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out);
}
.row .side a:hover, .row .side button:hover { background: var(--strong); }
.row .side a:active, .row .side button:active { transform: scale(.94); }
.row .side a, .row .side button { position: relative; }
.row .side a::after, .row .side button::after { content: ''; position: absolute; inset: -1px; }
.row .side a:active::after, .row .side button:active::after { inset: -3px; }
/* П45c: на заливке статуса кнопки строки на сплошной подложке: прозрачная --field пропускала цвет, и значок WhatsApp в
   светлой теме падал до 2.6:1 (замер p45c-rows-browser); на сплошной 3.6:1, как и положено графике (от 3.0). Наведение
   тем же сплошным тоном чуть темнее (светлее в тёмной теме). */
.row.is-booked .side a, .row.is-booked .side button, .row.is-ready .side a, .row.is-ready .side button { background-color: var(--panel-solid); }
.row.is-booked .side a:hover, .row.is-booked .side button:hover,
.row.is-ready .side a:hover, .row.is-ready .side button:hover { background-color: color-mix(in srgb, var(--ink) 6%, var(--panel-solid)); }
/* П45c: по той же причине кружок с инициалами на заливке статуса на сплошной подложке: в тёмной теме инициалы на прозрачном
   --field поверх заливки давали 3.6-4.1:1, на сплошной от 6. */
.row.is-booked .av, .row.is-ready .av { background-color: var(--panel-solid); }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px;
  font-weight: 600; margin: 0 6px 2px 0;
}
.p-warm { background: color-mix(in srgb, var(--yel) 20%, transparent); color: var(--yel); }
/* Не --faint: плашка лежит на подсвеченном --field, и там его не хватает по контрасту
   (4.1 при норме 4.5). Тише двух других она остаётся тем, что бесцветная. */
.p-cold { background: var(--field); color: var(--muted); }
.p-red  { background: var(--red); color: #fff; }
.p-ok   { background: color-mix(in srgb, var(--grn) 22%, transparent); color: var(--ok-ink); }
.p-days { background: var(--field); color: var(--muted); }
.p-blue { background: color-mix(in srgb, var(--blue) 22%, transparent); color: var(--blue); }

/* ---------- фильтры-чипы ---------- */
.chips {
  /* Переносим, а не прокручиваем вбок: на телефоне шесть фильтров это 805px при ширине 351,
     то есть больше половины оказывается за краем. Фильтр, которого не видно, для неё
     не существует - ровно та же беда, что и с самим списком клиентов до этого экрана. */
  display: flex; flex-wrap: wrap; gap: 10px 6px; padding: 2px 0 12px;
}
.chip {
  flex: 0 0 auto; background: var(--field); border: 1px solid var(--line);
  color: var(--muted); border-radius: 999px; padding: 0 12px; font-size: 13px; line-height: 18px;
  min-height: var(--h-s); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
    transform var(--dur-press) var(--spring);
}
/* Отклик на нажатие - единственное, что анимируется у того, что жмут десятки раз в день.
   120 мс: подтверждение, что интерфейс услышал, и ничего сверх этого. */
.chip { transform: scale(1); }
.chip:active { transform: scale(.96); }
.chip:hover { background: var(--strong); }
.chip.on {
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  color: #1a1409; border-color: transparent;
}
.chip .n { opacity: .72; font-weight: 700; font-size: 11px; }

/* Номер отправки: палец держит неподвижную область, сжимается только плашка. */
.send-channel-choice { margin-top: 14px; }
.send-channel-row { gap: 0 6px; padding: 4px 0 8px; }
.chip.send-channel-chip { min-height: 44px; min-width: 44px; max-width: 100%; white-space: normal; display: inline-flex; align-items: center; justify-content: center; text-align: center; position: relative; isolation: isolate; transform: none; background: transparent; border-color: transparent; color: var(--ink); box-shadow: none; padding: 4px 12px; }
.chip.send-channel-chip::before { content: ''; position: absolute; inset: 4px 0; width: auto; height: auto; min-width: 0; transform: none; z-index: -1; border-radius: inherit; border: 1px solid var(--line); background: var(--panel-solid); transition: transform var(--dur-press) var(--spring), background-color var(--dur-1) var(--ease-out); }
.chip.send-channel-chip.on { color: #1a1409; }
.chip.send-channel-chip.on::before { border-color: transparent; background: linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 95%,var(--panel-solid))); }
.chip.send-channel-chip:active::before { transform: scale(.96); height: auto; width: auto; }
.send-channel-status { color: var(--ink); }
[data-privacy='on'] .send-channel-label { filter: blur(5px); }

/* Панель выгрузки: два отбора и живое число под кнопкой. Рамка нужна, чтобы «Кого» и
   «Прилёт» читались как настройки ФАЙЛА, а не как ещё одни фильтры списка. */
.exp-panel {
  border: 1px solid var(--line); border-radius: 18px;
  padding: 12px 14px; background: var(--panel);
}
/* Панель выгрузки живёт по правилам сворачиваемых карточек (card[data-panel]), но выглядит
   как панель отбора над ней - иначе две соседние панели читались бы как разные сущности. */
.card.exp-panel { border-radius: 18px; padding: 12px 14px; }
.card.exp-panel > h3 { font-size: 12px; letter-spacing: .06em; }
.exp-title {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
/* Заголовок панели списка: слева название, справа компактный «Новый». Кнопка была во всю
   ширину между чипами и выгрузкой и спорила с обеими - а главное действие этого экрана
   найти человека, а не завести нового. */
.exp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.exp-head .exp-title { margin-bottom: 0; }
/* Цвет - читаемое золото --tab-on (T-p33 круг 2, R-20261008-T-p33-5a6e92d8-01 F3): фирменное --accent на светлом поле давало 2,54 при
   норме 4,5; в тёмной --tab-on это и есть --accent. */
.mini-btn {
  margin-left: auto; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--field); color: var(--tab-on);
  border-radius: var(--r-s); padding: 0 11px; font: inherit; font-size: 13.5px; line-height: 20px;
  min-height: var(--h-s); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--spring);
}
.mini-btn:active { transform: scale(.96); }
.list-panel { margin-bottom: 12px; }

.exp-line { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.exp-lab { flex: 0 0 62px; font-size: 14px; color: var(--muted); }
.exp-line select { margin: 0; flex: 1 1 auto; min-width: 0; }

/* ---------- календарь и виды событий ----------
   Цвет по смыслу: операция красная (пропустить нельзя), поездка синяя, созвон жёлтый.
   Напоминание и своё событие нейтральны - если выделено всё, не выделено ничего. */
.task.k-op { border-left-color: var(--red); }
.task.k-trip { border-left-color: var(--blue); }
.task.k-warn { border-left-color: var(--yel); }
/* Календарь агентства (deliverable 48): отель - серо-синий, осмотр после операции - красный
   пунктиром (не сплошной, как у операции: осмотр переносится легко, операция - нет). */
.task.k-stay { border-left-color: var(--k-stay); }
.task.k-care { border-left-color: var(--red); border-left-style: dashed; }
.quote.k-op { border-left-color: var(--red); }
.quote.k-trip { border-left-color: var(--blue); }
.quote.k-warn { border-left-color: var(--yel); }

/* Заголовок дня в списке: «Сегодня», «Завтра». Он и делает плоский список читаемым. */
.day-head {
  font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .3px;
  margin: 12px 2px 6px; text-transform: uppercase;
}

.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal-head b { font-size: 15px; text-transform: capitalize; }
.cal-head .btn { padding: 6px 14px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 10px; }
.cal-w { text-align: center; font-size: 10.5px; color: var(--faint); padding: 2px 0 4px; }
.cal-day {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 1px; padding: 4px 1px 2px;
  border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; overflow: hidden;
}
.cal-day.empty { pointer-events: none; }
.cal-day.has { background: var(--field); color: var(--ink); }
.cal-day.now { border-color: var(--accent); color: var(--ink); font-weight: 700; }
.cal-day:hover:not(.empty) { border-color: var(--edge); }
.cal-day .dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; line-height: 1; }
.cal-day .dots i { font-style: normal; font-size: 9px; }
.cal-list { margin-top: 12px; }
/* Найденные клиенты при записи даты: те же чипы, что и везде, в столбик по ширине. */
.found { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* ---------- статус клиента ----------
   Выпадающий список вместо россыпи кнопок: статусов больше десяти, и рядами они занимали
   пол-экрана ради одного нажатия раз в неделю (замечание Макса 01.09).

   🎨 Цвет по ходу сделки: жёлтый - почти, зелёный - деньги подтверждены, синий - сделано.
   Остальные нейтральны намеренно: если выделено всё, не выделено ничего. Привязка идёт к
   КЛЮЧУ статуса (см. STAGE_TONE в app.js), поэтому переименование цвет не собьёт. */
.stage-row { display: flex; gap: 8px; align-items: center; }
.stage-pick { flex: 1; min-width: 0; margin: 0; font-weight: 600; }
/* П45 (Макс 09.10, макет cfg-p45): свой цвет у каждого статуса. Соответствие ключ → тон одно, на сервере
   (crm/lib/stages.js TONE); здесь тон → цвет на токенах обеих тем. Чип в шапке карточки, кнопка и кружки листа
   выбора, «Кто» и кнопки статуса на «Моём дне» берут одни и те же переменные: --st-c основной цвет, --st-bg
   заливка, --st-ring контур. «Нужно время» янтарный контур - это золото --accent, отдельного янтарного токена нет. */
.tone-wait, [data-tone='wait'] { --st-c: var(--yel); --st-bg: color-mix(in srgb, var(--yel) 22%, transparent); --st-ring: transparent; }
.tone-prog, [data-tone='prog'] { --st-c: var(--blue); --st-bg: color-mix(in srgb, var(--blue) 14%, transparent); --st-ring: color-mix(in srgb, var(--blue) 45%, transparent); }
.tone-time, [data-tone='time'] { --st-c: var(--accent); --st-bg: color-mix(in srgb, var(--accent) 10%, transparent); --st-ring: color-mix(in srgb, var(--accent) 70%, transparent); }
.tone-ready, [data-tone='ready'] { --st-c: var(--accent); --st-bg: color-mix(in srgb, var(--accent) 30%, transparent); --st-ring: transparent; }
.tone-good, [data-tone='good'] { --st-c: var(--grn); --st-bg: color-mix(in srgb, var(--grn) 22%, transparent); --st-ring: transparent; }
.tone-done, [data-tone='done'] { --st-c: var(--blue); --st-bg: color-mix(in srgb, var(--blue) 22%, transparent); --st-ring: transparent; }
.tone-cold, [data-tone='cold'] { --st-c: var(--muted); --st-bg: color-mix(in srgb, var(--muted) 18%, transparent); --st-ring: transparent; }
.tone-new, [data-tone='new'] { --st-c: var(--blue); --st-bg: transparent; --st-ring: color-mix(in srgb, var(--blue) 60%, transparent); }
.tone-bad, [data-tone='bad'] { --st-c: var(--red); --st-bg: color-mix(in srgb, var(--red) 20%, transparent); --st-ring: transparent; }
.tone-rev, [data-tone='rev'] { --st-c: color-mix(in srgb, var(--red) 45%, var(--blue)); --st-bg: color-mix(in srgb, color-mix(in srgb, var(--red) 45%, var(--blue)) 22%, transparent); --st-ring: transparent; }
.tone-custom, [data-tone='custom'] { --st-c: var(--muted); --st-bg: transparent; --st-ring: color-mix(in srgb, var(--muted) 55%, transparent); }
.tone-none, [data-tone='none'] { --st-c: var(--muted); --st-bg: transparent; --st-ring: var(--line); }
.stage-pick[data-tone]:not([data-tone='none']) {
  border-color: transparent; box-shadow: inset 0 0 0 1px var(--st-c); background-color: color-mix(in srgb, var(--st-c) 14%, transparent);
}

/* Метка статуса в списках. Здесь цвет полезнее всего: по ряду карточек видно, кто на каком
   шаге, не вчитываясь в подписи. */
.pill.p-stage {
  background: var(--st-bg, color-mix(in srgb, var(--accent) 16%, transparent));
  box-shadow: inset 0 0 0 1px var(--st-ring, transparent);
  color: var(--ink);
}
/* «Без статуса»: серый пунктир (макет m45-none). */
.pill.p-stage.tone-none { color: var(--muted); box-shadow: none; outline: 1px dashed color-mix(in srgb, var(--muted) 60%, transparent); outline-offset: -1px; }
/* П45 п.1: чип статуса первым в шапке карточки. Видимо пилюля как в макете (около 21-23), палец 44 прозрачной
   накладкой по центру (UI-RULES раздел 3: 44 это область нажатия, а не видимая высота); пока держат, накладка выше
   и шире, отпускание у края не уходит мимо. Длинное название переносится внутри чипа, не режется; одно длинное слово
   (40 букв без пробелов) переносится посреди слова и не уезжает за экран (K3), полное имя в aria-label. */
/* Накладка 44 чипа выходит над видимыми 21 на 11.5, накладка пилюли «Указать номер» под её 34 на 5: зазор 18 их не сводит. */
.who-pills { margin-top: 18px; }
.pill.st-chip {
  position: relative; border: 0; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.45; padding: 2px 9px;
  max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; cursor: pointer; vertical-align: middle;
  transition: transform var(--dur-press) var(--spring), background-color var(--dur-1) var(--ease-out);
}
.pill.st-chip::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
.pill.st-chip:active { transform: scale(.96); }
.pill.st-chip:active::after { width: calc(max(100%, 44px) + 6%); height: 46px; }
.pill.st-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Кружок цвета статуса в строках листа выбора и «Кто» (option data-tone, planner-ui.js). */
.st-sw { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--st-bg); box-shadow: inset 0 0 0 1.5px var(--st-c); }
.st-sw.tone-none { box-shadow: none; outline: 1.5px dashed var(--st-c); outline-offset: -1.5px; }
/* Поля без подписи в карточке (список статусов, «Вид» и «Заметка» в «Датах и напоминаниях», поля «Написать самой»):
   видимые 40, палец 44 прозрачной рамкой 2 px сверху и снизу (UI-RULES раздел 3). Стоит ниже тонов, чтобы фокус их
   перебивал. */
.stage-pick, #task-box > .fold-body > .fold-inner > .f, .send-box .f { min-height: 44px; border: 0 solid transparent; border-width: 2px 0; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line); }
#task-box > .fold-body > .fold-inner > .f, #task-box > .fold-body > .fold-inner > .when-btn { margin-bottom: 10px; }
.stage-pick:focus, #task-box > .fold-body > .fold-inner > .f:focus, .send-box .f:focus { border-color: transparent; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* Исход сделки: «Забронировал» и «Отказался» над списком статусов (Макс 25.09). Выбранная
   кнопка залита своим цветом и отличается ещё и рамкой с насыщенностью - не только оттенком. */
.outcome { margin-bottom: 10px; }
.outcome .oc-booked[data-on='1'],
[data-theme='light'] .outcome .oc-booked[data-on='1'] {
  background-color: color-mix(in srgb, var(--grn) 22%, var(--field));
  box-shadow: inset 0 0 0 1px var(--grn), 0 1px 3px rgba(0,0,0,.14); color: var(--ink);
}
.outcome .oc-refused[data-on='1'],
[data-theme='light'] .outcome .oc-refused[data-on='1'] {
  background-color: color-mix(in srgb, var(--red) 18%, var(--field));
  box-shadow: inset 0 0 0 1px var(--red), 0 1px 3px rgba(0,0,0,.14); color: var(--ink);
}

/* ---------- строка свежести «обновлено … ↻» ---------- */
/* Стоит над тремя большими числами: если цифры устарели, узнать об этом надо ДО того, как
   на них посмотрел, а не после. Нажимается вся строка - в неё легче попасть пальцем. */
.freshline {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin: 0 0 10px; padding: 0 12px;   /* высоту даёт min-height 34 (ниже), текст по центру flex */
  border: 1px solid var(--line); border-radius: 12px; background: transparent;
  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.freshline:hover { color: var(--ink); border-color: var(--edge); }
.freshline .fl-ico { font-size: 15px; line-height: 1; }
.freshline.spin .fl-ico { animation: fl-turn .8s linear infinite; }
@keyframes fl-turn { to { transform: rotate(360deg); } }
/* Уважаем системную настройку: анимация в углу экрана - не та вещь, ради которой стоит
   спорить с человеком, которому от неё плохо. */
@media (prefers-reduced-motion: reduce) {
  .freshline.spin .fl-ico { animation: none; opacity: .5; }
}

/* ---------- карточка клиента ---------- */
.who { padding: 4px 2px 10px; }
.who h1 { margin: 0 0 5px; font-size: 22px; letter-spacing: -.2px; }
.who .meta { color: var(--muted); font-size: 13.5px; }
/* Имя и ✏️ в одной строке; редактор раскрывается на её месте. Кнопка повторяет .bar .icobtn:
   та стоит только в шапке приложения, а здесь шапка карточки. */
.who .name-row { display: flex; align-items: center; gap: 10px; }
.who .name-row h1 { flex: 1; min-width: 0; margin-bottom: 0; }
.who .icobtn {
  border: 1px solid var(--line); background: var(--field); color: var(--muted);
  border-radius: 999px; width: var(--h-s); height: var(--h-s); flex: 0 0 auto; font-size: 16px;
  line-height: 1; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--spring);
}
/* Зона касания 44x44 при видимом круге 34 (П25) - тем же приёмом, что у кнопок шапки (.bar). */
.who .icobtn { position: relative; }
.who .icobtn::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 44px; height: 44px;
}
.who .icobtn:hover { background: var(--strong); color: var(--ink); }
.who .icobtn:active { transform: scale(.93); }
.who .icobtn:active::before { width: 48px; height: 48px; }   /* 48 × .93 = 44.6: край не уходит из-под пальца */
.who .name-edit { display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; margin: 0 0 6px; }
.who .name-edit input.f { flex: 1 1 180px; min-width: 0; font-size: 18px; font-weight: 700; }
.who .name-hint { color: var(--muted); font-size: 13px; margin-top: 4px; }
/* Номер клиента (П9, Макс 05.10: «его оставим маленьким… он аккуратно выглядит»). Без номера в той же серой строке
   пилюля «Указать номер»; строка держит 44 px, чтобы накладка пилюли не залезала на соседей. Ниже серыми строками
   «ещё номер», «прежний номер» и у собранной карточки «Собрана из двух карточек» с «Разделить» (П9б). Золото пилюли
   через --tab-on: фирменное --accent на светлой давало 2.8 при норме 4.5 (тот же приём, что у активной вкладки). */
.who .num-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; }
.who .num-line .mini-btn { margin-left: 0; }
.who .num-alt { margin-top: 2px; color: var(--muted); font-size: 13px; }
.who .num-merged { color: var(--muted); font-size: 13px; }
.mini-btn.num-pill { color: var(--tab-on); }

/* Ряд действий - ПОЛОСА, которую листают вбок, а не плита.
   Раньше подложкой был плоский --bg1 во всю ширину: пока фон страницы был ровным, это
   совпадало, но с появлением авроры плоский прямоугольник стал читаться как чёрная
   заплата поверх подсвеченного фона (замечание Макса по скриншоту).
   Теперь та же пилюля, что у панели вкладок: своё скругление, край и тень - и видно, что
   это отдельный слой, который едет. Размытие сюда НЕ добавляем: --glass и так 0.90, а
   backdrop-filter создал бы третий контекст наложения и стоил бы кадров на прокрутке. */
.actions {
  position: sticky; top: 66px; z-index: 5; display: flex; gap: 8px; overflow-x: auto;
  padding: 8px 10px; margin: 0 0 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-radius: 999px;
  border: 1px solid var(--edge);
  /* 🔴 БЕЗ ВНЕШНЕЙ ТЕНИ, и это не упрощение, а единственный работающий вариант. Полоса
     лежит внутри .fold-inner, у которого `overflow: hidden` ОБЯЗАТЕЛЕН: раскладушка
     анимируется через grid-template-rows 0fr→1fr и без обрезки не сворачивается. Полоса
     занимает всю ширину этого контейнера, запаса нет вовсе (замерено: −2 px при радиусе
     тени 44), поэтому тень резалась по краям - те самые рваные полосы на скриншоте.
     Внутренняя подсветка не обрезается никогда, она и даёт свет по верхней кромке. */
  box-shadow: inset 0 1px 0 var(--hl);
  background-color: var(--glass);
}
.actions::-webkit-scrollbar { display: none; }
.actions .btn {
  flex-shrink: 0;
  /* И сами кнопки здесь полностью непрозрачные: обычный --panel это стекло с альфой .8,
     и над текстом оно превращалось в кашу из двух слоёв (замечание Макса по скриншоту). */
  background-color: var(--panel-solid);
}
.actions .btn:hover { background-color: var(--panel-solid); filter: brightness(1.12); }

.btn {
  /* Содержимое кнопки всегда по центру (Макс 04.10: знаки «−/+» и подписи «Выбрать / Закрыть» прилипали к левому краю,
     потому что у inline-flex не было justify-content). Влево только то, что явно так задумано: пункты списков
     (.sheet-item), двухстрочная кнопка длительности, карточки Лале. UI-RULES раздел 3. */
  display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 9px 14px;
  min-height: var(--h-m); box-sizing: border-box;
  border-radius: var(--r-m); border: 1px solid var(--line); background-color: var(--field);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer;
  color: var(--ink); text-decoration: none;
  /* ⚠️ --shadow это 0 10px 34px - тень БОЛЬШОЙ ПЛАВАЮЩЕЙ ПАНЕЛИ. Под кнопкой высотой 36 px
     размыв в 34 px это не подъём, а грязь, и так было бы даже без обрезки. А кнопки почти
     всегда стоят внутри чего-то режущего - .actions скроллится по горизонтали, .fold-inner
     обрезает по устройству раскладушки, - и тень рвалась на краях. Остаётся рамка и
     внутренняя подсветка: её обрезать нечем. */
  box-shadow: inset 0 1px 0 var(--hl);
  transition: filter var(--dur-1) var(--ease-out), transform var(--dur-press) var(--spring), background-color var(--dur-1) var(--ease-out);
}
.btn:hover { background-color: var(--strong); }
.btn.go {
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  border-color: transparent; color: #1a1409;
  /* Золотое свечение под главной кнопкой резалось так же, как и остальные тени: она стоит
     то в полосе действий, то в раскладушке, и запаса до края нет. Заменено на внутреннюю
     подсветку по верхней кромке - её обрезать нечем, а «главность» кнопке и так даёт
     заливка градиентом, единственная во всём приложении. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.btn.go:hover { filter: brightness(1.07); background: linear-gradient(180deg, var(--accent), var(--accent-strong)); }
/* Неактивная главная кнопка выглядит неактивной (П62 «Подключить» без настроенного сервера, MOCK-A V10). */
.btn.go:disabled, .btn.go:disabled:hover { opacity: .45; cursor: not-allowed; filter: none; }
.btn.warn { color: var(--red-ink); }
.btn.onn { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: scale(.96); }
/* Область нажатия 44 у любой кнопки при видимой 40 или 34 (П25): прозрачная полоса по центру во всю ширину. Позиция -
   через :where, чтобы любая кнопка с fixed или absolute сохранила свою. Пока кнопку держат, она сжата на .96, и полоса
   на это время шире (46 × .96 > 44): отпускание у края не уходит мимо (UI-RULES раздел 3). */
:where(.btn) { position: relative; }
.btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
/* T-fix-press-edge-2: полоса на время нажатия не ниже 50 (46 × .956 = 43.98 было меньше зоны 44 в перелёте пружины) и не ниже
   самой кнопки плюс 12: у высокой .btn (карточка клиента в «Деньгах», 77) полоса 46 по центру верхний и нижний край не держала. */
.btn:active::after { height: max(50px, calc(100% + 12px)); left: -3%; right: -3%; }

.card {
  position: relative; overflow: hidden;
  background-color: var(--panel); border: 1px solid var(--edge); border-radius: 22px;
  padding: 14px 16px; margin-bottom: 12px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--hl);
}
.card h3 {
  margin: 0 0 10px; font-size: 11.5px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.card p { margin: 0 0 8px; white-space: pre-wrap; }
/* Абзацы разбора «Что было». Раньше весь текст лежал одним <p>: на телефоне это стена, в
   которой не видно, где начинается Round 2 (замечание Макса по скриншоту). Разбивку делает
   summaryBlocks() в app.js, здесь только воздух между блоками и вид зачина. */
/* Свёрнутое «Что было»: три строки и затухание. Межстрочный интервал задан ЗДЕСЬ же, из
   которого считается высота, - иначе «три строки» зависели бы от общего 1.45 у body и
   разъехались бы при первой же его правке. Затухание рисуется маской, а не градиентом
   поверх: поверх пришлось бы знать цвет фона карточки, а он разный в двух темах. */
.sum-clamp {
  line-height: 1.45; max-height: calc(3 * 1.45em); overflow: hidden;
  transition: max-height var(--dur-2) var(--ease-out);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.sum-clamp.open {
  max-height: 3000px;             /* заведомо больше самого длинного разбора: он 582 знака */
  -webkit-mask-image: none; mask-image: none;
}
/* «Показать полностью» и «Перечитать» - каждая своей строкой и с воздухом. Макс, 07.09:
   «кнопка Перечитать прям лежит» на строке «Показать полностью» / «Свернуть». */
.sum-more { margin-left: 0; margin-top: 2px; }
.sum-acts { display: flex; gap: 10px 6px; flex-wrap: wrap; align-items: center; }
/* Текст разбора выделяется пальцем и в окне Telegram (Макс 01.10). */
.sum-clamp, .sum-p { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* Не `>`: содержимое панели живёт в обёртке .fold-body > .fold-inner (раскладушка ui.js). */
.card[data-panel='summary'] .btn { display: flex; width: fit-content; margin-top: 12px; }
.sum-p { margin: 0 0 13px; }
.sum-p:last-of-type { margin-bottom: 4px; }
.sum-lead { font-weight: 700; }
.card ul { margin: 0; padding-left: 19px; }
.card li { margin-bottom: 6px; }
.danger { border-color: color-mix(in srgb, var(--red) 42%, transparent); }
.danger h3 { color: var(--red); }
.reply { border-color: color-mix(in srgb, var(--accent) 42%, transparent); }

/* Диалог, всплывающий поверх экрана.
   🔴 ФОН НЕПРОЗРАЧНЫЙ, и это замер, а не вкус: обычный --panel это стекло с альфой, и под
   ним едет содержимое страницы. Пока в диалоге была одна короткая строка, это сходило с рук;
   с тремя строками пояснения (04.09) текст диалога и текст под ним слиплись в кашу - видно
   на скриншоте проверки. Та же причина, по которой панель вкладок держит плотность 0.90. */
/* «Новый клиент» и поиск (Макс 05.10: «кнопки не должны наезжать друг на друга»): между строкой номера, рядом кнопок
   и «Кажется, он уже есть» шаг 12 px. У вложенной карточки и её строк только внутренняя подсветка:
   большая тень ложилась на кнопку, а внутри карточки с overflow: hidden она и так режется (UI-RULES раздел 3). */
.add-dupes > .card { margin-top: 12px; box-shadow: inset 0 1px 0 var(--hl); }
.add-dupes .row { box-shadow: inset 0 1px 0 var(--hl); }
.add-dupes > .card > .note-hint { margin-bottom: 12px; }
.add-dupes .add-acts { display: grid; gap: 12px; }
.add-dupes .add-acts .btn { width: 100%; }
/* «Кажется, он уже есть» (П9, п. 6): «Это тот же человек: добавить номер…» длинная и переносится, а не уезжает за край;
   у нескольких найденных она под каждой строкой; пояснение и ошибка под кнопками шагом 12. */
.add-dupes .add-acts .btn.go, .add-dupes .btn.add-same { white-space: normal; }
.add-dupes .btn.add-same { width: 100%; margin: 8px 0 12px; }
.add-dupes > .card > .add-acts ~ :is(.note-hint, .sc-err) { margin: 12px 0 0; }
/* Кнопки в этих карточках с рамкой и заливкой, как в листах: «Не возвращать» в светлой теме на почти белой карточке
   читалась простым текстом (находка проверяющего T-polish-3 F2). */
.add-dupes .btn:not(.go) { border-color: var(--line); background: var(--field); }
.q-back { margin-bottom: 12px; }
.q-add { margin-top: 12px; }

.card.sheet {
  background-color: var(--panel-solid);
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  /* Все листы одним форматом (П25): 8 сверху, 14 по бокам, 12 снизу; высота по содержимому. У листа календаря снизу ещё
     безопасная зона (.card.sheet.sc-sheet ниже, не слабее этого правила). */
  padding: 8px 14px 12px;
}

/* ---------- экран «Реклама» ---------- */
.ads-head { display: flex; align-items: baseline; gap: 8px; }
/* Табличные цифры: сумма меняется при каждом переключении периода. */
.ads-sum {
  font-size: 34px; line-height: 1.05; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.6px;
}
.ads-cur { font-size: 11px; font-weight: 700; color: var(--faint); letter-spacing: .08em; }
/* Реклама стоит - это НЕ ошибка и выглядеть как ошибка не должна. Тон спокойный. */
.ads-idle { margin-top: 4px; font-size: 13px; color: var(--muted); }
.ads-row {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 6px 0; font-size: 13.5px; color: var(--muted);
}
.ads-row b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Строка кампании, группы или объявления - одна на все три уровня. */
.ads-items { display: grid; gap: 2px; }
.ads-item {
  display: block; width: 100%; text-align: left; padding: 9px 10px;
  border: 0; border-radius: var(--r-m); background: none; color: inherit; font-family: inherit;
  animation: rise var(--dur-2) var(--ease-out) backwards; animation-delay: calc(var(--i) * 26ms);
}
.ads-item.tappable { cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.ads-item.tappable:hover { background-color: var(--strong); }
.ads-item.tappable:active { background-color: var(--field); }
.ads-line { display: flex; align-items: baseline; gap: 8px; }
.ads-name {
  flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.3; color: var(--ink);
  /* П32: длинное имя группы в две строки, не в одну с обрезкой (одна строка уводила страницу вправо). */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.ads-money { flex: 0 0 auto; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ads-track {
  display: block; height: 6px; margin: 6px 0 5px; border-radius: 3px;
  background-color: var(--field); overflow: hidden;
}
.ads-fill { display: block; height: 100%; border-radius: 3px; background-color: var(--c); }
.ads-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
/* Формат стоит рядом с деньгами: без него «дешёвая» кампания выглядит выгоднее дорогой,
   хотя её заявки остаются внутри Meta и до нас не доезжают. */
.ads-chip {
  padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--muted); background-color: var(--field);
}
.ads-chip.on { color: var(--grn); background-color: color-mix(in srgb, var(--grn) 14%, transparent); }
.ads-chip.best { color: var(--accent); background-color: color-mix(in srgb, var(--accent) 16%, transparent); }
[data-theme='light'] .ads-chip.best { color: var(--accent-strong); }
.ads-cost { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Объявления внутри группы: сдвиг и полоска слева, чтобы вложенность читалась без рамок. */
.ads-sub {
  margin: 2px 0 6px 12px; padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
/* ---------- П32: «Реклама» в ужатом формате (размеры из UI-RULES, раздел 0) ----------
   Срок: слайдер 34 и под пунктиром строка «Свой срок» (подпись 12, кнопка 34 на остаток ширины), ряды через 10 (5 + черта +
   4). Карточки 12 · 14. Раскрытая группа подсвечена фоном поля. График расхода линией: заливка, красный пунктир среднего,
   точка под пальцем; страница листается вверх и вниз и поверх графика. */
.ads-period { display: grid; }
/* Шапки раскладушек «Рекламы» и «Кампании» (40, палец 44, зазор 2 под открытой: П32 п. 6 и круг 3) идут общим правилом
   details.sec > summary (T-fix-sec-40), своё правило снято. */
.ads-seg > .seg-btn { flex: 1 1 0; min-width: 0; padding: 0 6px; }
.ads-own { display: flex; align-items: center; gap: 10px; margin-top: 5px; padding-top: 4px; border-top: 1px dashed var(--line); }
.ads-own-l { flex: none; font-size: 12px; color: var(--muted); }
.btn.ads-range { flex: 1 1 auto; min-width: 0; min-height: var(--h-s); margin: 0; padding: 0 8px 0 10px; justify-content: space-between; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--field); font-size: 13.5px; font-weight: 600; }
.btn.ads-range.on { border-color: var(--accent); background: var(--gold-soft); }
.ads-range-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ads-range .ico { width: 14px; height: 14px; flex: none; color: var(--muted); }
#ads-body > .card, #ads-campaign-body > .card { padding: 12px 14px; }
/* Итоги одной плашкой (поправки Макса 07.10 16:20 и 16:40): сумма, через 10 строка «в день», через 10 плитки «Отчёта» без уголка
   в два столбца (6 · 8 на фоне поля, высота около 44, через 6, число 15, подпись 11.5), через 10 подписи-пилюли. */
.card.ads-tot { display: grid; gap: 10px; }
.ads-tot > * { margin: 0; }
.ads-tot > .bg-share { font-size: 13.5px; color: var(--muted); }
.stats.ads-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.ads-tiles .stat.rp-tile { padding: 6px 8px; background-color: var(--field); box-shadow: none; }
.ads-tiles .rp-tile b { font-size: 15px; line-height: 16px; }
.ads-tiles .rp-tile span { font-size: 11.5px; line-height: 14px; margin-top: 0; }
.ads-item.open { background-color: var(--field); }
.chart.ads-chart { touch-action: pan-y; }
.ads-chart .ads-area { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: none; }
.ads-chart .ads-lin { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
[data-theme='light'] .ads-chart .ads-lin { stroke: var(--accent-strong); }
.ads-chart .ads-avg { stroke: var(--red); stroke-width: 1.4; stroke-dasharray: 5 3; }
.chart .ax.ads-avgt { fill: var(--red-ink, var(--red)); font-weight: 700; }
.ads-chart .ads-dot { fill: var(--accent); stroke: var(--panel-solid); stroke-width: 2; transition: opacity var(--dur-1) var(--ease-out); }
.ads-chart .tip { transition: opacity var(--dur-1) var(--ease-out); }

/* Откуда пришёл человек: платформа в шапке карточки. Отступ 18 от ряда статуса: накладки 44 чипа статуса и плашки
   Meta (S34, при нажатии 50) не сходятся. Плашка Meta с номером объявления - кнопка .chip со стрелкой ico. */
.ad-from {
  display: flex; align-items: center; gap: 7px; margin-top: 18px;
  font-size: 13px; color: var(--muted);
}
.ad-from .chip .ico { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ad-tag {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; color: var(--ad-tag-ink);
  background-color: color-mix(in srgb, var(--blue) 14%, transparent);
}
/* SOURCE-COLORS06 (Макс: «плашка Meta синяя, Google жёлтая»): цвет платформы только модификатором .ad-from.is-meta / .is-google
   из прежней классификации (пост - Meta). Общие .chip, .ad-tag и токены не тронуты; размеры, рамка 1, накладка 44/50 и отступ 18
   прежние, меняется только цвет. Кнопка Meta - та же синяя пара, что у .ad-tag (--ad-tag-ink на --blue 14 %), нажатая плотнее.
   Жёлтый текст - свой токен на .is-google: --yel на своей подложке в светлой теме давал около 2.9 при норме 4.5. */
.ad-from.is-meta .chip {
  color: var(--ad-tag-ink); border-color: color-mix(in srgb, var(--blue) 34%, transparent);
  background-color: color-mix(in srgb, var(--blue) 14%, transparent);
}
.ad-from.is-meta .chip:hover { background-color: color-mix(in srgb, var(--blue) 20%, transparent); }
.ad-from.is-meta .chip:active { background-color: color-mix(in srgb, var(--blue) 24%, transparent); border-color: color-mix(in srgb, var(--blue) 50%, transparent); }
.ad-from.is-meta .chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ad-from.is-google { --ad-google-ink:#e2b356; }
[data-theme='light'] .ad-from.is-google { --ad-google-ink:#7a5410; }
.ad-from.is-google .ad-tag { color: var(--ad-google-ink); background-color: color-mix(in srgb, var(--yel) 16%, transparent); }

/* ---------- удаление насовсем ---------- */
/* 🔴 Отдельным рядом ПОД полосой действий, а не внутри неё. В полосе кнопка стояла бы
   вплотную к «Закрепить» и «Заметка», то есть к тому, что нажимают мимоходом по десять раз
   на дню, - и однажды палец попал бы не туда. Здесь ей нужен отдельный жест. */
.danger-row { display: flex; justify-content: flex-end; margin: -4px 0 12px; }
.btn.danger-btn, .seg-btn.danger-btn {
  /* T-fix-after-13-1 п. 8: текст --red-ink. --red на своей красной подложке в тёмной теме давал 4.1 при норме 4.5. */
  color: var(--red-ink);
  border-color: color-mix(in srgb, var(--red) 38%, transparent);
  background-color: color-mix(in srgb, var(--red) 10%, transparent);
}
.btn.danger-btn:hover, .seg-btn.danger-btn:hover {
  background-color: color-mix(in srgb, var(--red) 18%, transparent);
}
/* Разница между тремя кнопками диалога словами: без неё «Не клиент» и «Удалить» читаются
   как одно и то же, а уносят они разное. */
.dlg-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.dlg-acts .btn { flex: 1 1 auto; margin: 0; }
.dsm-why { margin: 6px 0 10px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.dsm-why div { margin-bottom: 4px; }
.dsm-why b { color: var(--ink); }
.trash-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 2px;
  border-top: 1px solid var(--line);
}
.trash-row .col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.trash-row b { font-size: 14px; }
.trash-row small { color: var(--muted); font-size: 12.5px; }
.trash-row .col { overflow-wrap: anywhere; }
#trash-body h3 .cnt { display: inline-block; margin-left: 8px; padding: 1px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--field); color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.trash-query.f { height: var(--h-m); min-height: var(--h-m); font-size: 16px; margin: 0; }
.trash-toolbar { display: flex; flex-wrap: wrap; gap: 16px 12px; margin: 8px 0; padding: 5px 0; }
.trash-toolbar .trash-s { min-height: var(--h-s); height: var(--h-s); padding: 6px 10px; border-radius: var(--r-s); font-size: 13.5px; line-height: 20px; font-weight: 600; }
.trash-found:not([hidden]) { margin: 8px 0; }
.trash-scope { margin: 8px 0; }
.trash-export-sheet .pl-acts, .trash-clear-sheet .pl-acts, .files-erase-sheet .pl-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pl-standard:is(.trash-clear-sheet, .files-erase-sheet) .pl-acts .btn.danger-btn { background: var(--red); border-color: var(--red); color: var(--on-red); }
[data-privacy='on'] .trash-row .col { filter: blur(5px); user-select: none; }
.files-deleted { margin-top: 12px; }
.files-deleted-row { border-top: 1px solid var(--line); padding: 10px 0; }
.files-deleted-name { display: block; overflow-wrap: anywhere; font-size: 14px; }
.files-deleted-actions { display: flex; flex-wrap: wrap; gap: 16px 12px; padding: 5px 0; margin-top: 4px; }
.files-deleted-actions .mini-btn { margin-left: 0; }
.files-deleted-actions .warn { color: var(--red-ink); }
[data-privacy='on'] .files-deleted-name { filter: blur(5px); user-select: none; }


/* Сворачиваемые панели: заголовок кликабелен, состояние помнится (ui.js). */
.card[data-panel] > h3 {
  position: relative; user-select: none; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; min-height: var(--h-m); margin-bottom: 0;
}
/* Раскрывается только шапка карточки клиента (wireFolds в ui.js): на экране всей переписки #cN!chat шапка просто заголовок. */
#client-body .card[data-panel] > h3 { cursor: pointer; }
#client-body .card[data-panel] > h3::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
/* 🔴 Раскрытие панели. Раньше здесь стоял display:none, а он не анимируется в принципе -
   панель телепортировалась. Содержимое завёрнуто в .fold-body (см. wireFolds в ui.js), и
   анимируется сетка: 0fr → 1fr раскрывает контейнер, не зная его высоты заранее.
   На движках без интерполяции grid-template-rows панель просто откроется мгновенно, то
   есть как раньше - деградация без поломки. */
.card[data-panel] > .fold-body {
  display: grid; grid-template-rows: 1fr; min-height: 0;
  transition: grid-template-rows var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
/* Обрезка раскладушки (overflow: hidden обязателен для 0fr) не должна резать пальцы 44 у краёв: тело шире на всё
   боковое поле карточки (16 px; дальше режет сама .card) и ниже на 6 px пустой полосой ::after, которая заходит в нижнее
   поле карточки за счёт margin-bottom: -6px, так что раскладка открытой и свёрнутой карточки прежняя. Замер 07.10: «Кто
   ведёт» внизу раздела 39, последние кнопки разделов 42, стрелки месяца у края 39 в ширину. П38d d3m (ARCH-D3-F1): с
   запасом 6 галочка «Сегодня» у левого края (накладка .tdo-cb на 15 px левее рамки) теряла 9 px, отсюда поле целиком. */
.card[data-panel] > .fold-body > .fold-inner { min-height: 0; overflow: hidden; margin: 0 -16px -6px; padding: 0 16px; }
.card[data-panel] > .fold-body > .fold-inner::before { content: ''; display: block; height: 10px; }
.card[data-panel] > .fold-body > .fold-inner::after { content: ''; display: block; height: 6px; }
.card.folded > .fold-body { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }   /* пустая полоса 6 px тела не берёт палец шапки */
.card.folded { padding-top: 12px; padding-bottom: 12px; }
.card[data-panel].folded { background: var(--field); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }

details.fold:not(.sec) {
  background-color: var(--panel); border: 1px solid var(--edge); border-radius: 16px;
  margin-bottom: 12px; overflow: hidden;
  box-shadow: var(--shadow), inset 0 1px 0 var(--hl);
}
details.fold:not(.sec) > summary {
  list-style: none; cursor: pointer; padding: 13px 15px; font-weight: 600; font-size: 14.5px;
  display: flex; align-items: center; user-select: none; transition: background-color var(--dur-1) var(--ease-out);
}
details.fold:not(.sec) > summary:hover { background-color: var(--strong); }
details.fold:not(.sec) > summary::-webkit-details-marker { display: none; }
details.fold > .inner { padding: 0 15px 13px; }

/* Вариант «сноска ВНУТРИ карточки» — например «Почему именно так» под черновиком ответа.
   Без своей рамки и стекла, но КЛАСС fold ОСТАЁТСЯ: на нём держится скрытие родного
   браузерного маркера и единственная стрелка ▶. Снятие класса хаком уже дало «▼…▶»
   на телефоне Макса — не повторять. */
details.fold.sub:not(.sec) { background: none; border: 0; border-radius: 10px; margin: 2px 0 0; box-shadow: none; }
details.fold.sub:not(.sec) > summary { padding: 13px 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
details.fold.sub:not(.sec) > summary:hover { background: none; color: var(--ink); }
details.fold.sub > .inner { padding: 2px 2px 6px; color: var(--muted); font-size: 14px; }
details.fold.sub > .inner p { margin: 0; }

pre.msg {
  white-space: pre-wrap; word-break: break-word; margin: 0 0 10px; font: inherit;
  background: var(--field); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 13px; font-size: 15px; line-height: 1.5;
}

.tl { list-style: none; margin: 0; padding: 0; }
.tl li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tl li:last-child { border: 0; }
.tl .d { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.tl .us { color: var(--accent); font-weight: 600; }

/* Поля формы. Отступ снизу 12px, а не 8: на телефоне поля идут стопкой во всю ширину, и
   при 8px они читаются как один слипшийся блок - замечание Макса 01.09 по экрану записи
   даты. Строка «дата + время» получает тот же отступ ниже, иначе ритм рвётся именно там. */
input { font-family: inherit; font-size: 16px; }
textarea, input.f, select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-m);
  font: inherit; background: var(--field); color: var(--ink); margin-bottom: 12px;
 font-size: 16px; line-height: 20px; }
input.f, select { min-height: var(--h-m); box-sizing: border-box; }
/* Кольцо вместо жёсткой обводки - приём .lg-field из общего набора.
   ⚠️ outline не убираем, а делаем ПРОЗРАЧНОЙ: в режиме высокой контрастности Windows
   box-shadow не рисуется вовсе, и без этого фокус исчез бы у того, кому он нужнее всего. */
textarea:focus, input.f:focus, select:focus {
  outline: 2px solid transparent; outline-offset: 2px;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---------- палец, а не курсор: 44 px под каждым нажатием ---------- */
/* 🔴 ЗАМЕР 03.09. Она работает одной рукой с телефона, а половина нажимаемого была меньше
   пальца: заголовок сворачивания панели 14 px (и его на карточке клиента жмут до 11 раз),
   стрелка «назад» 28×21, крестик в очереди ответа 30, чип 29, кнопка 41. Норма 44 - это не
   вкус, это размер подушечки пальца, и промах по такой цели человек списывает на «тормозит».

   Два приёма, и выбор между ними не произвольный:
   - где полоса и так во всю ширину (заголовки, строки аналитики) - min-height: место
     бесплатное, а цель заодно становится видимой;
   - где видимый размер обязан остаться маленьким (чипы, крестики, стрелка в тесной шапке) -
     прозрачная накладка ::before 44×44. Она даёт палец там, где глазу нужна мелкая кнопка,
     и не стоит НИ ПИКСЕЛЯ раскладки. Приём не новый: так с 26.08 живут кнопки в шапке. */
.chip, .mini-btn, .qrow .qdel, .qadd, .bar .back { position: relative; }
.chip::before, .mini-btn::before, .qrow .qdel::before, .qadd::before, .bar .back::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 100%; min-width: 44px; height: 44px;
}
/* T-fix-press-edge-2 (F2): 106 % считались от ширины без рамки 2 px, и у короткой «Excel» (55) в перелёте пружины .956 запас
   был 0.35 px: правый край в 1 px от рамки терялся при дробной координате. Запас в пикселях сверх процентов и высота 50:
   46 × .956 = 43.98 было меньше зоны 44. */
.chip:active::before, .mini-btn:active::before { height: 50px; width: calc(106% + 6px); }
/* Шапка раскладушки .sec на всех экранах («Отчёт», «Аналитика», «День», «Команда», «Почему», «Реклама», «Цены») видимая 40,
   палец 44 накладкой ::after: по 2 px снаружи рамки (позиция -3 от внутреннего края; UI-RULES 0 и 3).
   П42: под шапкой зазор 8, накладка не достаёт до первой строки. У шапки карточки .card[data-panel] > h3 промежуток 10 живёт в .fold-inner::before: накладка шапки
   не достаёт до первого поля, а накладки первого ряда не режет overflow: hidden у .fold-inner (замер 06.10). */
details.sec > summary { position: relative; min-height: var(--h-m); }
details.sec > summary::after { content: ''; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
details.sec[open] > summary { margin-bottom: 8px; }
button.hbar { min-height: 44px; }
/* T-mock-sizes (ответ Макса 12.10 по снимку g3): строка «обновлено» видимая 34, как остальные строки S; палец 44 накладкой ::after. */
.freshline { position: relative; min-height: 34px; }
.freshline::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.cal-head .btn { min-height: 44px; }

/* Свой вид у select: системная стрелка и рамка не имеют отношения к нашей теме.
   appearance:none убирает их, дальше рисуем шеврон фоном. Цвет шеврона зашит в data-URI,
   поэтому берём его в двух вариантах - золото читается и на тёмном, и на светлом. */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23c9a86a' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
[data-theme='light'] select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23B8935A' stroke-width='2' stroke-linecap='round'/></svg>");
}
/* Список вариантов рисует система. color-scheme выше делает его тёмным, но цвета задаём
   явно: на части Android и Linux без этого текст остаётся чёрным на чёрном. */
select option { background: var(--panel-solid); color: var(--ink); }
textarea { min-height: 74px; resize: vertical; }
.note-hint { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
#client-body .note-hint:empty { margin: 0; }

/* ---------- задачи ---------- */
.task {
  display: flex; align-items: center; gap: 11px; background-color: var(--panel);
  border: 1px solid var(--edge); border-radius: 14px; padding: 12px 13px; margin-bottom: 9px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--hl);
}
.task.overdue { border-left: 4px solid var(--red); }
.task .tx { flex: 1; min-width: 0; cursor: pointer; }
.task b { display: block; font-size: 15px; }
.task small { color: var(--muted); font-size: 12.5px; }
.task .done {
  border: 1px solid var(--line); background: var(--field); border-radius: 999px;
  width: 44px; height: 44px; font-size: 19px; cursor: pointer; color: var(--grn);
  transition: background-color var(--dur-1) var(--ease-out);
}
.task .done { transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--spring); }
.task .done:hover { background: color-mix(in srgb, var(--grn) 18%, transparent); }
.task .done:active { transform: scale(.92); }
.task.is-done { opacity: .5; }
.task.is-done b { text-decoration: line-through; }

/* ---------- личные задачи (deliverable 49, этап B) ----------
   Строка той же карточки .task: слева кружок «сделано», справа флажок важности (красный -
   важно, серый контур - обычное, пунктир - потом). Касание по тексту открывает правку. */
.tdo-seg { margin: 2px 0 10px; }
.tdo-meta .tdo-tag, .tdo-hint .tdo-tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.rp-dialog .rp-days { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.rp-dialog .rp-day { min-height: var(--h-s); min-width: 0; display: block; text-align: center; padding: 4px; border-color: var(--line); background: var(--field); }
.rp-dialog .rp-day[aria-pressed='true'] { border-color: var(--accent); background: var(--gold-soft); color: var(--ink); }
/* «Сколько повторять» (П7): «Всегда / До даты» и последний день. */
.rp-dialog .rp-until { display: grid; gap: 8px; margin-top: 8px; }
.rp-dialog .rp-until > .pl-lane-label { min-height: 0; margin: 0 0 -4px; }   /* подпись до полосы 4, полоса 34 до строки 40 - 8 */
.rp-dialog .rp-until + .pl-sum { margin-top: 8px; }
.rp-dialog .rp-until[hidden] { display: none; }
.rp-dialog .rp-until-seg .seg-btn { flex: 1 1 0; }
.rp-dialog .rp-until-day { width: 100%; margin: 0; }
/* Лист «Задача»: все поля и кнопки во всю ширину с одним шагом 12 px, как между полями везде (Макс 05.10: «расстояние
   между кнопками не соблюдается»; после снятия кнопок срока «Когда» прилипла к «Важности», а у «Повтора» был свой отступ). */
.tdo-sheet .pl-picker-body { display: grid; gap: 8px; }
.tdo-sheet .pl-picker-body > * { margin: 0; }
.tdo-sheet .pl-repeat, .tdo-sheet .pl-remind, .tdo-sheet .tdo-date { width: 100%; }
.tdo-sheet .pl-picker-body > .btn, .tdo-sheet .pl-acts .btn:not(.go), .rp-dialog .pl-acts .sheet-cancel { border-color: var(--line); background: var(--field); }
.pl-picker-body > input.f, .who .name-edit input.f, .reply .when-row input.f, .gl-srow input.f { min-height: 44px; margin: -2px 0; border: 2px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line); }
.pl-picker-body > input.f:focus, .who .name-edit input.f:focus, .reply .when-row input.f:focus, .gl-srow input.f:focus { border-color: transparent; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.tdo-hint { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 22px; margin: 6px 2px 0; font-size: 12.5px; color: var(--muted); }
.tdo-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--field); border: 1px solid var(--line); font-size: 12px; color: var(--tag-ink); white-space: nowrap; font: inherit; font-size: 12px; line-height: 1.6; }
.tdo-tag.late { color: var(--tag-late-ink); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.tdo-tag.from { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
[data-theme='light'] .tdo-tag.from { color: var(--tab-on); }
button.tdo-tag { cursor: pointer; }
.tdo-client { color: var(--ink); }
/* Метки-надписи остаются 23; нажимаемая метка клиента (открыть карточку, «✕» отвязать) - чип S 34 с пальцем 44
   (решение архитектора по П25, 06.10). */
.tdo-tag.tdo-client { min-height: var(--h-s); box-sizing: border-box; padding: 0 12px; border-radius: 999px; font-size: 13px; line-height: 18px; font-weight: 600; }
span.tdo-tag.tdo-client { padding-right: 1px; }
.tdo-x { position: relative; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); padding: 0; cursor: pointer; width: 32px; height: 32px; flex: 0 0 auto; }
.tdo-x .sgn { width: 12px; height: 12px; }
.tdo-x::before { content: ''; position: absolute; inset: -6px; }
button.tdo-client { position: relative; }
button.tdo-client::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.tdo-open { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0; margin: 0; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; cursor: pointer; min-height: 24px; }
html:not([lang="ru"]) .tdo-open { min-height: 44px; }
/* Текст строки дела и события нажимается полосой не меньше 44 px на всех языках, а строка не растёт (решение архитектора
   по ревью T-p4a F2, вид строк одобрен Максом в макете П4): прозрачная накладка от верха строки (8 px над текстом) вниз
   до 44 px. Галочка и флажок стоят рядом, кнопки-теги под текстом лежат поверх накладки и нажимаются сами; дата и другие
   теги-надписи пропускают нажатие к тексту. */
.tdo-open { position: relative; }
.tdo-open::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: min(0px, calc(100% - 36px)); }
.task .tdo-meta { position: relative; z-index: 1; pointer-events: none; }
/* T-fix-tdo-open (текст 40 над нажимаемой меткой) снят П61 Д1: строка с клиентом той же высоты, что без него (блок П61 ниже). */
.task .tdo-meta button { pointer-events: auto; }
.task.todo.ticking .tdo-open { text-decoration: line-through; color: var(--faint); }
.task.todo.is-done .tdo-open { text-decoration: line-through; }
.tdo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 3px; }
.task.todo { padding: 8px 8px 8px 10px; min-height: 58px; touch-action: pan-y; }
.task.todo b { font-weight: 600; overflow-wrap: anywhere; }
.tdo-cb {
  position: relative; flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--faint) 75%, transparent); background: none; color: #1a1409;
  display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-press) var(--spring);
}
.tdo-cb::before { content: ''; position: absolute; inset: -11px -5px -11px -17px; }   /* 22 внутри рамки: 44 × 44, к тексту не дальше 5 */
.tdo-cb:hover { border-color: var(--accent); }
.tdo-tick { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset var(--dur-2) var(--ease-out) 60ms; }
.task.todo.ticking .tdo-cb, .tdo-cb.on { background: var(--accent); border-color: var(--accent); }
.task.todo.ticking .tdo-cb { transform: scale(1.12); }
.task.todo.ticking .tdo-tick, .tdo-cb.on .tdo-tick { stroke-dashoffset: 0; }
.task.todo.ticking b { text-decoration: line-through; color: var(--faint); }
.task.todo.is-done .tdo-cb.on { background: color-mix(in srgb, var(--grn) 80%, var(--panel-solid)); border-color: transparent; }
.tdo-pr { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--faint); display: grid; place-items: center; cursor: pointer; padding: 0; }
.tdo-pr::before { content: ''; position: absolute; inset: -3px; }
.tdo-pr:hover { background: var(--field); }
.tdo-pr .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.tdo-pr.p0 { color: var(--pr-a); } .tdo-pr.p0 .ico { fill: currentColor; fill-opacity: .9; }
.tdo-pr.p1 { color: var(--pr-b); } .tdo-pr.p2 { color: var(--pr-c); }
.tdo-pr.p2 .ico { stroke-dasharray: 2.5 3; }
.task.todo.p0 { border-left: 3px solid var(--red); }
.tdo-w { position: relative; margin-bottom: 9px; }
.tdo-w > .task { position: relative; margin-bottom: 0; }
.tdo-under { position: absolute; inset: 0; pointer-events: none; border-radius: 14px; display: flex; align-items: center; padding-left: 18px; font-weight: 700; font-size: 14px; color: var(--grn); background: color-mix(in srgb, var(--grn) 20%, var(--panel-solid)); opacity: 0; }
.tdo-w.swiping .tdo-under { opacity: 1; }
.task.todo.dragging { opacity: .45; }
.task.todo.tdo-drop-a { box-shadow: 0 -3px 0 var(--accent), var(--shadow); }
.task.todo.tdo-drop-b { box-shadow: 0 3px 0 var(--accent), var(--shadow); }
@media (pointer: fine) { .task.todo[draggable='true'] { cursor: grab; } }
.tdo-fold { position: relative; z-index: 1; margin-bottom: 2px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; padding: 8px 2px; min-height: var(--h-m); cursor: pointer; }
.tdo-fold::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.tdo-done { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.tdo-done > div { overflow: hidden; min-height: 0; }
.tdo-done.open { grid-template-rows: 1fr; opacity: 1; }
.tdo-person { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 12px 2px 6px; font-size: 14px; }
.tdo-person span { color: var(--muted); font-size: 12.5px; }
.tdo-sheet { display: grid; gap: 8px; }
/* Важность в листе задачи своим выпадающим списком (Макс 05.10): у А, Б и В свой цвет, тот же, что у флажка на карточке. */
.tdo-prio { display: grid; gap: 6px; }
.tdo-prio-btn { width: 100%; min-height: var(--h-m); justify-content: flex-start; gap: 10px; border-color: var(--line); background: var(--field); }
.tdo-prio-text { flex: 1 1 auto; min-width: 0; text-align: left; }
.tdo-prio-btn .ico, .tdo-prio-opt .ico { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.tdo-prio-caret { color: var(--muted); transition: transform var(--dur-2) var(--ease-out); }
.tdo-prio-caret.up { transform: rotate(180deg); }
.tdo-prio-list { display: grid; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-solid); }
.tdo-prio-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--h-m); box-sizing: border-box; padding: 9px 12px; border: 1px solid transparent; border-radius: var(--r-m); background: transparent; color: var(--ink); font: inherit; line-height: 20px; font-size: 14.5px; text-align: left; cursor: pointer; }
.tdo-prio-opt.on { border-color: var(--line); background: var(--field); font-weight: 600; }
.tdo-prio-btn.p0 > .ico:first-child, .tdo-prio-opt.p0 .ico { color: var(--pr-a); fill: currentColor; fill-opacity: .9; }
.tdo-prio-btn.p1 > .ico:first-child, .tdo-prio-opt.p1 .ico { color: var(--pr-b); }
.tdo-prio-btn.p2 > .ico:first-child, .tdo-prio-opt.p2 .ico { color: var(--pr-c); stroke-dasharray: 2.5 3; }
/* «Цели» и «Лале, запиши личное» в одну линию одной высоты (Макс 05.10), строка новой задачи ниже с отступом.
   «Цели» по ширине текста, «Лале» на остальное место и в одну строку (Макс: «Цели маленькой, Лале прилично больше»). */
.tdo-tools { display: flex; gap: 8px; margin: 12px 0; }

/* ---------- П23 (T-p23): «Задачи» одной страницей ----------
   Календарь сверху (.sc-host), под ним «Все задачи и события» (.tdo-all): заголовок, «Мои | Команда» полосой 34, строки
   тоньше (около 54 вместо 79: дата, время и клиент мелко одной строкой через точку, повтор значком справа). Лист «Что
   добавить»: плитки 40 в одну строку. Форма «Задача»: поле 40 с текстом 16, «Поняла: …» под ним, «До» и «Кому» в ряд.
   Свои классы, токены T-p25 с запасными значениями (до влития T-p25 в main). */
.tdo-all { margin-top: 14px; }
.tdo-lh { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.tdo-all .task.todo { padding: 6px 8px 6px 10px; min-height: 52px; margin-bottom: 6px; }
.tdo-all .tdo-meta { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.45; color: var(--tag-ink); }
.tdo-all .tdo-meta .tdo-tag { display: inline; padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; line-height: inherit; white-space: normal; }
.tdo-all .tdo-meta button.tdo-tag { font-weight: 600; }
/* Через точку: разделитель рисует CSS после каждого, кроме последнего (у кнопки клиента ::before занят накладкой 44). */
.tdo-all .tdo-meta > :not(:last-child)::after { content: ' \00B7'; margin-right: 4px; font-weight: 400; color: var(--tag-ink); }
/* «Пересечение» в строке тоже строчное (кнопкой 44 оно раздувало строку до 120): палец 44 накладкой, как у клиента. */
.tdo-all .tdo-meta .btn.pl-warning { position: relative; display: inline-flex; vertical-align: baseline; gap: 3px; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; font-weight: 600; }

.tdo-all .tdo-meta .btn.pl-warning .sc-ico { width: 14px; height: 14px; align-self: center; }
.tdo-rep { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 38px; color: var(--muted); }
.tdo-rep .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 720px) {
  .tdo-all { display: grid; gap: 14px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .tdo-all > :not(.tdo-col) { grid-column: 1 / -1; }
  .tdo-all > .tdo-tools { width: 100%; max-width: 720px; }
  .tdo-all > .tdo-lh, .tdo-all > .tdo-seg { margin-bottom: 0; }
}
.sc-kgrid.sc-kshort .sc-kt { white-space: nowrap; }
.sc-task .sc-got { margin: 2px 0 0; color: var(--muted); }
.sc-two-task { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: end; }
.sc-two-task > .sc-fld[hidden] + .sc-fld { grid-column: 1 / -1; }
.sc-two-task > .sc-err { grid-column: 1 / -1; }
.btn.sc-tsel { justify-content: space-between; padding: 0 12px; }
.btn.sc-tsel .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.sc-tolist { display: grid; gap: 6px; }

.tdo-tools .btn { flex: 0 0 auto; margin: 0; }
.tdo-tools .btn:last-child { flex: 1 1 auto; min-width: 0; }
/* «Мой день» (П4б, Макс 05.10): короткая плашка «Сегодня» вместо кольца и «Моих дел». Строки от 44 px, одна галочка
   у всех, время справа, тонкая полоска «N из M»; своё личное фиолетовое с пунктиром, как во вкладке «Задачи». */
.td-card { padding: 8px 10px 8px; margin-bottom: 14px; }
.td-head { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; }
.td-h { font-size: 17px; font-weight: 700; }
.td-n { flex: 1 1 auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
/* П16 (Макс 05.10, вариант 1): «Все задачи ›» текстом, не таблеткой; область нажатия 44 px по высоте строки шапки. */
.td-all { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--accent-strong); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: opacity var(--dur-1) var(--ease-out); }
.td-all:active { opacity: .6; }
/* На светлой плашке --accent-strong даёт 4,09: ссылке нужен текстовый контраст 4,5, как было у таблетки (--tab-on). */
[data-theme='light'] .td-all { color: var(--tab-on); }
.td-bar { height: 4px; margin: 2px 2px 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.td-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width var(--dur-3) var(--ease-out); }
.td-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-top: 1px solid var(--line); }
.td-row.k-mine { border-radius: 12px; margin: 3px 0; }
/* Обычная строка после личной без двойной линии; следующая личная держит свой пунктир сверху (T-fix-mine-border, Макс 07.10). */
.td-row.k-mine + .td-row:not(.k-mine) { border-top-color: transparent; }
.td-t { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  border: 0; background: none; padding: 2px 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.td-t b { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.td-t b .si { margin-right: .35em; }
.td-t small { color: var(--muted); font-size: 12.5px; }
.td-t small .late { color: var(--red); }
.td-time { flex: 0 0 auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.td-row.ticking .tdo-cb { background: var(--accent); border-color: var(--accent); transform: scale(1.12); }
.td-row.ticking .tdo-tick { stroke-dashoffset: 0; }
.td-row.ticking .td-t b, .td-row.is-done .td-t b { text-decoration: line-through; color: var(--faint); }
.td-row.is-done .tdo-cb.on { background: color-mix(in srgb, var(--grn) 80%, var(--panel-solid)); border-color: transparent; }
.td-empty { display: block; width: 100%; }
/* «+ / −» строки задачи: значок от 3:1 и в светлой теме (ревью T-p5 F6, было 2,16). */
.td-row .pm-paid { margin: 0; }
/* П39a: компактная оплата только в этих двух строках; область нажатия .btn остаётся 44. */
.td-row > .pm-paid, .task.todo.ev > .pm-paid {
  min-height: var(--h-s); padding: 0 11px; border-radius: var(--r-s); font-size: 13.5px; font-weight: 600;
}
.td-row > .tdo-kind, .task.todo.ev > .tdo-kind {
  flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.td-row > .tdo-kind .si, .task.todo.ev > .tdo-kind .si { width: 15px; height: 15px; margin: 0; }
.td-empty { margin: 6px 2px; }
.day-lbl { margin: 18px 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stats.two { grid-template-columns: repeat(2, 1fr); }
/* Вкладка «Задачи» (П4): событие той же строкой, что дело. У операции впереди и отложенного сообщения галочки нет,
   текст стоит на её месте; «Показать ещё» в длинном «Потом» - кнопка во всю ширину, как строка списка. */
.tdo-cb-gap { flex: 0 0 auto; width: 26px; }
.tdo-more { width: 100%; margin: 0 0 9px; border: 1px solid var(--line); background: var(--field); }
.tdo-text { width: 100%; box-sizing: border-box; resize: vertical; font-size: 16px; }
.tdo-date { max-width: 180px; }
.tdo-acts { display: flex; gap: 8px; justify-content: space-between; }
.tdo-acts .btn { flex: 1; }

/* ---------- вкладки ---------- */
/**
 * Плавающая панель вкладок.
 *
 * Раньше она была приклеена к нижнему краю во всю ширину, и только на экране от 760px
 * превращалась в пилюлю по центру - то есть красивый вариант видел кто угодно, кроме
 * человека, который пользуется приложением с ТЕЛЕФОНА. Теперь пилюля везде.
 *
 * Материал: полупрозрачный слой, под которым едет содержимое, а не глухая полоса, которая
 * съедает нижнюю часть экрана. Светлая грань сверху - это блик, свет, пойманный краем
 * стекла; без неё панель читается как плоский прямоугольник, а не как материал.
 */
.tabs {
  position: fixed; z-index: 6; display: flex; gap: 4px;
  left: 50%; transform: translateX(-50%);
  bottom: calc(10px + max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px)));
  width: min(calc(100vw - 24px), 460px);
  padding: 6px;
  border-radius: 22px;
  background-color: var(--glass);
  border: 1px solid var(--edge);
  /* Крупная поверхность должна читаться толще мелких: сильнее размытие и глубже тень. */
  backdrop-filter: blur(28px) saturate(1.7); -webkit-backdrop-filter: blur(28px) saturate(1.7);
  box-shadow: 0 12px 32px rgba(0,0,0,.32), inset 0 1px 0 var(--sheen);
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out);
}
/* Уезжает вниз при прокрутке вниз и возвращается сразу, как только повели вверх. На списке
   в две тысячи человек панель, занимающая низ экрана постоянно, - это отнятое место.
   Возврат именно по направлению, а не по достижению верха: иначе, чтобы сменить вкладку,
   пришлось бы прокручивать всю базу назад. */
.tabs.away {
  transform: translateX(-50%) translateY(calc(100% + 18px));
  opacity: 0;
  pointer-events: none;
}
.tabs button {
  flex: 1; padding: 7px 2px 6px; border: 0; background: none; font: inherit; font-size: 11px;
  font-weight: 600; color: var(--muted); cursor: pointer; position: relative;
  border-radius: 17px; letter-spacing: .1px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 46px; justify-content: center;
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--spring);
}
/* Вектор вместо эмодзи: иконка наследует цвет вкладки, поэтому активная и обычная
   различаются одним currentColor - без прежнего костыля filter: grayscale(.55). */
.tabs .ico {
  display: block; width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-1) var(--ease-out);
}
.tabs button.on { color: var(--tab-on); background-color: var(--field); }
.tabs button.on .ico { transform: translateY(-1px); }
.tabs button:active { transform: scale(.94); }
.tabs #task-badge {
  position: absolute; top: 3px; right: calc(50% - 24px);
  background: var(--red); color: #fff; border-radius: 999px; font-size: 10.5px;
  padding: 1px 6px; font-weight: 700;
}
/* 🔴 ЗАМЕРЕНО: с четвёртой вкладкой на 375 px (её телефон, см. пояснение к шапке выше)
   каждой достаётся 82 px, а самой длинной подписи «Напоминания» нужно 77 - помещается.
   На 320 px достаётся 68, и слово в одну строку вылезло бы за кнопку: переносить его
   негде. Ниже 360 px оставляем только иконки - экран назван в шапке, смысл не теряется.
   Речь про iPhone SE первого поколения; её телефона это не касается. */
@media (max-width: 359px) {
  .tabs button { font-size: 0; gap: 0; min-height: 42px; }
  .tabs .ico { width: 24px; height: 24px; }
  .tabs #task-badge { font-size: 10.5px; right: calc(50% - 18px); }
}

/* Своя анимация, а не pop-in: та кончается на transform: none и с заливкой both стирала
   translateX(-50%) - тост стоял левым краем на середине экрана, а не по центру. */
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
#toast {
  animation: toast-in var(--dur-2) var(--ease-out) both;
  /* Слой 21 - над затемнением (19) и листами «Ещё», задачи, файла (20): тост из открытого листа
     («Отправила в Telegram», «проверь сеть») раньше рисовался под ним, и результата не было видно.
     Касания он не ловит: в нём только текст, а под ним могут быть кнопки листа. Лист календаря
     (30/31) выше и говорит своим тостом .sc-toast (40). */
  position: fixed; bottom: calc(88px + max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px))); left: 50%; transform: translateX(-50%); z-index: 41; pointer-events: none;
  background: var(--panel-solid); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 13px; padding: 11px 18px;
  /* T-fix-after-13-1 п. 2: не уже min(343px, 100% минус 32px). Без этого блок от середины экрана (left: 50%) сжимался до
     половины экрана (188 px на 375), и тост 409 врача шёл в 4-5 строк поверх кнопок листа. На 375 ровно 343; на широком
     экране по тексту от 343 до половины экрана, как было. */
  width: max-content; min-width: min(343px, calc(100% - 32px)); max-width: max(min(343px, calc(100% - 32px)), 50%); box-sizing: border-box;
  font-size: 14.5px; text-align: center; box-shadow: var(--shadow);
}

/* 👁 Занавес приватности. В watchdog он прячет деньги; здесь чувствительное другое -
   имена и телефоны пациентов. Нужен ровно тогда, когда она открывает CRM в клинике
   или в кафе и рядом кто-то есть. Состояние помнится между заходами. */
[data-privacy='on'] #toast .nm,
[data-privacy='on'] .row b.nm,
/* Инициалы - это имя, просто короче. Оставить их незакрытыми значило бы, что занавес
   прикрывает имя и тут же выдаёт его первую букву соседним кружком. */
[data-privacy='on'] .row .av,
[data-privacy='on'] .who h1,
[data-privacy='on'] .bar strong,
[data-privacy='on'] .who input.f,
[data-privacy='on'] .who .meta,
/* Номер клиента (П9): «ещё номер» и «прежний номер» под строкой номера; в листах номера «Сейчас: …», поле, подсказка
   «В базу запишется» и плашки карточек (имя и номер). */
[data-privacy='on'] .who .num-alt,
[data-privacy='on'] :is(.num-sheet .num-now, .num-sheet input.f, .num-sheet .num-hint, .num-sheet .sc-err, .num-cmp b, .num-cmp .num-cmp-num),
[data-privacy='on'] .task b,
[data-privacy='on'] :is(.tdo-open, .tdo-client, #todo-new, .tdo-text),
/* Плашка «Сегодня» на «Моём дне» (П4б): шторка закрывает текст и клиента строки. */
[data-privacy='on'] .td-t,
/* Карточка Лале (П7): строка «Рабочее, Анна Проба» и кнопки с именами клиентов. */
[data-privacy='on'] :is(.bot-plan-row > b, .bot-plan-heard, .bot-plan-scope, .bot-plan-choices .btn),
/* Цели (П6): названия и шаги на экране «Цели» и в листе «⋯». */
[data-privacy='on'] :is(.gl-card h3, .gl-st b, .gl-name),
/* Черновик цели в Лале (П7): строки, «Услышала» и итог «Цель создана». */
[data-privacy='on'] :is(.gl-drow b, .gl-heard, .gl-made-text),
/* Лист «Новый клиент» (T-p26b, T-fix-privacy-newclient): имя и номер в полях, «Поняла: +61 …», строка «Такой номер уже есть:
   <имя>» и карточка «в Удалённых» с именем. Похожие по имени - строками row(), их закрывает .row. */
[data-privacy='on'] .cl-new :is(#cl-name, #cl-phone, .cl-got, .cl-found b, .add-dupes .card > p),
[data-privacy='on'] pre.msg,
/* П38d d6a: лист «Доложить врачу» и «PDF для врача готов»: поля, ссылка и сообщение врачу. */
[data-privacy='on'] .fu-dr-sheet :is(textarea.f, input.f, .fu-dr-url, .fu-dr-msg, .fu-dr-copybox),
[data-privacy='on'] .fu-dr-quote,
/* П38d d5 (В33): «Сейчас в» в шапке и в листе: город и страна, часы с городом, поля листа. */
[data-privacy='on'] :is(.fu-where-l b, .fu-where-l small, .fu-where-cur b, .fu-where-cur small, .fu-where-sheet input.f, .fu-where-sheet select.f),
/* T-p47: групповой чат WhatsApp: подписи серий, строки людей и второй клиентки, строки «Ответа» и «Что было», листы группы
   (заголовки с именами, строки, подпись файла), итог «Писали» и вторые строки списков «писала …», «в группе с …». */
[data-privacy='on'] :is(.bub-who, .wa-group-line .wa-group-t, .wa-group-sheet .sc-shd h3, .wa-group-sheet .pl-pick-t, .wa-group-file, .wa-group-g-name,
  .wa-group-sheet .wa-group-hint, .wa-group-find, .exp-group-wrote, .row .ago .ago-group,
  .wa-group-reply, .wa-group-lale),
/* П50: ответы анкеты (имя, здоровье), черновик Лале с её именем. */
[data-privacy='on'] :is(.ik-list dd, .lale-draft),
[data-privacy='on'] .tl li {
  filter: blur(5px); user-select: none;
}
[data-privacy='on'] .row b.nm:hover,
[data-privacy='on'] .who h1:hover { filter: none; }

/* Календарь и его листы показывают те же имена, номера и заметки. Занавес
   действует и здесь, при этом даты, часы и кнопки остаются читаемыми. */
[data-privacy='on'] :is(.sc-warn .t, .sc-ready .t, .sc-readyrow .t b, .sc-stay b, .sc-ev .l1, .sc-private, .m54-share .m54-t, .m54-share .m54-pay,
  .sc-untimed > span:not(.sc-kico):not(.sc-rp), .sc-wlist .tx, .sc-pkrow .tx,
  .sc-mbar .lab, .sc-ghost > span:not(.sc-kico), .sc-evbody .sc-who,
  .sc-evbody .sc-from, .sc-evbody .sc-purpose, .sc-evbody .sc-kv b,
  .sc-feed .sc-bub, .sc-feed .sc-fl span, .sc-compose textarea,
  .sc-form .sc-pick, .sc-form .found, .sc-form .sc-got, .sc-form input[type='text'],
  .sc-form input[type='search'], .sc-form textarea, .sc-sheet .note-hint,
  .sc-sugg > span, .sc-tripk, .sc-tick small) {
  filter: blur(5px); user-select: none;
}

/* ---------- T-p47 часть 2: групповой чат WhatsApp в карточке (пакет 75, пп. Ж, З, И) ----------
   Подпись серии над пузырём текстовым токеном --tab-on (золото, контраст от 4.5 в обеих темах замером теста p47-group-browser).
   Метка «группа» тем же видом, что плашка номера; в светлой теме текст темнее (тот же токен), иначе меньше 4.5. */
.bub-who { align-self: flex-start; max-width: 84%; margin: 4px 0 -4px 4px; font-size: 12px; font-weight: 600; line-height: 16px;
  color: var(--tab-on); overflow-wrap: anywhere; }
.bub-who-link { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none;
  font: inherit; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--tab-on); text-align: left; cursor: pointer; }
.bub-who-link .ico { width: 14px; height: 14px; flex: none; }
/* Палец 44 по высоте и вширь не меньше 44: прозрачная накладка по центру, как у .btn (UI-RULES раздел 3). */
.bub-who-link::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; min-width: 44px; transform: translateY(-50%); }
.wa-group-line { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 13.5px; line-height: 18px; color: var(--muted); }
.wa-group-line .wa-group-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.wa-group-line .wa-group-t .si { margin-right: .35em; }
.wa-group-line .mini-btn { margin-left: 0; }
.wa-group-line .mini-btn .ico { width: 14px; height: 14px; }
.reply .wa-group-reply, .wa-group-lale { margin: 0 0 8px; }
.pill.p-line.p-group { margin-left: 6px; }
[data-theme='light'] .pill.p-line.p-group { color: var(--tab-on); }
.name-row .pill.p-group { align-self: center; }
.row .ago .pill.p-group { margin: 0; font-size: 11.5px; padding: 1px 7px; line-height: 16px; flex: none; }
/* T-audit-i18n-code F-i18n-01: вторая строка группы одной строкой; многоточием режется начало, «· когда» видно целиком (en и tr длиннее). */
.row .ago .ago-t.ago-group { display: flex; min-width: 0; }
.row .ago .ago-group .ago-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row .ago .ago-group .ago-when { flex: none; white-space: pre; }
.exp-group-open { margin-top: 6px; }
.exp-group-open .ico { width: 16px; height: 16px; }
.wa-group-sheet .wa-group-file { margin: 0 5px 4px; }
.wa-group-sheet .wa-group-hint { margin: 10px 2px 0; }
.wa-group-sheet .pl-pick-go { width: 18px; height: 18px; flex: none; color: var(--muted); }
.wa-group-sheet .pl-pick-list + .pl-pick-g { margin-top: 10px; }
.wa-group-acts .wa-group-load { flex: 1 1 auto; width: 100%; }
.wa-group-pick .wa-group-find { margin: 0 5px 6px; width: calc(100% - 10px); }

/* ---------- аналитика ---------- */
/* Графики нарисованы своим SVG, без единой библиотеки: то же правило нулевых зависимостей,
   что и во всём остальном приложении - браузер получает исходники байт в байт.

   🔴 Цвет здесь несёт ОДИН смысл: высоту столбика. Ряд один, поэтому легенды нет, её роль
   выполняет заголовок секции. Подписи и числа носят текстовые токены, а не цвет ряда. */
.chart { display: block; width: 100%; height: auto; margin: 2px 0 4px; overflow: visible; }
.chart .bar { fill: var(--accent); transition: fill var(--dur-1) var(--ease-out); }
.chart .bar.on { fill: var(--accent-strong); }
/* Выбран один столбик - остальные гаснут. Так у Bklit, и так честнее: подсветка цветом
   работает только рядом с чем-то приглушённым, иначе «активный» ничем не выделен. */
.chart.dim .bar { opacity: .35; }
.chart.dim .bar.on { opacity: 1; }
/* 🔴 ЗАМЕРЕНО: фирменное золото #B8935A на светлой панели даёт 2.64 при норме 3.0 для
   графики - а столбик и есть сама информация, читать его обязаны все. В тёмной теме
   всё в порядке (8.37), поэтому меняем не бренд-токен, а только заливку графика в
   светлой теме, ровно как раньше поступили с цветом активной вкладки. */
[data-theme='light'] .chart .bar,
[data-theme='light'] .hb-fill { fill: var(--accent-strong); background-color: var(--accent-strong); }
[data-theme='light'] .chart .bar.on { fill: var(--tab-on); }
/* Месяц без данных: штрихованная полоса во всю высоту, приглушённый столбик И подпись
   словами под графиком. Только цветом различать нельзя - при дальтонизме, на печати и в
   режиме высокого контраста разница пропадает, и провал в данных стал бы неотличим от
   настоящего падения притока. */
.chart .gap-band { opacity: .5; }
/* ROOT7 RELEASE8 ход 3 п.12 (iPhone F6): в тёмной теме столбец пропуска был светло-серым пятном (--faint); теперь
   приглушённое золото из токенов темы, тот же столбик, что в светлой, только тише. */
.chart .bar-gap { fill: color-mix(in srgb, var(--accent) 40%, var(--panel-solid)); }
.chart .bar-gap.on { fill: color-mix(in srgb, var(--accent) 70%, var(--panel-solid)); }
/* Без привязки к .chart: тем же узором штрихует «нет данных» карта её работы, а её SVG
   носит класс .hm-grid. Пока правило висело на .chart, линии узора в карте оставались без
   цвета - то есть невидимыми, и заштрихованный день выглядел просто пустым. */
.hatch-line { stroke: var(--faint); stroke-width: 1.2; }
/* Пунктир 4 4 и приглушённый цвет - почерк Bklit UI, снятый с их страницы замером, а не на
   глаз. Затухание к правому краю делает маска в самом SVG (см. monthChart): сплошная линия
   до края читалась бы как рамка графика. */
/* Цвет линии - приглушённый текстовый на 32%, а не токен рамки: на замере `--edge` (0.12
   белого) на тёмной панели не читался вовсе, а сетка, которую не видно, не сетка. */
.chart .grid { stroke: color-mix(in srgb, var(--muted) 32%, transparent); stroke-width: 1; stroke-dasharray: 4 4; }
.chart .axis { stroke: var(--edge); stroke-width: 1; }
.chart .ax { fill: var(--faint); font-size: 9px; text-anchor: middle; }
/* Подпись шкалы стоит у левого края, а не по центру своей точки. */
.chart .ax.mid { text-anchor: start; }
.chart .yr { font-size: 8px; }
.chart .val {
  fill: var(--muted); font-size: 10px; text-anchor: middle;
  font-variant-numeric: tabular-nums; transition: opacity var(--dur-1) var(--ease-out);
}
/* Пока столбик выбран, статичные подписи чисел уходят: у самого высокого столбика подпись и
   карточка говорили одно и то же число дважды, друг на друге. Источник правды на время
   разглядывания один - карточка. */
.chart.dim .val { opacity: 0; }
/* Карточка подсказки: та же плотная подложка, что у плавающих панелей приложения, тонкая
   рамка и маленький радиус - почерк Bklit. Появляется рядом с нажатым столбиком.
   ⚠️ Тени нет намеренно: карточка живёт внутри раскладушки с overflow, и тень резалась бы
   о её края - тот же дефект, который снимали 02.09 с кнопок. */
.chart .tip { transition: opacity var(--dur-1) var(--ease-out); pointer-events: none; }
.chart .tip-box { fill: var(--glass); stroke: var(--edge); stroke-width: 1; }
.chart .tip-m { fill: var(--muted); font-size: 8.5px; }
.chart .tip-v { fill: var(--ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Палец в столбик высотой 2px не попадает: область нажатия во всю высоту графика. */
.chart .hit { fill: transparent; cursor: pointer; }
/* Столбики вырастают от оси. transform-box нужен, чтобы точка отсчёта считалась от самой
   фигуры, а не от системы координат всего SVG. Задержка через переменную --i даёт лесенку
   в 30 мс - весь ряд появляется за полсекунды, а не хлопком. */
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.chart .bar {
  transform-box: fill-box; transform-origin: bottom;
  animation: bar-grow .42s var(--ease-out) backwards;
  animation-delay: calc(var(--i) * 30ms);
}

/* ---------- карта её работы ---------- */
/* Вид взят у Bklit UI (карта вкладов), нарисован своим SVG. Клетка 11 px - меньше пальца, и
   это ОСОЗНАННО: она не кнопка, а точка данных. Промах ничего не стоит, показывается просто
   другой день. Тем же правилом в этом приложении живёт столбик высотой 2 px.
   🔴 Тень панели сюда не вешать: карта лежит внутри раскладушки с overflow, и тень резалась
   бы о её края - ровно тот дефект, который снимали 02.09 с кнопок. */
.hm { margin: 2px 0 0; }
.hm-grid { display: block; width: 100%; height: auto; overflow: visible; }
/* 🔴 Базовая заливка стоит на .hm-l0, а НЕ на .hm-c, и это не придирка к стилю. Клетка «нет
   данных» заливается узором через атрибут fill (id узора вычисляется на месте, в CSS его не
   напишешь), а правило CSS всегда сильнее атрибута представления - и узор был не виден
   вовсе. Поймано на живой странице: заштрихованные дни марта выглядели просто пустыми,
   то есть карта говорила ровно то, что мы старались не говорить. */
.hm-c { stroke: var(--line); stroke-width: .6; cursor: pointer; }
.hm-l0 { fill: var(--field); }
/* Пять уровней по замеру живой базы: людей в день медиана 5, 75% - 12, 90% - 24.
   Ступени 1-2 / 3-5 / 6-12 / 13+, поэтому шкала кончается там, где кончаются данные. */
.hm-l1 { fill: color-mix(in srgb, var(--accent) 28%, transparent); stroke: transparent; }
.hm-l2 { fill: color-mix(in srgb, var(--accent) 52%, transparent); stroke: transparent; }
.hm-l3 { fill: color-mix(in srgb, var(--accent) 76%, transparent); stroke: transparent; }
.hm-l4 { fill: var(--accent); stroke: transparent; }
/* Нет данных - штриховка, а не пустая клетка: пустая сказала бы, что она не работала.
   Рамка заметнее, чем у пустой клетки: в квадрате 11 px три диагонали сами по себе слабо
   отличались от пустоты, а именно это различие здесь и есть весь смысл. */
.hm-none { stroke: var(--faint); stroke-width: .8; }
.hm-c.on { stroke: var(--ink); stroke-width: 1.4; }
.hm-dow, .hm-mon { fill: var(--faint); font-size: 8.5px; }
.hm-mon { text-anchor: start; }
.hm-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.hm-key { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--faint); }
/* Образцы в легенде - те же классы, что у клеток, поэтому расходиться им нечем. */
.hm-key .hm-c {
  display: inline-block; width: 11px; height: 11px; border-radius: 2px;
  background-color: var(--field); border: .6px solid var(--line);
}
.hm-key .hm-l1 { background-color: color-mix(in srgb, var(--accent) 28%, transparent); border-color: transparent; }
.hm-key .hm-l2 { background-color: color-mix(in srgb, var(--accent) 52%, transparent); border-color: transparent; }
.hm-key .hm-l3 { background-color: color-mix(in srgb, var(--accent) 76%, transparent); border-color: transparent; }
.hm-key .hm-l4 { background-color: var(--accent); border-color: transparent; }
.hm-out { margin-top: 6px; font-size: 12.5px; color: var(--muted); min-height: 17px; }
/* Клетки появляются столбцами слева направо, тем же приёмом и той же кривой, что столбики
   графика: задержка через --i. Глушится общим правилом prefers-reduced-motion в конце файла. */
.hm-c { animation: bar-grow .3s var(--ease-out) backwards; animation-delay: calc(var(--i) * 12ms);
  transform-box: fill-box; transform-origin: center; }
[data-theme='light'] .hm-l4 { fill: var(--accent-strong); }
[data-theme='light'] .hm-key .hm-l4 { background-color: var(--accent-strong); }

/* Горизонтальные полосы: воронка и страны. */
/* ---------- кольцо долей ---------- */
/* Одна золотая лесенка по убыванию доли и серый для того, что страной не является. Смысл
   цвета описан у ringChart в app.js.
   🔴 Ступени идут смешиванием с ТЕКСТОМ, а не с фоном карточки. Замер 03.09: лесенка к фону
   уводила слабые доли до 1.46:1 на светлой теме и 1.97:1 на тёмной, то есть дуга Британии
   просто пропадала. К тексту тот же ряд даёт 3.69-9.91, и только чистое золото на светлой
   теме остаётся 2.85 - это предел самого фирменного цвета на белом, он такой же у полосок
   рядом. Соседние ступени расходятся на 14.6-32.5 по RGB, серые от золотых - минимум на 26.
   Прозрачность вместо смешивания не годится: полупрозрачная дуга грязнится о фон. */
:root, [data-theme='dark'] {
  --rg-g1: var(--accent);
  --rg-g2: color-mix(in srgb, var(--accent) 84%, var(--ink));
  --rg-g3: color-mix(in srgb, var(--accent) 70%, var(--ink));
  --rg-g4: color-mix(in srgb, var(--accent) 58%, var(--ink));
  --rg-g5: color-mix(in srgb, var(--accent) 48%, var(--ink));
  --rg-grey: var(--faint);
  --rg-grey2: color-mix(in srgb, var(--faint) 62%, var(--ink));
}
.ring-wrap { display: grid; gap: 12px; }
.ring { display: block; width: 100%; max-width: 208px; margin: 0 auto; overflow: visible; }
/* Скруглённых концов нет намеренно: у Bklit доли крупные, а у нас 2% это дуга в 7°, и два
   круглых конца при толщине 15 съели бы её целиком. */
.rg-seg {
  fill: none; stroke: var(--c); stroke-width: 15; stroke-linecap: butt; cursor: pointer;
  transition: stroke-width var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  animation: rg-in .42s var(--ease-out) backwards; animation-delay: calc(var(--i) * 60ms);
}
.rg-seg:focus-visible { outline: none; stroke-width: 19; }
.ring-wrap.picked .rg-seg { opacity: .22; }
.ring-wrap.picked .rg-seg.on {
  opacity: 1; stroke-width: 19;
  transform: translate(calc(var(--dx) * 5px), calc(var(--dy) * 5px));
}
@keyframes rg-in { from { opacity: 0; } to { opacity: 1; } }
.rg-lab {
  fill: var(--faint); font-size: 9.5px; font-weight: 700; text-anchor: middle;
  letter-spacing: .06em; text-transform: uppercase;
}
/* Табличные цифры: число в середине меняется при каждом наведении, и без них оно ёрзает. */
.rg-num {
  fill: var(--ink); font-size: 30px; font-weight: 800; text-anchor: middle;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.rg-sub { fill: var(--muted); font-size: 12px; font-weight: 600; text-anchor: middle; }

.rg-leg { display: grid; gap: 2px; }
.lg-item {
  display: grid; grid-template-columns: 10px 1fr auto auto; gap: 4px 8px; align-items: center;
  width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: none;
  text-align: left; cursor: pointer;
}
.lg-item:hover { background-color: var(--strong); }
/* Выбранную строку видно, а остальные приглушены: без этого выбор дуги подтверждался только
   серединой кольца, и связь «дуга ↔ строка» приходилось угадывать. */
.lg-item.on { background-color: var(--strong); box-shadow: inset 0 0 0 1px var(--edge); }
.ring-wrap.picked .lg-item:not(.on) { opacity: .45; }
.lg-item { transition: background-color var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
.lg-mark { width: 10px; height: 10px; border-radius: 3px; background-color: var(--c); }
/* «Реклама»: строки легенды кольца M 40 через 4, палец 44 полосой (П25 точка 3; «Аналитика» - T-p21, не трогаем). */
#ads-body .rg-leg { gap: 4px; }
#ads-body .lg-item { position: relative; min-height: var(--h-m); box-sizing: border-box; font-family: inherit; }
#ads-body .lg-item::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.lg-name {
  font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.lg-n { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.lg-pct {
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
  min-width: 4ch; text-align: right;
}
.lg-track {
  grid-column: 1 / -1; height: 5px; border-radius: 3px; background-color: var(--field);
  overflow: hidden;
}
.lg-fill { display: block; height: 100%; border-radius: 3px; background-color: var(--c); }

/* ---------- «Как довести человека до брони»: шаги над разбором ----------
   Коробка, а не секция: она не сворачивается и стоит выше всего остального нарочно.
   Экран, начинающийся с причин, отвечает на вопрос «кто виноват»; этот отвечает на вопрос
   «что делать завтра». Акцентная рамка слева, а не заливка: заливка спорила бы с плитками
   состояния, которые идут сразу под ней и уже несут цвет. */
.plan {
  border: 1px solid var(--edge); border-left: 3px solid var(--accent);
  border-radius: 14px; background-color: var(--field);
  padding: 12px 14px; margin-bottom: 12px;   /* 12 · 14 (П25, П31 п. 6) */
}
.plan h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: .2px; }
.plan ol { margin: 0; padding-left: 1.15em; display: grid; gap: 8px; }   /* ряды через 8 (П25) */
.plan li { font-size: 13.5px; line-height: 1.45; }
.plan li b { font-weight: 600; }
.plan-how { color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
/* Число живое, поэтому набрано теми же табличными цифрами, что и остальная статистика. */
.plan-why { color: var(--accent); font-size: 12.5px; margin-top: 3px;
  font-variant-numeric: tabular-nums; }
/* Тот же совет, но над списком людей одной причины. */
.plan-fix {
  border-left: 3px solid var(--accent); border-radius: 10px;
  background-color: var(--field); padding: 9px 11px; margin: 2px 0 10px;
  font-size: 13px; line-height: 1.45; color: var(--ink);
}

.hbars { display: grid; gap: 7px; }
.hbar {
  display: grid; grid-template-columns: 8.5em 1fr auto; align-items: center; gap: 9px;
  border: 0; background: none; padding: 3px 2px; font: inherit; color: inherit;
  text-align: left; width: 100%;
}
button.hbar { cursor: pointer; border-radius: 10px; transition: background-color var(--dur-1) var(--ease-out); }
button.hbar:hover { background-color: var(--strong); }
button.hbar:active { background-color: var(--field); }
.hb-name { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-track { height: 9px; border-radius: 5px; background-color: var(--field); overflow: hidden; }
.hb-fill { display: block; height: 100%; border-radius: 5px; background-color: var(--accent); }
.hb-n { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

/* Предупреждение о неполных данных. Появляется только когда провалы есть на самом деле
   и исчезнет само, когда дыру закроют импортом. */
.warn-line {
  margin-top: 8px; padding: 9px 11px; border-radius: 12px;
  border: 1px solid var(--edge); background-color: var(--field);
  font-size: 12px; line-height: 1.45; color: var(--muted);
}
/* «‹ ко всем причинам» над списком одной причины: кнопка S 34 строки над списком (П25). */
.btn.why-back { min-height: var(--h-s); padding: 0 11px; border-radius: var(--r-s); font-size: 13.5px; margin-bottom: 8px; }
.form-line { font-size: 13px; color: var(--ink); padding: 4px 2px; }
/* П31 (Макс 07.10): карточка «Проверить переписки» сверху «Почему теряли» и лист «Проверить переписки». Размеры П25 по
   UI-RULES: карточка 12 · 14, кнопка M 40 (--h-m) во всю ширину, подписи 12; лист 8 · 14 · 12 с шапкой 34, полосы 34 с
   частями 28 (общие .seg/.seg-btn), строка «Свой срок» S 34 (--h-s, --r-s), плашка цены радиус 12, ряд кнопок 40 через 6,
   над рядом 12 (общий .pl-acts). Ниже карточки ужатый формат: шаги 12 · 14 (.plan), плитки как в «Отчёте» (23), шапка
   раскладушки и полосы причин 40 с пальцем 44 накладкой ::after по 2 сверху и снизу, ряды через 4. */
.card.why-check { display: grid; gap: 8px; padding: 12px 14px; }
.why-h { display: grid; gap: 2px; }
.why-h b { font-size: 15px; }
.why-h span { font-size: 12px; color: var(--muted); }
.why-h span:empty { display: none; }
.btn.go.why-btn { width: 100%; }
/* «Забрать сейчас» (круг 4, F3): вторичная M 40 во всю ширину, с рамкой и полем (.btn), не золотая: это не новая проверка. */
.btn.why-now { width: 100%; }
.why-cost { font-size: 12px; line-height: 1.3; color: var(--muted); }
.why-err { margin: 0; }
/* Выключенная «Проверить N» видна выключенной (круг 3, P3), как у остальных рядов кнопок. */
.why-sheet .pl-acts .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* Полоска хода 6: это данные, ширина дорастает за --dur-2. */
.why-track { height: 6px; border-radius: 3px; background: var(--field); overflow: hidden; }
.why-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width var(--dur-2) var(--ease-out); }
/* Лист: под шапкой 10 (.sc-shd), поля через 8; «Кого» три части, «За сколько» четыре, части в одну строку. */
.why-sheet > .sc-fld + .sc-fld, .why-sheet > .why-sum, .why-sheet > .why-err { margin-top: 8px; }
.seg.why-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg.why-per { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg.why-who > .seg-btn, .seg.why-per > .seg-btn { padding: 0 4px; min-width: 0; }   /* слова в словарях короткие, чтобы часть не заходила на соседа (круг 2, F5: tr «Tüm süre»); overflow не режем: он отрезал бы палец 44 */
/* «Свой срок»: подпись 12 слева, кнопка S 34 на остаток ширины с датами и «›» (как строка даты «Отчёта» .rp-date: 34,
   радиус 10; палец 44 даёт общий .btn::after), выбранная .btn.onn (рамка и текст цветом акцента). Над строкой 8 + 8. */
.why-own { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.why-ownl { flex: none; font-size: 12px; color: var(--muted); }
.btn.why-range { flex: 1; justify-content: space-between; min-height: var(--h-s); padding: 0 10px; border-radius: var(--r-s); font-size: 13.5px; }
.btn.why-range b { font-weight: 400; color: var(--muted); }
.btn.why-range.onn b, .btn.why-range.onn .why-chev { color: inherit; }
.why-chev { color: var(--faint); }
/* Плашка цены: рамка акцент 45 %, фон поля с акцентом 10 %, радиус 12 (--r-m), отступ 10 · 12; 20/700, 13.5, 12 приглушённая. */
.why-sum { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-m); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--field)); }
.why-sum b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.why-sum span { font-size: 13.5px; }
/* Приглушённые 12 на подкрашенном фоне плашки: в тёмной теме --muted давал 4,40 к фону, нужно от 4,5 (UI-RULES раздел 3; круг 2, F6),
   поэтому цвет чуть ближе к --ink в обеих темах. */
.why-sum small { font-size: 12px; color: color-mix(in srgb, var(--muted) 55%, var(--ink)); }
/* Пересчёт: плашка чуть увеличивается и возвращается (--dur-press на --spring, отклик на нажатие); при «уменьшить движение»
   общий запрет анимаций в конце файла, а JS класс не ставит. */
.why-bump { animation: why-bump var(--dur-press) var(--spring); }
@keyframes why-bump { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
/* Ниже карточки: плитки как в «Отчёте» (23, подпись блоком через 1.25), карточки через 12, шапка раскладушки и полосы причин
   видимые 40 (--h-m) с пальцем 44 накладкой ::after, ряды через 4 (накладки соседей не сходятся). */
#why-body .stats { margin-bottom: 12px; }
#why-body .stat b { font-size: 23px; }
#why-body .stat span { display: block; line-height: 1.25; margin-top: 2px; }
#why-body details.sec { margin-bottom: 12px; }
#why-body details.sec > summary { position: relative; min-height: var(--h-m); margin-bottom: 8px; }
#why-body details.sec > summary::after { content: ''; position: absolute; inset: -3px 0; }
#why-body button.hbar::after { content: ''; position: absolute; inset: -2px 0; }
#why-body button.hbar { position: relative; min-height: var(--h-m); }
#why-body .hbars { gap: 4px; }
.stat.s-cool b { color: var(--ink); }

/* Вход в аналитику - четвёртая вкладка бара, разметка в app.html. Отдельной кнопки на
   «Моём дне» больше нет: она стояла в подвале страницы высотой в тринадцать экранов. */

/* ---------- переключатель «кто ведёт» ---------- */
/* Кнопки, а не выпадающий список: вариантов четыре, они не меняются и должны быть видны
   все сразу. У статусов список нужен - их одиннадцать и она заводит свои. */
/* Один переключатель на всю CRM (П25): полоса 34 на заливке поля с рамкой, внутри кнопки 28, выбранная - белая плашка
   с тенью, остальные без фона серым текстом. Так .seg, .sc-seg, .sc-mode, .pg-seg и «Списком / Месяцем». Выбранное
   отличается и заливкой, и тенью, и цветом текста: одного оттенка при дальтонизме не хватило бы. Кнопка 28 получает
   палец 44 накладкой ::after по центру. Не влезли в ряд - переносятся рядами через 16 (накладки не сходятся). */
.seg { display: flex; flex-wrap: wrap; gap: 16px 2px; padding: 2px; min-height: var(--h-s); box-sizing: border-box; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--field); }
/* Вне полосы (.seg-btn сам по себе в ряду) - коробка S 34 с рамкой, как .sc-hbox; внутри полосы - без рамки и фона. */
.seg-btn {
  position: relative; flex: 1 1 0; min-height: var(--h-s); padding: 0 11px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-s); background-color: var(--field);
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 18px; color: var(--muted); cursor: pointer;
  transition: transform var(--dur-press) var(--spring), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.seg > .seg-btn { min-height: 28px; border: 0; border-radius: 8px; background-color: transparent; white-space: nowrap; }
/* «Канал» в узкой строке отбора: три подписи с числами не влезают в один ряд - переносятся внутри кнопки, не рядами. */
.ch-seg > .seg-btn { white-space: normal; line-height: 16px; }
.seg-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.seg-btn:hover { color: var(--ink); }
.seg-btn:active { transform: scale(.96); }
.seg-btn:active::after { height: 46px; left: -3%; right: -3%; }
.seg-btn:disabled { opacity: .6; cursor: default; }
/* «Загрузить переписку из WhatsApp» в карточке «Завести клиента вручную». */
.exp-up { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.card > .exp-up:first-child, .cl-upsheet > .exp-up { margin-top: 0; padding-top: 0; border-top: 0; }
.cl-upsheet > .exp-up > h3 { display: none; }
.exp-up h3 { margin-bottom: 6px; }
.exp-line { display: flex; flex-wrap: wrap; gap: 10px 8px; margin: 6px 0 10px; }
.exp-line .seg-btn { flex: 1 1 160px; }
/* Колонка не шире строки: иначе содержимое без переносов (название номера в кнопке вопроса, nowrap) раздвигает строку
   файла за край карточки (P1 проверяющего 2 по T-p34 круг 2). */
.exp-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.exp-out:empty { display: none; }
.exp-row { padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--field);
  display: grid; gap: 8px; word-break: break-word; }
.exp-row .chips { padding: 0; }
.exp-row b { font-size: 13.5px; }
.exp-row .btn { justify-self: start; }
.exp-sum { font-weight: 600; }
/* П34: «С какого номера шла переписка» (подпись 12, через 4 выпадающий 40 нашим листом, через 4 подсказка 12), блок через 8
   под описанием и через 12 над «Выбрать файл»; пустой «Выбери номер» приглушён. Вопрос по подписи в файле: строка 13.5 и
   две кнопки 40 через 6 в строке файла. */
.exp-up > .exp-pick { margin: 8px 0 12px; }
.sc-fld > .exp-pick-h { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.exp-pick.exp-empty .pl-pick .pl-pick-t { color: var(--muted); }
.exp-ask { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.exp-ask > p { margin: 0; font-size: 13.5px; line-height: 1.4; }
.exp-ask-acts { display: flex; gap: 6px; }
.exp-ask-acts > .btn { flex: 1 1 0; min-width: 0; min-height: var(--h-m); margin: 0; }
.exp-ask-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Выбранное отличается не только цветом: белая плашка, тень и цвет текста разом (у кнопки вне полосы ещё рамка) - при
   дальтонизме одного оттенка не хватило бы. */
.seg-btn[data-on='1'], .seg-btn[aria-pressed='true'] {
  background-color: var(--panel-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.14); border-color: var(--accent-strong);
}

/* ---------- который час у клиентов ---------- */
/* Полосы окрашены по замеру (scripts/best-hours.js), а не по здравому смыслу. Цветом
   отмечено ТОЛЬКО то, что стоит на большой выборке: лучшее окно и худшее. Ночь у них
   намеренно нейтральная - подробности в комментарии к HOURS в app.js. */
.mel {
  padding: 16px 18px 12px; margin-bottom: 16px;
  border: 1px solid var(--edge); border-radius: 16px; background-color: var(--panel);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hl);
}
/* Время и город на одной линии, вывод - отдельной строкой. Раньше два мелких текста жались
   справа от огромного времени: понятно всё, а прочесть нечем. */
.mc-head { display: flex; align-items: baseline; gap: 10px; }
.mc-time { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.mc-city {
  font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px;
}
/* 🔴 ЗАМЕРЕНО: подпись НЕ красится в цвет полосы. Пробовал - в светлой теме зелёная дала
   4.07, а жёлтая 3.35 при норме 4.5 для текста. И это ровно то, что запрещает правило
   оформления графиков: текст носит текстовые токены, цвет несёт сама фигура рядом. Вывод
   и так сказан словами («лучшее время», «хуже всего»), то есть не одним цветом. */
.mc-word { font-size: 14px; color: var(--muted); margin-top: 7px; line-height: 1.35; }
.mc-bar { display: block; width: 100%; height: auto; margin-top: 12px; }
.mc-slot { fill: var(--field); }
/* ⚠️ У обычного деления должно быть СВОЁ правило, а не только наследование от .mc-slot:
   тем же классом красится точка в легенде, а она не .mc-slot. Без этой строки SVG рисовал
   её заливкой по умолчанию, то есть чёрной, - в светлой теме чужеродное пятно, в тёмной
   вообще ничего. Поймано замером: 20.69 вместо ожидаемой единицы. */
.mc-plain { fill: var(--field); }
.mc-best { fill: var(--grn); }
/* Без прозрачности: под ней жёлтое деление давало в светлой теме 1.86 при норме 3.0 для
   графики, то есть худшее окно переставало читаться именно там, где важно. */
.mc-weak { fill: var(--yel); }
/* 🔴 «Данных мало» НАМЕРЕННО не отличается от обычного деления, и это решение по замеру.
   Пробовал приглушённую заливку - 1.19 против 1.2, то есть никак. Пробовал контур - 1.31,
   тоже никак. А поднять его до различимого (3.0 и выше) значит сделать «мы про эти часы
   ничего не знаем» ЗАМЕТНЕЕ измеренных полос - ровно наоборот тому, что нужно.
   Поэтому на полосе три состояния вместо четырёх, и каждое из них - утверждение, которое
   мы можем защитить. Про малую выборку скажет строка вывода, когда время в неё попадёт:
   там написано «данных мало» вместо доли. Это те же 08-12 у них, то есть 01-05 ночи по
   Стамбулу - она в это время не пишет, и решение от этих часов не зависит. */
.mc-thin { fill: var(--field); }
/* Бегунок: точка над полосой и тонкая линия сквозь неё - «вы здесь». Едет по минутам,
   поэтому переезд плавный, а не рывком раз в час. */
.mc-mark { transition: transform var(--dur-3) var(--ease-out); }
.mc-mdot { fill: var(--ink); }
.mc-mline { stroke: var(--ink); stroke-width: 1.4; opacity: .55; }
/* Подписи часов были 7px цветом --faint - отсюда «тоненькие и непонятненькие». Крупнее,
   текстовым токеном, и с засечкой: без неё цифра висела в воздухе. */
.mc-tick { fill: var(--muted); font-size: 9px; text-anchor: middle; }
/* Стамбульский час в скобках - тише мельбурнского: главная шкала одна, вторая помогает. */
.mc-tick-ist { fill: var(--faint); font-size: 8px; }
/* Засечка ровно под своей подписью и того же тона: на --line она давала 1.31, то есть
   была невидима, и цифра снова висела в воздухе. */
.mc-notch { stroke: var(--faint); stroke-width: 1.2; }

/* Легенда. Без неё полоса порождала ложное «серое = они спят» - см. пояснение в app.js. */
.mc-key {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px;
  font-size: 11.5px; color: var(--muted);
}
.mc-k { display: inline-flex; align-items: center; gap: 5px; }
.mc-kdot { width: 10px; height: 10px; flex: 0 0 auto; display: block; }
/* Обводка нужна ради «обычного»: его заливка это фон дорожки, и без контура образец в
   легенде не виден вовсе (в светлой теме 1.03 к панели). Цветным она не мешает. */
.mc-kdot rect { stroke: var(--faint); stroke-width: 1; }
/* Пояснение к скобкам стоит в конце и тише: это подсказка к разметке, а не сама разметка. */
.mc-k-note { color: var(--faint); }
/* Деления вырастают лесенкой, как столбики на аналитике. Глушится общим правилом
   prefers-reduced-motion в конце файла. */
@keyframes mc-slot-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.mc-slot {
  transform-box: fill-box; transform-origin: center;
  animation: mc-slot-in var(--dur-3) var(--ease-out) backwards;
  animation-delay: calc(var(--i) * 18ms);
}

/* Сообщение «не загрузилось». Заметное, но не тревожное: это не авария, а «попробуй ещё». */
.fail {
  display: grid; gap: 8px; justify-items: start;
  padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--edge); background-color: var(--panel);
  box-shadow: var(--shadow), inset 0 1px 0 var(--hl);
}
.fail b { font-size: 15px; }
.fail-why { font-size: 12px; color: var(--muted); word-break: break-word; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* Кому прозрачность мешает - панель становится глухой. Размытие при этом не нужно вовсе:
   оно и стоит дорого, и смысла без прозрачности не имеет. */
@media (prefers-reduced-transparency: reduce) {
  .tabs { background-color: var(--panel-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .tabs { background-color: var(--panel-solid); border-color: var(--ink); }
}

/* ---------- обновление по скриншотам ---------- */
/* Строка распознанного сообщения: её нужно ПРОВЕРИТЬ, поэтому «кто написал» и дата стоят
   рядом с текстом, а не прячутся в подменю - ошибка здесь ломает «ждут ответа». */
html:not([lang="ru"]) #shot-box { scroll-margin-top: 140px; }
.shot-row {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; background: var(--field);
}
/* Модель сама сказала, что не уверена в стороне пузыря - подсвечиваем, пока не выбрали. */
.shot-row.unsure { border-color: var(--yel); }
.shot-who { display: flex; gap: 6px; margin-bottom: 6px; }
.shot-text { font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.shot-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
#shot-box textarea.f { resize: vertical; }

/* Дата и час напоминания в одной строке: час появился потому, что без него напоминание
   приходило сразу после полуночи (бот проверяет задачи раз в минуту). */
.when-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.when-row select { width: auto; flex: 0 0 auto; margin: 0; }
.when-btn { background: var(--field); min-width: 0; width: 100%; min-height: var(--h-m); margin-bottom: 12px; }
.shot-when .when-btn { margin: 0; }
.bc-range .when-btn { flex: 1 1 0; width: auto; min-height: var(--h-s); margin: 0; padding: 0 11px; border-radius: var(--r-s); font-size: 13.5px; }
/* Поле и кнопка в одном ряду одной высоты и на одной линии (Макс, 07.09: «две эти кнопки
   на разных высотах»). У input.f общий отступ снизу 12 px, здесь он поднимал поле над
   кнопкой ✨; кнопка тянется на высоту поля. */
.when-row .f { margin: 0; }
.when-row > .btn, .when-row > select { align-self: stretch; }


/* ---------- консоль ответа: переписка и поле ---------- */
/* Переписка стоит НАД полем ответа и развёрнута: раньше она лежала свёрнутой в самом низу,
   то есть контекст, ради которого карточку открывают, надо было разворачивать руками. */
.conv .chat {
  max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 7px;
  padding: 4px 2px; overscroll-behavior: contain;
}
.bub { max-width: 84%; border-radius: 14px; padding: 8px 11px; font-size: 14.5px; line-height: 1.45; }
/* Её сообщения справа, клиента слева - как в любом мессенджере, чтобы не думать, кто написал. */
.bub.them { align-self: flex-start; background: var(--field); border: 1px solid var(--line);
  border-bottom-left-radius: 5px; }
.bub.me { align-self: flex-end; background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-bottom-right-radius: 5px; }
.bub .bt { white-space: pre-wrap; word-break: break-word; }
.bub .bm { font-size: 10.5px; color: var(--faint); margin-top: 3px; font-variant-numeric: tabular-nums; }
/* Автоответ Instagram: её сторона, но приглушён и подписан, чтобы не читался её ответом. */
.bub.me.auto { background: transparent; border-style: dashed; color: var(--muted); }
.bub .bauto { font-size: 11px; font-weight: 600; color: var(--faint); margin-bottom: 3px; }
/* П50: ушло от Лале при «Отвечает сама»: её сторона пунктиром и меткой «Лале сама», как в макете. */
.bub.me.lale { border-style: dashed; border-color: var(--accent-graphic); }
.bub .blale { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 3px; }

/* Состояние 24-часового окна видно ДО того, как она начнёт писать: узнать об отказе после
   набранного текста хуже, чем скопировать вручную. */
.winbadge { font-size: 12.5px; border-radius: 10px; padding: 7px 10px; margin-bottom: 9px; }
.winbadge.ok { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
.winbadge.shut { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--ink); }

/* ---------- очередь сообщений в ответе ----------
   Ответ у неё - несколько коротких сообщений подряд (в среднем 3,23 за заход), поэтому и
   правится он по одному: каждое своей строкой, с крестиком «убрать». Строки намеренно
   выглядят как пузыри переписки выше - это то же самое, только ещё не отправленное. */
.qlist { display: flex; flex-direction: column; gap: 6px; }
.qrow { display: flex; align-items: flex-start; gap: 6px; }
.qrow .qmsg {
  flex: 1; min-width: 0; margin: -2px 0; resize: none; overflow: hidden;
  min-height: 44px; border-radius: 14px; border-bottom-right-radius: 5px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); background-clip: padding-box;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.qrow .qmsg:focus { border-color: transparent; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.qrow .qdel {
  flex: 0 0 auto; width: var(--h-s); height: var(--h-s); margin: 3px 5px 0 0; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%;
  background: var(--field); color: var(--muted); cursor: pointer;
}
.qrow .qdel .sgn { width: 12px; height: 12px; }
.qrow .qdel:hover { color: var(--red); background: var(--field); }
.qadd {
  margin: 8px 0 0; min-height: var(--h-s); box-sizing: border-box; width: fit-content;
  display: flex; align-items: center; gap: 5px; padding: 0 11px;
  border: 1px dashed var(--line); border-radius: var(--r-s); background: transparent;
  color: var(--muted); font: inherit; font-size: 13.5px; line-height: 20px; cursor: pointer;
}
.qadd:hover { color: var(--ink); border-color: var(--edge); }

.reply .chips { padding-bottom: 8px; }
.reply .when-row { margin-bottom: 8px; }
.reply .when-row .f { flex: 1; }
/* Правило `.reply .actions` убрано 08.09: в консоли ответа полосы нет с 07.09, там `.btn-row`,
   и правило висело мёртвым. */
.reply .btn:disabled { opacity: .45; cursor: not-allowed; }

/* Занавес приватности накрывает и переписку: это дословные слова пациентов. */
[data-privacy='on'] .bub .bt { filter: blur(5px); user-select: none; }

/* ---------- меню ☰ в шапке ---------- */
/* Иконка кнопки - вектор, как у вкладок: наследует цвет и не зависит от набора эмодзи
   системы. Размер 18 при кнопке 36 - тот же зазор, что у вкладок (22 при 46). */
.icobtn .ico {
  display: block; width: 18px; height: 18px; margin: 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.bar .icobtn.on { color: var(--tab-on); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
/* ---------- панель «Центр управления» (макет 36, перенесено 25.09) ----------
   Вместо листа под шапкой: панель слева на 85% ширины (не больше 360 px), затемнение сзади,
   выезд translateX. Стили #panel и #veil перенесены из макета почти дословно. */
#veil { position: fixed; inset: 0; z-index: 19; background: var(--veil); opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
#veil.show { opacity: 1; }
#panel {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 20;
  width: min(85vw, 360px); background: var(--bg2); color: var(--ink);
  border-right: 1px solid var(--edge); border-radius: 0 22px 22px 0;
  /* За край на 2 px дальше ширины: при дробной ширине (85vw на 375 = 318.75) слой с translateX(-100%) подмешивал рамку в
     крайний столбец экрана (T-fix-press-edge-2, стенд пикселями). */
  transform: translateX(calc(-100% - 2px)); transition: transform var(--dur-3) var(--ease-out);
  display: flex; flex-direction: column;
  padding-top: max(env(safe-area-inset-top, 0px), var(--tg-top, 0px));
  /* Вертикальный жест остаётся у прокрутки списка, горизонтальный берём себе (свайп-закрытие). */
  touch-action: pan-y pinch-zoom;
}
/* none, а не translateX(0): анимация та же (none при переходе считается нулевым сдвигом), но в покое у
   панели нет transform. На iPhone в Telegram (WebKit) список прокрутки внутри сдвинутого слоя после
   выезда не дорисовывал нижние плитки - чёрная полоса, пока не прокрутишь (Макс 26.09, скриншот).
   Вторая половина защиты - panelRepaint() в app.js. */
#panel.open { transform: none; }
/* Тень панели только у открытой (T-fix-press-edge-2, малая доводка): у закрытой панели, уехавшей за край translateX, тень 34 px
   оставалась на краю экрана и темнила его на 375 в тёмной теме. Тень на ::after и гаснет прозрачностью (слой, без перерисовки),
   а не box-shadow самой панели. */
#panel::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: var(--shadow); opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
#panel.open::after { opacity: 1; }
#panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(520px 380px at 0% 0%, color-mix(in srgb, var(--aur1) 16%, transparent), transparent 70%),
    radial-gradient(420px 360px at 100% 100%, color-mix(in srgb, var(--aur3) 12%, transparent), transparent 70%);
}
#panel .p-head { display: flex; align-items: center; gap: 10px; padding: 16px 14px 10px 18px; }
#panel .p-head h2 { margin: 0; font-size: 21px; letter-spacing: -.2px; flex: 1; }
#panel .p-head > .x {
  width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--line); background: var(--field);
  color: var(--muted); border-radius: 999px; cursor: pointer; display: grid; place-items: center; padding: 0;
}
#panel .p-body {
  min-height: 0; touch-action: pan-y pinch-zoom; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  /* Сверху 6: полоса 44 первой шапки раздела (40 + 2) и при прокрутке не доходит до шапки панели (заметка проверяющего 1, 07.10). */
  padding: 6px 12px calc(24px + max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px)));
  overscroll-behavior: contain;
}
#panel .p-body > * { flex-shrink: 0; }
#panel .who {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 12px;
  border-radius: 22px; border: 1px solid var(--edge);
  background-color: var(--panel-solid);
  background: linear-gradient(135deg, color-mix(in srgb, var(--aur2) 22%, var(--panel)), color-mix(in srgb, var(--accent) 14%, var(--panel)));
  box-shadow: var(--shadow), inset 0 1px 0 var(--hl);
}
#panel .who .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); color: #1a1409; font-weight: 700; display: grid; place-items: center; font-size: 15px; }
#panel .who b { display: block; font-size: 17px; }
#panel .who span { font-size: 12.5px; color: var(--muted); }
/* Карточка-раскладушка. Тот же приём, что у .card[data-panel] + .fold-body: display:none не
   анимируется, а сетка 1fr → 0fr раскрывает тело, не зная его высоты. */
#panel .fold {
  background-color: var(--panel); border: 1px solid var(--edge); border-radius: 18px;
  margin-bottom: 8px; box-shadow: var(--shadow), inset 0 1px 0 var(--hl);
}
#panel .fold > h3 { margin: 0; }
#panel .fold > h3 > button {
  position: relative; width: 100%; cursor: pointer; padding: 10px 15px; user-select: none; min-height: var(--h-m); border-radius: 17px 17px 0 0;
  display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ink);
  transition: background-color var(--dur-1) var(--ease-out);
}
#panel .fold > h3 > button:hover { background-color: var(--strong); }
#panel .fold > h3 > button:active { background-color: var(--field); }
#panel .fold.folded > h3 > button { border-radius: 17px; }
#panel .fold > h3 > button::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
#panel .fold > h3 > button { z-index: 1; }   /* полоса шапки поверх первого пункта (у пунктов position: relative) */
#panel .fold > .fold-body {
  display: grid; grid-template-rows: 1fr; min-height: 0; padding-bottom: 10px;
  transition: grid-template-rows var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), padding-bottom var(--dur-2) var(--ease-out);
}
/* Нижний отступ на контейнере, а не внутри: внутренний не сжимается вместе с дорожкой 0fr. */
#panel .fold > .fold-body > .fold-inner { min-height: 0; overflow: hidden; padding: 0 8px; }
#panel .fold.folded > .fold-body { grid-template-rows: 0fr; opacity: 0; padding-bottom: 0; }
#panel .fold .fold-inner p.hint { margin: 6px 8px 4px; font-size: 12.5px; color: var(--muted); }
#panel.drag, #veil.drag { transition: none; }
/* строка внутри карточки: иконка · подпись+пояснение · значение/контрол */
#panel .item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--h-m); padding: 5px 8px;
  border: 0; background: none; border-radius: 12px; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink);
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--spring);
}
#panel .item:hover { background-color: var(--field); }
#panel .item:active { transform: scale(.985); }
#panel .item:active::after { content: ''; position: absolute; top: 0; bottom: 0; left: -2%; right: -2%; }
#panel .item .ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--tab-on); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#panel .item .t { flex: 1; min-width: 0; }
#panel .item .t b { display: block; font-weight: 600; font-size: 15px; }
#panel .item .t span { display: block; font-size: 12.5px; color: var(--muted); }
#panel .item .v { font-size: 14px; color: var(--muted); white-space: nowrap; }
#panel .item .v.acc { color: var(--tab-on); font-weight: 700; }
#panel .item.on { color: var(--tab-on); background-color: var(--field); }
#panel .item.warn .ico { color: var(--red); }
#panel .item + .item { border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
#panel .item + .item:hover { border-top-color: transparent; }
/* П17а (Макс 05.10): подзаголовки «Разделов» мельче и тише строк, обычными буквами; «Удалённые» последней и мельче. */
#sections .m-sub { margin: 12px 8px 2px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
#sections .m-sub[hidden] { display: none; }
#panel #sections .item.m-small .t b { font-size: 14px; }
#panel #sections .item.m-small { opacity: .85; margin-top: 12px; }
/* тумблер */
#panel .sw { position: relative; width: 44px; height: 24px; box-sizing: border-box; flex: 0 0 auto; border-radius: 999px; background: color-mix(in srgb, var(--muted) 75%, transparent); border: 1px solid transparent; transition: background-color var(--dur-1) var(--ease-out); }
#panel .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur-press) var(--spring); }
#panel .sw.on { background: var(--accent); border-color: var(--accent-strong); }
#panel .sw.on::after { transform: translateX(20px); }
/* сегмент (тема) */
#panel .seg { margin: 4px 8px 10px; }
#panel .state { margin: 0 8px 10px; font-size: 12.5px; color: var(--tab-on); font-weight: 600; }
#panel .group { padding: 6px 8px 2px; font-size: 14.5px; font-weight: 600; }
#panel .group span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; }
/* «Нижнее меню»: галочка */
#panel .pick { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--h-m); padding: 4px 8px 4px 10px; margin: 0 0 4px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
#panel .pick.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--field)); }
#panel .pick .t { flex: 1; font-weight: 600; font-size: 15px; }
#panel .pick .ck { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: transparent; background: var(--panel-solid); }
#panel .pick.on .ck { color: var(--grn); border-color: color-mix(in srgb, var(--grn) 50%, transparent); }
#panel .pick .ck .ico { width: 14px; height: 14px; stroke-width: 2.4; color: inherit; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
#panel .pick.dis:not(.on) { opacity: .5; cursor: not-allowed; }
#panel .pick input { position: absolute; opacity: 0; width: 0; height: 0; }
#panel .pick:focus-within { outline: 2px solid var(--tab-on); outline-offset: 2px; }
#panel .pick::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
#panel #picks { padding-top: 4px; }
#panel button:focus-visible, #panel input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Страница за открытой панелью не прокручивается колесом; на телефоне касания по затемнению
   гасит app.js (touchmove на #veil). */
body.locked { overflow: hidden; }
/* Шапке и ряду действий под замком свой top не нужен: body стоит fixed со сдвигом вверх, прокрутки у окна нет,
   и sticky с обычными top: 0 и 66px сам держит их у верха экрана. С top от --lock-y они съезжали вниз на
   величину прокрутки и были видны под затемнением посреди экрана. */
body.locked { position: fixed; left: 0; right: 0; }
@media (prefers-reduced-motion: reduce) {
  #panel, #veil, #panel .fold > .fold-body, #panel .fold .chev, #bot, #bveil, #bot .mem > .fold-body, #panel::after, #bot::after { transition: none !important; }
}
/* Пять вкладок на 375 px: каждой достаётся 65 px, а «Напоминания» просит 77. Подписи
   уходят, остаются картинки, как на узком экране. Четыре вкладки помещаются (82 px). */
.tabs[data-n='5'] button { font-size: 0; gap: 0; min-height: 44px; }
.tabs[data-n='5'] #task-badge { font-size: 10.5px; right: calc(50% - 18px); }

/* ---------- помощник «Лале»: чат, выезжает справа (макет 36 v5, перенесено 25.09) ----------
   Зеркало панели ☰: те же слои (19/20), тот же выезд translateX, та же дисциплина inert/locked.
   Классы макета .msg/.bub/.who/.av/.chips переименованы в .b-*: их имена в app.css уже заняты
   пузырями переписки, шапкой карточки и фильтрами, и они бы протекли внутрь. */
#bot {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 20;
  width: min(92vw, 420px); background: var(--bg2); color: var(--ink);
  border-left: 1px solid var(--edge); border-radius: 22px 0 0 22px;
  transform: translateX(calc(100% + 2px)); transition: transform var(--dur-3) var(--ease-out);   /* как #panel: на 2 px за край */
  display: flex; flex-direction: column;
  padding-top: max(env(safe-area-inset-top, 0px), var(--tg-top, 0px));
  touch-action: pan-y pinch-zoom;
}
#bot.open { transform: none; }   /* как #panel.open: в покое без transform - иначе iOS не дорисовывает ленту */
#bot.drag, #bveil.drag { transition: none; }
/* Тень только у открытой Лале, как у #panel::after. */
#bot::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: var(--shadow); opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
#bot.open::after { opacity: 1; }
#bot::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(520px 380px at 100% 0%, color-mix(in srgb, var(--aur2) 16%, transparent), transparent 70%),
    radial-gradient(420px 360px at 0% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
#bveil { position: fixed; inset: 0; z-index: 19; background: var(--veil); opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
#bveil.show { opacity: 1; }
/* Кнопки внутри панели: своё базовое правило (.icobtn задан только внутри .bar/.who) и НАСТОЯЩИЕ 44 px,
   как у крестика панели ☰ (#panel .p-head .x): места здесь не жалко. */
#bot .icobtn {
  position: relative; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--line); background: var(--field);
  color: var(--muted); border-radius: 999px; cursor: pointer; display: grid; place-items: center; padding: 0; font: inherit; font-size: 20px;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--spring);
}
#bot .icobtn:hover { background: var(--strong); color: var(--ink); }
#bot .icobtn:active { transform: scale(.93); }
/* Накладка на время нажатия 50 (inset -4 от рамки 1): 50 × .93 = 46.5, в перелёте .923 - 46.2, больше круга 44 с запасом 1 px.
   Было 46 (inset -2): 42.5 при сжатии, и при дробной координате шапки (en, tr) точка в 1 px от нижнего края уходила в .b-head
   (T-fix-press-edge-2, F1). */
#bot .icobtn:not(.mic):active::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
#bot .icobtn.send { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); color: #1a1409; border-color: transparent; }
#bot .icobtn.send:disabled { opacity: .45; cursor: default; transform: none; }
/* Микрофон (голос, 26.09). Выключен, пока Лале отвечает или расшифровывается прошлое голосовое.
   Фон и цвет повторяем явно: иначе общий #bot .icobtn:hover подсвечивает выключенный мик в браузере,
   будто он нажимается. Сужать сам :hover до :not(:disabled) нельзя - тот станет специфичнее .send
   и перебьёт его золотой фон. */
#bot .icobtn.mic:disabled { opacity: .45; cursor: default; transform: none; background: var(--field); color: var(--muted); }
/* Идёт запись: красная кнопка и кольцо-пульс - микрофон слушает, и это видно боковым зрением.
   Кольцо - ::after, а не box-shadow кнопки: scale пульса не трогает саму кнопку и её 44 px. */
#bot .icobtn.mic.rec { background: var(--red); color: #fff; border-color: transparent; }
#bot .icobtn.mic.rec::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--red);
  pointer-events: none; animation: lale-rec 1.4s var(--ease-out) infinite;
}
@keyframes lale-rec { from { transform: scale(1); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }
/* Общее правило reduced-motion (* { animation: none }) псевдоэлементы не задевает: глушим явно.
   Кольцо остаётся неподвижным - признак записи не должен пропадать вместе с движением. */
@media (prefers-reduced-motion: reduce) { #bot .icobtn.mic.rec::after { animation: none; opacity: .5; } }
#bot button:focus-visible, #bot textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#bot .b-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 10px 16px; border-bottom: 1px solid var(--line); }
#bot .b-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: var(--field); box-shadow: inset 0 1px 0 var(--hl); }
#bot .b-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
#bot .b-who { flex: 1; min-width: 0; }
#bot .b-head b { display: block; font-size: 17px; }
#bot .b-head .st { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not([lang="ru"]) #bot .b-head .st { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
#bot .b-log {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px 6px; display: flex; flex-direction: column; gap: 10px;
  /* scroll-padding = верхний отступ: длинный ответ botFollow() ставит к началу, и без запаса пузырь
     прилипал бы к линии шапки со срезанным скруглением. */
  scroll-padding-top: 14px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom;
}
#bot .b-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; animation: lale-in var(--dur-3) var(--ease-out) both; }
#bot .b-msg.me { align-self: flex-end; flex-direction: row-reverse; }
#bot .b-msg .b-av { width: 28px; height: 28px; box-shadow: none; }
/* Пузырь БЕЗ var(--shadow): он стоит внутри режущего скроллера .b-log, где тень панели рвалась бы
   о края - тот же довод, что у .btn (см. комментарий там). Остаётся внутренняя подсветка. */
#bot .b-bub {
  padding: 10px 13px; border-radius: 18px; background-color: var(--panel); border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--hl); font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0;
}
#bot .b-msg.bot .b-bub { border-bottom-left-radius: 6px; }
#bot .b-msg.me .b-bub { border-bottom-right-radius: 6px; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); color: #1a1409; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
#bot .b-bub.err { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
/* Что именно сделала модель: инструменты из белого списка (assistant.js), а не «подумала». */
#bot .tools { display: block; margin-top: 6px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
#bot .tools code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; }
@keyframes lale-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
#bot .typing { display: inline-flex; gap: 4px; padding: 3px 2px; }
/* Подпись только для читалки («Лале печатает…»): точки глазу, слова уху. */
#bot .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#bot .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: lale-blink 1.2s infinite ease-in-out; }
#bot .typing i:nth-child(2) { animation-delay: .15s; }
#bot .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes lale-blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* Карточка внутри ответа: клиент, «кто из них?», цена движка, команда. Данные из refs, не из текста. */
#bot .ccard { margin-top: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--field); padding: 10px 12px; display: grid; gap: 6px; font-size: 14px; animation: lale-in var(--dur-3) var(--ease-out) both; }
#bot .ccard .h { display: flex; align-items: center; gap: 10px; }
#bot .ccard .h > div { min-width: 0; }
#bot .ccard .h .ava { width: 32px; height: 32px; border-radius: 50%; background: var(--panel-solid); display: grid; place-items: center; font-weight: 700; font-size: 12px; color: var(--muted); border: 1px solid var(--line); flex: none; }
#bot .ccard .h b { font-size: 15px; display: block; }
#bot .ccard .h span { display: block; font-size: 12px; color: var(--muted); }
#bot .ccard .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; }
#bot .ccard .kv span:first-child { color: var(--muted); flex: none; }
#bot .ccard .kv span:last-child { text-align: right; min-width: 0; }
#bot .ccard .sum { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
#bot .ccard .note { font-size: 12px; color: var(--faint); }
#bot .ccard .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
#bot .lale-memory-card .lale-actions, #bot .lale-memory-card > div > .btn { margin-top: 12px; }
#bot .b-setup-banner { position: relative; min-height: var(--h-m); }
#bot .b-setup-banner::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
#bot .ccard .row2 { display: grid; grid-template-columns: 76px 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
#bot .ccard .row2 > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .meter, а не .bar как в макете: .bar в app.css - это шапка приложения. */
#bot .ccard .meter { height: 8px; border-radius: 999px; background: var(--panel-solid); border: 1px solid var(--line); overflow: hidden; }
#bot .ccard .meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius: 999px; transform-origin: left; animation: lale-grow .6s var(--ease-out) both; }
@keyframes lale-grow { from { transform: scaleX(0); } }
/* Чипсы: горизонтальная полоса (не wrap, как у фильтров): подсказок пять, и они не фильтры. */
/* padding сверху и снизу 8: чип ~29 px, его накладка 44 (.chip::before) выступает на ~7,5 px, а
   overflow-x: auto режет и по вертикали - при 6 px верх накладки срезался, цель выходила ~42,5 px. */
#bot .b-chips { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; }
#bot .b-chips::-webkit-scrollbar { display: none; }
/* backwards, не both: начальный кадр держит чип скрытым на время задержки лесенки, а конечный НЕ
   остаётся висеть после выезда - иначе transform: none из анимации перебивал бы .chip:active
   scale(.96), и нажатие на подсказку не давало бы никакого отклика. */
#bot .b-chips .chip { flex: none; animation: lale-in var(--dur-3) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
/* Во время записи чипсы выключены (вопрос ушёл бы раньше голосового): гасим, как поле, а не прячем. */
#bot .b-chips .chip:disabled { opacity: .45; cursor: default; transform: none; }
#bot .b-form { display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px calc(10px + max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px))); border-top: 1px solid var(--line); }
/* Открыта клавиатура (класс ставит botViewport): панель уже кончается у её кромки, а iOS не
   обнуляет safe-area-inset-bottom - без этого правила поле висело бы над клавиатурой на 34 px. */
#bot.kb .b-form { padding-bottom: 10px; }
/* min-height 44: общее правило textarea (74 px, под заметки) делало пустое поле вопроса в две лишние
   строки. Здесь поле начинается с одной строки, вровень с кнопками рядом, и растёт по тексту до 120. */
/* margin: 0 - общее правило полей даёт margin-bottom 12, а строка выровнена по низу (flex-end):
   кнопка «Отправить» садилась на 12 px ниже поля (Макс 26.09, скриншот). */
#bot textarea {
  flex: 1; min-width: 0; min-height: 44px; margin: 0; resize: none; max-height: 120px; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 18px; background: var(--field); font: inherit; font-size: 16px; color: var(--ink); line-height: 1.35;  /* 16px: iOS не зумит */
}
#bot textarea::placeholder { color: var(--faint); }
/* Подсказка записи над полем (app.html): таймер цифрами одной ширины, чтобы строка не дрожала. */
#bot .rec-hint { font-size: 12px; color: var(--red); padding: 0 14px 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Поле на время записи выключено (botSyncSend): набранное поверх записи ушло бы раньше голосового. */
#bot textarea:disabled { opacity: .6; }
/* Голосовое, которое не расшифровалось: вопроса Лале из него не получила, и пузырь «я» уходит из золота
   в пунктирную «пустую» рамку. Не opacity: она гасила и текст - тёмный на золоте выходил ~3,4:1, ниже
   AA, а это не выключенная кнопка, а сообщение, которое надо прочитать. --muted на --field держит норму
   в обеих темах. */
#bot .b-msg.me .b-bub.fail { background: var(--field); color: var(--muted); border: 1px dashed var(--line); box-shadow: none; }
/* Память Лале: та же раскладушка, что карточки панели ☰, только внутри чата. */
#bot .mem { margin: 8px 12px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--field); overflow: hidden; flex: none; transition: margin var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
#bot .mem > .fold-body { display: grid; grid-template-rows: 1fr; min-height: 0; transition: grid-template-rows var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
/* Нижний отступ - у .mem-row, не паддингом .fold-inner: трек 0fr не бывает ниже паддинга, и
   свёрнутая память оставляла бы под шапкой полоску фона высотой 10 px. */
#bot .mem > .fold-body > .fold-inner { min-height: 0; overflow: hidden; padding: 0 10px; }
#bot .mem.folded > .fold-body { grid-template-rows: 0fr; opacity: 0; }
#bot .mem.folded { margin-top: 0; border-color: transparent; background: transparent; }
#bot .mem .group { padding: 8px 0 6px; font-size: 14.5px; font-weight: 600; }
#bot .mem .group span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; }
#bot .mem textarea { width: 100%; min-height: 84px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); font: inherit; font-size: 16px; color: var(--ink); line-height: 1.4; }  /* 16px: iOS не зумит, как у #btext */
#bot .mem-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Занавес приватности: текст пузырей (слова и имена пациентов), имя и инициал в карточках. */
[data-privacy='on'] #bot .b-bub .bt, [data-privacy='on'] #bot .ccard .nm, [data-privacy='on'] #bot .ccard .ava { filter: blur(5px); user-select: none; }

/* ---------- проверка телефона ---------- */
/* Всплывает над всем, как диалог «Ответила / Не клиент». Там те же пять правил стоят
   инлайном в app.js; здесь они в стилях, чтобы не разъехались две копии одного диалога. */
.hap-box {
  position: fixed; left: 12px; right: 12px; z-index: 20;
  bottom: calc(96px + max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px)));
  max-width: 460px; margin-inline: auto;
}
.hap-box p { color: var(--muted); font-size: 13.5px; }
/* «Проверить связь»: девять строк не влезут в низ экрана телефона - своя прокрутка. */
.health-box { max-height: calc(100vh - 150px - max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px)));
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35); }
/* Последний ряд держит запас под палец 44: прокрутка не должна обрезать накладку кнопки 40. */
.health-box .hap-row { padding-block: 3px; }
.health-box .hap-try { scroll-margin-block: 3px; }
/* Плотный фон: девять строк поверх «Моего дня» сквозь стекло не читаются. Два класса -
   иначе .card ниже по файлу возвращает полупрозрачную --panel. */
.card.health-box { background: var(--panel-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
.health-box .health-head { margin: 2px 0 4px; }
.health-list { display: grid; gap: 8px; margin: 6px 0 10px; }
.health-head { font-weight: 700; color: var(--ink) !important; font-size: 14.5px !important; }
.health-row { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border-radius: 12px;
  background: var(--field); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; }
.health-row.warn { border-color: color-mix(in srgb, #d9a400 55%, var(--line)); }
.health-row.fail { border-color: color-mix(in srgb, #d8453b 60%, var(--line)); }
.health-ico { flex: 0 0 auto; line-height: 1.3; }
.health-t b { display: block; font-size: 13px; }
.health-t div { color: var(--muted); }
/* «Загрузить базу из другой CRM»: колонка файла → поле CRM. На 375 px - название и примеры
   сверху, выпадающий список на всю ширину под ними. */
.imp-body { display: grid; gap: 10px; margin-bottom: 10px; }
.imp-body p { margin: 0; }
.imp-cols { display: grid; gap: 8px; }
.imp-col { display: grid; gap: 6px; padding: 9px 10px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); }
.imp-col-t { display: grid; gap: 2px; min-width: 0; word-break: break-word; }
.imp-col-t b { font-size: 13.5px; }
.imp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.imp-sum { display: grid; gap: 4px; }
.imp-sum-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--field); }
.imp-skip summary { cursor: pointer; min-height: 44px; box-sizing: border-box; padding: 12px 0; line-height: 20px; list-style: none; display: flex; align-items: center; gap: 8px; }
.imp-skip summary::-webkit-details-marker { display: none; }
.imp-people { display: flex; flex-wrap: wrap; gap: 6px; max-height: 240px; overflow-y: auto; }
.imp-err { color: var(--red); }
.imp-runs { display: grid; gap: 6px; }
.imp-runs .imp-sum-row { align-items: center; }
.imp-done { font-weight: 600; }
/* T-motion-2 п. 4: окна подключений (Instagram, приём WhatsApp, свой Telegram) на общем листе PLAN_UI.modal standard: строки
   состояния через 8, текст 13.5 приглушённый; главное действие шире и в одну строку, «Закрыть» не уже 112 (как листы номера П33). */
.conn-box .health-list { margin: 0; }
.conn-box .health-list > p, .conn-box .health-list > .note-hint { margin: 0; color: var(--muted); font-size: 13.5px; }
.conn-box .pl-acts .btn.go { flex: 1 1 auto; white-space: nowrap; }
.conn-box .pl-acts .sheet-cancel { flex: 0 0 auto; min-width: 112px; }
/* Действия нет (не ответило, подключает владелец): «Закрыть» одно во всю ширину, как внизу любого листа. */
.conn-box .pl-acts .sheet-cancel:only-child { flex: 1 1 auto; }
.hap-row { display: flex; gap: 6px; margin-bottom: 10px; }
.hap-row:last-of-type { margin-bottom: 0; }
/* Свой класс, а не .btn: общий перехватчик вибрации добавил бы этим кнопкам ещё и light
   поверх того вида, который они проверяют, и различить виды стало бы нельзя. */
.hap-try {
  position: relative; flex: 1 1 auto; min-height: var(--h-m); box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r-m); background-color: var(--field);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ink); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--spring);
}
.hap-try:hover { background-color: var(--strong); }
.hap-try:active { transform: scale(.96); }
/* Палец 44 полосой по центру, при нажатии шире (как у .btn): своё правило, потому что .hap-try не .btn (вибрация). */
.hap-try::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.hap-try:active::after { height: 46px; left: -3%; right: -3%; }
.hap-close { width: 100%; margin-top: 10px; color: var(--muted); }

/* ---------- рассылка ---------- */
.btn.bc-newtpl { min-height: var(--h-s); padding: 0 11px; border-radius: var(--r-s); font-size: 13.5px; margin: 0 0 12px; }
.bc-template-sheet { position: fixed; z-index: 20; left: max(12px, calc((100vw - 540px) / 2));
  right: max(12px, calc((100vw - 540px) / 2)); bottom: 12px; max-height: calc(100dvh - 24px); margin: 0;
  overflow-y: auto; display: grid; gap: 8px; }
.bc-template-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bc-template-sheet > .sc-shd { margin-bottom: 2px; }
.bc-template-field { display: grid; }
.bc-template-field .f { margin: 0; }
.bc-template-body { min-height: 110px; resize: vertical; }
.bc-template-sheet .bc-template-stop { margin: 0; color: var(--muted); font-size: 13px; }
.bc-template-secondary { justify-self: start; }
.bc-template-sheet .bc-preview { margin: 0; }
.bc-template-problems { margin: 0; padding-left: 18px; color: var(--red); font-size: 13px; }
.bc-template-problems:empty { display: none; }
.bc-template-actions .btn { flex: 1 1 auto; }
.bc-template-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
body.bc-template-open #bveil { z-index: 21; }
body.bc-template-open #bot { z-index: 22; }
/* Счётчик - главное на экране: сколько человек и сколько это стоит, крупно, пересчитывается
   при каждом изменении отбора. Одна плитка на всю ширину, а не три: здесь одно число,
   которое она подтверждает пальцем, и делить внимание не с чем. */
/* 🔴 Без box-shadow панели: плитка стоит ВНУТРИ .card с overflow: hidden, и тень резалась
   бы о края - тот же дефект, что снят с кнопок 02.09. Рамка и inset-блик достаточно. */
.bc-counter {
  display: block; width: 100%; margin: 4px 0 12px; padding: 16px 14px 14px;
  border: 1px solid var(--line); border-radius: 18px; background-color: var(--field);
  box-shadow: inset 0 1px 0 var(--hl); text-align: center; cursor: default;
}
/* ---------- шкала рассылки ---------- */
/* Прямая полоса из засечек: число людей, сумма, доля от тех, кому вообще можно писать.
   Плотность взята у Bklit, но выпрямлена в линию (Макс, 03.09: «это должна быть просто
   прямая линия»).

   🔴 У ПОГАСШЕЙ ЗАСЕЧКИ СВОЙ ЦВЕТ, И ЭТО НЕ ПРИДИРКА. В кольце она красилась в var(--field),
   то есть ровно в цвет плитки .bc-counter, на которой лежит: дорожки на экране не было
   вовсе, и горящие чёрточки висели в пустоте. Макс описал это словом «точки». Мешаем с
   цветом текста, а не с фоном - то же правило, что у кольца долей, и по той же причине. */
.bc-gauge { display: block; }
.bc-gauge .bg-head {
  display: flex; align-items: baseline; justify-content: center; gap: 7px;
}
/* Табличные цифры обязательны: число перещёлкивается на каждом пересчёте, и без них оно
   прыгало бы по ширине все 420 мс. */
.bc-gauge .bg-n {
  font-size: 32px; line-height: 1.05; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.6px;
}
.bc-gauge .bg-w {
  font-size: 10px; font-weight: 700; color: var(--faint);
  letter-spacing: .08em; text-transform: uppercase;
}
.bc-gauge .bg-e {
  display: block; margin-top: 2px; font-size: 19px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
[data-theme='light'] .bc-gauge .bg-n { color: var(--accent-strong); }

.bc-gauge .bg-bar { display: flex; gap: 3px; margin: 12px 0 8px; height: 18px; }
.bc-gauge .bg-seg {
  flex: 1 1 0; min-width: 0; border-radius: 2px;
  background-color: color-mix(in srgb, var(--muted) 26%, transparent);
  /* Зажигаются по очереди слева направо: без задержки полоса не едет, а моргает целиком. */
  transition: background-color var(--dur-1) var(--ease-out) calc(var(--i) * 8ms), transform var(--dur-1) var(--ease-out);
}
.bc-gauge .bg-seg.on { background-color: var(--accent); }
[data-theme='light'] .bc-gauge .bg-seg.on { background-color: var(--accent-strong); }
/* На светлой теме дорожка светлее. Фирменное золото там тёмное, и при плотности 26%
   горящая засечка отличалась бы от погасшей всего в 2.33 раза, то есть заполнение перестало
   бы читаться. Замер 03.09:

     тёмная, 26%:  дорожка к плитке 1.58, горящая к погасшей 3.88
     светлая, 26%: дорожка к плитке 1.45, горящая к погасшей 2.50
     светлая, 20%: дорожка к плитке 1.21, горящая к погасшей 3.01

   Видимость дорожки и различимость заполнения тянут в разные стороны, и выбрано второе:
   именно оно несёт число. Метод замера - композит через холст, цвета здесь полупрозрачные,
   и мерить их поверх чёрного нельзя. */
[data-theme='light'] .bc-gauge .bg-seg {
  background-color: color-mix(in srgb, var(--muted) 20%, transparent);
}
/* Убывание гасим справа налево. Иначе засечки уходят в ту же сторону, в какую зажигались,
   и движение перестаёт называть направление. --n держится в паре с BG.n в app.js. */
.bc-gauge .bg-bar.falling .bg-seg {
  transition-delay: calc((32 - var(--i)) * 8ms);
}
.bc-gauge .bg-share { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Ожидание: числа НЕ стираются, по полосе идёт волна. Подмена на «…» и обратно читалась
   как мигание, а не как «считаю». */
.bc-gauge.busy .bg-head, .bc-gauge.busy .bg-e, .bc-gauge.busy .bg-share { opacity: .45; transition: opacity var(--dur-1) var(--ease-out); }
.bc-gauge.busy .bg-seg { animation: bg-wait 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * 26ms); }
@keyframes bg-wait { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.bc-counter .bc-sub { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.bc-counter.busy .bc-sub { opacity: .45; }
/* Поля отбора: подпись НАД полем, поле на всю ширину. Никаких фиксированных ширин подписей
   и ничего, что могло бы сжаться ниже своего текста: в WebView Telegram системный шрифт
   шире хромовского, и кнопки с flex 1 1 выпускали подписи наружу (Макс, 03.09). */
.bc-field { display: block; margin-bottom: 12px; }
.bc-field > .lab {
  font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  font-weight: 700; margin-bottom: 4px;
}
.bc-field select { display: block; width: 100%; margin: 0; }
/* 🔴 flex-shrink 0 + nowrap: кнопка никогда не уже своей подписи; не влезла в ряд -
   переносится следующей строкой целиком, а не наезжает на соседа. */
/* T-fix-seg-hit: ряды через 16, как у общей .seg (кнопки 28 с накладкой 44 выходят на 8 вверх и вниз); при 8 накладка
   второго ряда («любой срок», «свой срок») ловила нажатие у нижнего края первого. Между кнопками ряда по-прежнему 8. */
.bc-seg { gap: 16px 8px; }
.bc-seg .seg-btn { flex: 1 0 auto; min-width: 0; white-space: nowrap; }
.bc-range { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.bc-range input.f {
  width: 76px; min-height: 44px; margin: -2px 0; padding: 9px 10px;
  border: 2px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line);
}
.bc-range input.f:focus { border-color: transparent; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.bc-chips { padding: 8px 0 0; }
.bc-field.send-channel-choice { margin-top: 0; }
.bc-field .send-channel-row { padding-top: 0; }
.bc-tpl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
/* П63 (crm/public/broadcast-who.js): «Кому», «Молчат», «Страна» и лист «Свой список». Поля и листы из готовых деталей
   (bc-field, seg, pl-pick, PLAN_UI.modal), здесь только то, чего у них нет: подсказка под «Кому», поле вставки, итог разбора. */
.bcw-who .bcw-note { margin-top: 6px; }
.bcw-up { display: grid; gap: 8px; }
.bcw-up > .sc-shd { margin-bottom: 2px; }
.bcw-up .bcw-paste { min-height: 104px; resize: vertical; }
.bcw-up .bcw-hint { margin: 0; }
.bcw-up .bcw-file { justify-self: start; }
.bcw-res { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.bcw-res:empty { display: none; }
.bcw-res p { margin: 0; }
.bcw-rows { margin: 0; padding-left: 18px; color: var(--ink); }
.bcw-up .pl-acts { padding-top: 4px; }
[data-privacy='on'] .bcw-rows li, [data-privacy='on'] .bcw-paste { filter: blur(5px); user-select: none; }
/* Предпросмотр - как пузырь в WhatsApp у получателя: зелёно-серый фон чата, наш пузырь,
   под ним кнопки шаблона. Видно то, что увидит человек, а не JSON. */
.bc-preview {
  margin: 4px 0 14px; padding: 14px 12px 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--grn) 9%, var(--field));
  border: 1px solid var(--line);
}
.bc-preview .bub {
  max-width: 92%; margin-left: auto; background: color-mix(in srgb, var(--grn) 20%, var(--panel-solid));
  border: 1px solid color-mix(in srgb, var(--grn) 25%, transparent); color: var(--ink);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.bc-preview .bc-btn {
  display: block; margin: 6px 0 0 auto; max-width: 92%; padding: 9px 12px; text-align: center;
  border-radius: 10px; background: var(--panel-solid); border: 1px solid var(--line);
  color: var(--blue); font-weight: 600; font-size: 14px;
}
.bc-preview .bc-who { margin-top: 8px; font-size: 12px; color: var(--faint); text-align: right; }
.bc-send { width: 100%; }
.bc-send:disabled { opacity: .45; cursor: not-allowed; }
/* Ход: полоса и числа словами. Полоса тонкая, потому что состояние - в цифрах под ней. */
.bc-bar { height: 8px; border-radius: 999px; background: var(--field); overflow: hidden; margin: 10px 0 8px; }
/* Ширина, а не scaleX: scaleX сплющивал скругление правого конца. Полоска одна и двигается раз
   в несколько секунд - пересчёт раскладки здесь копеечный. */
.bc-bar .bc-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width var(--dur-3) var(--ease-out); }
.bc-bar .bc-fill.done { background: var(--grn); }
.bc-bar .bc-fill.stopped { background: var(--yel); }
.bc-nums { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.bc-nums b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bc-reason { margin-top: 8px; padding: 9px 11px; border-radius: 10px; font-size: 13.5px;
  background: color-mix(in srgb, var(--yel) 14%, transparent); color: var(--ink); }
/* Прошлые рассылки - строки, тап раскрывает получателей. */
.bc-camp { padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 8px;
  background-color: var(--panel); cursor: pointer; }
.bc-camp > .btn { margin-top: 12px; }
.bc-camp:hover { background-color: var(--strong); }
.bc-camp .bc-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.bc-camp .bc-head .pill { margin-left: auto; }
.bc-camp .bc-meta { margin-top: 4px; font-size: 13px; color: var(--muted); }
.bc-camp .bc-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bc-camp .bc-rows { margin-top: 10px; cursor: default; }
.bc-empty { color: var(--muted); font-size: 14px; padding: 6px 2px 2px; }

/* ================================================================ ПРЕДЛОЖЕНИЕ КЛИЕНТУ (quote.js)
   Форма по-русски, документ по-английски. Поля переиспользуют input.f / select / textarea,
   кнопки - .btn и .mini-btn, чтобы экран выглядел частью приложения, а не отдельной формой. */
.q-field { display: block; margin: 0 0 10px; }
.q-field > .q-lbl, .q-lbl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.q-field input.f, .q-field select, .q-field textarea { width: 100%; box-sizing: border-box; }
.q-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.q-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
/* Пакет 100 разд. D п. 6 (F-i18n-02): цена врача не вписана, поля € заперты - «Цена клиенту» и «В AUD» друг под другом во всю
   ширину, подсказка в поле видна целиком на всех языках; высота полей П25 та же. */
.q-grid:has(> .q-field > input[data-fk="q-price"]:disabled) { grid-template-columns: minmax(0, 1fr); }
.q-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* T-audit-i18n-code F-i18n-02: подпись выбора в половине строки («Массаж») и строки его листа переносятся, а не уходят под многоточие
   (en и tr длиннее). */
.q-grid .pl-pick .pl-pick-t, .q-pick-sheet .pl-pick-row .pl-pick-t { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.q-row { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.q-row input.f { flex: 1; min-width: 0; }
.q-row .btn { flex: 0 0 auto; }
.q-check { display: flex; align-items: center; gap: 10px; margin: 8px 0; cursor: pointer; }
.q-check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: 0 0 auto; }
.q-procs { margin: 6px 0 12px; }
.q-proc { display: block; padding: 2px 0 4px; border-bottom: 1px solid var(--line); }
.q-proc .nm { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.q-proc .mini-btn { margin-left: 0; }
.mini-btn.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.q-empty { color: var(--muted); font-size: 13px; padding: 6px 0; }
.q-hints { margin: 0 0 10px; }
.q-engine { font-size: 13px; color: var(--muted); margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Внутренний расчёт движка (для её глаз, свёрнут): строка = статья слева, сумма справа. */
.q-internal div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.q-internal div b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.q-internal .q-hint { margin-top: 8px; }
.q-field .seg { margin: 2px 0 4px; }
.q-opt { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 0 0 10px; background: var(--field); }
.q-errors { border-left: 3px solid var(--red); padding: 8px 12px; margin: 0 0 10px; background: var(--field); border-radius: 0 10px 10px 0; }
.q-errors div { margin: 4px 0; }
.q-warn { border-left: 3px solid var(--accent); padding: 8px 12px; margin: 0 0 10px; color: var(--muted); background: var(--field); border-radius: 0 10px 10px 0; }
.q-preview { background: #6f6f6f; border-radius: 12px; overflow: hidden; margin: 0 0 10px; padding: 8px; }
.q-preview svg, .q-preview img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.q-status { font-size: 13px; color: var(--muted); margin: 0 0 10px; min-height: 1em; }
.q-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.q-done { border-top: 1px solid var(--line); padding-top: 12px; }
.q-done > b { display: block; margin: 0 0 10px; }
.q-ver { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.q-ver-t { flex: 1 1 200px; min-width: 0; }
.q-ver-s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.q-ver .q-actions { margin: 0; }
.q-hist + .q-actions { margin: 12px 0 0; }

/* ---- операции в предложении: поиск, разбор сообщения ---- */
.q-search { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; }
.q-search input.f { flex: 1; min-width: 0; }
.q-search select { flex: 0 0 auto; max-width: 42%; }
.q-found { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; min-height: 4px; }
.q-found .chip small { opacity: .7; font-weight: 400; margin-left: 4px; }
.q-qty { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.q-qty input.f { width: 72px; flex: 0 0 auto; }
.q-proc .tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.q-proc .tag.warn { color: var(--red-ink); border-color: var(--red); }
.q-parse { margin: 6px 0 10px; }
.q-parse-row { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.q-parse-row .st { flex: 0 0 18px; text-align: center; font-weight: 700; }
.q-parse-row .st.ok { color: var(--accent); }
.q-parse-row .st.warn { color: var(--red); }
.q-parse-row .tx { flex: 1; min-width: 0; }
.q-parse-row .in { font-size: 12px; color: var(--muted); display: block; }
.q-parse-row .chips { width: 100%; }

/* ================================================================ КАЛЬКУЛЯТОР (calc.js, deliverable 47)
   Макет deliverables/47-calculator-mock.html. Чипы, сегменты, кнопки, поля и строки сумм - общие
   классы приложения (.chip, .seg-btn, .btn, .mini-btn, input.f, .ads-row, .ads-sum, .pill); здесь
   только то, чего у них нет. Теней панели нет нарочно: всё это внутри .card. */
.calc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.calc-cnt { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); font-size: 12.5px; }
/* П27 (Макс 06.10, ужатый формат П25): поиск на всю ширину 40, категории одной полосой 34 (общий .sc-seg.sm, листается
   вбок внутри карточки, за край не выходит), строки списка 40 сплошной полосой: «+» добавляет, «✓ в списке» убирает. */
.calc-pick .f.calc-q { width: 100%; box-sizing: border-box; min-height: 40px; margin: 0 0 8px; padding: 7px 13px; font-size: 16px; }
.calc-catwrap { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 0 8px; padding: 5px 0; }
.calc-catwrap::-webkit-scrollbar { display: none; }
.sc-seg.sm.calc-cats { display: inline-flex; flex-wrap: nowrap; min-width: 100%; box-sizing: border-box; }
.sc-seg.sm.calc-cats button { flex: 1 0 auto; white-space: nowrap; }
.calc-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 8px; padding: 2px 0; max-height: 360px; overflow-y: auto; }
.calc-item {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 40px;
  padding: 4px 2px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit;
  font-size: 15px; text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out);
}
/* Строки 40 через 4, нажатие 44 рамкой -2 px (П25): рамки соседей сходятся, а не наезжают. */
.calc-item::after, .calc-clrow::after { content: ''; position: absolute; inset: -2px 0; }
.calc-item:active { background-color: var(--strong); }
.calc-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.calc-item > span { flex: 1; min-width: 0; }
.calc-item .si { flex: 0 0 auto; width: 18px; height: 18px; }
.calc-item .calc-in { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.calc-picked { display: grid; gap: 6px; margin: 0 0 4px; }
/* Длинное название («Dental implants, Bredent (German)») на 375 px не сжимается в столбик рядом
   с количеством: строка переносится, количество и крестик уходят вниз вправо. */
.calc-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 40px; box-sizing: border-box; padding: 3px 4px 3px 10px; border-radius: 12px;
  background: var(--field); border: 1px solid var(--line); font-size: 14.5px;
}
.calc-nm { flex: 1 1 150px; min-width: 0; font-weight: 600; }
/* Решение Макса 21.10: процедура, которой нет у выбранного врача, - строкой под названием, красным текстом. */
.calc-off { flex: 1 0 100%; margin-top: -4px; padding-bottom: 2px; font-size: 12px; color: var(--red-ink); }
.calc-row .mini-btn { margin-left: 0; }
/* Марка имплантов у Baki (Slimed / Motiva / Mentor) - полоса .seg во всю ширину строки, рядом S 34 через 10 (накладки 44 не
   сходятся); марка нужна, а её нет - рамка акцентом (одна рамка без подписи: подпись ошибки в карточке «Клиенту»). */
.calc-brand { flex: 1 1 100%; margin: 4px 0 2px; }
.calc-brand.need, .q-brand.need { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.calc-qty { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
/* 16 px: мельче iPhone увеличивает страницу при вводе. */
.calc-num {
  width: 3em; padding: 6px 4px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-solid); color: var(--ink); font: inherit; font-size: 16px; text-align: center;
}
.calc-num:focus { outline: 2px solid transparent; border-color: var(--accent); }
.calc-paste { margin-top: 10px; }
.calc-paste-t { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink); }
.calc-paste-t .si { width: 18px; height: 18px; }
/* T-p15c п. 7: от заголовка до окошка 8, окошко 128, до «Разобрать» 8. */
details.fold.calc-paste > .inner { padding-top: 8px; }   /* сильнее details.fold > .inner */
.calc-paste textarea.f { display: block; }
.calc-paste textarea.f { font-size: 16px; min-height: 128px; margin: 0 0 8px; }
.calc-paste .btn.calc-parse { position: relative; min-height: 34px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; }
.calc-paste .btn.calc-parse::after { content: ''; position: absolute; inset: -6px 0; height: auto; transform: none; }
/* Рамка нажатия «Разобрать» внутри раскладушки: место под ней сверху и снизу (overflow раскладушки её резал, F7). */
.calc-paste .q-actions { padding: 0; margin: 0; }
/* Строка с тумблером нажимается вся (F6). */
.calc-line.calc-tap { cursor: pointer; }
.calc-amt-err { flex-basis: 100%; font-size: 12px; color: var(--red); }
.calc-amt-err:empty { display: none; }
.calc-amt { flex-wrap: wrap; }
.calc-unsure:empty { display: none; }
.calc-parsed { margin: 6px 0; font-size: 14px; color: var(--ink); }
/* «− + ✕» (П25): видимая плашка 34 в нажатии 44, знаки рисованные по центру; сжимается плашка, не накладка. */
.calc-pm, .calc-x { position: relative; isolation: isolate; display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; margin: -5px; padding: 0; border: 0;
  border-radius: 12px; background: none; color: var(--ink); cursor: pointer; }
.calc-pm::before, .calc-x::before { content: ''; position: absolute; inset: 5px; z-index: -1; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-solid);
  transition: transform var(--dur-press) var(--spring); }
.calc-pm:active::before, .calc-x:active::before { transform: scale(.92); }
.calc-pm:focus-visible, .calc-x:focus-visible { outline: none; }
.calc-pm:focus-visible::before, .calc-x:focus-visible::before { box-shadow: 0 0 0 2px var(--accent); }
.calc-sgn { display: block; width: 14px; height: 14px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.calc-sgn.minus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 8h10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 8h10'/%3E%3C/svg%3E"); }
.calc-sgn.plus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E"); }
.calc-sgn.x { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E"); }
.calc-stc { display: inline-flex; align-items: center; gap: 4px; }
.calc-zn { min-width: 36px; text-align: center; font-size: 17px; font-variant-numeric: tabular-nums; }
/* «Клиент», «Условия» (П27): строки 40 с подписью слева и кнопкой 34 или переключателем 44 × 24 справа. */
.calc-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; min-height: 44px; padding: 4px 0; border-top: 1px solid var(--line); }
.calc-h + .calc-line { border-top: 0; }
.calc-lt { display: grid; min-width: 0; gap: 1px; }
.calc-lt b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.calc-lt small { font-size: 12px; line-height: 1.3; color: var(--muted); }
.btn.calc-pickcl, .calc-lale .btn { position: relative; min-height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; white-space: nowrap; }
/* Нажатие 44 с запасом на дробные пиксели строки (стенд: на 375 выходило 43). */
.btn.calc-pickcl::after, .calc-lale .btn::after { content: ''; position: absolute; inset: -6px 0; height: auto; transform: none; }
.btn.calc-pickcl:not(.go), .calc-lale .btn:not(.go) { border-color: var(--line); background-color: var(--field); }
.calc-lale { display: grid; gap: 8px; margin: 6px 0 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
.card .calc-lale p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); white-space: normal; }
.calc-lale-acts { display: flex; gap: 6px; }
.calc-cap { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.calc-h4 { margin: 10px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.calc-sw { flex: 0 0 auto; display: grid; place-items: center; width: 52px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.calc-sw .sw { position: relative; width: 44px; height: 24px; box-sizing: border-box; border-radius: 999px; background: var(--field); border: 1px solid var(--line); transition: background-color var(--dur-1) var(--ease-out); }
.calc-sw .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel-solid); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur-press) var(--spring); }
.calc-sw .sw.on { background: var(--accent); border-color: var(--accent-strong); }
.calc-sw .sw.on::after { transform: translateX(20px); }
.calc-sw:focus-visible { outline: none; } .calc-sw:focus-visible .sw { box-shadow: 0 0 0 2px var(--accent); }
/* T-p15c круг 3 (P3): недоступный тумблер (комиссия ассистента без операции, при переделке) видом недоступного, строка не нажимается. */
.calc-sw:disabled { cursor: default; } .calc-sw:disabled .sw { opacity: .45; }
.calc-line.calc-tap:has(.calc-sw:disabled) { cursor: default; }
/* «Комиссия ассистента» в карточке «Цена» «Предложения»: строка калькулятора над кнопкой движка. */
.calc-line.q-assist { margin: 0 0 8px; }
/* Пометка под ценой: сервер пересчитал цену из движка с комиссией ассистента или без неё (T-p15c круг 4). */
.q-recalc { display: block; margin: -4px 0 8px; color: var(--tab-on); }
.q-recalc:empty { display: none; }
/* T-p15d: пометка AUD внутри поля AUD, под ним, тем же цветом, что «пересчитано…». */
.q-aud-note { display: block; margin: 4px 0 0; color: var(--tab-on); }
.q-aud-note:empty { display: none; }
/* T-p46 «Новое предложение»: строка процедуры - кнопка строки и «Убрать» соседями без вложенности (M 40, круг S 34 с пальцем
   44), цена врача справа; строка-итог; «Считается само»; поиск и категория одной высоты 40 в одну линию (UI-RULES раздел 3). */
.q-proc-line { display: flex; align-items: center; gap: 8px; }
.q-brand { margin: 10px 0 4px; }
.q-proc-btn { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: var(--h-m); padding: 6px 4px;
  border: 0; border-radius: var(--r-m); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out); }
.q-proc-btn:active { background-color: var(--field); }
.q-proc-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.q-proc-t { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.q-proc-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.q-proc-eur { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-proc-eur:empty { display: none; }
.q-proc-x { position: relative; flex: none; display: grid; place-items: center; width: var(--h-s); height: var(--h-s); padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--field); color: var(--muted); cursor: pointer; }
.q-proc-x::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.q-proc-x .sgn { width: 14px; height: 14px; }
.btn.q-proc-pick { width: 100%; margin: 4px 0 6px; }
.q-sum { display: grid; gap: 4px; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.q-sum:empty { display: none; }
.q-sum-doc { color: var(--ink); font-weight: 600; }
.q-auto { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0 0 4px; }
.q-auto-why { margin: 0 0 10px; }
.q-redo { margin: 0 0 10px; }
.q-redo-t { display: block; color: var(--red-ink); margin: 0 0 4px; }
.q-busy .q-auto, .q-busy .q-proc-eur, .q-busy .q-sum-doc { opacity: .5; transition: opacity var(--dur-1) var(--ease-out); }
.q-search input.f { margin: 0; }
.q-search .pl-pick-wrap { flex: 0 0 38%; min-width: 0; }
.q-search .btn.pl-pick { margin: 0; }
.q-cat-list { display: grid; gap: 4px; margin: 8px 0; }
.q-cat-opt .pr-nm { display: grid; gap: 1px; }
.calc-amt { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.calc-amt[hidden] { display: none; }
.calc-amt label { font-size: 12px; font-weight: 700; color: var(--muted); }
.calc-amt .f { width: 130px; min-height: 40px; margin: 0; padding: 7px 12px; font-size: 16px; }
.calc-cl-sheet > .f { width: 100%; box-sizing: border-box; min-height: 40px; margin: 0 0 8px; padding: 7px 13px; font-size: 16px; }
.calc-cls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 2px 0; max-height: 50dvh; overflow-y: auto; }
.calc-clrow { position: relative; display: grid; justify-items: start; gap: 0; width: 100%; min-height: 40px; padding: 3px 2px; line-height: 1.2; border: 0; border-top: 1px solid var(--line); background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.calc-clrow:active { background-color: var(--strong); }
.calc-clrow b { font-size: 15px; font-weight: 600; }
.calc-clrow small { font-size: 12px; color: var(--muted); }
/* Две строки (имя, номер · юзернейм) в строке 40: без чужих отступов и межстрочного у b и small. */
.calc-clrow b, .calc-clrow small { display: block; margin: 0; line-height: 1.2; }
.calc-neg, .calc-rows .ads-row.calc-neg > b { color: var(--red); }
.calc-total .ads-sum.calc-word { font-size: 22px; }
.calc-int.calc-dim .calc-rows, .calc-int.calc-dim .calc-earn { opacity: .5; }
.calc-parse-row { padding: 6px 0; font-size: 13.5px; color: var(--muted); }
.calc-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.calc-aud { font-size: 17px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.calc-rate { font-size: 12.5px; color: var(--faint); margin: 4px 0 8px; }
.calc-facts { display: flex; flex-wrap: wrap; row-gap: 6px; margin: 4px 0; }
/* П13 (Макс 05.10), П27: плитки хирурга с ценой пакета своей карточкой; цена строки внутреннего расчёта нажимается (своя цена). */
.calc-doc { display: grid; gap: 8px; }
.calc-doc[hidden] { display: none; }
.calc-doc-cap { font-size: 13px; color: var(--muted); }
.calc-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.calc-tile { display: grid; gap: 1px; justify-items: start; min-height: 64px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--field); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--spring); }
.calc-tile:active { transform: scale(.97); }
.calc-tile b { font-size: 15px; }
.calc-tprice { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-tile small { font-size: 12px; color: var(--muted); }
.calc-tile[aria-pressed='true'] { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 18%, var(--field)); box-shadow: inset 0 0 0 1px var(--accent-strong); }
.calc-tile[aria-pressed='true'] small { color: var(--ink); }
.calc-val { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 2px; border: 0;
  border-bottom: 1px dashed var(--accent-strong); background: none; color: var(--ink); font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }
.calc-val::before { content: ''; position: absolute; inset: -6px -4px; }
.calc-val .si { width: 14px; height: 14px; opacity: .7; }
.calc-own .calc-val { color: var(--tab-on); }
.mini-btn.calc-back { display: inline-flex; margin: 4px 0 0; }
.calc-own-sheet .calc-own-now { margin: 0 0 10px; font-size: 15px; }
.calc-own-sheet .calc-own-err { margin: -6px 0 8px; color: var(--red); font-size: 13px; }
.calc-own-sheet .f[aria-invalid='true'] { border-color: var(--red); }
.card p.calc-incl { font-size: 14px; color: var(--muted); margin: 6px 0 12px; white-space: normal; }
.card p.calc-incl.calc-err { color: var(--red); }
.calc-busy .calc-total, .calc-busy .calc-facts, .calc-busy .calc-incl, .calc-busy .calc-int, .calc-busy .calc-warn {
  opacity: .5; transition: opacity var(--dur-1) var(--ease-out);
}
/* «Считаю…» без чисел не приглушается: это объяснение запертых кнопок, контраст текста 4.5 (T-fix-redo-after-13-1). */
.calc-busy .calc-incl.calc-wait { opacity: 1; }
.calc-copybox { margin-top: 4px; font-size: 16px; }
/* Неактивные кнопки видно: «Сделать предложение» без карточки клиента, «Скопировать», пока нет цены. */
.calc-actions .btn:disabled { opacity: .5; cursor: default; transform: none; filter: none; }
/* П27, П25: «Скопировать для клиента» и «Сделать предложение[: Имя]» 40, текст в одну строку; не помещаются в ряд на 375 -
   каждая на всю ширину. Вторая кнопка на белой карточке видна рамкой и подложкой поля, а не текстом. */
.calc-actions { gap: 6px; margin: 12px 0 6px; }
.calc-actions .btn { position: relative; flex: 1 1 auto; min-height: 40px; padding-top: 6px; padding-bottom: 6px; border-radius: 12px; white-space: nowrap; }
.calc-actions .btn::after { content: ''; position: absolute; inset: -3px 0; height: auto; transform: none; }
/* Рамка нажатия поверх следующего блока (R-20261007-T-p27-33541312-03 F3: после общих стилей .btn::after с height 44 и
   translateY(-50%) наши inset-рамки съезжали вверх, нижний край «Сменить»,
   «Разобрать», «Скопировать», «Сделать предложение» перекрывался соседом); ряды кнопок через 8, рамки не сходятся. */
.calc-actions .btn, .btn.calc-pickcl, .calc-lale .btn, .calc-paste .btn.calc-parse { z-index: 1; }
.calc-actions { row-gap: 8px; }
.calc-actions .btn:not(.go) { border: 1px solid var(--line); background-color: var(--field); }
.calc-tag {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; text-transform: none; letter-spacing: 0;
  color: var(--tab-on); background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.calc-rows .ads-row { border-bottom: 1px solid var(--line); padding: 7px 0; }
.calc-rows .ads-row:last-child { border-bottom: 0; }
.calc-rows .ads-row > span { min-width: 0; }
.calc-rows .ads-row small { display: block; color: var(--faint); font-size: 12px; }
.calc-rows .ads-row > b { white-space: nowrap; }
.calc-rows .ads-row.sub > span { padding-left: 12px; }
.calc-rows .ads-row.off > b { color: var(--faint); font-weight: 600; }
.calc-rows .ads-row.sum { border-top: 2px solid var(--line); }
.calc-rows .ads-row.sum > span, .calc-rows .ads-row.sum > b { color: var(--ink); font-weight: 800; }
.calc-earn {
  margin-top: 10px; border-radius: 14px; padding: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.calc-earn-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.calc-earn-top span { font-weight: 700; }
.calc-earn-top b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tab-on); }
.card .calc-earn p { margin: 4px 0 0; font-size: 13px; color: var(--muted); white-space: normal; }
.calc-out { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 14px; color: var(--muted); }
.calc-out b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-locked { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); }
.calc-warns { display: grid; gap: 8px; }
.calc-w {
  display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border-radius: 12px;
  background: var(--field); border: 1px solid var(--line); font-size: 14px; line-height: 1.4;
}
.calc-w.warn { border-color: color-mix(in srgb, var(--yel) 55%, var(--line)); }
.calc-w.bug { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); background: color-mix(in srgb, var(--red) 8%, transparent); }
.calc-w i { font-style: normal; flex: 0 0 auto; }
.calc-for { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Имя клиента в строке «Для клиента» - под занавесом приватности, как имена в списках. */
[data-privacy='on'] .calc-for b { filter: blur(5px); user-select: none; }
/* П27: номер и юзернейм клиента, его имя у итога и на «Сделать предложение», строки листа «Клиент» - тоже. */
[data-privacy='on'] .calc-for small, [data-privacy='on'] .calc-for-name, [data-privacy='on'] .calc-clrow b, [data-privacy='on'] .calc-clrow small { filter: blur(5px); user-select: none; }
/* Набранное в поиске листа «Клиент» имя тоже под шторкой (F9, как .tdo-pick input). */
[data-privacy='on'] .calc-cl-sheet > .f { filter: blur(5px); }

/* ================================================================ УПРОЩЕНИЕ (Макс, 07.09)
   Иконки на кнопках - вектор из ICO в app.js, тот же штрих, что у вкладок. */
.btn .ico, .row .side .ico {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.row .side .ico { width: 22px; height: 22px; }
/* 🔴 Полоса карточки БОЛЬШЕ НЕ ПОВЕРХНОСТЬ. Подложка-пилюля с рамкой и стеклом досталась ей
   от ряда из семи кнопок, который листали вбок; кнопок осталось две, листать нечего, и
   Макс сказал прямо: «убрать background сзади кнопок, это типа бар… больше не крутится эта
   штука». Само правило `.actions` не трогаем - его носит экран переписки, и на нём стоит
   тест про обрезанные тени, который требует у него внутреннюю подсветку.

   Липкость ОСТАЁТСЯ по его просьбе («удобно, что она выезжает»). Читаемость при налипании
   держат сами кнопки: у них непрозрачный фон (`.actions .btn` выше), поэтому подложка под
   ними не нужна вовсе. */
.actions.top-bar {
  overflow-x: visible; gap: 6px;
  padding: 4px 0 8px;                 /* по бокам ноль: кнопки упираются в края карточки */
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
/* Обычная кнопка M 40 (П25) во всю ширину полосы. */
.actions.top-bar .btn { flex: 1 1 0; min-width: 0; }
/* Цвет говорит, куда ведёт кнопка (Макс, 08.09: «WhatsApp зелёной, „Ещё“ золотой»).
   Цветные здесь значок и рамка, текст остаётся обычным: цветной текст на цветной подложке
   пришлось бы проверять отдельно, а выигрыша не даёт.
   ⚠️ Золото берётся через --tab-on, а не --accent: на белой кнопке светлой темы фирменное
   золото даёт 2.61 при норме 3, а --tab-on - 5.57. Тот же токен и по той же причине уже
   стоит у активной вкладки. */
.actions.top-bar .btn.wa {
  color: var(--grn);
  border-color: color-mix(in srgb, var(--grn) 55%, transparent);
  background-color: color-mix(in srgb, var(--grn) 10%, var(--panel-solid));
}
.actions.top-bar .btn.more {
  color: var(--tab-on);
  border-color: color-mix(in srgb, var(--tab-on) 55%, transparent);
  background-color: color-mix(in srgb, var(--accent) 10%, var(--panel-solid));
}
.actions.top-bar .btn.wa span, .actions.top-bar .btn.more span { color: var(--ink); }
.actions.top-bar .btn.wa:hover { background-color: color-mix(in srgb, var(--grn) 16%, var(--panel-solid)); }
.actions.top-bar .btn.more:hover { background-color: color-mix(in srgb, var(--accent) 16%, var(--panel-solid)); }
/* Хвост переписки в карточке и вся история на своём экране: без коробки со своей
   прокруткой - страница крутится целиком. */
.conv .chat.tail, .conv .chat.full { max-height: none; overflow: visible; }
.conv .btn.open-chat { width: 100%; margin-top: 10px; box-sizing: border-box; }
/* Экран всей переписки: пузыри во всю высоту страницы, последнее внизу. */
.chat.full { padding: 6px 0 18px; }
/* Лист «Ещё»: снизу, над баром вкладок, по одному действию в строке. Затемнение сзади
   закрывает лист тапом мимо. */
.veil { position: fixed; inset: 0; z-index: 19; background: var(--veil); animation: veil-in var(--dur-2) var(--ease-out) backwards;  touch-action: none; }
/* У затемнений панели ☰ и Лале свой переход по .show. Анимация с заливкой не даёт браузеру
   запустить transition, и они гасли бы за один кадр, пока панель ещё едет. */
#veil, #bveil { animation: none; }
@keyframes veil-in { from { opacity: 0; } }
/* Листы и окна подтверждения стоят у низа экрана - значит, и приходят снизу, как лист календаря.
   pop-in падал на них сверху: два разных листа в одном приложении. */
.card.sheet.pop-in { animation-name: sheet-up; animation-duration: var(--dur-3); }
@keyframes sheet-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.more-sheet, .reason-sheet {
  position: fixed; left: 12px; right: 12px; z-index: 20;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  max-height: 76vh; overflow-y: auto;
}
.sheet-list { display: flex; flex-direction: column; gap: 4px; }
.btn.sheet-item { width: 100%; justify-content: flex-start; text-align: left; min-height: var(--h-m); box-sizing: border-box; }
.more-sheet .danger-row { margin: 8px 0 0; }
.more-sheet .danger-row .btn { width: 100%; }
.btn.sheet-cancel { width: 100%; margin-top: 8px; box-sizing: border-box; }
/* Шпаргалка «Что значат цвета»: образец слева, объяснение справа. */
.legend h4 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.legend > .sc-shd + h4 { margin-top: 0; }
@media (min-width: 900px) { .more-sheet.legend { left: 0; right: 0; width: min(560px, calc(100% - 24px)); margin: 0 auto; } }
.legend .cl-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.legend .cl-row b { font-weight: 700; }
/* Образец полоски - тот же цвет и та же ширина, что у настоящей строки списка. */
.legend .sw { flex: 0 0 auto; width: 26px; height: 22px; border-radius: 7px; border: 1px solid var(--edge); background: var(--panel-solid); border-left-width: 4px; }
.legend .sw.hot { border-left-color: var(--red); }
.legend .sw.warm { border-left-color: var(--yel); }
.legend .sw.none { border-left-color: var(--line); }
/* П37-EDGES: образцы тем же градиентом и без рамки, что строки «Забронирован» и «Готов бронировать». */
.legend .sw.booked, .legend .sw.ready {
  background-color: var(--panel); background-origin: border-box; background-clip: border-box;
  border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent;
}
.legend .sw.booked {
  border-left-color: var(--grn);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--grn) 22%, transparent) 0%,
    color-mix(in srgb, var(--grn) 12%, transparent) 60%, color-mix(in srgb, var(--grn) 8%, transparent) 100%);
}
.legend .sw.ready {
  border-left-color: var(--accent);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 32%, transparent) 0%,
    color-mix(in srgb, var(--accent) 16%, transparent) 60%, color-mix(in srgb, var(--accent) 10%, transparent) 100%);
}
.legend .sw.num { display: flex; align-items: center; justify-content: center; border-left-width: 1px; font-size: 12px; font-weight: 700; }
.legend .sw.n-red { color: var(--red); }
.legend .sw.n-gold { color: var(--accent); }
.legend .sw.ico-cell { color: var(--accent); }
.legend .sw.ico-cell.stop { color: var(--red); }
.legend .sw .ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.legend .sw.badge-ok { background: color-mix(in srgb, var(--accent) 22%, transparent); border-left-width: 1px; }
.legend .sw.badge-shut { background: color-mix(in srgb, var(--red) 14%, transparent); border-left-width: 1px; }
/* Тихая ссылка под списком: подсказка, а не кнопка действия. */
.legend-link { position: relative; background: none; border: 0; padding: 8px 2px; margin: 2px 0 0; color: var(--muted); font: inherit; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.legend-link:active { color: var(--ink); }
.legend-link::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }   /* видимая 34, палец 44 (П25) */
/* Состояние доставки в раскрытом списке кампании: своя строка под именем. */
.bc-st { margin-top: 4px; }
/* Ряд кнопок внутри карточки без полосы-пилюли: рамка и фон .actions нужны только липкой
   полосе, которую листают вбок. */
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }

/* «Написать самой»: поля подстановок и предпросмотр того, что уйдёт человеку. */
.send-box .f { margin-bottom: 8px; }
.send-box { margin-bottom: 12px; }
.send-preview { white-space: pre-wrap; font-size: 14px; }
.quote .mini-btn { margin: 10px 6px 0 0; }

/* ---------- порядок секции на «Моём дне» ---------- */
/* Тот же переключатель, что «кто ведёт», только ниже ростом: он служебный и не должен
   спорить со строками клиентов за первый взгляд. 40 px по высоте хватает пальцу. */
.sort-seg { margin: 4px 0 10px; }
/* T-fix-sec-40: под открытой шапкой 40 (накладка до +2) переключатель S 34 (накладка .seg-btn::after на 5 выше) стоит через 8
   (UI-RULES 3: 34 рядом с 40 через 8): между накладками 1 px. Через 7 они сходились край в край, и на дробной общей границе
   Chromium отдавал точку переключателю (круг 2, R-20261007-T-fix-sec-40-ed5980c5-01); раньше палец шапки «Ждут ответа» был 41. */
details.sec > summary + .sort-seg { margin-top: 8px; }

/* Чип страны, пока выбрана группа: для группы страна не применяется. Не прячем, а гасим,
   чтобы было видно, что он есть и почему не работает. */
.bc-chips .chip:disabled { opacity: .45; cursor: default; }

/* ---------- экран «Отчёт» (Макс 25.09) ---------- */
.rp-ctl { display: grid; gap: 10px; margin-bottom: 12px; }
/* П18 поправка (Макс 06.10, вариант А): период слайдером «День | Неделя | Месяц» (общий переключатель .sc-seg.sm, 34,
   выбранное белой плашкой), под ним стрелки 34 с датой посередине, ниже «Все врачи ▾» (34). Видимое 34, нажатие 44
   накладкой; ряды через 10, накладки соседних рядов не пересекаются. */
.sc-seg.rp-kind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-nav { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 8px; }
/* T-mock-sizes (ответ Макса 12.10 по снимкам g1 и g2): шрифт даты 13.5, как у остальных строк S 34 (UI-RULES раздел 3). */
.rp-date { position: relative; min-height: 34px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); font: inherit; font-size: 13.5px; text-align: center; overflow-wrap: anywhere; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.rp-date b { font-weight: 600; }
.rp-date:active { background: var(--strong); }
.btn.rp-doc { position: relative; justify-self: start; min-height: 34px; padding: 0 12px; gap: 6px; border-radius: 10px; font-size: 14px; }
.btn.rp-doc b { font-weight: 600; }
.btn.rp-doc .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Накладка - сам элемент и по 5 px сверху и снизу: дата в две строки выше 44 и тоже нажимается целиком. */
.rp-date::before, .btn.rp-doc::before { content: ''; position: absolute; inset: -6px 0; }
/* Лист «Период»: режимы тем же переключателем, свой календарь месяца, «Выбрано» одной строкой, «Показать». */
.sc-seg.rp-pseg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 10px; }
.rp-cal { border: 1px solid var(--line); border-radius: 14px; padding: 8px; margin-bottom: 8px; }
.rp-mh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rp-mtitle { font-size: 15px; text-align: center; }
.rp-arr { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--field); color: var(--ink); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.rp-arr::before { content: ''; position: absolute; inset: -6px; }
.rp-arr .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rp-arr:disabled { opacity: .35; cursor: default; }
.rp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.rp-dow { font-size: 11px; color: var(--muted); padding-bottom: 2px; }
.rp-cday { min-height: 34px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.rp-cday.today { box-shadow: inset 0 0 0 1.5px var(--accent-strong); }
.rp-cday.mid { background: color-mix(in srgb, var(--accent) 30%, transparent); font-weight: 600; }
.rp-cday.on { background: var(--accent); color: #1a1409; font-weight: 700; }
.rp-cday:disabled { color: var(--faint); cursor: default; }
.rp-under { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.rp-under .rp-chosen { margin: 0; }
/* Высота листа не зависит от длины подписи (T-p3-2, прыжок 21-42 px при смене режима): «Выбрано» на две строки,
   «Показать <период>» шире «Закрыть» и на две строки - самая длинная «неделю с 31 августа по 6 сентября» помещается. */
.rp-psheet .rp-chosen { min-height: calc(2 * 1.45em); line-height: 1.45; display: flex; align-items: center; }
.rp-psheet .pl-acts .btn.go { flex: 2 1 0; min-height: 68px; }
.rp-psheet .pl-acts .sheet-cancel { flex: 1 1 0; }
/* Лист «Врач»: строки списком с числом обращений, галочка у выбранного. */
.rp-dlist { display: grid; gap: 8px; margin-bottom: 8px; }
.btn.rp-dopt .t { display: grid; flex: 1; gap: 1px; min-width: 0; }
.btn.rp-dopt .t span { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.btn.rp-dopt.on { box-shadow: inset 0 0 0 1.5px var(--accent-strong); }
.btn.rp-dopt .ico { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--grn); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rp-live { margin: 0 2px 10px; }
/* Плитка отчёта не всегда кнопка: у числа без списка уголок «›» врал бы, что оно открывается. */
.stat.still { cursor: default; }
.stat.still::after { content: none; }
.stat.still:hover { background-color: var(--panel); }
.stat.still:active { transform: none; }
.rp-tile b { font-size: 23px; }
.rp-cmp {
  display: block; margin-top: 4px; font-style: normal; font-size: 10.5px; line-height: 1.25;
  color: var(--faint); font-variant-numeric: tabular-nums;
}
/* Цвет стрелки - в какую сторону ЛУЧШЕ, а не вверх-вниз: меньше «без ответа» это хорошо. */
.rp-cmp.good { color: var(--grn); }
.rp-cmp.bad { color: var(--red); }
.rp-vol { margin: -4px 2px 14px; line-height: 1.45; color: var(--muted); }
.rp-days { display: grid; gap: 4px; }
.rp-day {
  display: grid; grid-template-columns: 1.1fr .8fr .8fr 1fr 1.6fr; gap: 6px; align-items: center;
  padding: 9px 8px; border: 1px solid var(--line); border-radius: 12px; background-color: var(--field);
  font: inherit; font-size: 13px; color: var(--ink); text-align: left; font-variant-numeric: tabular-nums;
  cursor: pointer; min-height: 44px; box-sizing: border-box; width: 100%;
}
.rp-day:hover { background-color: var(--strong); }
.rp-day.rp-head {
  background: none; border-color: transparent; cursor: default; min-height: 0; padding-top: 0;
  padding-bottom: 0; font-size: 11px; color: var(--muted); letter-spacing: .02em;
}
.rp-dname { font-weight: 700; }
.rp-bad { color: var(--red); }
.rp-how { margin: 4px 2px 20px; }
/* Подпись в плитке отчёта бывает в две строки («новых обращения»): общий line-height страницы
   разводил их на пол-плитки. */
.rp-tile span { display: block; line-height: 1.25; margin-top: 2px; }
/* «Сейчас» (П21): плашка из двух плиток под периодом и врачом, карточкой ужатого формата 12 · 14, подпись до плиток 8. */
.card.rp-now { padding: 12px 14px; }
.card.rp-now > h3 { margin: 0 0 8px; }
.rp-now > .stats { margin: 0; }

/* ============================================================ Иллюстрированные иконки
   Вкладки и пункты меню ☰ - наши картинки i-*.png (Higgsfield, Макс 25.09: три цвета сайта,
   глянец). Служебные значки в строках (чат, ответить, корзина) остаются векторными: картинка
   размером 16 px превращается в пятно.
   🔴 Картинка не наследует currentColor, поэтому активную вкладку отличают три вещи сразу:
   подложка (как и раньше), полная яркость и чуть крупнее. Неактивные приглушены, но не
   обесцвечены до серого - иначе золото и синий перестают быть нашими цветами.
   ⚠️ Тёмная тема: синие детали на почти чёрном фоне сливаются (силуэт в «Клиентах»
   пропадал), поэтому под картинкой лёгкое светлое свечение. В светлой теме его нет. */
.ico-img { display: block; flex: 0 0 auto; object-fit: contain; pointer-events: none; }
.tabs .ico-img {
  width: 28px; height: 28px; opacity: .72; filter: saturate(.8);
  transition: opacity var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out), transform var(--dur-press) var(--spring);
}
.tabs button.on .ico-img { opacity: 1; filter: none; transform: translateY(-1px) scale(1.08); }
/* Картинки в панели: 30 px в разделах, 26 px в «Нижнем меню»; выбранный раздел чуть крупнее,
   невыбранная вкладка приглушена. Тёмная тема: под картинкой лёгкое светлое свечение. */
#panel .ico-img { display: block; flex: 0 0 auto; object-fit: contain; pointer-events: none; }
#panel .item .ico-img { width: 30px; height: 30px; margin: -3px; transition: transform var(--dur-press) var(--spring); }
#panel .item.on .ico-img { transform: scale(1.06); }
#panel .pick .ico-img { width: 26px; height: 26px; opacity: .72; filter: saturate(.8); transition: opacity var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out); }
#panel .pick.on .ico-img { opacity: 1; filter: none; }
:root:not([data-theme='light']) .tabs .ico-img,
:root:not([data-theme='light']) #panel .pick .ico-img {
  filter: saturate(.8) drop-shadow(0 0 4px rgba(255,255,255,.26));
}
:root:not([data-theme='light']) .tabs button.on .ico-img,
:root:not([data-theme='light']) #panel .item .ico-img,
:root:not([data-theme='light']) #panel .pick.on .ico-img {
  filter: drop-shadow(0 0 5px rgba(255,255,255,.32));
}
@media (max-width: 359px) {
  .tabs .ico-img { width: 30px; height: 30px; }
}

/* ---------- Instagram в карточке (25.09) ---------- */
/* Счётчик байт под сообщением: Instagram пропускает до 1000 байт, русский текст это ~500 знаков. */
.qbytes { flex-basis: 100%; order: 3; font-size: 11.5px; color: var(--muted); margin: 2px 4px 0; }
.qbytes.over { color: var(--red); font-weight: 700; }
.actions.top-bar .btn.wa.ig { border-color: color-mix(in srgb, #c13584 45%, var(--line)); }
.actions.top-bar .btn.wa.ig:hover { background-color: color-mix(in srgb, #c13584 14%, var(--panel-solid)); }
.qrow:has(.qbytes) { flex-wrap: wrap; }

/* ---------- свои иллюстрации в кнопках исхода и на пустых экранах (25.09) ---------- */
.outcome .illo { width: 20px; height: 20px; }
.empty-state { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 18px 12px 22px; }
.empty-state .illo { width: 112px; height: 112px; margin-bottom: 6px; }
.empty-state b { font-size: 16px; color: var(--ink); }

/* Кнопка Instagram стоит на месте WhatsApp и наследует его форму, но не зелёный цвет:
   зелёная кнопка «Instagram» читалась бы как «откроется WhatsApp». */
.actions.top-bar .btn.wa.ig { background-color: color-mix(in srgb, #c13584 12%, var(--panel-solid)); }
.actions.top-bar .btn.wa.ig .ico { color: #d9579f; }

/* ---------- кто вошёл (в меню ☰) и экран «Команда» (25.09) ---------- */
.tm-head { margin-bottom: 12px; }
.tm-ws { display: flex; align-items: center; gap: 8px; }
.tm-wsname { font-size: 18px; flex: 1; }
.tm-member.off { opacity: .55; }
.tm-member .nm-line .pill { margin-left: 8px; }
/* ✏️ у названия и ⋯ у человека - круг S 34 с пальцем 44 (как .who .icobtn в карточке); ✏️ был системной кнопкой 28. */
.tm-ws .icobtn, .tm-member .tm-side .icobtn { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: var(--h-s); height: var(--h-s);
  min-width: 0; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--field); color: var(--muted);
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--spring); }
.tm-ws .icobtn::before, .tm-member .tm-side .icobtn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.tm-ws .icobtn:hover, .tm-member .tm-side .icobtn:hover { background: var(--strong); color: var(--ink); }
.tm-ws .icobtn:active, .tm-member .tm-side .icobtn:active { transform: scale(.93); }
.tm-ws .icobtn:active::before, .tm-member .tm-side .icobtn:active::before { width: 48px; height: 48px; }
.btn.tm-invite { width: 100%; margin-top: 8px; }
/* П20 (Макс 05.10): «Кто ▾» листом и «Только важное», важное полосой цвета по виду события. */
/* Сверху 8, не 6: «Кто ▾» S 34 с накладкой .btn::after на 5 выше под шапкой 40 с накладкой до +2, между накладками 1 px (UI-RULES 3:
   34 рядом с 40 через 8; T-fix-sec-40 круг 2, палец шапки был 43). */
.tm-ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 8px 0 8px; }
.btn.tm-who-btn { min-height: var(--h-s); padding: 0 11px; gap: 8px; border-radius: var(--r-s); font-size: 13.5px; text-align: left; }
.btn.tm-who-btn b { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.btn.tm-who-btn .tm-l { color: var(--muted); font-size: 13px; font-weight: 400; }
.btn.tm-who-btn .ico { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tm-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 2px 8px; font-size: 12px; color: var(--muted); }
.tm-key .k::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--c); }
.tm-k-op { --c: var(--accent); } .tm-k-money { --c: var(--grn); } .tm-k-del { --c: var(--red); }
.tm-ev.tm-imp { box-shadow: inset 3px 0 0 var(--c); background-color: color-mix(in srgb, var(--c) 9%, var(--field)); }
button.tm-ev.tm-imp:hover { background-color: color-mix(in srgb, var(--c) 15%, var(--field)); }
.btn.tm-person { gap: 10px; padding-top: 4px; padding-bottom: 4px; }
.btn.tm-person .t { flex: 1; min-width: 0; }
.btn.tm-person .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.btn.tm-person .ico { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--grn); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn.tm-person.on { box-shadow: inset 0 0 0 1.5px var(--accent-strong); }
.tm-av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--field); border: 1px solid var(--line); font-weight: 700; }
.tm-people, .tm-mlist { margin-bottom: 8px; }
/* Под шапкой 10 (5 шапки листа-выбора + 5 списка): ✕ (палец 44 у круга 34) и первая строка (44 у 40) не сходятся. */
.tm-whosheet .tm-people { margin-top: 5px; }
.danger-row.tm-danger { margin: 8px 0 0; }
.danger-row.tm-danger .btn { width: 100%; }
.tm-list { display: grid; gap: 4px; }
.tm-day { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 10px 2px 2px; font-weight: 700; }
.tm-ev {
  display: flex; gap: 10px; align-items: baseline; width: 100%; box-sizing: border-box; text-align: left;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background-color: var(--field);
  min-height: var(--h-m); font: inherit; font-size: 13.5px; color: var(--ink); line-height: 1.35;
}
/* Строка ленты M 40 через 4, палец 44 полосой по 2 сверху и снизу (от края рамки 1: -3). */
button.tm-ev { position: relative; cursor: pointer; }
button.tm-ev::after { content: ''; position: absolute; left: -1px; right: -1px; top: -3px; bottom: -3px; }
button.tm-ev:hover { background-color: var(--strong); }
.tm-t { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; }
.tm-x { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tm-who { color: var(--muted); }
.btn.tm-more { width: 100%; margin-top: 8px; }
.tm-link { display: grid; gap: 8px; margin: 8px 0; }
.tm-link:empty { display: none; }
.tm-code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; padding: 10px 12px;
  border: 1px dashed var(--line); border-radius: 10px; background-color: var(--field); overflow-wrap: anywhere;
}
/* Имя в «Пригласить» и «Название пространства» без подписи: видимые 40 и прозрачная рамка 2 (палец 44), до полосы роли 8.
   Под полосой роли 8: липкий ряд кнопок (.pl-acts) закрыл бы нижние 5 px её пальца. */
.pl-sheet input.f.tm-name { min-height: 44px; margin: -2px 0 6px; border: 2px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line); }
.pl-sheet input.f.tm-name + .pl-acts { padding-top: 4px; }
.pl-sheet input.f.tm-name:focus { border-color: transparent; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.reason-sheet .seg { margin-bottom: 8px; }
.reason-sheet .seg + .pl-acts { padding-top: 4px; }
/* Имя участника не обрезается ради пилюли роли: пилюля уходит на свою строку. */
.tm-member .nm-line { flex-wrap: wrap; row-gap: 4px; }
.tm-member .nm-line .pill { margin-left: 0; }
.tm-member .nm-line .nm { white-space: normal; }
/* Таблица «По людям»: имя шире цифр, шапка может переноситься. Сетка одна и у шапки, и у
   строк, иначе подписи уезжают от чисел (ревью 25.09). Строки не нажимаются. */
.rp-people .rp-day { grid-template-columns: 1.3fr 1.1fr .8fr .8fr .8fr; cursor: default; }
.rp-people .rp-day:not(.rp-head):hover { background-color: var(--field); }
.rp-day.rp-head span { white-space: normal; line-height: 1.2; }

/* ---------- подключения: QR привязки Telegram (27.09) ---------- */
/* QR всегда чёрным по белому и с белым полем в самом SVG: камера телефона тёмную тему не читает. */
.tg-qr { display: block; width: 200px; height: 200px; margin: 2px auto 4px; border-radius: 10px; background: #fff;
  image-rendering: pixelated; }

/* ---------- экран «Instagram» (27.09) ---------- */
.ig-sub { color: var(--faint); font-size: 12px; }
#insta-body .card > .btn { margin-top: 12px; }
/* Часть столбика с рекламы: тот же столбик, тон темнее. Цвет здесь - второй смысл графика,
   поэтому под графиком он назван словами, а не только цветом. */
.chart .bar-ad { fill: color-mix(in srgb, var(--ink) 55%, transparent); pointer-events: none; }
.chart.dim .bar-ad { opacity: .35; }
.ig-day { min-height: 2.8em; }
.ig-top { display: grid; gap: 4px; }
.ig-post { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: var(--r-m); color: inherit; text-decoration: none; }
a.ig-post:hover { background-color: var(--field); }
.ig-thumb { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--field); }
.ig-post-t { display: grid; gap: 2px; min-width: 0; }
.ig-post-t b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-post-t span { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- канал WhatsApp / Instagram (25.09) ---------- */
.pill.p-ig { background: color-mix(in srgb, #c13584 16%, transparent); color: #d9579f; margin-left: 6px; }
/* На светлой теме розовый #d9579f даёт 3.6:1 на белом, ниже нормы 4.5; тёмный тон бренда даёт 6+. */
[data-theme='light'] .pill.p-ig, [data-theme='light'] .actions.top-bar .btn.wa.ig .ico { color: #9c2a68; }
/* П45c: в строке списка метка Instagram на сплошной подложке того же розового (на заливке статуса прозрачная давала 3.0:1),
   в тёмной теме текст светлее: прежний розовый и на обычной строке был 3.7:1 при норме 4.5 (замер p45c-rows-browser). */
.row .pill.p-ig { background-color: color-mix(in srgb, #c13584 16%, var(--panel-solid)); color: color-mix(in srgb, #d9579f 65%, var(--ink)); }
[data-theme='light'] .row .pill.p-ig { color: #9c2a68; }
/* Канал «личный номер Анастасии» (crm/lib/lines.js): золото бренда, как у пометки в переписке. */
.pill.p-line { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); margin-left: 6px;
  white-space: nowrap; flex-shrink: 0; }
[data-theme='light'] .pill.p-line { color: var(--accent-strong); }
/* П35: плашка «чей номер»: рисованный значок телефона и четыре цифры парами (табличные), в карточке как «по разбору». */
.line-pill { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums; }
.line-pill .line-ico { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* «Мой день», «Ждут ответа»: строка «написал…» одной строкой, плашка справа через 6, маленькая 18 с текстом 11.5 и значком 11. */
.row .ago { display: flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; }
.row .ago .ago-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row .ago .pill.line-pill { margin: 0; font-size: 11.5px; padding: 1px 7px; line-height: 16px; flex: none; }
.row .ago .line-pill .line-ico { width: 11px; height: 11px; }
/* П45c: плашка номера теперь в строках всех списков, и на заливке статуса тоже: своя сплошная подложка того же золота и
   в светлой теме текст темнее, чтобы контраст был от 4.5 на любой строке (было 2.7-3.0 в светлой, 3.7-4.1 на заливке в
   тёмной; замер p45c-rows-browser). */
.row .ago .pill.line-pill { background-color: color-mix(in srgb, var(--accent) 16%, var(--panel-solid)); }
[data-theme='light'] .row .ago .pill.line-pill { color: color-mix(in srgb, var(--accent-strong) 55%, var(--ink)); }
.ch-seg .seg-btn { flex: 1 1 0; }
/* Смена канала (Макс 26.09: «резкая перезагрузка, всё прыгает»): пока идёт запрос, старый экран
   не исчезает за «Загружаю…», а приглушается всё, что ниже переключателя. Высота и прокрутка
   остаются, нажать на устаревшую строку нельзя. Новый экран встаёт за один кадр, числа
   подкручиваются, строки выплывают (channelSettle в app.js). */
#day-body.switching .ch-seg ~ *, #clients-body.switching #list-rows,
#clients-body.switching #list-foot { opacity: .45; pointer-events: none; }
#day-body .ch-seg ~ *, #list-rows, #list-foot { transition: opacity var(--dur-1) var(--ease-out); }
/* То же для остальных переключателей (Отчёт, лента Команды, Напоминания - swapBegin в app.js):
   приглушается всё, кроме блоков .sw-keep - по ним и нажимают дальше. Свой класс .swapping, а не
   .switching: у «Моего дня» тот тоже стоит на экране, и общее правило приглушило бы его канал. */
.swapping > :not(.sw-keep) { opacity: .45; pointer-events: none; transition: opacity var(--dur-1) var(--ease-out); }
.list-panel .ch-seg { margin: 0; flex: 1; }
/* П26 (Макс 06.10, ужатый формат П25): «Канал» одной полосой 34 с белой плашкой выбранного, без чисел; «Excel» 34 рядом
   с «+ Новый»; подписи 12, выпадающие 40, промежутки 8. Размеры из токенов П25 (строитель 1), до них запасные числа. */
.list-panel .exp-head { gap: 8px; margin-bottom: 10px; }
.list-panel .exp-line { flex-wrap: nowrap; gap: 8px; margin: 0 0 8px; }
.list-panel .exp-lab { flex-basis: 56px; font-size: 12px; }
.list-panel .exp-line select.f { min-height: var(--h-m, 40px); padding-top: 6px; padding-bottom: 6px; }

.list-panel .exp-head .cl-xl { margin-left: auto; }
.list-panel .exp-head .cl-xl + .mini-btn { margin-left: 0; }
.seg.cl-ch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg.cl-ch .seg-btn { padding: 0 6px; }


.add-dupes:empty { display: none; }
/* T-p26b (П26 07.10): листы «Список в Excel» и «Новый клиент» в ужатом формате П25 (8 · 14 · 12, строки 40, над кнопками 12),
   свои классы на токенах T-p25 с запасными значениями. */
.cl-xrow { display: grid; gap: 2px; min-height: 48px; box-sizing: border-box; padding: 4px 12px; align-content: center;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field); }
.cl-xrow b { font-size: 15px; line-height: 20px; font-weight: 600; }
.cl-xrow span { font-size: 12px; line-height: 16px; color: var(--muted); }
.cl-export .pl-acts, .cl-new .cl-new-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pl-picker.cl-export > .sc-shd, .pl-picker.cl-new > .sc-shd { margin-bottom: 10px; }


.cl-new .cl-new-acts .btn[hidden] { display: none; }
.cl-new .cl-new-acts .btn[hidden] + .btn { grid-column: 1 / -1; }
.cl-new .cl-fld + .cl-fld { margin-top: 8px; }
/* Внутри листа у вложенной карточки нижнего отступа нет: над кнопками ровно 12 (П25). */
.cl-new .add-dupes > .card { margin-bottom: 0; }

.btn.cl-country { justify-content: space-between; padding: 0 12px; }
.btn.cl-country .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.cl-got { margin: 4px 0 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-got:empty { display: none; }
/* «Такой номер уже есть» красной строкой 48, как прежняя «Кажется, он уже есть»; нажатие открывает её карточку. */
.cl-found { display: grid; gap: 2px; width: 100%; min-height: 48px; box-sizing: border-box; margin: 8px 0 0; padding: 4px 12px; text-align: left;
  border: 1px solid color-mix(in srgb, var(--red) 55%, var(--line)); border-radius: var(--r-m);
  background: color-mix(in srgb, var(--red) 10%, var(--panel-solid)); color: var(--ink); font: inherit; cursor: pointer; }
.cl-found b { font-size: 14.5px; line-height: 20px; font-weight: 700; color: var(--red-ink); }
.cl-found span { font-size: 12px; line-height: 16px; color: var(--muted); }
.cl-found[hidden] { display: none; }
.btn.cl-upload { width: 100%; margin-top: 8px; padding: 0 12px; }
.cl-countries-list { display: grid; }

.cl-countries-list .sheet-item[aria-pressed='true'] { border-color: var(--accent); background: var(--gold-soft, var(--field)); }


/* ============================================================ Цветные значки (Макс, 25.09)
   Мелкие значки - s-<имя>-dark.png и s-<имя>-light.png (мягкий объём, цвет по смыслу).
   Тёмная версия - по умолчанию, как и тема приложения; светлая - под [data-theme='light'].
   Строки ниже одинаковые на каждое имя: список имён тот же, что в тесте app-ui «цветные
   значки», и тест проверяет, что у каждого имени есть оба файла и оба правила. */
.si {
  display: inline-block; flex: 0 0 auto; width: 1.25em; height: 1.25em;
  vertical-align: -.25em; background: center / contain no-repeat;
}
.row .side .si { width: 24px; height: 24px; }
.btn .si { width: 20px; height: 20px; }
.icobtn .si { display: block; width: 22px; height: 22px; margin: 0 auto; }
.row .no-write.si { width: 16px; height: 16px; }
.cal-day .dots .si { width: 11px; height: 11px; vertical-align: -.15em; }
/* Там, где подпись не во flex с gap, отступ до текста даёт сам значок. */
.chip .si, .pill .si, .task .tx b .si, .tdo-open .si, .quote .si { margin-right: .35em; }
.si-chat { background-image: url('s-chat-dark.png'); }
.si-group { background-image: url('s-group-dark.png'); }
[data-theme='light'] .si-group { background-image: url('s-group-light.png'); }
[data-theme='light'] .si-chat { background-image: url('s-chat-light.png'); }
.si-check { background-image: url('s-check-dark.png'); }
[data-theme='light'] .si-check { background-image: url('s-check-light.png'); }
.si-reply { background-image: url('s-reply-dark.png'); }
[data-theme='light'] .si-reply { background-image: url('s-reply-light.png'); }
.si-trash { background-image: url('s-trash-dark.png'); }
[data-theme='light'] .si-trash { background-image: url('s-trash-light.png'); }
.si-ban { background-image: url('s-ban-dark.png'); }
[data-theme='light'] .si-ban { background-image: url('s-ban-light.png'); }
.si-reminder { background-image: url('s-reminder-dark.png'); }
[data-theme='light'] .si-reminder { background-image: url('s-reminder-light.png'); }
.si-consult { background-image: url('s-consult-dark.png'); }
[data-theme='light'] .si-consult { background-image: url('s-consult-light.png'); }
.si-arrival { background-image: url('s-arrival-dark.png'); }
[data-theme='light'] .si-arrival { background-image: url('s-arrival-light.png'); }
.si-surgery { background-image: url('s-surgery-dark.png'); }
[data-theme='light'] .si-surgery { background-image: url('s-surgery-light.png'); }
.si-departure { background-image: url('s-departure-dark.png'); }
[data-theme='light'] .si-departure { background-image: url('s-departure-light.png'); }
.si-visit { background-image: url('s-visit-dark.png'); }
[data-theme='light'] .si-visit { background-image: url('s-visit-light.png'); }
.si-transfer { background-image: url('s-transfer-dark.png'); }
[data-theme='light'] .si-transfer { background-image: url('s-transfer-light.png'); }
.si-checkin { background-image: url('s-checkin-dark.png'); }
[data-theme='light'] .si-checkin { background-image: url('s-checkin-light.png'); }
.si-checkout { background-image: url('s-checkout-dark.png'); }
[data-theme='light'] .si-checkout { background-image: url('s-checkout-light.png'); }
.si-checkup { background-image: url('s-checkup-dark.png'); }
[data-theme='light'] .si-checkup { background-image: url('s-checkup-light.png'); }
/* Способы оплаты (П11, T-p11): карта, наличные, на счёт. */
.si-card { background-image: url('s-card-dark.png'); }
[data-theme='light'] .si-card { background-image: url('s-card-light.png'); }
.si-cash { background-image: url('s-cash-dark.png'); }
[data-theme='light'] .si-cash { background-image: url('s-cash-light.png'); }
.si-bank { background-image: url('s-bank-dark.png'); }
[data-theme='light'] .si-bank { background-image: url('s-bank-light.png'); }
.si-event { background-image: url('s-event-dark.png'); }
[data-theme='light'] .si-event { background-image: url('s-event-light.png'); }
.si-send { background-image: url('s-send-dark.png'); }
[data-theme='light'] .si-send { background-image: url('s-send-light.png'); }
.si-eye { background-image: url('s-eye-dark.png'); }
[data-theme='light'] .si-eye { background-image: url('s-eye-light.png'); }
.si-pen { background-image: url('s-pen-dark.png'); }
[data-theme='light'] .si-pen { background-image: url('s-pen-light.png'); }
.si-plus { background-image: url('s-plus-dark.png'); }
[data-theme='light'] .si-plus { background-image: url('s-plus-light.png'); }
.si-print { background-image: url('s-print-dark.png'); }
[data-theme='light'] .si-print { background-image: url('s-print-light.png'); }
.si-copy { background-image: url('s-copy-dark.png'); }
[data-theme='light'] .si-copy { background-image: url('s-copy-light.png'); }
.si-list { background-image: url('s-list-dark.png'); }
[data-theme='light'] .si-list { background-image: url('s-list-light.png'); }
.si-quote { background-image: url('s-quote-dark.png'); }
[data-theme='light'] .si-quote { background-image: url('s-quote-light.png'); }
.si-calendar { background-image: url('s-calendar-dark.png'); }
[data-theme='light'] .si-calendar { background-image: url('s-calendar-light.png'); }
.si-camera { background-image: url('s-camera-dark.png'); }
[data-theme='light'] .si-camera { background-image: url('s-camera-light.png'); }
.si-search { background-image: url('s-search-dark.png'); }
[data-theme='light'] .si-search { background-image: url('s-search-light.png'); }
.si-save { background-image: url('s-save-dark.png'); }
[data-theme='light'] .si-save { background-image: url('s-save-light.png'); }
.si-ai { background-image: url('s-ai-dark.png'); }
[data-theme='light'] .si-ai { background-image: url('s-ai-light.png'); }
.si-link { background-image: url('s-link-dark.png'); }
[data-theme='light'] .si-link { background-image: url('s-link-light.png'); }
.si-person { background-image: url('s-person-dark.png'); }
[data-theme='light'] .si-person { background-image: url('s-person-light.png'); }
.si-stop { background-image: url('s-stop-dark.png'); }
[data-theme='light'] .si-stop { background-image: url('s-stop-light.png'); }
/* Красный запрет на красной пилюле «НЕ ПИСАТЬ» сливался: белая подложка, как у дорожного знака. */
.pill.p-red .si { background-color: #fff; border-radius: 50%; }

/* ================================================================ календарь агентства
   «Мой день → Расписание» и «Напоминания → Месяцем» (calendar.js, deliverable 48, макет
   deliverables/48-calendar-mock.html). Всё с приставкой sc-: в приложении уже есть .tl (лента
   переписки), .legend (шпаргалка цветов), .nav - календарь их не трогает.
   Цвета - токены тем: операция красная, поездка синяя, консультация жёлтая, отель серо-синий,
   врачи - свои три цвета (не красный, не синий и не жёлтый: те уже заняты видами событий). */
/* Знаки «− + ✕» рисованные, ровно по центру своей кнопки (П25; Макс: «кривые кнопки − и +… исправьте везде»): буква
   у каждого шрифта сидит по-своему и уезжает от середины круга. Маска берёт цвет текста кнопки, имя кнопке даёт
   aria-label (или скрытый текст .vh). */
.sgn { display: block; flex: none; width: 16px; height: 16px; background-color: currentColor; pointer-events: none;
  -webkit-mask: var(--sgn) center / contain no-repeat; mask: var(--sgn) center / contain no-repeat; }
.sgn.minus { --sgn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sgn.plus { --sgn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M8 3v10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
@media (forced-colors: active) { .sgn { forced-color-adjust: none; background-color: ButtonText; } }
.sgn.x { --sgn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* Колонки minmax(0, 1fr): иначе строка без переноса («… время пока неизвестно») раздвигает всю
   сетку шире телефона и страница едет вбок (находка проверки 29.09, 375 px). */
/* Общего правила для .ico в файле нет (см. .dl-pdf выше): без fill/stroke контур залился бы чёрным. */
.sc-ico { display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sc .sc-ico, .sc-sheet .sc-ico, .sc-toast .sc-ico { width: 20px; height: 20px; }
.sc-ico.sm { width: 16px; height: 16px; }
.sc-ico.xs { width: 13px; height: 13px; stroke-width: 2.2; }
.sc-kico.si { width: 16px; height: 16px; vertical-align: -3px; }
.sc-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; min-height: var(--h-s); box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--field); margin-bottom: 10px; }
.sc > .sc-mode { margin-bottom: 0; }
.sc-mode button { border: 0; background: none; min-height: 28px; padding: 0 11px; border-radius: 8px; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.sc-mode button[aria-pressed='true'] { background: var(--panel-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.task.k-busy { border-left-color: var(--faint); color: var(--muted); }
/* Personal appointments remain distinct in both colour modes. */
/* Поле и кнопка остаются внутри листа на узком экране. */
.sc-fld > .f, .sc-form .btn, .when-row .f, .pl-sheet .btn, .pl-sheet select { min-width: 0; max-width: 100%; }
.pl-sheet { position: fixed; z-index: 33; left: max(12px, calc((100vw - 430px) / 2)); right: max(12px, calc((100vw - 430px) / 2)); bottom: max(12px, env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px)); margin: 0; max-height: 90dvh; overflow-y: auto; }
.pl-veil { z-index: 32; }
.pl-veil ~ .pl-veil { z-index: 34; }
.pl-sheet ~ .pl-sheet { z-index: 35; }
.ex-section { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 12px; }
.ex-section h4 { margin: 0 0 12px; }
.ex-section .ex-shenel { width: 100%; justify-content: space-between; gap: 12px; padding-top: 7px; padding-bottom: 7px; margin-bottom: 4px; text-align: left; }
.ex-hint, .ex-row small { color: var(--muted); font-size: 13px; }
.ex-massage-group { margin: 10px 0; padding-block: 3px; }
.ex-massage-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.ex-section .ex-massage { padding: 7px 0; border: 0; background: none; box-shadow: none; gap: 6px; flex-shrink: 0; }
.ex-massage-sum { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; }
.ex-massage-sum small, .ex-massage-sum b:only-child, .ex-massage-more { color: var(--muted); }
.ex-massage-more { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; }
.ex-massage-more .seg { flex: 0 0 96px; flex-wrap: nowrap; }
.ex-massage-more .seg-btn { min-width: 44px; padding-inline: 4px; }
.ex-massage-more small { font-size: 11px; }
.ex-massage-more > span { flex: 0 0 auto; white-space: nowrap; }
.ex-section .ex-total + .btn, .ex-section .ex-hint + .btn { margin-top: 4px; }
.ex-row { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.ex-row > div:first-child { flex: 1; min-width: 0; }
.ex-row b, .ex-row small { display: block; overflow-wrap: anywhere; }
.ex-row p { overflow-wrap: anywhere; }
.ex-values { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 52%; }
.ex-values .btn { white-space: normal; }
.ex-total, .ex-values, .ex-row small { font-variant-numeric: tabular-nums; }
.ex-total { font-weight: 700; }
.ex-deleted { margin-top: 4px; }
/* «Удалённые расходы»: шапка 40, палец 44 накладкой, зазор 2 под открытой (T-fix-sec-40, как details.sec > summary). */
.ex-deleted > summary { position: relative; min-height: var(--h-m); cursor: pointer; display: flex; align-items: center; }
.ex-deleted > summary::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
.ex-deleted[open] > summary { margin-bottom: 2px; }
.ex-error { color: var(--red); margin: 0; overflow-wrap: anywhere; }
.ex-error:empty { display: none; }
.ex-sheet { display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
.ex-sheet > .sc-shd { flex: 0 0 auto; margin-bottom: 5px; }
.ex-form { min-height: 0; flex: 0 1 auto; display: flex; flex-direction: column; }
.ex-fields { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 5px; flex: 0 1 auto; }
.ex-field { display: block; margin-bottom: 8px; }
.ex-fields > :last-child { margin-bottom: 0; }
.ex-field > span { display: block; }
.ex-sheet .f { box-sizing: border-box; margin: 0; }
.ex-sheet textarea.f { display: block; resize: none; min-height: 74px; }
.ex-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.ex-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px; }
.ex-when .ex-field { display: flex; align-items: center; gap: 8px; margin: 0; }
.ex-when .ex-field > span { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); }
.ex-when .ex-field { min-height: 44px; cursor: pointer; }
.ex-when input { width: 20px; height: 20px; font: inherit; font-size: 16px; }
.ex-paid-date { font-size: 13px; color: var(--muted); flex-basis: 100%; }
.ex-footer { flex: 0 0 auto; padding-top: 12px; }
.ex-footer > .ex-error { margin: 0 0 8px; }
.ex-actions { display: flex; gap: 6px; }
/* Пакет 129: лист «Сменить врача?» - строки последствий через 8, ряд действия через 12. */
.doctor-change .doctor-change-line { margin: 0 0 8px; }
.doctor-change .ex-actions { margin-top: 12px; }
.ex-actions .btn { flex: 1 1 0; min-width: 0; margin: 0; padding: 9px 8px; }
/* T-p15c п. 6: «Сохранить расход» шире, «Закрыть» не уже 112 (с «Удалить» три кнопки: главная во всю ширину, правило ниже); «Когда» S 34. */
.ex-actions .btn.go { flex: 1 1 auto; }
.ex-actions .sheet-cancel { flex: 0 0 auto; width: auto; margin-top: 0; min-width: 112px; }
.ex-when .btn.ex-date { min-height: var(--h-s); padding: 0 12px; border-radius: var(--r-s); font-size: 13.5px; }
.ex-choices { flex-wrap: nowrap; }
.ex-sheet .f[aria-invalid='true'] { border-color: var(--red); }
[data-privacy='on'] :is(.ex-row > div:first-child, .ex-row > span, .ex-section .pm-history, .ex-sheet input[type='text'], .ex-sheet textarea) { filter: blur(5px); user-select: none; }
.pl-standard { z-index: 33; bottom: max(12px, env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px)); max-height: calc(100dvh - 96px - max(env(safe-area-inset-top, 0px), var(--tg-top, 0px))); }
.pl-standard-veil { z-index: 32; }
.pl-standard.pl-nested { z-index: 35; }
.pl-standard-veil.pl-nested { z-index: 34; }
.pl-standard-open #toast { z-index: 41; }
/* T-fix-after-13-1 п. 2 и R1 F3: тост над открытым общим листом в полосе над ним: 12 от верха (с безопасной зоной), а если лист выше
   (нижняя зона iPhone), то выше, вплотную над листом, но не выше 4 от верха. --sheet-top и --toast-h ставит toastShow при показе. */
#toast.over-sheet { bottom: auto; top: max(calc(4px + max(env(safe-area-inset-top, 0px), var(--tg-top, 0px))), min(calc(12px + max(env(safe-area-inset-top, 0px), var(--tg-top, 0px))), calc(var(--sheet-top, 96px) - 6px - var(--toast-h, 66px)))); }
.pl-standard .sc-ib { width: var(--h-s); height: var(--h-s); color: var(--ink); }
.pl-standard .pl-date { min-height: var(--h-s); }
.pl-standard .pl-date.on { color: #1a1409; }
.pl-standard .sc-ico { fill: none; stroke: currentColor; stroke-width: 2; width: 20px; height: 20px; }
.pl-month-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Стрелки месяца: значок внутри листа «Когда» раньше не получал размера (svg 0×0, кнопки 26px), мама их не видела
   (пункт 55, 04.10). Кнопки 44×44, значок 22px, название месяца само кнопка со списком месяцев. */
.pl-month-nav .btn.pl-month-step { width: var(--h-s); min-width: var(--h-s); height: var(--h-s); min-height: var(--h-s); padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.pl-month-nav .btn.pl-month-step::after { left: 50%; right: auto; width: 44px; transform: translate(-50%, -50%); }
.pl-sheet .sc-ico, .pl-month-nav .sc-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
/* Название месяца это кнопка со списком: общий вид .btn (рамка и заливка в обеих темах) плюс значок «вниз»,
   чтобы до нажатия было видно, что её можно нажать (находка проверяющего R-20261004-T-hotfix-2-a2bbffc-01 F2). */
.btn.pl-month-btn { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 13.5px; min-height: var(--h-s); padding: 0 11px; border-radius: var(--r-s); }
.btn.pl-month-btn .sc-ico { width: 18px; height: 18px; transition: transform var(--dur-3) var(--ease-out); }
.btn.pl-month-btn[aria-expanded='true'] { background: var(--gold-soft); border-color: var(--accent); }
.btn.pl-month-btn[aria-expanded='true'] .sc-ico { transform: rotate(180deg); }
/* Горизонтальное смахивание по сетке дней отдаётся нашему обработчику, вертикальная прокрутка листа остаётся
   браузеру (находка F1: без этого Chromium шлёт pointercancel и месяц не меняется). */
.pl-grid { touch-action: pan-y; }
.pl-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 4px; }
.pl-months[hidden] { display: none; }
.pl-months .btn { min-height: var(--h-m); padding: 6px; }
.pl-month-picker .btn { justify-content: center; text-align: center; }
/* T-p30c: поле и рамка только у второстепенных: «Выбрать месяц» (.btn.go) золотая с переливом, как по П30 п. 3; прежнее общее правило
   той же силы стояло ниже .btn.go и делало её серой. */
.pl-month-picker .btn:not(.go) { border-color: var(--line); background: var(--field); }
.pl-month-picker .pl-acts .btn { margin: 0; width: auto; }
.pl-months .btn[aria-pressed='true'] { background: var(--gold-soft); border-color: var(--accent); }
.pl-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; margin: 8px 0; }
.pl-grid small { text-align: center; color: var(--muted); }
.pl-date { position: relative; min-height: var(--h-s); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel); color: var(--ink); font: inherit; }
.pl-date.on { background: var(--accent); color: #1a1409; }
.pl-date:disabled { opacity: .3; }
.pl-sheet.pl-picker { display: flex; flex-direction: column; overflow: hidden; }
/* Тело листа прокручивается и режет по своему краю: 5 сверху и снизу - запас для пальца 44 у первого и последнего ряда
   34 (П25); под шапкой всё равно 10 (5 шапки + 5 тела). */
.pl-picker > .sc-shd { flex: 0 0 auto; margin-bottom: 5px; }
.sc-tidy-ask > .sc-shd { margin-bottom: 10px; }
.pl-picker-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 5px; }
.pl-acts { position: sticky; bottom: 0; flex: 0 0 auto; display: flex; gap: 6px; background: var(--panel-solid); padding-top: 12px; }
/* Кнопки одного ряда одной высоты и на одной линии: у .sheet-cancel свой margin-top для вертикального листа, в ряду он
   сдвигал «Закрыть» вниз относительно «Выбрать». */
.pl-acts .btn { flex: 1; min-height: var(--h-m); padding: 9px 8px; margin: 0; width: auto; }
/* Второе действие ряда («Закрыть», «Потом») видно как кнопка в обеих темах: в светлой базовые --panel и --edge белые на
   белом листе, кнопка выглядела простым текстом (находка проверяющего R-20261004-T-hotfix-5-258a1ce-01 F1). */
.pl-acts .btn:not(.go) { border-color: var(--line); background: var(--field); }
/* Листы номера клиента (П9, П9б): «Сменить / Добавить / Указать номер», «Этот номер уже есть», «Разделить карточку?».
   Содержимое шагом 8 (П25), кнопки столбиком через 6 во всю ширину: подписи длинные («Да, это один человек: собрать в одну
   карточку»), рядом на 375 они не помещаются. Плашки карточек стопкой с рамкой и заливкой поля, как в макете #P9. */
.num-sheet .pl-picker-body { display: grid; gap: 8px; padding: 0; overflow: visible; }   /* тело вровень с шапкой и рядом кнопок (14) */
.num-sheet > .sc-shd { margin-bottom: 10px; }   /* под шапкой 10 (UI-RULES раздел 2): тело без запаса 5, запас даёт шапка */
.num-sheet .pl-picker-body > * { margin: 0; }
.num-sheet .sc-fld .f { margin: 0; }
.num-sheet .num-now, .num-sheet .num-lead { font-size: 15px; white-space: normal; }
.num-sheet .num-note { color: var(--muted); font-size: 13px; white-space: normal; }
.pl-acts.num-acts { display: grid; gap: 6px; }
.pl-acts.num-acts .btn { white-space: normal; }
/* «Предложение», лист строки реконструкции (T-emre-range, раунд 4): «Сохранить цену» и «Вернуть цену прайса» столбиком через 6 во всю
   ширину - рядом на 375 подписи переносились в две строки, кнопки 60 вместо 40 (П25). */
.pl-acts.q-stack-acts { display: grid; gap: 6px; }
/* «Разделить карточку?» на 375×640-667 (F-card-04): две плашки с длинными именами и пояснение выше листа, тело без
   прокрутки наезжало на «Разделить». Кнопок в теле нет, накладку пальца резать нечему: тело листается, ряд кнопок на месте. */
.num-sheet.num-split .pl-picker-body { overflow-y: auto; }
.num-cmps { display: grid; gap: 8px; }
.num-cmp { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field); }
.num-cmp b { font-size: 15px; overflow-wrap: anywhere; }
.num-cmp span { font-size: 14px; }
.num-cmp small { font-size: 12.5px; color: var(--muted); }
/* Пакет 119/128, Кл16, BG.F2 ROOT 23.10: физический слот 54, видимая плашка 40 (при переносе оба растут на 20).
   По 7 сверху/снизу держат штатную накладку held50 внутри слота и при пружине .956; между слотами ещё 2.
   Плашка и текст сжимаются штатно, ::before 44/held50 не переопределяется. Тело листается, действия на месте. */
.num-sheet.num-priced .pl-picker-body { overflow-y: auto; padding-block: 2px; scroll-padding-block: 2px; }
.num-price-opts, .num-massage-opts { display: flex; flex-wrap: wrap; gap: 4px; row-gap: 2px; padding: 2px 0; }
.num-price-opts .chip, .num-massage-opts .chip { width: 100%; max-width: 100%; min-height: calc(var(--h-m) + 14px); padding: 17px 13px; border: 0; border-radius: var(--r-m);
  background: none; isolation: isolate; font-size: 14px; line-height: 20px; justify-content: flex-start; text-align: left; white-space: normal; font-variant-numeric: tabular-nums; }
.num-price-opts .chip::after, .num-massage-opts .chip::after { content: ''; position: absolute; inset: 7px 0; z-index: -1; pointer-events: none;
  box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field);
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.num-price-opts .chip:hover::after, .num-massage-opts .chip:hover::after { background: var(--strong); }
.num-price-opts .chip.on::after, .num-massage-opts .chip.on::after { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); border-color: transparent; }
/* Крутилка (П25): подпись 12 серая слева, окошко с числом ровно по центру полосы (на одной линии с выбранным), «− +»
   круглые 34 у правого края; полоса 40, значение 48 × 40. */
.pl-lane-field { margin: 8px 0; min-width: 0; }
.pl-lane-label { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); min-height: var(--h-s); margin-bottom: 5px; }
.pl-lane-label .pl-lane-typewrap { grid-column: 2; justify-self: center; display: block; padding: 5px 0; margin: -5px 0; cursor: text; }
.pl-lane-label .pl-lane-controls { grid-column: 3; justify-self: end; }
.pl-lane-type.f { width: 48px; min-height: var(--h-s); height: var(--h-s); margin: 0; padding: 0 4px; text-align: center; font-variant-numeric: tabular-nums; }
.pl-lane-controls { display: flex; gap: 10px; }
.pl-lane-step.btn { width: var(--h-s); min-width: var(--h-s); height: var(--h-s); min-height: var(--h-s); padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--field); justify-content: center; text-align: center; }
.pl-lane-step.btn::after { left: 50%; right: auto; width: 44px; transform: translate(-50%, -50%); }
.pl-lane { position: relative; display: flex; align-items: stretch; gap: 0; height: var(--h-m); box-sizing: border-box; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; touch-action: pan-x; scrollbar-width: none; scroll-behavior: smooth; border: 1px solid var(--line); border-radius: var(--r-m); padding: 2px calc(50% - 24px); background: var(--field); }
.pl-lane-item { flex: 0 0 48px; min-height: 0; padding: 0; scroll-snap-align: center; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; }
.pl-lane-words { padding-inline: 45%; }
.pl-lane-words .pl-lane-item { flex-basis: auto; white-space: nowrap; padding: 0 12px; }
.pl-lane-item[aria-selected='true'] { background: var(--gold-soft); border-color: var(--accent-strong); color: var(--ink); font-weight: 700; }
.pl-lane-field.off, .pl-time.off { opacity: .4; }
.pl-time { margin: 8px 0 0; }
.pl-sheet input.f, .pl-sheet select { margin-bottom: 0; }
.sc-sheet .sc-small, .sc-sheet .note-hint, .pl-sheet .sc-small, .pl-sheet .note-hint { margin: 0; }
.pl-time-caption { display: block; margin: 8px 0 0; padding-bottom: 4px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); }
.pl-time-type.f { font-variant-numeric: tabular-nums; }
.pl-sum { margin: 8px 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.pl-offrow { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: var(--h-m); cursor: pointer; }
.pl-offrow::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.pl-offrow > .pl-switch { z-index: 1; }   /* сам тумблер над накладкой строки: нажатие по нему - его, мимо - строки */
.pl-switch { position: relative; flex: 0 0 44px; width: 44px; height: 24px; box-sizing: border-box; border: 1px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--muted) 75%, transparent); cursor: pointer; transition: background var(--dur-1) var(--ease-out); }
.pl-switch::before { content: ''; position: absolute; width: 44px; height: 44px; left: -1px; top: -11px; }
.pl-switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur-2) var(--ease-out); }
.pl-switch[aria-checked='true'] { background: var(--accent); border-color: var(--accent-strong); }
.pl-switch[aria-checked='true']::after { transform: translateX(20px); }

.pl-date.mid { background: var(--gold-soft); color: var(--ink); }
/* Кнопки выбора дня и времени: подпись по центру и в одну, и в две строки (находка проверяющего
   R-20261004-T-hotfix-4-ad018e5-01 F1: в помощнике поездки «Когда» стояло слева, 16px против 128px). */
.sc-when, .sc-pick-btn { white-space: normal; text-align: center; width: 100%; overflow-wrap: anywhere; }
/* Кнопка длительности стоит между «Когда» и «Напомнить», у которых подпись по центру: она такая же, не влево. */
.sc-pick-btn { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: center; gap: 0 8px; }
/* Лист события в одну высоту (П25): подсказка шага и пояса отдельной строкой не стоит. */
#sc-fTimeHint { display: none; }
.sc-form > .sc-form-actions { position: sticky; bottom: 0; background: var(--panel-solid); padding: 4px 0 0; }
@media (prefers-reduced-motion: reduce) { .pl-lane { scroll-behavior: auto; } }
.pl-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pl-quick select { max-width: 160px; min-width: 0; margin: 0; }
.pl-warning { color: var(--warn-ink); cursor: pointer; }
/* У значка «Пересечение» в строке дела своего размера не было: .sc-ico задаёт размер только внутри календаря и
   листов, и треугольник раздувался до ширины кнопки (снимок Макса 05.10, кнопка 130 на 124 px). В календаре
   значок без .btn и остаётся 20 px. */
.btn.pl-warning .sc-ico { width: 18px; height: 18px; }
.sc-conflict { position: absolute; top: 2px; right: 3px; padding: 3px; font-size: 14px; background: var(--panel); border-radius: 5px; }
.sc-untimed { position: relative; }
.pl-conflicts .btn { display: block; width: 100%; white-space: normal; margin: 8px 0 0; }
.pl-conflicts > :last-child { margin-bottom: 4px; }
.pl-conflicts p { display: flex; align-items: flex-start; gap: 8px; }
.pl-group { margin: 18px 0 6px; }
.pl-day-todos { border: 1px dashed var(--k-mine); padding: 10px; border-radius: 10px; margin-bottom: 6px; font-size: 12px; }
.sc-ctl { flex-wrap: wrap; }
.sc-scope { margin-left: auto; }
.task.k-mine, .td-row.k-mine, .sc-ev.k-mine, .sc-untimed.k-mine, .sc-mbar.k-mine, .sc-legend .k-mine { border: 1px dashed var(--k-mine); background: color-mix(in srgb, var(--k-mine) 15%, var(--panel-solid)); }
.sc-ev.k-busy, .sc-untimed.k-busy, .sc-mbar.k-busy { background: color-mix(in srgb, var(--faint) 20%, var(--panel-solid)); color: var(--muted); cursor: default; opacity: 1; }
@media (max-width: 500px) { .sc-scope { flex: 1 1 100%; justify-content: center; } .sc-scope button { flex: 1; } }

.si-mine { background-image: url('s-mine-dark.png'); }
[data-theme='light'] .si-mine { background-image: url('s-mine-light.png'); }
.sc-ctl { display: flex; gap: 8px; align-items: center; justify-content: space-between; min-width: 0; }
/* Шапка календаря одним форматом (Макс 29.09, ужата П25 06.10): каждая коробка S 34, радиус 10, рамка 1 px, текст
   13.5/600; переключатели - полоса 34 с кнопками 28 (как .seg). Палец 44 накладкой. */
.sc-hbox { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: var(--h-s); padding: 0 11px; box-sizing: border-box;
  border-radius: var(--r-s); border: 1px solid var(--line); background: var(--field); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 20px;
  white-space: nowrap; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--spring); }
.sc-hbox:hover { background-color: var(--strong); }
.sc-hbox:active { transform: scale(.96); }
.sc-hbox::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.sc-hbox:active::after { height: 46px; left: -3%; right: -3%; }
.sc-hbox b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sc-hbox .n { color: var(--muted); font-weight: 600; }
.sc-hbox.btn.go { border-color: transparent; color: #1a1409; }
.sc-calpill { flex: 0 1 auto; }
.sc-seg { display: inline-flex; gap: 2px; padding: 2px; min-height: var(--h-s); box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--field); flex: 0 0 auto; }
.sc-seg button { border: 0; background: none; padding: 0 11px; min-height: 28px; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.sc-seg button[aria-pressed='true'] { background: var(--panel-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.sc-seg.sm button { min-height: 28px; padding: 0 10px; font-size: 13.5px; }
/* 44 px под пальцем (правило app-ui.test): кнопки остаются как в макете, нажимается больше. */
.sc-seg button, .sc-mode button { position: relative; }
.sc-seg button::before, .sc-mode button::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; min-width: 44px; transform: translateY(-50%);
}
@media (max-width: 412px) { .sc-seg button { padding: 0 7px; } .sc-calpill { padding: 0 8px; gap: 4px; } }
/* Отбор по врачу и «+ Записать» - одна строка пополам (Макс 29.09); в карточке клиента так же, но
   «+ Записать» сразу на клиента, а вид - строкой выше (Макс 30.09). */
.sc-docbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.sc-docbar > .sc-hbox { width: 100%; }
/* На широком экране - как строка выше: отбор слева, «+ Записать» справа, по размеру содержимого. */
@media (min-width: 900px) { .sc-docbar { display: flex; justify-content: space-between; } .sc-docbar > .sc-hbox { width: auto; min-width: 200px; } }
/* П14 (Макс 05.10): верх в два ряда. Первый - «День / Неделя / Месяц» во всю ширину; второй - «Показать: Работа · все
   врачи ▾» (календарь, работа и личное, врач - в листе) и «+ Записать» по размеру. В карточке клиента как было. */
.sc:not(.sc-card) > .sc-ctl > .sc-seg { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-docbar.sc-showbar { grid-template-columns: minmax(0, 1fr) auto; }
@media (min-width: 900px) { .sc-docbar.sc-showbar > .sc-show { min-width: 260px; } }
/* Лист «Показать»: «Что показать» во всю ширину, кнопки от 44 px. */
.sc-show-scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-left: 0; }
.sc-show-scope button { min-height: 28px; }
/* «Не готово к операции» (П14 п. 4): одна строка над календарём, жёлтым - не тревога, как красные плашки за 3 дня. */
.sc-ready { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: var(--h-m); box-sizing: border-box; padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--yel) 55%, var(--line)); border-radius: var(--r-m); background: color-mix(in srgb, var(--yel) 10%, var(--panel-solid));
  color: var(--ink); font: inherit; font-size: 14px; line-height: 1.35; text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.sc-ready:active { background: color-mix(in srgb, var(--yel) 24%, var(--panel-solid)); }
.sc-ready > .sc-ico { color: var(--muted); }
.sc-readyrow { align-items: center; }
.sc-readyrow > .si { width: 22px; height: 22px; flex: 0 0 auto; }
/* Светофор в строке списка - на своём месте справа (на полосе месяца он висит над ней). */
.sc-readyrow > .sc-rb { position: static; flex: 0 0 auto; align-self: center; }
/* «Лале, запиши личное» - первой строкой «+ Записать», с её лицом. */
.sc-lale { align-items: center; margin-bottom: 8px; padding-top: 5px; padding-bottom: 5px; }
.sc-lale-av { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; }
.sc-sw.big { width: 12px; height: 12px; }
/* Строки листа «Врач» - по центру: точка, имя, число и галочка на одной линии. */
.sc-calrow.sc-docopt { align-items: center; }
.sc-stack.tight:has(> .sc-docopt) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-stack.tight:has(> .sc-docopt) > :not(.sc-docopt), .sc-stack.tight > .sc-docopt[data-fk='docopt-all'] { grid-column: 1 / -1; }
.sc-calrow.sc-docopt .sc-ico { margin-top: 0; }
.sc-docopt .n { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-sw { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--faint)); flex: 0 0 auto; }
.sc-warn { display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; border-radius: 14px; font-size: 14px; line-height: 1.4;
  border: 1px solid color-mix(in srgb, var(--red) 55%, var(--line)); background: color-mix(in srgb, var(--red) 9%, var(--panel-solid)); }
.sc-warn .t { flex: 1; min-width: 0; color: var(--ink); }
.sc-warn .btn { flex: 0 0 auto; }
.sc-bang { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: var(--on-red); font-weight: 800; display: grid; place-items: center; font-size: 13px; }

/* навигация по датам */
.sc-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.sc-nav h3 { flex: 1; margin: 0; font-size: 15px; text-align: center; text-wrap: balance; border-radius: 8px; color: var(--ink); }
.sc-nav h3:focus:not(:focus-visible) { outline: none; }
.sc-ib { position: relative; border: 1px solid var(--line); background: var(--field); color: var(--muted); border-radius: 999px; width: var(--h-s); height: var(--h-s); display: grid; place-items: center; padding: 0; flex: 0 0 auto; cursor: pointer; }
.sc-ib::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.sc-ib.send { width: 44px; height: 44px; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); color: #1a1409; border-color: transparent; }
.sc-today { position: relative; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--tab-on); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: none; border-radius: var(--r-s); padding: 0 11px; min-height: var(--h-s); box-sizing: border-box; cursor: pointer; }

/* полоса недели над днём */
.sc-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-bottom: 6px; }
.sc-strip button { border: 0; background: none; border-radius: 12px; padding: 4px 0 5px; display: grid; justify-items: center; gap: 2px; min-height: 58px; cursor: pointer; font: inherit; color: var(--ink); }
.sc-strip .wd { font-size: 11.5px; color: var(--faint); font-weight: 600; }
.sc-strip .wd.we { color: var(--tab-on); }
.sc-strip .dn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.sc-strip button[aria-pressed='true'] .dn { box-shadow: inset 0 0 0 2px var(--accent); }
.sc-strip button.is-today .dn { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); color: #1a1409; box-shadow: none; }
.sc-dots { display: flex; gap: 3px; height: 6px; align-items: center; }
.sc-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--c, var(--faint)); flex: 0 0 auto; }
.sc-dot.ring { background: none; box-shadow: inset 0 0 0 1.5px var(--c); width: 6px; height: 6px; }
.sc-dot.sq { border-radius: 1px; }
.sc-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 12.5px; color: var(--faint); margin: 0 2px 8px; }
.sc-meta .load { color: var(--muted); font-weight: 600; }
.sc-h2 { margin: 0 2px 4px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sc-h2 span { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); font-size: 12.5px; }

/* весь день: кто в Стамбуле и события без времени */
.sc-allday { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin-bottom: 10px; }
.sc-stay { position: relative; display: flex; align-items: center; gap: 8px; min-height: var(--h-m); padding: 6px 10px; border-radius: var(--r-m); border: 0; text-align: left; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--ink);
  background: color-mix(in srgb, var(--blue) 14%, var(--panel-solid)); box-shadow: inset 3px 0 0 var(--blue); }
.sc-stay { min-width: 0; }
.sc-stay b { font-weight: 650; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-stay span { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-untimed { display: flex; align-items: center; gap: 8px; min-height: var(--h-m); padding: 6px 10px; border-radius: var(--r-m); border: 1.5px dashed var(--c); background: none; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.sc-untimed { min-width: 0; max-width: 100%; }
.sc-untimed.done { color: var(--muted); opacity: .8; }
.sc-untimed.done > span:not(.si):not(.sc-rp) { text-decoration: line-through; }
.sc-pkrow.done { color: var(--muted); opacity: .8; }
.sc-pkrow.done .tx { text-decoration: line-through; }
/* Тянется только текст: значок вида (span.si) и пилюля светофора (span.sc-rp) - своего размера. */
.sc-untimed > span:not(.si):not(.sc-rp) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sc-link { position: relative; border: 0; background: none; color: var(--tab-on); font: inherit; font-weight: 700; font-size: 13.5px; padding: 0 4px; justify-self: start; min-height: var(--h-s); border-radius: 8px; cursor: pointer; }
/* «Ещё N клиентов» (S 34) под строками 40: от строки 8 (5 сетки и 3), накладки S и M не сходятся (UI-RULES раздел 3). */
.sc-allday > .sc-link { margin-top: 3px; }
.sc-tiny { font-size: 12.5px; color: var(--faint); margin: 0 2px 8px; }

/* лента по часам */
.sc-tl-scroll { max-height: 540px; overflow-y: auto; overscroll-behavior: contain; border-radius: 16px; background: var(--panel); border: 1px solid var(--edge); }
.sc-tl { position: relative; display: grid; grid-template-columns: 46px repeat(var(--cols), minmax(0, 1fr)); }
.sc-ttop { position: sticky; top: 0; z-index: 5; }
.sc-thead, .sc-tall { display: grid; grid-template-columns: 46px repeat(7, minmax(0, 1fr)); background: var(--panel-solid); border-bottom: 1px solid var(--line); }
.sc-thead button { border: 0; background: none; padding: 6px 0; font: inherit; font-size: 12px; color: var(--muted); display: grid; justify-items: center; cursor: pointer; }
.sc-thead button b { font-size: 15px; color: var(--ink); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.sc-thead button.is-today b { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); color: #1a1409; }
.sc-thead button.we { color: var(--tab-on); }
.sc-tall > span { font-size: 10.5px; color: var(--faint); padding: 4px 4px 0 0; text-align: right; }
.sc-tall > div { border-left: 1px solid var(--line); padding: 3px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; align-content: start; min-width: 0; }
.sc-tall small { font-size: 11px; color: var(--muted); }
.sc-tall .sc-untimed { min-height: 30px; padding: 3px 6px; font-size: 11.5px; gap: 4px; }
.sc-hours { position: relative; }
.sc-hr { position: absolute; right: 7px; transform: translateY(-50%); font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.sc-hr.dim { visibility: hidden; }
.sc-nowlbl { position: absolute; right: 3px; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: var(--on-red); background: var(--red); padding: 1px 5px; border-radius: 999px; font-variant-numeric: tabular-nums; z-index: 4; }
.sc-col { position: relative; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--hh)); background-repeat: no-repeat; background-size: 100% var(--gridh); cursor: copy; }
.sc-col.we { background-color: color-mix(in srgb, var(--accent) 4%, transparent); }
.sc-ev { position: absolute; border: 0; border-radius: 8px; padding: 3px 6px 3px 8px; text-align: left; overflow: hidden; font: inherit; font-size: 12.5px; line-height: 1.25; color: var(--ink);
  background: color-mix(in srgb, var(--c) 17%, var(--panel-solid)); box-shadow: inset 3px 0 0 var(--c); display: grid; align-content: start; gap: 1px; cursor: pointer; z-index: 2; }
.sc-ev:hover { background: color-mix(in srgb, var(--c) 25%, var(--panel-solid)); }
.sc-ev.done { opacity: .7; }
.sc-ev.done b, .sc-ev.done .tx { text-decoration: line-through; color: var(--muted); }
.sc-ev.k-checkup { background: var(--panel-solid); box-shadow: none; border: 1.5px dashed var(--c); }
.sc-ev.k-transfer { box-shadow: none; border-left: 3px dashed var(--c); }
.sc-ev.k-event, .sc-ev.k-reminder { background: color-mix(in srgb, var(--c) 12%, var(--panel-solid)); }
.sc-ev .l1, .sc-ev .l2 { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sc-ev b, .sc-ev .tx { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sc-ev .s { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.sc-ev .tm { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; flex: 0 0 auto; }
.sc-ev .sc-kico.si { width: 13px; height: 13px; }
.sc-ev > .sc-rp { position: absolute; top: 3px; right: 4px; }
.sc-ev.has-rp .l1 { padding-right: 60px; }
.sc-ev.has-rb .l1 { padding-right: 30px; }
.sc-ev .l2 .sc-rb { position: static; }
.sc-now { position: absolute; left: -1px; right: 0; height: 2px; background: var(--red); z-index: 3; pointer-events: none; }
.sc-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.sc-ghost { margin-top: 8px; font: inherit; font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: var(--r-m); border: 1px dashed var(--line); background: none; text-align: left; width: 100%; min-height: var(--h-m); box-sizing: border-box; cursor: pointer; position: relative; }

/* светофор «готов к операции»: цвет несут значок и рамка, текст - обычный */
.sc-rp { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--panel-solid); color: var(--ink); white-space: nowrap; line-height: 1.45; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.sc-rp i, .sc-rb i { font-style: normal; font-weight: 800; }
.sc-rp.g { border-color: color-mix(in srgb, var(--grn) 70%, transparent); } .sc-rp.g i { color: var(--grn); }
.sc-rp.y { border-color: var(--yel); } .sc-rp.y i { color: var(--yel); }
.sc-rp.r { border-color: var(--red); border-width: 2px; } .sc-rp.r i { color: var(--red); }
.sc-rb { position: absolute; top: 2px; right: 2px; font-size: 10.5px; font-weight: 700; line-height: 1.35; padding: 0 4px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--panel-solid); color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-rb.g { border-color: var(--grn); } .sc-rb.g i { color: var(--grn); }
.sc-rb.y { border-color: var(--yel); } .sc-rb.y i { color: var(--yel); }
.sc-rb.r { border-color: var(--red); border-width: 2px; } .sc-rb.r i { color: var(--red); }

/* неделя списком */
.sc-wlist { display: grid; gap: 8px; }
.sc-wrow { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; text-align: left; border: 1px solid var(--edge); background: var(--panel); border-radius: 14px; padding: 10px; font: inherit; color: var(--ink); cursor: pointer; width: 100%; }
.sc-wrow.is-today { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.sc-wrow .dd { display: grid; justify-items: center; align-content: start; gap: 2px; }
.sc-wrow .dd small { font-size: 12px; color: var(--faint); font-weight: 600; }
.sc-wrow .dd small.we { color: var(--tab-on); }
.sc-wrow .dd b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.sc-wrow.is-today .dd b { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); color: #1a1409; }
.sc-wrow .body { display: grid; gap: 4px; min-width: 0; }
.sc-wrow .meta { font-size: 12px; color: var(--faint); display: flex; justify-content: space-between; gap: 8px; }
.sc-strip-bar { width: 100%; height: 8px; display: block; border-radius: 4px; background: var(--field); }
.sc-wrow .li { display: flex; gap: 6px; align-items: center; font-size: 13.5px; min-width: 0; }
.sc-wrow .li.done { color: var(--muted); }
.sc-wrow .li.done .tx { text-decoration: line-through; }
.sc-wrow .li .tm { color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 42px; font-size: 12.5px; }
.sc-wrow .li .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sc-wrow .more, .sc-wrow .empty { font-size: 12.5px; color: var(--faint); }

/* месяц как TimeTree: полосы пребывания по дорожкам */
.sc-month { padding: 10px 8px; }
.sc-mdow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 2px; }
.sc-mdow span { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--faint); padding: 2px 0 4px; }
.sc-mdow span.we { color: var(--tab-on); }
.sc-mgrid { border-top: 1px solid var(--line); }
.sc-mwk { --lane: 15px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); position: relative; }
.sc-mcell { grid-row: 1 / -1; border: 0; border-left: 1px solid var(--line); background: none; padding: 3px 3px 0; text-align: left; display: flex; align-items: flex-start; gap: 3px; min-width: 0; z-index: 0; cursor: pointer; font: inherit; color: var(--ink); }
.sc-mcell:first-of-type { border-left: 0; }
.sc-mcell.we { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.sc-mcell:hover { background: var(--field); }
.sc-mcell .mn { font-size: 12px; font-weight: 700; min-width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.sc-mcell.we .mn { color: var(--tab-on); }
.sc-mcell.out .mn { opacity: .45; }
.sc-mcell.is-today .mn { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); color: #1a1409; opacity: 1; }
.sc-mcell .sc-dots { height: 19px; flex-wrap: nowrap; overflow: hidden; }
.sc-mbar { position: relative; z-index: 1; pointer-events: none; align-self: start; height: calc(var(--lane) - 2px); margin: 1px 1px 0; border: 0; padding: 0; border-radius: 4px; overflow: hidden; text-align: left;
  background: color-mix(in srgb, var(--blue) 26%, var(--panel-solid)); color: var(--ink); font-size: 10px; line-height: 13px; font-weight: 600; }
.sc-mbar.cs { box-shadow: inset 3px 0 0 var(--blue); }
.sc-mbar.ce { box-shadow: inset -3px 0 0 var(--blue); }
.sc-mbar.cs.ce { box-shadow: inset 3px 0 0 var(--blue), inset -3px 0 0 var(--blue); }
.sc-mbar.clL { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.sc-mbar.clR { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.sc-mbar.open { background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 26%, var(--panel-solid)) 55%, transparent); }
.sc-mbar.one { background: color-mix(in srgb, var(--c) 26%, var(--panel-solid)); box-shadow: inset 3px 0 0 var(--c); }
.sc-mbar.one.op { background: var(--c); box-shadow: none; }
.sc-mbar.one.op .lab { color: var(--on-red); }
.sc-mbar.one.done { background: color-mix(in srgb, var(--faint) 22%, var(--panel-solid)); box-shadow: inset 3px 0 0 var(--faint); }
.sc-mbar.one.done .lab { color: var(--muted); text-decoration: line-through; }
.sc-mbar .lab { position: absolute; z-index: 1; top: 0; bottom: 0; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; line-height: 13px; font-weight: 600; }
.sc-mbar .lab.onseg { color: var(--on-red); }
.sc-mseg { position: absolute; top: 0; bottom: 0; background: var(--c); border-radius: 3px; }
.sc-mseg.thin { top: 3px; bottom: 3px; border-radius: 2px; }
.sc-mseg.done { background: var(--faint); }
.sc-mbar .sc-mbang, .sc-legend .sc-mbang, .sc-mbar .sc-ydot, .sc-legend .sc-ydot { position: absolute; z-index: 2; right: 1px; top: 50%; transform: translateY(-50%); }
.sc-mbang { width: 11px; height: 11px; border-radius: 50%; background: var(--panel-solid); color: var(--red); font-size: 9px; font-weight: 800; line-height: 11px; text-align: center; }
.sc-ydot { width: 7px; height: 7px; border-radius: 50%; background: var(--yel); box-shadow: 0 0 0 1.5px var(--panel-solid); }
.sc-mbar .sc-ydot { right: 2px; }
.sc-mplus { z-index: 1; pointer-events: none; font-size: 10px; font-weight: 700; color: var(--muted); padding: 0 4px; line-height: 14px; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-top: 10px; padding: 0 4px; }
.sc-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.sc-legend i { display: inline-block; width: 16px; height: 9px; border-radius: 3px; background: var(--c); position: relative; }
.sc-legend i.thin { height: 5px; }
.sc-legend i.stayk { background: color-mix(in srgb, var(--blue) 26%, var(--panel-solid)); box-shadow: inset 3px 0 0 var(--blue); }
.sc-legend i.ring { width: 8px; height: 8px; background: none; box-shadow: inset 0 0 0 1.5px var(--c); border-radius: 50%; }
.sc-legend i.dt { width: 6px; height: 6px; border-radius: 50%; }
.sc-legend i.dt.sq { border-radius: 1px; }
.sc-legend i.dn { background: color-mix(in srgb, var(--faint) 22%, var(--panel-solid)); box-shadow: inset 3px 0 0 var(--faint); }
.sc-legend i.dn::after { content: ''; position: absolute; left: 4px; right: 2px; top: 50%; border-top: 1.5px solid var(--muted); }
.sc-tidy { margin-top: 10px; padding: 0 4px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sc-tidy .note-hint { margin: 0; }
.sc-legend i.lg { width: 14px; height: 11px; border-radius: 3px; background: var(--red); }
.sc-legend i.lg .sc-mbang { width: 9px; height: 9px; font-size: 8px; line-height: 9px; }
.sc-legend i.cxk { box-shadow: inset 0 0 0 1.5px var(--red);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--red) 22%, var(--panel-solid)) 0 3px, color-mix(in srgb, var(--red) 8%, var(--panel-solid)) 3px 6px); }
.sc-legend i.cxk.done { box-shadow: none; background: color-mix(in srgb, var(--faint) 30%, var(--panel-solid)); }
.sc-dl { display: grid; gap: 8px; }
.sc-dl .btn { justify-self: start; }
.sc-dlrow .btn { justify-self: stretch; }
.sc-dl .note-hint { font-size: 12px; margin: 0; }
.sc-dlrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sc-dlrow .btn { min-height: var(--h-s); min-width: 0; padding: 0 8px; font-size: 13px; line-height: 16px; border-radius: var(--r-s); gap: 5px; margin: 0; }
/* Подписка айфона в листе «Календари»: ссылка и «Скопировать» в одну строку, ссылка режется. */
.sc-ics { margin-top: 6px; }
.sc-stack > .sc-shd + .sc-ics { margin-top: 0; }
.sc-stack.sc-ics > .btn, .sc-stack.sc-ics > .sc-icsrow, .sc-stack.sc-ics > .sc-acts { margin-top: 8px; }
.sc-ics .btn.go { justify-self: start; }
/* Поле и «Скопировать» - одной высоты и на одной линии: у полей .f свой нижний отступ, здесь он лишний. */
.sc-icsrow { display: flex; gap: 8px; align-items: center; min-width: 0; margin-left: -2px; }
.sc-icsrow .sc-icsurl { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; text-overflow: ellipsis; min-height: 44px; border: 2px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line); }
.sc-icsrow .sc-icsurl:focus { border-color: transparent; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.sc-icsrow .btn { flex: 0 0 auto; margin: 0; }
/* Файлы клиента (crm/public/files.js): папки кнопками, сетка плиток, лист файла. */
.files-card h3 .files-n { color: var(--faint); font-weight: 600; margin-left: 6px; margin-right: auto; }
.files-cats { display: flex; flex-wrap: wrap; gap: 10px 6px; margin: 0 0 10px; padding: 5px 0 0; }
.files-cats .chip .n { color: var(--faint); font-variant-numeric: tabular-nums; }
.files-cats .chip.on .n { color: inherit; opacity: .75; }
/* T-p46 (D): папки карточки одной кнопкой «Папка: Все» (вид листа выбора, M 40) во всю ширину; лист «Папка» строками с числами.
   .files-cats выше - выбор папки в листе файла. */
.files-card .btn.files-folder { margin: 0 0 10px; }
.files-folders .ico.pl-pick-ck { stroke-width: 2.4; }
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.files-tile { display: grid; gap: 4px; padding: 6px; min-width: 0; text-align: left; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; }
.files-tile img, .files-tile .files-pdf { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--field); }
.files-pdf { display: grid; place-items: center; font-weight: 800; letter-spacing: .06em; color: var(--red); }
.files-pdf.big { max-width: 160px; aspect-ratio: 1; margin: 4px auto 10px; border-radius: 16px; font-size: 22px; }
.files-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-meta { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-card .q-actions { margin-top: 12px; }
.files-add { display: inline-flex; align-items: center; gap: 6px; }
.files-status:empty { display: none; }
.files-view { display: block; max-width: 100%; max-height: 52vh; margin: 0 auto 10px; border-radius: 12px; object-fit: contain; }
input.f.files-rename, .exp-row input.f { margin: -2px 0 6px; min-height: 44px; border: 2px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line); }
input.f.files-rename:focus, .exp-row input.f:focus { border-color: transparent; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.exp-row input.f { margin-bottom: -2px; }
.files-sheet .sc-shd h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-privacy='on'] :is(.files-tile img, .files-name, .files-view, .files-rename, .files-status, .files-undo > span, .files-sheet .sc-shd h3) { filter: blur(5px); user-select: none; }
/* Загрузчик переписки WhatsApp: имя файла экспорта это имя пациента («Мария QA-чат.txt»), итог
   «Дополнено: Мария» тоже. Кнопки «Выбрать файл» и «Открыть» остаются читаемыми
   (находка проверяющего R-20261003-T-hotfix-1-3c8979a-01 F2). */
[data-privacy='on'] :is(.exp-row b, .exp-row .note-hint) { filter: blur(5px); user-select: none; }
.files-sheet { max-width: 560px; margin-left: auto; margin-right: auto; }
.files-sheet .files-h { margin-top: 6px; }
/* П38d d3m: «до операции | после операции» под своим заголовком, до кнопок тот же отступ 10, что у папок. */
.files-sheet .files-mark { margin: 0 0 10px; }
.files-undo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; }
/* Длинное имя переносится, «Вернуть» всегда в карточке (было: имя выталкивало кнопку за край). */
.files-undo > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.files-undo .btn { flex: 0 0 auto; }

/* пусто */
.sc-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 18px 16px; }
.sc-empty .illo { width: 112px; height: 112px; }
.sc-empty b { font-size: 16.5px; text-wrap: balance; color: var(--ink); }
.sc-empty p { margin: 0; color: var(--muted); font-size: 14px; max-width: 34ch; }
.sc-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-acts .btn { flex: 1 1 auto; }
/* Над рядом кнопок 12 (П25): промежуток листа 8 и ещё 4. «Оплатили» в листе события - во всю ширину, как соседние. */
.sc-stack > .sc-acts, .sc-evbody > .sc-acts, .sc-evbody > .sc-docbtn { margin-top: 4px; }
.sc-evbody > .pm-paid { margin: 4px 0 0; }


/* листы снизу */
.sc-veil { z-index: 30; }
.sc-sheet { position: fixed; z-index: 31; left: 50%; transform: translateX(-50%); bottom: 0; width: min(560px, 100%); max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 22px 22px 0 0; margin: 0; animation: sc-up var(--dur-3) var(--ease-out);  overflow-x: hidden; }
@media (min-width: 900px) { .sc-sheet { bottom: auto; top: 7vh; border-radius: 20px; max-height: 86vh; animation: sc-pop var(--dur-2) var(--ease-out); } }
@keyframes sc-up { from { transform: translate(-50%, 24px); opacity: .6; } }
.card.sheet.sc-sheet { padding: 8px 14px calc(12px + max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px))); }
@keyframes sc-pop { from { transform: translate(-50%, 8px); opacity: 0; } }
.sc-grab { width: 40px; height: 4px; border-radius: 3px; background: var(--line); margin: 2px auto 6px; }
.sc-shd { display: flex; align-items: center; gap: 8px; min-height: var(--h-s); margin: 0 0 10px; }
.sc-shd h3 { margin: 0; flex: 1; font-size: 16px; text-wrap: balance; color: var(--ink); text-transform: none; letter-spacing: normal; font-weight: 700; }
.sc-back { position: relative; border: 0; background: none; color: var(--tab-on); font: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; min-height: var(--h-s); border-radius: 8px; cursor: pointer; }
.sc-back::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.sc-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sc-form > .sc-shd, .sc-stack > .sc-shd, .sc-evbody > .sc-shd, .tdo-sheet > .sc-shd { margin-bottom: 2px; }
.pl-picker-body > :first-child { margin-top: 0; }
.pl-picker-body > .sheet-item + .sheet-item { margin-top: 4px; }
.pl-picker-body > :last-child { margin-bottom: 0; }
/* T-p25 точка 4 (П25 п. 5): выпадающие нашим листом (PLAN_UI.selectSheet). Кнопка 40 (34 у size:'s') вторичная, с краем
   и галкой вниз, текст выбранного в одну строку; системный select спрятан в обёртке. В листе строки 40 во всю ширину,
   выбранная с рамкой, заливкой и галочкой; поиск над списком, когда строк больше 12; подписи групп мелко. */
.pl-pick-wrap { display: block; min-width: 0; }
select.pl-pick-src { display: none !important; }
.btn.pl-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: var(--h-m, 40px); box-sizing: border-box;
  padding: 0 10px 0 12px; margin: 0; border: 1px solid var(--line); border-radius: var(--r-m, 12px); background: var(--field); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 500; text-align: left; }
.btn.pl-pick.pl-pick-s { min-height: var(--h-s, 34px); padding: 0 8px 0 10px; border-radius: var(--r-s, 10px); font-size: 14px; }
.pl-pick .pl-pick-t, .pl-pick-row .pl-pick-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pick .pl-pick-c { width: 16px; height: 16px; color: var(--muted); stroke-width: 2.2; }
.btn.pl-pick:disabled { opacity: .55; }
.pl-pick-list { display: grid; gap: 4px; }
.pl-picker-body.pl-pick-list > .sheet-item + .sheet-item { margin-top: 0; }
.btn.sheet-item.pl-pick-row { justify-content: space-between; gap: 8px; padding: 0 10px 0 12px; border-color: var(--line); background: var(--field); }
.btn.sheet-item.pl-pick-row[aria-selected='true'] { border-color: var(--accent); background: var(--gold-soft, var(--field)); }
.pl-pick-ck { width: 18px; height: 18px; color: var(--accent); stroke-width: 2.4; visibility: hidden; }
.pl-pick-row[aria-selected='true'] .pl-pick-ck { visibility: visible; }
[data-theme='light'] .pl-pick-ck { color: var(--tab-on); }
.pl-pick-g { margin: 8px 2px 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.pl-pick-list > .pl-pick-g:first-child { margin-top: 0; }
/* Поле поиска листа выбора: видимые 40, палец 44 (T-fix-press-edge-2, малая доводка) тем же приёмом, что .f.pr-search: рамка 2 px
   прозрачная поверх заливки (background-clip), видимая рамка 1 px тенью внутрь, отступы -2 держат раскладку. */
.f.pl-pick-find { width: calc(100% + 4px); box-sizing: border-box; min-height: 44px; margin: -2px -2px 6px; padding: 0 12px; border: 2px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; }
.f.pl-pick-find:focus { border-color: transparent; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pl-pick-row[hidden], .pl-pick-g[hidden] { display: none; }
/* Статус в карточке (T-p25 точка 2): тон статуса теперь на видимой кнопке, как был на select; «Вид» в «Датах и
   напоминаниях» держит прежние 10 до «Когда». */
.stage-row > .pl-pick-wrap { flex: 1; min-width: 0; }
.btn.pl-pick.stage-btn { font-weight: 600; }
.btn.pl-pick.stage-btn[data-tone]:not([data-tone='none']) { border-color: transparent; box-shadow: inset 0 0 0 1px var(--st-c); background-color: color-mix(in srgb, var(--st-c) 14%, transparent); }
#task-box > .fold-body > .fold-inner > .pl-pick-wrap { margin-bottom: 10px; }
/* «Печать»: «Неделя / Месяц» и «Работа / Личное» кнопками 34 над PDF и Excel; ряды через 10, чтобы пальцы 44 соседних
   рядов не наезжали (при 8 у верхнего ряда оставалось 42). */
.sc-dlrow { row-gap: 10px; }
.sc-stack.tight { gap: 4px; }
.sc-small { font-size: 12.5px; color: var(--faint); margin: 0; }

/* событие */
.sc-evbody { display: grid; gap: 8px; }
.sc-evk { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); flex: 1; }
.sc-evk .dotk { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.sc-evk.k-checkup .dotk { background: none; box-shadow: inset 0 0 0 2px var(--c); border-radius: 50%; }
.sc-who { position: relative; border: 0; background: none; padding: 0; text-align: left; display: flex; align-items: center; gap: 4px; font: inherit; font-size: 21px; font-weight: 750; line-height: 1.2; color: var(--ink); min-height: 32px; cursor: pointer; }
div.sc-who { cursor: default; }
.sc-from { color: var(--muted); font-size: 14px; margin: 1px 0 6px; }
.sc-purpose { font-size: 15px; margin: 0 0 4px; color: var(--ink); }
.sc-when { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
/* Строка даты в окне события слева, как название над ней (Макс 05.10: «смести налево, чтобы начиналась слева, а не в
   середине»). По центру остаётся только кнопка «Когда» в форме события (button.sc-when, правило выше). */
div.sc-when { text-align: left; }
/* Подсказка срока в личном названии. Обновляется только этот узел. */
.sc-when-hint { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sc-when-hint[hidden] { display: none; }
.sc-when-apply { min-height: var(--h-m); border: 1px solid var(--line); background: var(--field); }
.sc-rdy { border-radius: 16px; padding: 12px; border: 1.5px solid var(--line); background: var(--field); display: grid; gap: 8px; }
.sc-rdy.g { border-color: color-mix(in srgb, var(--grn) 45%, var(--line)); background: color-mix(in srgb, var(--grn) 6%, var(--panel-solid)); }
.sc-rdy.y { border-color: color-mix(in srgb, var(--yel) 55%, var(--line)); background: color-mix(in srgb, var(--yel) 7%, var(--panel-solid)); }
.sc-rdy.r { border-color: var(--red); border-width: 2px; background: color-mix(in srgb, var(--red) 7%, var(--panel-solid)); }
.sc-rdy .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sc-rdy .top b { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-rdy .st { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.sc-rdy .miss { font-size: 13.5px; color: var(--muted); }
.sc-rdy .grp { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.sc-ck { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--h-m); box-sizing: border-box; padding: 4px 10px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--panel-solid); text-align: left; font: inherit; font-size: 15px; color: var(--ink); width: 100%; cursor: pointer; }
.sc-ck .box { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: 0 0 auto; color: transparent; }
.sc-ck[aria-checked='true'] .box { background: var(--grn); border-color: var(--grn); color: var(--panel-solid); }
.sc-ck[disabled] { opacity: .6; cursor: default; }
.sc-ck .tx { display: grid; gap: 1px; min-width: 0; }
.sc-ck .tx small { font-size: 12.5px; color: var(--muted); }
.sc-ck.auto { cursor: help; }
.sc-sugg { display: flex; gap: 8px; align-items: center; font-size: 13.5px; padding: 8px 10px; border-radius: 12px; color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.sc-sugg span { flex: 1; min-width: 0; }
.sc-kv { display: grid; }
.sc-kv .r { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.sc-kv .r:last-child { border-bottom: 0; }
.sc-kv .r > span { color: var(--muted); flex: 0 0 auto; }
.sc-kv .r > b { font-weight: 600; text-align: right; min-width: 0; color: var(--ink); }
.sc-kv .r.sub > span { padding-left: 12px; color: var(--ink); flex: 1; min-width: 0; }
.sc-kv .r.sub > b { color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.sc-trip-box { display: grid; gap: 6px; }
.sc-trip { display: flex; flex-wrap: wrap; gap: 10px 6px; }
.sc-trip .chip.cur { border-color: var(--c); color: var(--ink); font-weight: 700; }
.sc-hist { display: grid; gap: 8px; }
.sc-feed { display: grid; gap: 8px; }
.sc-fl { font-size: 13px; color: var(--muted); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; }
.sc-fl.link { position: relative; border: 0; background: none; text-align: left; font: inherit; font-size: 13px; color: var(--muted); padding: 6px 0; cursor: pointer; min-height: var(--h-m); }
.sc-fl time { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-bub { background: var(--field); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 8px 11px; font-size: 14px; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.sc-bub small { display: block; color: var(--faint); font-size: 12px; margin-bottom: 2px; white-space: normal; }
.sc-compose { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: calc(-12px - max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px))); background: var(--panel-solid); padding: 8px 0 4px; }
.sc-compose textarea { flex: 1; min-height: 44px; max-height: 120px; margin: 0; font-size: 16px; }

/* лист дня из месяца */
.sc-pk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.sc-pkrow { position: relative; display: flex; gap: 8px; align-items: center; min-height: var(--h-m); box-sizing: border-box; padding: 4px 10px; border-radius: var(--r-m); border: 0; text-align: left; font: inherit; font-size: 14px; color: var(--ink); width: 100%; cursor: pointer;
  background: color-mix(in srgb, var(--c) 11%, var(--panel-solid)); box-shadow: inset 3px 0 0 var(--c); }
.sc-pkrow.k-checkup, .sc-untimed.k-checkup { background: var(--panel-solid); box-shadow: none; border: 1.5px dashed var(--c); }
.sc-pkrow .tm { font-variant-numeric: tabular-nums; color: var(--muted); flex: 0 0 56px; font-size: 13px; font-weight: 600; }
.sc-pkrow .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* календари */
.sc-calrow { position: relative; display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--field); min-height: var(--h-m); box-sizing: border-box; font: inherit; line-height: 20px; color: var(--ink); cursor: pointer; }
.sc-calrow .sc-ico { margin-top: 2px; color: var(--tab-on); }
.sc-calrow .t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.sc-calrow .t span { font-size: 12px; line-height: 16px; color: var(--muted); }
.sc-calrow.off > .sc-ico, .sc-calrow.off b { opacity: .55; }
.sc-calrow .tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.sc-calrow .ok { color: var(--grn); }
.sc-linkrow { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--h-m); padding: 6px 4px; box-sizing: border-box; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
.sc-linkrow span { flex: 1; }
.sc-linkrow small { color: var(--faint); font-size: 12.5px; }

/* добавление и правка */
.sc-kgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.sc-kt { position: relative; display: flex; align-items: center; gap: 8px; min-height: var(--h-m); box-sizing: border-box; padding: 6px 10px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--field); text-align: left; font: inherit; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink); cursor: pointer; }
.sc-kt::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.sc-kt:hover { background: var(--strong); }
.sc-kt .sc-kico.si { width: 20px; height: 20px; }
.sc-form { display: grid; gap: 8px; }
.sc-fld { display: grid; gap: 0; margin: 0; }
.sc-fld > label, .sc-fld .fl-l, .pm-field > span, .ex-field > span, .ei-field > span, .gl-fld > span, .bc-template-field > span { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); padding-bottom: 4px; }
/* Внутри поля: сразу под подписью вплотную (её нижний отступ 4 и есть промежуток), остальное через 8 (чипы 34 рядом с
   полем 40: накладки не сходятся), ошибка и подсказка через 4. */
.sc-fld > * + * { margin-top: 8px; }
.sc-fld > label + *, .sc-fld > .fl-l + * { margin-top: 0; }
.sc-fld > .sc-err, .sc-fld > .sc-small { margin-top: 4px; }
.sc-fld select, .sc-fld .f { margin: 0; }
/* Пустой блок найденных под «Клиентом» не держит места (П25: 31 px пустоты). */
.found:empty { display: none; }
.sc-fld textarea, .sc-fld input.f { margin: 0; }
.sc-fld input[aria-invalid='true'], .sc-fld textarea[aria-invalid='true'] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.sc-fld input:disabled { opacity: .5; }
.sc-req { color: var(--red); }
.sc-err { color: var(--red); font-size: 13px; font-weight: 600; margin: 0; }
.sc-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: end; }
.sc-two.center { align-items: center; }
.sc-two .end { justify-self: end; }
.sc-ticks { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: -4px; }
.sc-tick { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; min-height: var(--h-m); color: var(--ink); }
.sc-tick::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.sc-seg.sm button { min-width: 44px; }
.sc-tick.top { align-items: flex-start; padding-top: 8px; }
.sc-tick input { width: 20px; height: 20px; accent-color: var(--accent-strong); flex: 0 0 auto; margin: 0; }
.sc-tick small { display: block; color: var(--muted); font-size: 12.5px; }
/* «Удалить всю поездку» (Макс 29.09): список событий поездки под чертой, каждое на своей строке. */
.sc-deltrip { display: grid; gap: 4px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.sc-deltrip .sc-tick { display: flex; min-height: var(--h-m); }
.sc-deltrip .btn { margin-top: 8px; }
.sc-deltrip > .sc-h2 { margin: 0 2px 4px; }
.sc-sheet .btn[aria-disabled="true"] { opacity: .55; cursor: default; }
/* Календарь в карточке клиента (Макс 29.09): без места под плавающий «+», лента дня ниже,
   события клиента с рамкой акцента, чужие бледнее - видно, где занято. */
.sc.sc-card { padding-bottom: 0; }
/* Вид - сверху, сразу под «Календарём», во всю ширину (Макс 30.09); на широком экране - по себе. */
.sc-card .sc-ctl > .sc-seg { flex: 1 1 auto; }
.sc-card .sc-ctl > .sc-seg button { flex: 1 1 0; }
@media (min-width: 900px) { .sc-card .sc-ctl > .sc-seg { flex: 0 0 auto; } }
/* Отбор в половине строки: на телефоне «Все врачи · 12» с человечком не влезает и режется
   многоточием. Человечка нет, стрелка и так говорит «список»; цветная точка врача остаётся. */
@media (max-width: 412px) { .sc-card .sc-docpick > svg.sc-ico.sm { display: none; } }
.sc-card .sc-tl-scroll { max-height: 420px; }
.sc-card .other { opacity: .5; }
.sc-card .sc-mbar.mine, .sc-card .sc-ev.mine, .sc-card .sc-untimed.mine { box-shadow: 0 0 0 2px var(--accent-strong); }
.sc-card .sc-stay.mine b, .sc-card .li.mine .tx, .sc-sheet .sc-pkrow.mine .tx { color: var(--accent-strong); }
.sc-sheet .sc-pkrow.other { opacity: .5; }
#cal-box .sc-month.card { box-shadow: none; }
/* T-fix-press-edge-2 R1 (В-PE2-1 = A): в календаре карточки без бокового поля месяца: ячейки 45 на 375 (было 43) той же сеткой. */
#cal-box .sc-month { padding-left: 0; padding-right: 0; }
.sc-chips { padding: 0; }
.sc-picked { display: grid; gap: 6px; }
.sc-pick { display: flex; align-items: center; gap: 8px; min-height: var(--h-m); box-sizing: border-box; padding: 2px 2px 2px 12px; border-radius: var(--r-m); background: var(--field); border: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.sc-pick b { flex: 1; font-weight: 600; min-width: 0; }
.sc-calrow::after, .sc-linkrow::after, .tdo-prio-opt::after, .sc-ready::after, .sc-today::after, .sc-link::after, .sc-ghost::after, .sc-ck::after, .sc-pkrow::after, .sc-plist button::after, .sc-toast button::after,
  .sc-allday > .sc-stay::after, .sc-allday > .sc-untimed::after, .sc-cxbox > .sc-cxrow::after, .sc-fl.link::after, button.sc-who::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.sc-pick .x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.sc-pick small { color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-pick .x { position: relative; flex: none; display: inline-grid; place-items: center; border: 1px solid var(--line); background: var(--field); color: var(--muted); padding: 0; width: var(--h-s); height: var(--h-s); border-radius: 50%; cursor: pointer; }
.sc-plist { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; padding: 2px 0; }
.sc-plist:empty { display: none; }
/* Категория и поиск процедур в одну строку; на узком телефоне - друг под другом. */
.sc-pfind { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-left: -2px; margin-right: -2px; }
.sc-pfind > .pl-pick-wrap { padding: 2px; }
.sc-pfind .f { margin: 0; min-width: 0; min-height: 44px; border: 2px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line); }
.sc-pfind .f:focus { border-color: transparent; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
@media (max-width: 360px) { .sc-pfind { grid-template-columns: minmax(0, 1fr); } }
.sc-plist button { position: relative; text-align: left; border: 0; background: none; padding: 4px 8px; border-radius: var(--r-m); font: inherit; font-size: 14.5px; color: var(--ink); display: flex; justify-content: space-between; gap: 8px; min-height: var(--h-m); box-sizing: border-box; align-items: center; cursor: pointer; }
.sc-plist button:hover { background: var(--field); }
.sc-plist button small { color: var(--muted); }
.sc-durl { font-size: 14px; font-weight: 650; color: var(--ink); }
.sc-durl:empty { display: none; }
/* Помощник поездки: список прокручивается, действие и крестик остаются на виду. */
.sc-sheet:has(.sc-trip-sheet) { display: flex; flex-direction: column; overflow: hidden; }
.sc-sheet:has(.sc-trip-sheet) > .sc-grab { flex-shrink: 0; }
.sc-trip-sheet { display: flex; flex-direction: column; min-height: 0; overflow: hidden; margin: -5px; padding: 5px; }   /* запас 5 под палец ✕ и ряда кнопок у краёв обрезки */
.sc-trip-sheet .sc-tripk { overflow-y: auto; min-height: 0; grid-auto-rows: max-content; align-content: start; overscroll-behavior: contain; }
.sc-trip-sheet > .sc-shd, .sc-trip-sheet > .note-hint, .sc-trip-sheet > .sc-acts, .sc-trip-sheet > .sc-err { flex-shrink: 0; }
.sc-tripk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.sc-tripk .row { display: grid; gap: 6px; padding: 6px 10px 8px; margin: 0; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--field); box-shadow: none; }
.sc-tripk .row.off { padding-bottom: 6px; }
.sc-tripk .hd { position: relative; display: flex; gap: 10px; align-items: center; min-height: var(--h-m); font-size: 14.5px; color: var(--ink); }
.sc-tripk .hd::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }   /* строка-галочка 40, палец 44 */
.sc-tripk .hd input { width: 20px; height: 20px; accent-color: var(--accent-strong); flex: 0 0 auto; margin: 0; }
.sc-tripk small { display: block; color: var(--muted); font-size: 12.5px; }
/* Дата и время строки помощника правятся здесь же (Макс 29.09: «чтобы мы могли сами изменить»). */
.sc-tripk .when { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-left: 30px; }
.sc-tripk .when .f { margin: 0; min-width: 0; padding: 8px 10px; font-size: 16px; min-height: var(--h-m); }  /* 16px: iOS не зумит */
/* Длинное название отеля (кнопка из вписанных раньше) переносится, а не раздвигает лист. */
.sc-chips .chip { max-width: 100%; white-space: normal; text-align: left; }
.sc-block { width: 100%; }

/* тост календаря: с «Вернуть» и паузой, пока на нём палец или фокус */
.sc-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(150px + max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px))); z-index: 40;
  background: var(--panel-solid); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px 6px 16px; min-height: 44px; box-shadow: var(--shadow);
  font-size: 14px; display: flex; gap: 8px; align-items: center; max-width: calc(100% - 32px);
  /* left: 50% оставляет «сжатой» ширине только половину экрана: длинный текст шёл в 5 строк. */
  width: max-content; box-sizing: border-box; animation: toast-in var(--dur-2) var(--ease-out) both; }
.sc-toast button { position: relative; border: 0; background: none; color: var(--tab-on); font: inherit; font-weight: 700; padding: 0 12px; min-height: var(--h-s); border-radius: var(--r-s); cursor: pointer; }

/* Строки дат в карточке отделены друг от друга и от поля вида под ними (Макс 29.09: текст «висел
   прямо на кнопке» «Напоминание»). Блок «Готов к операции» внутри - без своих полей, отступ даёт gap. */
.task-rows { display: grid; gap: 8px; }
.task-rows:not(:empty) { margin-bottom: 12px; }
.task-rows .sc-cardready { margin: 0; }
/* карточка клиента: строка даты открывает лист события, у операции - галочки */
.sc-cardrow { position: relative; cursor: pointer; display: flex; align-items: center; min-height: var(--h-m); }
.sc-cardrow::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.sc-cardrow:hover { filter: brightness(1.06); }
.sc-cardready { border-radius: 14px; padding: 10px; margin: -2px 0 10px; border: 1.5px solid var(--line); background: var(--field); display: grid; gap: 6px; }
.sc-cardready.g { border-color: color-mix(in srgb, var(--grn) 45%, var(--line)); }
.sc-cardready.y { border-color: color-mix(in srgb, var(--yel) 55%, var(--line)); }
.sc-cardready.r { border-color: var(--red); border-width: 2px; }
.sc-cardready .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sc-cardready .top b { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-cardready .chips { padding: 0; }

/* компьютер: неделя семью колонками, полосы месяца нажимаются, листы - окном по центру */
/* С 720px «Мой день» и «Задачи» раскладываются плитками в колонки (правило #day-body выше): календарь
   («Задачи → Месяцем», с П4 его нет на «Моём дне») идёт одной колонкой во всю ширину. */
@media (min-width: 720px) {
  #tasks-body > .sc-host { grid-column: 1 / -1; }
  /* Вкладка «Задачи» (П4): колонками встают списки «Сегодня / Неделя / Потом» (и люди «Команды»), переключатели,
     формы, «Сделано сегодня», «Цели» с «Лале» и подпись - строками во всю ширину; поля не растягиваются на весь экран. */
  #tasks-body > :not(.tdo-col) { grid-column: 1 / -1; }
  #tasks-body > .ev-box, #tasks-body > .tdo-tools { width: 100%; max-width: 720px; }
  #tasks-body > .tdo-seg { width: 100%; max-width: 460px; }
  #tasks-body > .tdo-col > .pl-group:first-child { margin-top: 4px; }
}
@media (min-width: 900px) {
  .sc-tl-scroll { max-height: 660px; }
  .sc-mwk { --lane: 19px; }
  .sc-mbar { pointer-events: auto; cursor: pointer; }
  .sc-mbar .lab { font-size: 11.5px; line-height: 17px; }
  .sc-mbar:hover { filter: brightness(.96); }
}

/* ---------- праздники (deliverable 49, этап C; макет v2, Макс 29.09; crm/public/party.js) ----------
   Кольцо дня в «Делах», золотая вспышка строки (светофор стал зелёным), карточка букинга поверх
   экрана, «вау» на рекорд. Слои: карточка 70/71 над листами и тостом (21) и листом календаря (31),
   конфетти 72, «вау» 80/81. Длительности только из токенов; --dur-party - только здесь. */
.ringcard { display: flex; align-items: center; gap: 14px; }
.ring { position: relative; width: 84px; height: 84px; flex: 0 0 auto; border-radius: 50%; }
.ring svg { width: 84px; height: 84px; transform: rotate(-90deg); overflow: visible; display: block; }
.ring .trk { fill: none; stroke: var(--line); stroke-width: 8; }
.ring .val { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset calc(var(--dur-party) / 2) var(--ease-out), stroke var(--dur-2) var(--ease-out); }
.ring.full .val { stroke: var(--grn); }
.ring .c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; }
.ring .c b { font-size: 22px; font-variant-numeric: tabular-nums; }
.ring .c small { display: block; font-size: 11px; color: var(--faint); margin-top: 3px; }
.ring.glow { animation: ring-glow var(--dur-party) var(--ease-out); }
@keyframes ring-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--grn) 45%, transparent); } 100% { box-shadow: 0 0 0 22px transparent; } }
.ringtx { display: grid; gap: 4px; min-width: 0; }
.ringtx b { font-size: 17px; }
.ringtx b.closed { color: var(--grn); }
.ringtx span { font-size: 13.5px; color: var(--muted); }
.ringtx small { font-size: 12px; color: var(--faint); }
/* средне: золотая вспышка строки или блока */
.p-flash { animation: p-flash var(--dur-party) var(--ease-out); }
@keyframes p-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); background-color: color-mix(in srgb, var(--accent) 22%, var(--panel-solid)); }
  100% { box-shadow: 0 0 0 12px transparent; }
}
/* Крестик праздника и имена под общим занавесом. */
.p-band{position:relative}
.p-close{position:absolute;right:12px;top:12px;color:var(--p-white);border:1px solid currentColor;background:transparent}
[data-privacy="on"] .p-who{filter:blur(7px)}
/* большое: карточка поверх экрана */
.p-veil { z-index: 70; }
.pcard {
  position: fixed; z-index: 71; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel-solid); border: 1px solid var(--edge); border-radius: 24px; box-shadow: var(--shadow);
  text-align: center; animation: p-card-in var(--dur-3) var(--ease-out) backwards;
}
@keyframes p-card-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%); } }
.p-band { background: radial-gradient(120% 140% at 50% 0%, var(--p-navy2), var(--p-navy)); color: var(--p-on-navy); padding: 22px 18px 18px; display: grid; justify-items: center; gap: 8px; }
.p-medal { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: var(--p-navy);
  background: radial-gradient(circle at 35% 30%, var(--p-gold-hi), var(--p-gold) 55%, #9A7642); box-shadow: 0 0 0 5px color-mix(in srgb, var(--p-gold-hi) 22%, transparent); }
.p-medal .illo { width: 64px; height: 64px; margin: 0; display: block; }
.p-ico { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.p-eye { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--p-gold-hi); }
.p-band h3 { margin: 0; font-size: 22px; line-height: 1.2; text-wrap: balance; color: inherit; letter-spacing: 0; text-transform: none; font-weight: 700; }
/* p-cbody, а не p-body: .p-body - тело панели ☰ (#panel .p-body), и display:grid отсюда сжимал её разделы
   в сетку фиксированной высоты - они обрезались и не раскрывались (Макс 30.09, после выкатки 4f5db5e). */
.p-cbody { padding: 14px 18px 18px; display: grid; gap: 10px; }
.p-who { font-size: 17px; font-weight: 700; }
.p-what { color: var(--muted); font-size: 14.5px; }
.p-money { font-size: 22px; font-weight: 800; color: var(--tab-on); font-variant-numeric: tabular-nums; display: grid; }
.p-money small { font-size: 12px; font-weight: 500; color: var(--faint); }
.p-note { font-size: 12.5px; color: var(--faint); }
.p-veha { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; color: var(--tab-on); }
.p-veha .p-ico { width: 18px; height: 18px; }
.p-btns { display: grid; gap: 8px; margin-top: 4px; }
.p-btns.two { grid-template-columns: 1fr 1fr; }
.p-btns .btn { justify-content: center; text-align: center; }
/* Вторая кнопка («Добавить операцию»): обычная .btn на белой карточке - белое на белом, её было
   не видно, читалась как текст (Макс 30.09 на стенде). Тот же приём, что у «Ещё» в карточке
   клиента: золотые рамка и значок, лёгкая золотая подложка, текст обычный. Золото - --tab-on:
   фирменное на белом не держит контраст (см. .btn.more); рамка плотнее, чем у «Ещё» (75%, не 55%):
   на белой карточке 55% давали 2,5:1 при норме 3:1 для края кнопки (своя проверка b8e499b). */
.p-btns .btn.p-second { color: var(--ink); border-color: color-mix(in srgb, var(--tab-on) 75%, transparent);
  background-color: color-mix(in srgb, var(--accent) 10%, var(--panel-solid)); }
.p-btns .btn.p-second:hover { background-color: color-mix(in srgb, var(--accent) 16%, var(--panel-solid)); }
.p-second span { min-width: 0; width: min-content; }
.p-second .p-ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--tab-on); }
canvas.p-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 72; }
/* полоска к денежной вехе */
.p-mbar { display: grid; gap: 6px; text-align: left; }
.p-mbar .top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); align-items: baseline; }
.p-mbar .top b { color: var(--tab-on); font-size: 14px; white-space: nowrap; }
.p-mbar .track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.p-mbar .track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #9A7642, var(--p-gold), var(--p-gold-hi));
  transform-origin: left; transition: transform calc(var(--dur-party) * .75) var(--ease-out); }
/* «вау»: рекорд побит, цель взята */
.p-wow { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; overflow: hidden; color: var(--p-on-navy);
  background: radial-gradient(90% 70% at 50% 38%, var(--p-navy2), var(--p-navy) 70%); animation: veil-in var(--dur-2) var(--ease-out) backwards;  touch-action: none; }
.p-rays { position: absolute; left: 50%; top: 38%; width: 180vmax; height: 180vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--p-gold-hi) 16%, transparent) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 52%); mask: radial-gradient(circle, #000 0 18%, transparent 52%); animation: p-spin 26s linear infinite; }
@keyframes p-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.p-wcore { position: relative; z-index: 2; width: min(380px, 100%); display: grid; justify-items: center; gap: 10px; text-align: center; }
.p-cup { position: relative; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: var(--p-navy);
  background: radial-gradient(circle at 34% 28%, var(--p-gold-hi), var(--p-gold) 55%, #9A7642);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--p-gold-hi) 18%, transparent), 0 0 60px color-mix(in srgb, var(--p-gold-hi) 45%, transparent); }
.p-cup .p-ico { width: 50px; height: 50px; stroke-width: 1.9; }
.p-shine { position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  transform: translateX(-120%); animation: p-shine var(--dur-party) var(--ease-out) calc(var(--dur-party) * .6) forwards; }
@keyframes p-shine { to { transform: translateX(120%); } }
.p-weye { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--p-gold-hi); }
.p-wow h3 { margin: 0; font-size: 28px; line-height: 1.15; text-wrap: balance; color: inherit; }
.p-wnum { font-size: 64px; font-weight: 800; line-height: 1; color: var(--p-gold-hi); display: flex; align-items: baseline; justify-content: center; }
.p-odo { display: inline-flex; align-items: baseline; gap: 10px; }
.p-odo-win { display: inline-block; height: 1em; overflow: hidden; line-height: 1; font-variant-numeric: tabular-nums; }
.p-odo-col { display: flex; flex-direction: column; transition: transform calc(var(--dur-party) * .6) var(--ease-out); }
.p-odo-col span { height: 1em; }
.p-odo-col.go { transform: translateY(-1em); }
.p-odo-u { font-size: 20px; font-weight: 700; color: var(--p-on-navy-dim); }
.p-was { font-size: 15px; color: var(--p-on-navy-dim); }
.p-strike { position: relative; }
.p-strike::after { content: ''; position: absolute; left: -4px; right: -4px; top: 55%; height: 2px; background: var(--p-gold-hi); transform: scaleX(0); transform-origin: left;
  animation: p-strike calc(var(--dur-party) * .4) var(--ease-out) calc(var(--dur-party) * .65) forwards; }
@keyframes p-strike { to { transform: scaleX(1); } }
.p-wsub { margin: 0; font-size: 15px; color: var(--p-on-navy-dim); max-width: 32ch; }
.p-wextra { font-size: 20px; font-weight: 800; color: var(--p-gold-hi); font-variant-numeric: tabular-nums; }
.p-wowok { min-width: 160px; margin-top: 6px; justify-content: center; }
canvas.p-wowfx { z-index: 81; }

/* ---------- Здоровье в карточке (deliverable 50, crm/public/app.js healthCard) ----------
   Одно поле её словами, подсказка из разбора, «Операции у нас», «Скопировать для врача». Вторая
   кнопка - по рецепту «Ещё» (золотые рамка и подложка): на белой карточке обычная .btn читается
   как текст (замечание Макса 30.09 про «Добавить операцию»). */
.med-add { display: flex; justify-content: flex-start; margin: 0 0 12px; }   /* тот же зазор, что у карточек */
.med-card textarea, #note-input { display: block; width: 100%; box-sizing: border-box; }
.med-card textarea { margin-bottom: 0; }
/* Лист «Здоровье уже поменяли» (T-fix-health-save): два текста целиком, кнопки столбиком на всю ширину. */
.med-conflict .med-cf { margin: 12px 0 0; }
.med-conflict .med-cf-label { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.med-conflict .med-cf-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 15px; margin: 0;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; max-height: 30vh; overflow: auto; }
.med-conflict .med-cf-acts { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.med-conflict .med-cf-acts .btn { width: 100%; }
.med-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 8px; border-radius: 12px;
  font-size: 13.5px; color: var(--muted); border: 1px dashed color-mix(in srgb, var(--tab-on) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--panel-solid)); }
.med-hint span { min-width: 0; flex: 1 1 180px; }
.med-empty, .med-meta { margin: 4px 0 0; }
.med-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.med-acts .btn { justify-content: center; }
.btn.med-copy, .btn.med-files { color: var(--ink); border-color: color-mix(in srgb, var(--tab-on) 75%, transparent);
  background-color: color-mix(in srgb, var(--accent) 10%, var(--panel-solid)); }
.btn.med-copy:hover, .btn.med-files:hover { background-color: color-mix(in srgb, var(--accent) 16%, var(--panel-solid)); }
.med-copybox { width: 100%; box-sizing: border-box; margin-top: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; }
.med-ops { display: grid; gap: 6px; margin-top: 14px; }
.med-h { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.med-op { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 8px 10px; border-radius: 12px; background: var(--field); font-size: 14px; }
.med-op b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.med-op span { min-width: 0; overflow-wrap: anywhere; }
.med-op small { font-size: 12px; font-weight: 600; color: var(--tab-on); }
.med-op.past small { color: var(--faint); font-weight: 500; }
.med-op { grid-template-columns: minmax(0, 1fr); }
.p36-op-top, .p36-op-proc { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.p36-op-proc > span { flex: 1; }
.p36-op-proc > small { white-space: nowrap; }
.p36-money { align-items: start; }
.sc-form[data-p36-state='ready'] > .sc-shd { position: sticky; top: 0; z-index: 2; background: var(--panel-solid); }
.med-files { margin-top: 12px; }

/* ---------- Отмена операции не теряется (crm/lib/opalerts.js, макет 49-cancel-mock, 30.09) ---------- */
/* Красные строки наверху «Дел» - тот же вид, что «не готов к операции» в «Расписании» (.sc-warn):
   кружок «!», текст, под ним кнопки. Жёлтая - «Сообщить клиенту» (врач сам отменил или перенёс). */
.att { display: grid; gap: 8px; margin: 0 0 12px; }
.att-t { margin: 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--red); }
.att-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 9px; align-items: start; padding: 10px 11px; border-radius: 14px; font-size: 14px; line-height: 1.4;
  border: 1px solid color-mix(in srgb, var(--red) 55%, var(--line)); background: color-mix(in srgb, var(--red) 9%, var(--panel-solid)); }
.att-row.info { border-color: color-mix(in srgb, var(--yel) 60%, var(--line)); background: color-mix(in srgb, var(--yel) 10%, var(--panel-solid)); }
.att-row.info .sc-bang { background: var(--yel); color: #1a1409; }
.att-row .t { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.att-row .t small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.att-row .acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.att-who { position: relative; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px; }
.att-who::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.att-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--red); color: var(--on-red, #fff); margin-left: 6px; vertical-align: 1px; }
/* Вторая кнопка на цветной плашке - как «Ещё» в карточке (золотые рамка и подложка), иначе читалась бы текстом. */
.btn.att-soft { color: var(--ink); border-color: color-mix(in srgb, var(--tab-on) 75%, transparent); background-color: color-mix(in srgb, var(--accent) 10%, var(--panel-solid)); }
.btn.att-soft:hover { background-color: color-mix(in srgb, var(--accent) 16%, var(--panel-solid)); }
/* П45: кнопка смены статуса на «Моём дне» цветом этого статуса (тот же источник, что чип в карточке). */
.btn.att-soft.st-tinted[data-tone] { border-color: var(--st-c); background-color: color-mix(in srgb, var(--st-c) 14%, var(--panel-solid)); }
.btn.att-soft.st-tinted[data-tone]:hover { background-color: color-mix(in srgb, var(--st-c) 22%, var(--panel-solid)); }
.btn.att-redo { color: var(--red); border-color: color-mix(in srgb, var(--red) 60%, transparent); background-color: var(--panel-solid); }
/* Плашки над шапкой карточки */
.op-plqs { display: grid; gap: 8px; }
.op-plqs:empty { display: none; }
.op-plqs:not(:empty) { margin-bottom: 10px; }
.op-plq { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 11px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--red) 55%, var(--line)); background: color-mix(in srgb, var(--red) 9%, var(--panel-solid)); }
.op-plq .t { flex: 1 1 220px; min-width: 0; }
.op-plq .btn { flex: 0 0 auto; }
.op-plq.info { border-color: color-mix(in srgb, var(--yel) 60%, var(--line)); background: color-mix(in srgb, var(--yel) 10%, var(--panel-solid)); }
.op-plq.done { border-color: var(--line); background: var(--field); color: var(--muted); }
/* Календарь: отменённая операция - зачёркнутая полоса; красная, пока врач не знает, серая после. */
.sc-cxbox { display: grid; gap: 6px; margin: 8px 0; }
.sc-stack > .sc-cxbox { margin: 0; }
.sc-cxrow { position: relative; display: flex; align-items: center; gap: 8px; min-height: var(--h-m); padding: 6px 10px; border-radius: var(--r-m); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; min-width: 0;
  color: var(--red); border: 1.5px solid color-mix(in srgb, var(--red) 60%, var(--line));
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--red) 14%, var(--panel-solid)) 0 6px, color-mix(in srgb, var(--red) 5%, var(--panel-solid)) 6px 12px); }
.sc-cxrow .x { font-weight: 800; flex: 0 0 auto; }
.sc-cxrow s { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration-thickness: 1.5px; }
.sc-cxrow .st { margin-left: auto; font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.sc-cxrow.done { color: var(--faint); border-color: var(--line); background: var(--field); }
.sc-cxrow.sm { min-height: 30px; padding: 3px 6px; font-size: 11.5px; gap: 4px; }
.sc-cxrow.sm .st { display: none; }
.sc-wrow .li.cx { color: var(--red); }
.sc-wrow .li.cx.done { color: var(--faint); }
.sc-wrow .li.cx .tm { color: inherit; font-weight: 800; }
.sc-wrow .li.cx s { text-decoration-thickness: 1.5px; }
.sc-mbar.one.cx { color: var(--red); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--red) 22%, var(--panel-solid)) 0 5px, color-mix(in srgb, var(--red) 8%, var(--panel-solid)) 5px 10px);
  box-shadow: inset 0 0 0 1.5px var(--red); }
.sc-mbar.one.cx.done { color: var(--faint); background: color-mix(in srgb, var(--faint) 16%, var(--panel-solid)); box-shadow: none; }
.sc-mbar.one.cx .lab { color: inherit; text-decoration: line-through; }
.sc-cxhead { display: grid; gap: 4px; padding: 11px 12px; border-radius: 14px; font-size: 14px; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--red) 55%, var(--line)); background: color-mix(in srgb, var(--red) 9%, var(--panel-solid)); }
.sc-cxhead span { color: var(--muted); }
.sc-cxhead.done { border-color: var(--line); background: var(--field); }
.sc-docstep { display: grid; gap: 8px; margin-top: 4px; padding: 11px; border-radius: 14px; background: var(--field); border: 1px solid var(--line); font-size: 14px; }
[data-privacy='on'] :is(.att-row .t, .op-plq .t, .sc-cxrow s, .sc-wrow .li.cx s, .sc-cxhead b) { filter: blur(5px); user-select: none; }
/* На компьютере «Мой день» - плитки в колонки: красные строки - полосой во всю ширину над ними,
   сами строки - своими колонками, чтобы не стоять узкой лентой в одной клетке. */
@media (min-width: 720px) {
  #day-body > .att { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  #day-body > .att > .att-t { grid-column: 1 / -1; }
}
/* Листы календаря: вторые кнопки («Перенести», «Изменить», «Карточка», «Открыть день», «Не удалять»...) -
   с золотой рамкой, как «Ещё» в карточке: обычная .btn на белом листе читалась текстом (Макс 30.09:
   «обводку золотой рамкой»). «Удалить» - красной рамкой, главная золотая кнопка - как была. */
.sc-sheet .btn:not(.go) { color: var(--ink); border-color: var(--line); background-color: var(--field); }
.sc-sheet .btn:not(.go):hover { background-color: var(--strong); }
.sc-sheet .btn:not(.go) .sc-ico { color: var(--tab-on); }
.sc-sheet .btn.warn, .sc-sheet .btn.att-redo { color: var(--red); border-color: color-mix(in srgb, var(--red) 60%, transparent); background-color: var(--panel-solid); }
.sc-sheet .btn.warn .sc-ico, .sc-sheet .btn.att-redo .sc-ico { color: var(--red); }

/* Author-only long term aims. */
/* ================================================================ ЦЕЛИ (П6, Макс 05.10 15:25)
   Отдельный экран: «+ Цель», строка-ссылка на цель месяца, карточки трёх видов с одной полоской и одним действием. */
#goals-body { max-width: 720px; }
.gl-top { display: grid; gap: 10px; margin-bottom: 12px; }
.gl-lead { margin: 0; color: var(--muted); font-size: 14px; }
.gl-add { width: 100%; }
.gl-month { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 12px; min-height: 56px; text-decoration: none; color: var(--ink); }
.gl-mt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.gl-mt b { font-size: 15px; }
.gl-mt span { color: var(--muted); font-size: 13px; }
.gl-go, .gl-hist summary { color: var(--accent); }
[data-theme='light'] .gl-go, [data-theme='light'] .gl-hist summary { color: var(--tab-on); }
.gl-go { flex: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.gl-card { padding: 14px; margin-bottom: 12px; display: grid; gap: 10px; overflow-wrap: anywhere; min-width: 0; }
.gl-head { display: flex; align-items: center; gap: 8px; }
.gl-head h3 { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 700; }
.gl-kind { flex: none; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--muted); white-space: nowrap; }
.gl-more { position: relative; flex: none; width: var(--h-s); height: var(--h-s); padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--field); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.gl-more::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.gl-more .ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
.gl-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gl-big b { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.gl-big span { color: var(--muted); font-size: 14px; }
.gl-bar { position: relative; height: 8px; border-radius: 4px; background: var(--field); border: 1px solid var(--line); }
.gl-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width var(--dur-3) var(--ease-out); }
.gl-plan { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--muted); }
.card p.gl-line, p.gl-line { margin: 0; font-size: 14px; color: var(--muted); white-space: normal; }
.gl-status { margin: 0; color: var(--muted); font-size: 13px; }
.gl-status:empty { display: none; }
.gl-acts { display: grid; gap: 6px; }
.gl-acts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gl-acts .btn, .gl-card > .gl-acts .btn { width: 100%; margin: 0; }
/* «+ Шаг» и «Лале, предложи шаги» одной строкой S 34 (П25 п. 12): «+ Шаг» узкая слева, вторая на остальное. */
.gl-acts.gl-ask { display: flex; gap: 6px; }
.gl-card > .gl-ask .btn { min-height: var(--h-s); padding: 0 12px; border-radius: var(--r-s); font-size: 13.5px; line-height: 18px; }
.gl-card > .gl-ask .btn:first-child { flex: none; width: auto; }
.gl-card > .gl-ask .btn:last-child { flex: 1 1 auto; min-width: 0; }
#bot .gl-acts.gl-ask { flex-wrap: wrap; row-gap: 10px; }
#bot .gl-card > .gl-ask .btn { white-space: nowrap; }
#bot .gl-card { padding: 10px 12px; }
#bot .gl-acts .btn { padding-left: 8px; padding-right: 8px; }
.gl-hist summary { position: relative; min-height: var(--h-m); display: flex; align-items: center; font-weight: 600; font-size: 14px; cursor: pointer; }
.gl-hist summary::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.gl-hist-body { display: grid; gap: 4px; }
.gl-table { width: 100%; font-size: 13px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gl-table td, .gl-table th { text-align: left; padding: 6px; border-bottom: 1px solid var(--line); }
.gl-week { display: flex; gap: 22px; flex-wrap: wrap; }
.gl-day { display: grid; justify-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.gl-day.today span { color: var(--ink); font-weight: 700; }
.gl-day .tdo-cb:disabled { opacity: .45; cursor: default; }
.gl-step { display: flex; align-items: center; gap: 10px; min-height: var(--h-m); padding-top: 4px; border-top: 1px solid var(--line); }
/* Галочка шага у левого края карточки: накладка 44 не выходит за поле карточки 14 (overflow: hidden резал её до 43). */
.gl-step .tdo-cb::before { inset: -11px -9px -11px -13px; }
.gl-st { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.gl-st b { font-size: 15px; font-weight: 600; }
.gl-st .tdo-tag { justify-self: start; }
.gl-step.is-done .gl-st b { text-decoration: line-through; color: var(--faint); }
.gl-step .tdo-pr { width: 30px; height: 30px; cursor: default; }
.gl-proposal { display: grid; gap: 8px; }
.gl-name { margin: 0 0 4px; font-weight: 700; }
.gl-types { display: grid; gap: 6px; }
.sc-kt.gl-type { display: grid; justify-items: start; gap: 2px; }
.sc-kt.gl-type[aria-pressed='true'] { border-color: var(--accent); background: var(--gold-soft); }
.gl-type small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.gl-fld { display: grid; }
.gl-nums { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
.gl-nums.two { grid-template-columns: 1fr 1.3fr; }
.gl-due, .gl-time { width: 100%; margin: 0; }
.gl-note { margin: 0; color: var(--muted); font-size: 13px; }
.gl-kind-fields { display: grid; gap: 8px; }
/* Семь дней одной строкой и на 375, как дни окна «Повтор» (.rp-days): раньше «вс» уезжал один на всю ширину.
   Нажатие во всю колонку (на 375 около 44 px): кнопки встык, без промежутка и без накладок, видимая плашка отступает
   на 2 px прозрачной рамкой (рамка плашки - тень внутрь). Мёртвой зоны между днями нет. Отклик - цвет плашки, кнопка не
   сжимается: сжатие уводило бы край нажатия (UI-RULES, нажатия; проверка T-p7b F7). */
/* Ряд шире на 2 px с каждой стороны: колонка на 375 - 44 px, а видимые плашки ровно по краю остальных полей окна. */
.gl-wd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin-left: -5px; margin-right: -5px; padding: 0; border: 0; background: none; min-height: 0; max-width: none; }
.gl-wd .seg-btn { min-width: 0; min-height: 44px; padding-left: 2px; padding-right: 2px; border: 2px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line); }
.gl-wd .seg-btn[data-on='1'] { border-color: transparent; box-shadow: inset 0 0 0 1px var(--accent-strong); }
/* Отклик нажатия виден в обеих темах (в светлой --strong равен --field): плашка темнеет к цвету текста; у выбранного дня
   плашка чуть темнее своим же цветом - контраст надписи не падает (белое на --accent-strong в светлой 4,16). */
.gl-wd .seg-btn:active { transform: none; }
.gl-wd .seg-btn:not([data-on='1']):active { background-color: color-mix(in srgb, var(--ink) 12%, var(--field)); color: var(--ink); }
.gl-wd .seg-btn[data-on='1']:active { filter: brightness(.94); }
/* Подпись дела под кружком: до двух строк, полное название - в подсказке и в названии кнопки для чтеца. */
.gl-day small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 76px; overflow: hidden; overflow-wrap: anywhere; line-height: 1.2; font-size: 11px; color: var(--muted); text-align: center; }
.gl-steps-edit { display: grid; gap: 8px; }
.gl-srow { display: flex; gap: 8px; align-items: center; }
.gl-srow .f { flex: 1 1 auto; min-width: 0; margin: 0; }
.gl-srow .when-btn { flex: none; width: auto; margin: 0; }
.gl-x { position: relative; flex: none; display: grid; place-items: center; width: var(--h-s); height: var(--h-s); padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--field); color: var(--muted); cursor: pointer; }
.gl-x::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.gl-sheet-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* П7: карточка Лале «Поняла так» - строки черновика цели нажимаются и правят одну строку. */
.gl-drows { display: grid; gap: 4px; }
.gl-drow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; min-height: var(--h-m); padding: 6px 2px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.gl-drow::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.gl-drow b { grid-column: 1; font-size: 15px; font-weight: 600; }
.gl-drow small { grid-column: 1; color: var(--muted); font-size: 12.5px; }
.gl-drow .gl-go { grid-column: 2; grid-row: 1 / span 2; }
.gl-heard { margin: 0; color: var(--muted); font-size: 12.5px; }
.gl-honest { margin: 0; color: var(--muted); font-size: 12.5px; }
.aim-dialog form { display: grid; gap: 8px; }

/* Client payments, T6a. */
.pm-card { margin: 12px 0; min-width: 0; overflow-wrap: anywhere; }
.pm-card h3, .pm-reminders h3 { margin: 0 0 10px; }
.pm-total { font-weight: 600; }
.pm-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.pm-row > div { min-width: 0; }
.pm-row small { display: block; margin-top: 4px; color: var(--muted); }
.pm-row p { white-space: pre-wrap; margin: 6px 0; }
.pm-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pm-history { margin-top: 4px; color: var(--muted); font-size: 13px; }
/* «История оплаты» и «История расходов»: шапка 40, палец 44 накладкой (T-fix-sec-40, как details.sec > summary). Открытая история
   прокручивается своим блоком (overflow-y: auto ниже) и режет накладку над шапкой, поэтому у открытой накладка идёт вниз
   (0 / -4) и зазор под шапкой 4: накладка кончается на верхнем крае первой строки. */
/* Строка 20 при 10 сверху и снизу: текст 13 px по центру 40 (круг 2, P3: при обычной высоте строки снизу оставалось 11,15). */
.pm-history > summary { position: relative; padding: 10px 0; min-height: var(--h-m); line-height: 20px; box-sizing: border-box; cursor: pointer;
  list-style: none; display: flex; align-items: center; gap: 8px; }
.pm-history > summary::-webkit-details-marker { display: none; }
.pm-history > summary::after { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
.pm-history[open] > summary { margin-bottom: 4px; }
.pm-history[open] > summary::after { top: 0; bottom: -4px; }
.pm-card > .fold-body > .fold-inner > .btn { margin: 0 0 10px; }
.pm-history[open] { max-height: 220px; overflow-y: auto; }
.pm-form { display: flex; flex-direction: column; min-height: 0; }
/* Три кнопки ряда («Изменить оплату», «Изменить расход»): главная во всю ширину, под ней две через 6. */
.pm-form .pl-acts:has(> :nth-child(3)), .ex-actions:has(> :nth-child(3)) { flex-wrap: wrap; }
.pm-form .pl-acts:has(> :nth-child(3)) > .go, .ex-actions:has(> :nth-child(3)) > .go { flex-basis: 100%; }
.pm-fields { display: grid; gap: 8px; }
.pm-fields > p { margin: 0; }
.pm-fields > .pm-error:empty { display: none; }
.pm-history .btn { flex-shrink: 0; }
/* Строка состояния у «Вернуть» пуста, пока ничего не происходит: без этого под «оплата удалена» оставалось около 40 px. */
.pm-history .pm-error:empty { display: none; }
.money-rate-hint { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.money-rate-hint:empty { display: none; }
.ei-toolbar, .ei-head, .ei-values, .ei-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ei-toolbar { justify-content: space-between; margin-bottom: 16px; }
.ei-toolbar > p { flex: 1 1 180px; }
.ei-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.ei-row { min-width: 0; margin: 0; }
.ei-head { justify-content: space-between; }
.ei-title { margin: 0; flex: 1 1 130px; overflow-wrap: anywhere; }
.ei-hint { color: var(--muted); font-size: 14px; line-height: 1.5; }
/* П11 (T-p11): значок и название обычным шрифтом, переключатель как в меню ☰ (ручка едет за --dur-press на --spring),
   цена одной кнопкой с единицей, «Скрыть» маленькой кнопкой (.mini-btn, накладка 44 px). */
.ei-head { flex-wrap: nowrap; gap: 10px; }
.ei-head > .si { width: 26px; height: 26px; }
.ei-row .ei-title { font-size: 16px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.ei-sw { flex: 0 0 auto; display: grid; place-items: center; width: 52px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.ei-sw:disabled { opacity: .5; cursor: default; }
/* Тумблер 44 × 24 в строке-кнопке (П25): статьи расходов и «Клиента ведёт Шенель», те же числа, что #panel .sw. */
.pr-sw .sw, .ex-shenel .sw, .ex-massage .sw, .ei-sw .sw { position: relative; flex: 0 0 44px; width: 44px; height: 24px; box-sizing: border-box; border-radius: 999px; background: color-mix(in srgb, var(--muted) 75%, transparent); border: 1px solid transparent; transition: background-color var(--dur-1) var(--ease-out); }
.pr-sw .sw::after, .ex-shenel .sw::after, .ex-massage .sw::after, .ei-sw .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur-press) var(--spring); }
.pr-sw .sw.on, .ex-shenel[aria-checked='true'] .sw, .ex-massage[aria-checked='true'] .sw, .ei-sw .sw.on { background: var(--accent); border-color: var(--accent-strong); }
.pr-sw .sw.on::after, .ex-shenel[aria-checked='true'] .sw::after, .ex-massage[aria-checked='true'] .sw::after, .ei-sw .sw.on::after { transform: translateX(20px); }
.ei-sw:focus-visible { outline: none; }
.ei-sw:focus-visible .sw { box-shadow: 0 0 0 2px var(--accent); }
.ei-values { flex-wrap: nowrap; }
.ei-row .btn.ei-price { flex: 0 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
.ei-row .btn.ei-price.empty { color: var(--accent-strong); }
/* В светлой теме золото текстом - читаемым --tab-on (R-20261006-T-p11-b601c207-01: --accent-strong на кнопке 3,69:1). */
[data-theme='light'] .ei-row .btn.ei-price.empty { color: var(--tab-on); }
.ei-row .ei-hide { color: var(--muted); }
.ei-edit { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin-top: 12px; }
.ei-edit .ei-actions { gap: 6px; margin-top: 4px; }   /* над рядом 12 (8 сетки + 4): накладки выбора валюты и кнопок не сходятся */
.ei-field { display: block; min-width: 0; }
.ei-field > span { display: block; }
.ei-field .f { width: 100%; box-sizing: border-box; margin: 0; }
.ei-field .f[aria-invalid='true'] { border-color: var(--red); }
.ei-error { color: var(--red); font-size: 14px; margin: 8px 0 0; }
.ei-error:empty { display: none; }
.ei-hidden { border-style: dashed; }
.ei-sheet .ei-field { margin-bottom: 8px; }
/* T-p15c п. 5: формы «Цен» по UI-RULES: кнопки формы 40 одним рядом («Сохранить» шире, «Отмена» не уже 112, промежуток 6);
   «+ Статья» в полосе сверху S 34; «Скрыть» S 34 общим .mini-btn. */
.ei-actions .btn.go { flex: 1 1 auto; }
.ei-actions .btn:not(.go) { flex: 0 0 auto; min-width: 112px; }
.ei-toolbar > .btn.ei-add { min-height: var(--h-s); padding: 0 12px; border-radius: var(--r-s); font-size: 13.5px; }
/* F6 круга 2: у S 34 накладка -6 от внутреннего края рамки (снаружи 5): палец 44; общая -5 на «Ценах» рассчитана на кнопки 40. */
.pr-page .ei-toolbar > .btn.ei-add::after { inset: -6px 0; }
.pr-assist .pl-acts .btn.go { flex: 1 1 auto; }
.pr-assist .pl-acts .sheet-cancel { flex: 0 0 auto; min-width: 112px; }
/* Четыре цены трансфера аэропорта (п. 4): две строки 12.5 в карточке; в форме строка аэропорта и два поля 40 в одну линию. */
.ei-hint.ei-air, .pr-costs .ei-hint.ei-air { display: grid; gap: 2px; font-size: 12.5px; line-height: 1.4; }
.ei-airport { display: grid; gap: 4px; }
.ei-aname { font-size: 12.5px; line-height: 16px; font-weight: 700; color: var(--ink); }
.ei-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
/* Значок своей статьи (п. 9, Макс 07.10 18:55): полоса с прокруткой вбок, кружки 52 (исключение UI-RULES 3: полоса листается
   пальцем, накладки 44 не нужны), выбранный с кольцом акцента; отступ 3 даёт место кольцу внутри прокрутки. */
.ei-icof > span { display: block; }
.ei-iconame { font-weight: 400; }
.ei-icons { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 3px; margin: 0 -3px; }
.ei-icons::-webkit-scrollbar { display: none; }
.ei-ico { flex: 0 0 52px; width: 52px; height: 52px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--field); color: var(--ink); display: grid; place-items: center; cursor: pointer;
  transition: box-shadow var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.ei-ico .si { width: 28px; height: 28px; }
.ei-ico[aria-pressed='true'] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ei-ico:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--accent); }
/* Строка листа выбора со значком статьи (planner-ui selectSheet, data-icon). */
.pl-pick-row > .si { width: 22px; height: 22px; flex: none; margin-right: 8px; }
/* T-fix-transfer-label: строка листа выбора в две строки (option data-main / data-sub) - как строка номера П33: 40 и выше по
   содержимому (45 при двух строках), текст 14.5 и под ним 12.5 приглушённо, целиком, переносом вместо многоточия. */
.btn.sheet-item.pl-pick-row:has(> .pl-pick-2) { padding-top: 4px; padding-bottom: 4px; }
.pl-pick-row .pl-pick-t.pl-pick-2 { display: grid; gap: 1px; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.pl-pick-2 > .pl-pick-m { font-size: 14.5px; line-height: 1.25; }
.pl-pick-2 > .pl-pick-s { font-size: 12.5px; line-height: 1.25; color: var(--muted); }
/* T-fix-transfer-touch (P3 проверяющего 2): общая накладка .btn::after 44 по центру лежит внутри строки 45, и зазор 4 между
   двухстрочными строками не нажимался. У таких строк накладка на всю высоту плюс по 2 снаружи сверху и снизу: соседние сходятся
   в зазоре. Считается от внутреннего края рамки 1 px (как у строки номера П33), поэтому +6, а не +4. */
.btn.sheet-item.pl-pick-row:has(> .pl-pick-2)::after { height: calc(100% + 6px); }
/* Нажатая строка сжимается scale(.96): накладка растёт обратно, чтобы отпускание в зазоре осталось на строке (как 46 у .btn). */
.btn.sheet-item.pl-pick-row:has(> .pl-pick-2):active::after { height: calc((100% + 6px) / 0.96); left: -3%; right: -3%; }

/* «Цены» (П15, T-p15): ужатый формат П25 на всей странице (Макс 06.10: «переключатель сверху, ужатый»): слайдер 34, строки 40,
   кнопки 40 с накладкой до 48 (и при нажатии scale(.96) остаётся не меньше 44), «− +» плашкой 34 внутри 44 (как .pg-stb:
   сжимается плашка, не накладка), листы 8 · 14 · 12. Строки списка 40 идут сплошной полосой без щелей - мимо не попасть. */
.pr-page { display: grid; grid-template-columns: minmax(0, 1fr); }
.pr-layers.sc-seg { display: flex; width: 100%; box-sizing: border-box; margin: 0 0 6px; }
.pr-layers.sc-seg button { flex: 1 1 0; min-width: 0; }
.pr-layer { margin: 0 4px 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pr-status { margin: 0 4px 8px; font-size: 13.5px; color: var(--red); }
.pr-status:empty { display: none; }
/* T-fix-pr-gap (Макс 07.10 «карточка наезжает на другую»): на узком экране колонки стоят в столбик, и без зазора последняя
   статья расходов упиралась в «Добавляется к цене клиента» (1 px, на айфоне читалось как наезд); между карточками 8 (UI-RULES 2), на широком 12. */
.pr-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
.pr-pane.pr-in { animation: view-in var(--dur-2) var(--ease-out); }
.pr-pane.switching { opacity: .55; transition: opacity var(--dur-1) var(--ease-out); }
.pr-main, .pr-side { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 900px) {
  .pr-page { max-width: 1040px; margin: 0 auto; }
  .pr-layers.sc-seg { max-width: 420px; }
  .pr-pane { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
}
.pr-card.card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 14px; margin-bottom: 8px; }
.pr-card > h3, .pr-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.pr-title { margin: 4px 4px 8px; }
.pr-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.pr-note { margin: 8px 0 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.pr-words { margin: 0 0 6px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.pr-src-top { display: grid; gap: 2px; }
.pr-src-top b { font-size: 17px; }
.pr-src-top small { font-size: 12.5px; color: var(--muted); }
.pr-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 4px; }
.pr-page .btn, .pr-sheet .btn { padding: 6px 12px; font-size: 15px; }
/* Рамка нажатия 48 у кнопок 40 «Цен»: общий .btn::after (T-p25) задаёт height 44 и translateY(-50%), с inset рамка съезжала
   вверх - на 3 px ниже кнопки мимо (T-fix-pr-hit 07.10): высоту и сдвиг снимаем. Рамка считается от внутреннего края рамки
   кнопки (1 px), поэтому -5: ровно 4 px вокруг видимой кнопки, ряды через 8 сходятся краями. */
.pr-page .btn::after, .pr-sheet .btn::after { content: ''; position: absolute; inset: -5px 0; height: auto; transform: none; }
.pr-page .btn:not(.go), .pr-sheet .btn:not(.go) { border-color: var(--line); background-color: var(--field); }
/* T-fix-press-edge-2 (F3): на время нажатия рамка выше зоны покоя 48: 54 × .956 = 51.6, иначе в перелёте пружины 48 × .956 = 45.9
   и точка в 1 px от края зоны уходила в соседнюю карточку. */
.pr-page .btn:active::after, .pr-sheet .btn:active::after { inset: -8px -3%; }

.btn.pr-pick { display: flex; width: 100%; justify-content: flex-start; text-align: left; gap: 10px; margin: 0 0 8px; padding: 4px 12px; }
.pr-pick .pr-nm { flex: 1; display: flex; align-items: baseline; gap: 6px; }
.pr-pick > .sc-ico, .pr-go, .pr-chev { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.pr-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--accent)); }
.btn.pr-docopt { display: flex; width: 100%; justify-content: flex-start; text-align: left; gap: 10px; margin: 0 0 8px; }
.btn.pr-docopt[aria-pressed='true'] { border-color: var(--accent); }
.pr-docopt .pr-nm { flex: 1; }
.pr-check { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--grn); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* «Чей прайс»: удержание строки открывает её настройки, поэтому под пальцем нет выделения текста и выноски iOS. Скрытые строки
   в своём разделе приглушены прежним --muted; размеры, нажатие и полоса 44 общие (.pr-sheet .btn). */
.btn.pr-docopt { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.btn.pr-docopt.off .pr-nm b { color: var(--muted); }
.pr-nm { display: grid; justify-items: start; min-width: 0; gap: 1px; text-align: left; }
.pr-nm b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.pr-nm small { font-size: 12px; line-height: 1.3; color: var(--muted); }
.pr-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; }
.pr-stc { display: inline-flex; align-items: center; gap: 4px; }
.pr-val { min-width: 48px; text-align: center; font-size: 17px; font-variant-numeric: tabular-nums; }
.pr-pm { position: relative; isolation: isolate; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -5px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); cursor: pointer; }
.pr-pm::before { content: ''; position: absolute; inset: 5px; z-index: -1; border-radius: 50%; border: 1px solid var(--line); background: var(--field); transition: transform var(--dur-press) var(--spring), background-color var(--dur-1) var(--ease-out); }
.pr-pm:active::before { transform: scale(.92); }
.pr-pm[aria-disabled='true'] { opacity: .4; cursor: default; }
.pr-pm:focus-visible { outline: none; } .pr-pm:focus-visible::before { box-shadow: 0 0 0 2px var(--accent); }
.pr-pm .sc-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.f.pr-search { width: calc(100% + 4px); box-sizing: border-box; min-height: 44px; margin: -2px -2px 6px; padding: 0 12px; border: 2px solid transparent; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; }
.f.pr-search:focus { border-color: transparent; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
details.sec.pr-sec { margin: 0 0 4px; }
/* Строки 40 через 4, рамка нажатия -2px: 44 под пальцем, рамки соседей не сходятся (П25 п. 2 и 8, F13). */
.pr-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.pr-row { position: relative; }
.pr-row::after { content: ''; position: absolute; inset: -2px 0; }
details.sec.pr-sec > summary::after { content: ''; position: absolute; inset: -3px 0; }
.pr-row::after { top: -3px; }
details.sec.pr-sec > summary { position: relative; }
.pr-page .btn[aria-disabled='true'], .pr-sheet .btn[aria-disabled='true'] { opacity: .6; cursor: progress; }
.pr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 8px; width: 100%; min-height: var(--h-m); padding: 4px 2px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.pr-row:active { background-color: var(--strong); }
.pr-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pr-pr { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-row.off .pr-nm b, .pr-row.off .pr-pr { color: var(--muted); font-weight: 600; }
.pill.pr-tag { margin-top: 2px; }
/* «Показать ещё» последней строкой раздела: до заголовка следующего раздела место под обе рамки (4 и 2). */
.btn.pr-more { width: 100%; margin-top: 6px; margin-bottom: 4px; }
/* Кнопки «Цен» над соседним блоком: следующий раздел или карточка не накрывают край рамки (T-fix-pr-hit). */
.pr-page .btn, .pr-sheet .btn { z-index: 1; }
.pr-warn { margin: 0; padding: 8px 10px; border-radius: var(--r-s); border: 1px solid color-mix(in srgb, var(--yel) 45%, var(--line)); background: color-mix(in srgb, var(--yel) 14%, transparent); color: var(--ink); font-size: 13.5px; line-height: 1.45; }
.pr-sw { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 7px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pr-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pr-hist { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; border-top: 1px solid var(--line); }
.pr-hist .mini-btn { margin-left: 0; color: var(--tab-on); }
.pr-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.pr-diff { display: grid; grid-template-columns: minmax(0, 1fr); margin: 4px 0; }
.pr-drow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: var(--h-s); border-top: 1px solid var(--line); font-size: 14px; }
.pr-drow b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-choice.sc-seg { display: flex; width: 100%; box-sizing: border-box; margin: 4px 0 8px; }
.pr-choice.sc-seg button { flex: 1 1 0; min-width: 0; padding: 4px 6px; }
.pr-costs .ei-toolbar { margin-bottom: 8px; gap: 8px; }
.pr-costs .ei-list { gap: 8px; }
.pr-costs .ei-row.card { padding: 10px 12px; margin: 0; }
.pr-costs .ei-hint { font-size: 13px; line-height: 1.4; margin: 2px 0 6px; }




.pr-sheet .sc-h2 { margin: 6px 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.pr-sheet .sc-fld { margin: 0 0 8px; }

.pr-sheet .sc-fld[hidden] { display: none; }
.pr-sheet .pl-acts { padding-top: 4px; }
.pr-err { margin: 4px 0 0; }
.pr-err:empty { display: none; }
[data-privacy='on'] :is(.ei-title, .ei-field input[type='text']) { filter: blur(5px); user-select: none; }
@media (min-width:720px) { .ei-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.pm-field { display: grid; gap: 0; }
.pm-field .f { margin: 0; min-width: 0; }
.pm-total { font-variant-numeric: tabular-nums; }
.pm-field input[readonly] { color: var(--muted); }
.pm-date-note { color: var(--muted); margin: 0; font-size: 13px; }
.pm-error { color: var(--red); margin: 0; }
.pm-paid { margin: 8px; flex-shrink: 0; }
.pm-reminders { margin: 12px 0; }

/* Мой помощник. Общие часы и переключатели остаются в PLAN_UI. */
.hp-form { display: grid; gap: 16px; }
.hp-group { min-width: 0; margin: 0; display: grid; gap: 12px; align-content: start; }
.hp-group .hp-h { margin: 0; font-size: 15px; font-weight: 700; }
.hp-form .note-hint { margin: 0; }
.hp-field { display: grid; min-width: 0; }
/* Подпись 12 над полем, её нижний отступ 4 внутри подписи: нажатие по ней продолжает поле вплотную (UI-RULES раздел 3). */
.hp-field label { padding-bottom: 4px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); }
.hp-field .f { margin: 0; }
.hp-field .f[aria-invalid='true'], .hp-time[aria-invalid='true'] { border-color: var(--red); }
.hp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: var(--h-m); font-size: 14px; }
/* T-fix-seg-hit: тумблер 24 (T-p25) с накладкой 44 выходит за себя на 10 и при рядах через 12 ловил нажатие у края
   соседней кнопки («Утром в», «Операция: занята с», «Максимум дел А»). Ряд тумблера 28, как до T-p25: накладка выходит за
   ряд на 8, у соседа остаётся 4. Сам тумблер и его область 44 прежние. */
.hp-row > .pl-switch { margin-block: 2px; }
.hp-step { display: flex; gap: 6px; align-items: center; }
/* Знаки «−» и «+» по центру кнопки: общий .btn это inline-flex без justify-content, и при padding 0 знак прилипал к
   левому краю (Макс 04.10, снимок с iPhone). То же у шагов лент в окошках. */
.hp-step .btn { width: var(--h-s); min-width: var(--h-s); height: var(--h-s); min-height: var(--h-s); padding: 0; border-radius: 50%; justify-content: center; text-align: center; }
.hp-step .btn::after { left: 50%; right: auto; width: 44px; transform: translate(-50%, -50%); }
.hp-step .btn:active::after, .pl-lane-step.btn:active::after, .pl-month-nav .btn.pl-month-step:active::after { width: 48px; height: 48px; }
.hp-step b { min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
.hp-wk { display: flex; flex-wrap: wrap; gap: 10px 6px; }
/* Дни недели и «Обходить весь день» - кнопки выбора S 34 в один ряд (7 по 40 через 6 на 375); палец 44 по высоте общей
   накладкой .btn::after и 46 по ширине (через 6 накладки соседей не сходятся). */
.hp-wk button { flex: 1 1 0; min-width: 40px; min-height: var(--h-s); padding: 0 8px; border-radius: var(--r-s); font-size: 13.5px; }
.hp-wk button::after { left: -3px; right: -3px; }
.hp-wk button:active::after { left: -4px; right: -4px; }
.hp-wk button[aria-pressed='true'] { background: var(--accent); color: #1a1409; border-color: var(--accent); }
.hp-actions { position: sticky; bottom: calc(80px + max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px)) + 8px); z-index: 5; background: var(--panel-solid); border: 1px solid var(--edge); border-radius: 16px; padding: 12px; transition: bottom var(--dur-3) var(--ease-out); }
body:has(.tabs.away) .hp-actions { bottom: calc(10px + max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px))); }
/* ROOT7 RELEASE8 ход 3 п.10 (iPhone F7): панель стоит до самого низа экрана, место под нижнее меню (80) и безопасную зону
   держит своим отступом снизу: между панелью и меню больше не видна полоса прокрученного текста, кнопки панели над меню. */
.hp-actions { bottom: 0; padding-bottom: calc(92px + max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px))); border-radius: 16px 16px 0 0; transition: padding-bottom var(--dur-3) var(--ease-out); }
body:has(.tabs.away) .hp-actions { bottom: 0; padding-bottom: calc(12px + max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px))); }
.hp-status { min-height: 20px; margin: 0 0 8px; color: var(--muted); overflow-wrap: anywhere; }
.hp-action-row, .hp-reset { display: flex; flex-wrap: wrap; gap: 12px 6px; }
.hp-action-row[hidden], .hp-reset[hidden] { display: none; }
.hp-reset .note-hint { width: 100%; }
.hp-evening p { white-space: pre-line; overflow-wrap: anywhere; margin-bottom: 12px; }
.hp-evening .btn { margin-right: 6px; }
.sc-dl select { min-height: 44px; margin: 0; max-width: 100%; color: var(--ink); background-color: var(--field); border: 2px solid transparent; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-m); padding: 0 34px 0 12px; }
.sc-dl select:focus { border-color: transparent; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
@media (min-width: 800px) { .hp-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hp-form > p, .hp-actions { grid-column: 1 / -1; } }
/* П50 «Новые заявки» (пакет 97 разд. 3): раздел ниже настроек помощника, те же строки, тумблеры, полоса и чипы. */
.hp-intake { margin-top: 16px; }
.hp-intake .hp-sub, .ik-best caption { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); text-align: left; }
.hp-intake .hp-status { margin: 0; }
/* П25 точка 3: кнопки способов анкеты в «Моём помощнике» такие же, как недели, 34 в высоту (общий .btn даёт 40 и больше при переносе). */
.hp-wk.ik-ways .btn { height: var(--h-s); min-height: var(--h-s); padding: 0 8px; line-height: 1.1; white-space: nowrap; }
.ik-quiet .seg { flex-wrap: nowrap; }
.ik-quiet .seg > .seg-btn { padding: 0 9px; }
.ik-best { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.ik-best caption { padding-bottom: 4px; }
.ik-best th, .ik-best td { padding: 6px 4px; border-top: 1px solid var(--line); text-align: center; overflow-wrap: anywhere; }
.ik-best thead th { border-top: 0; color: var(--muted); font-weight: 600; font-size: 12px; }
.ik-best tbody th { text-align: left; font-weight: 600; }
.ik-best th:first-child { width: 34%; }
.ik-best td { font-variant-numeric: tabular-nums; }
/* Сводка Лале строкой под временем: точка своим цветом (серая ждём, золотая реши сама, зелёная всё собрано), не статус. */
/* Пакет 100 разд. D п. 8 (F-i18n-06): длинная сводка переносится второй строкой, а не уходит под многоточие; точка у первой строки. */
.lale-sum { display: flex; align-items: flex-start; gap: 6px; min-width: 0; font-size: 12.5px; line-height: 16px; color: var(--muted); margin-top: 2px; }
.lale-sum-t { min-width: 0; overflow-wrap: anywhere; }
.lale-dot { flex: none; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--faint); }
.lale-sum.is-decide .lale-dot { background: var(--accent-graphic); }
.lale-sum.is-done .lale-dot { background: var(--grn); }
/* Карточка: «Анкета» парами «поле - ответ», пустые одной строкой «не ответила». */
/* Пакет 100 разд. D п. 7 (F-i18n-05): откуда и способ переносятся в шапке второй строкой, без многоточия. */
.ik-card > h3 .ik-from { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--muted); text-transform: none;
  letter-spacing: normal; overflow-wrap: anywhere; }
.ik-list { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; line-height: 20px; }
.ik-list dt { color: var(--muted); }
.ik-list dd { margin: 0; overflow-wrap: anywhere; }
.ik-card .ik-empty { margin: 8px 0 0; }
/* «Ответ»: черновик Лале над полем; стоп золотой плашкой «Реши сама: …». */
.lale-box { display: grid; gap: 8px; margin: 0 0 12px; }
.lale-box[hidden] { display: none; }
.lale-box .lale-sum { margin: 0; }
.lale-stop { margin: 0; padding: 9px 12px; border-radius: var(--r-m); background: var(--gold-soft); border: 1px solid var(--accent-graphic); color: var(--warn-ink); font-size: 14px; font-weight: 600; line-height: 20px; }
.lale-draft-h { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); }
.lale-draft { margin: 0; padding: 9px 12px; border-radius: var(--r-m); background: var(--field); border: 1px dashed var(--line); font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.lale-box .btn-row { margin: 0; }
/* R3: пока не пришла настройка владелицы (wait) или «Лале готовит ответ» выключено (off), сводки и черновика не видно нигде. */
:root[data-lale='wait'] :is(.lale-sum, .lale-box), :root[data-lale='off'] :is(.lale-sum, .lale-box) { display: none; }

/* Деньги: один месяц и прибыль клиента, только с правом finance. */
.money-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.money-client.btn { min-height: 44px; }
/* «Excel» одной высоты с кнопками месяца (П11, замер стенда: было 47 против 44). */
.money-toolbar > .btn { padding-top: 0; padding-bottom: 0; }
.money-content { display: grid; gap: 12px; }
.money-totals, .money-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.money-content .card { min-width: 0; margin: 0; }
.money-number { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 8px 0; overflow-wrap: anywhere; }
.money-note, .money-status { color: var(--muted); line-height: 1.5; margin: 8px 0; }
.money-status .btn { margin-left: 8px; }
.money-client.btn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; width: 100%; text-align: left; margin-top: 12px; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; }
.money-client small { color: var(--muted); }
.pm-profit { font-size: 16px; font-variant-numeric: tabular-nums; line-height: 1.5; }
.p36-profit-row, .p36-money-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); gap: 12px; margin: 8px 0; }
.p36-profit-row > b, .p36-money-row > b { text-align: right; overflow-wrap: anywhere; }
.p36-profit-row > b[data-sign='negative'] { color: var(--red-ink); }
.p36-profit-row > b[data-sign='positive'] { color: var(--ok-ink); }
.p36-profit-row > b[data-sign='unknown'] { color: var(--muted); }
.p36-profit-missing { grid-column: 1 / -1; color: var(--muted); }
.p36-client-price.btn { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: var(--h-m); margin: 8px 0; border-color: var(--line); background: var(--field); }
.p36-client-price > span { text-align: left; }
.p36-client-price > b { font-size: 16px; line-height: 20px; margin: 0; text-align: right; overflow-wrap: anywhere; }
.p36-client-price .skel { width: 64px; }
.p36-client-price .skel > i:not(:first-child) { display: none; }
/* П36: выбор комиссии рядом со строкой расхода, цель M40. */
.ex-section .p36-assistant-row > .p36-assistant-toggle.ex-shenel { flex: 0 0 56px; width: 56px; min-width: 56px; height: var(--h-m); min-height: var(--h-m); padding: 7px 5px; margin: 0; justify-content: center; }
.p36-assistant-row > .p36-assistant-text { flex: 1; min-width: 0; }
.p36-assistant-notes { margin: 4px 0 10px; }
.p36-assistant-notes:empty { display: none; }
.p36-assistant-notes > p { margin: 4px 0; }

/* П36: четыре группы, общий факт оплаты и точные строки снимка цены. */
.pm-card > .fold-body > .fold-inner > [data-money-block] { min-width: 0; }
.pm-card > .fold-body > .fold-inner > [data-money-block] + [data-money-block] { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.p36-price-line small { display: inline; margin-left: 6px; white-space: nowrap; color: var(--muted); font-size: 12px; line-height: normal; font-weight: 400; }
.p36-price-note, .p36-price-source p { font-size: 12px; color: var(--muted); margin: 8px 0; overflow-wrap: anywhere; }
.p36-expense-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 16px; }
.p36-expense-title > b { text-align: right; overflow-wrap: anywhere; }
.p36-payment-list { display: grid; gap: 8px; }
.p36-payment-choice.btn { display: grid; align-content: center; text-align: left; white-space: normal; gap: 0; width: 100%; padding: 2px 12px; min-height: var(--h-m); font-size: 13.5px; line-height: 17px; }
.p36-payment-choice small { font-size: 12px; line-height: 15px; font-weight: 400; color: var(--muted); }
.p36-price-input { display: flex; align-items: center; gap: 8px; }
.p36-price-input .f { flex: 1; width: 0; height: var(--h-m); }
.p36-price-input [aria-invalid='true'] { border-color: var(--red); }
[data-privacy='on'] .p36-price-sheet input { filter: blur(6px); }
.pm-profit.pm-estimate { color: var(--muted); }
[data-privacy='on'] .money-client-name, [data-privacy='on'] .money-number, [data-privacy='on'] .pm-profit, [data-privacy='on'] .money-amt { filter: blur(6px); }
/* ---------- «Деньги · месяц», П11 (T-p11): сводка с полоской «расходы | прибыль», «По месяцам», доли со значками, лист статьи,
   «Ожидается» списком. Полоски и столбики - данные: встают на ноль и доезжают (money.js grow), «уменьшить движение» - сразу. */
.money-sum { display: grid; gap: 10px; }
.money-top, .money-two > div { display: grid; gap: 2px; min-width: 0; }
.money-cap { font-size: 12.5px; color: var(--muted); }
.money-big { font-size: 32px; line-height: 1.1; color: var(--accent-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.money-big.money-unknown { font-size: 22px; color: var(--muted); }
.money-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.money-two b { font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.money-split { height: 10px; border-radius: 5px; overflow: hidden; background: var(--field); }
.money-fill { display: flex; height: 100%; transform-origin: 0 50%; transition: transform var(--dur-3) var(--ease-out); }
.money-fill i { display: block; height: 100%; }
.money-split .exp, .money-ex { background: var(--money-ex); fill: var(--money-ex); }
.money-split .pro, .money-pr { background: var(--money-pr); fill: var(--money-pr); }
.money-pr.unk { opacity: .5; }
.money-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.money-key .k::before, .money-legend .k::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.money-key .k.exp::before, .money-legend .k.exp::before { background: var(--money-ex); }
.money-key .k.pro::before, .money-legend .k.pro::before { background: var(--money-pr); }
.money-wait.btn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; justify-content: stretch; text-align: left; width: 100%; }
.money-wait b { font-variant-numeric: tabular-nums; }
.money-wait small { grid-column: 1 / -1; font-weight: 400; color: var(--muted); }
.money-svg { display: block; width: 100%; height: auto; margin: 4px 0 6px; }
.money-axis { stroke: var(--line); stroke-width: 1; }
.money-col { transform-box: view-box; transition: transform var(--dur-3) var(--ease-out); }
.money-val, .money-mon { fill: var(--muted); font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; }
.money-val.now, .money-mon.now { fill: var(--ink); font-weight: 700; }
.money-legend .k::before { margin-right: 5px; }
.money-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 8px 0; min-height: 44px; border-top: 1px solid var(--line); }
button.money-row { width: 100%; font: inherit; color: inherit; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
button.money-row:active { background: var(--field); }
.money-ic { display: grid; place-items: center; width: 28px; height: 28px; }
.money-ic .si { width: 26px; height: 26px; }
.money-tx { display: grid; min-width: 0; }
.money-l { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.money-tx small { font-size: 12.5px; color: var(--muted); }
.money-end { display: inline-flex; align-items: center; gap: 4px; justify-self: end; }
.money-v { font-size: 15px; font-variant-numeric: tabular-nums; }
.money-end .sc-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.money-bar { grid-column: 2 / -1; height: 5px; border-radius: 3px; background: var(--field); overflow: hidden; }
.money-bar i { display: block; height: 100%; background: var(--money-pr); transform-origin: 0 50%; transition: transform var(--dur-3) var(--ease-out); }
.money-sheet-list { display: grid; gap: 8px; margin-bottom: 12px; }
.money-sheet-list .money-client.btn { margin-top: 0; }
.money-expected:focus { outline: none; }
.money-expected:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
@media (min-width: 720px) { .money-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); } .money-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* П24 (T-p24): «Прибыль» в ужатом формате П25 своими классами (токены T-p25 с запасными значениями). Сверху «‹ Октябрь 2026 ›»
   и «Excel» по 34 с накладкой 44; сравнение с прошлым месяцем пилюлей у прибыли; столбики нажимаются кнопками поверх;
   пунктир ожидаемого; листы статьи, клиента и «Ожидается» строками 40, нажимаемые строки 44, люди карточками. */
.money-toolbar { margin: 8px 0 10px; gap: 8px; }
.money-toolbar .pl-month-nav { gap: 10px; }
.money-toolbar > .btn.money-xl { min-height: var(--h-s); padding: 0 11px; border-radius: var(--r-s); font-size: 13.5px; }

.money-toolbar .pl-month-nav .btn.money-step .sc-ico { width: 18px; height: 18px; }


/* П29 «Прибыль в Excel» (ужатый П25): поля через 8, строки 40 через 4 с рамкой нажатия 44, галочка справа. */
.mx-sheet .mx-fld { display: grid; gap: 4px; margin: 0 0 8px; }
.mx-sheet .mx-fld > label { font-size: 12px; font-weight: 700; color: var(--muted); }
.mx-sheet .sc-seg.mx-per { display: flex; width: 100%; box-sizing: border-box; }
.mx-sheet .sc-seg.mx-per button { flex: 1 1 0; min-width: 0; }
/* T-p29b: на 375 четыре кнопки по 77; при полях 10 «6 months» (en) переносилась и полоса росла до 45. Поля 6, в одну строку. */
.mx-sheet .sc-seg.mx-per button { padding: 0 6px; white-space: nowrap; }
.mx-when, .mx-parts { display: grid; gap: 4px; }
.mx-when { margin-top: 4px; }
.mx-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: var(--h-m); box-sizing: border-box;
  padding: 3px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out); }
.mx-row::after { content: ''; position: absolute; inset: -3px 0; height: auto; transform: none; }
.mx-row:active { background-color: var(--strong); }
.mx-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mx-rt { display: grid; gap: 0; min-width: 0; line-height: 1.2; }
.mx-rt b { font-size: 15px; font-weight: 600; }
.mx-rt small { font-size: 12px; color: var(--muted); }
.mx-box { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line); background: var(--panel-solid); }
.mx-part[aria-checked='true'] .mx-box { border-color: var(--accent-strong); background: var(--accent); }
.mx-box .mx-tick { width: 16px; height: 16px; fill: none; stroke: #1a1409; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.mx-part[aria-checked='true'] .mx-tick { opacity: 1; }
.mx-sum { margin: 0 0 4px; font-size: 12px; }
.mx-err { margin: 0; font-size: 13px; color: var(--red-ink, var(--red)); }
.mx-err:empty { display: none; }
.mx-sheet .btn[aria-disabled='true'] { opacity: .5; }
.money-bigrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.money-delta { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--grn) 62%, var(--ink)); background: color-mix(in srgb, var(--grn) 14%, transparent); }
.money-delta.down { color: color-mix(in srgb, var(--red) 80%, var(--ink)); background: color-mix(in srgb, var(--red) 14%, transparent); }
.money-sum .money-wait.btn { padding: 8px 12px; }
.money-plot { position: relative; }
.money-hits { position: absolute; inset: 0; }
.money-hit { position: absolute; top: 0; bottom: 0; margin: 0; padding: 0; border: 0; background: none; border-radius: var(--r-s); cursor: pointer; color: inherit;
  transition: background-color var(--dur-1) var(--ease-out); }
.money-hit:active:not([aria-current]) { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.money-hit:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.money-hit[aria-current] { cursor: default; }
.money-wait-bar { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--money-pr); stroke-width: 1.5; stroke-dasharray: 4 3; }
.money-legend .k.wait::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; border: 1.5px dashed var(--money-pr); box-sizing: border-box; }
.money-client.btn.money-cl { gap: 4px; padding: 10px 12px; margin-top: 8px; }
.money-cl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.money-cl-top .money-client-name { min-width: 0; overflow-wrap: anywhere; }
.money-cl-pr { color: var(--accent-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.money-split.thin { height: 5px; border-radius: 3px; margin-top: 2px; }
/* Листы П24: шапка суммы, разделы, строки 40 (нажимаемые 44), «Открыть карточку ›» шире «Закрыть» в одной строке. */
.money-sheet .money-shsum { display: grid; gap: 2px; margin: 2px 0 8px; }
.money-sheet .money-shsum b { font-size: 26px; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.money-sheet .money-shsum small { font-size: 13px; color: var(--muted); }
.money-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 8px; }
.money-three > div { display: grid; gap: 2px; min-width: 0; }
.money-three b { font-size: 17px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.money-three > div:last-child b { color: var(--accent-strong); }
/* На светлой кнопке и листе --accent-strong даёт 4,15: текстовый контраст 4,5 держит --tab-on, как у «Все задачи ›». */
[data-theme='light'] .money-cl-pr, [data-theme='light'] .money-three > div:last-child b { color: var(--tab-on); }
.money-sheet .money-split { margin-bottom: 4px; }
.money-sec { margin-top: 12px; }
.money-sec h4 { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.money-li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; min-height: var(--h-m); padding: 6px 0; border-top: 1px solid var(--line); box-sizing: border-box; }
button.money-li { width: 100%; min-height: 44px; font: inherit; color: inherit; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out); }
button.money-li:active { background: var(--field); }
.money-li .money-ic:empty { width: 0; }
.money-sheet .btn.money-who { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-content: stretch; text-align: left; gap: 2px 10px; width: 100%;
  margin-top: 6px; padding: 8px 12px; white-space: normal; }
.money-who .money-tx { justify-items: start; }
.money-who .money-tx small { font-weight: 400; }
.money-who .money-v { font-size: 17px; }
.money-foot { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.money-sheet .pl-acts.money-acts { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }



[data-privacy='on'] .money-sheet .money-client-name, [data-privacy='on'] .money-shsum b, [data-privacy='on'] .money-three b { filter: blur(6px); }

/* ---------- Follow-up (П38d, макеты 1 и 2): вкладка с числом, раздел, метки строки, «Статус», сердце дела ухода ----------
   Метки строки по макету: «срочно» красным, «молчит N дней» жёлтым, «недовольна» красноватым, «написала снова» золотом;
   этап и следующее дело тихой плашкой. Текст меток --ink или --muted поверх слабой заливки, контраст замером не ниже 4.5. */
.tabs #followup-badge {
  position: absolute; top: 3px; right: calc(50% - 24px);
  background: var(--red); color: #fff; border-radius: 999px; font-size: 10.5px;
  padding: 1px 6px; font-weight: 700;
}
.tabs[data-n='5'] #followup-badge { right: calc(50% - 18px); }
@media (max-width: 359px) { .tabs #followup-badge { right: calc(50% - 18px); } }
.fu-seg { margin: 8px 0 12px; }
.fu-tiles { margin-bottom: 12px; }
.fu-tiles .stat[aria-pressed='true'] { background-color: var(--strong); box-shadow: inset 0 0 0 2px var(--red); }
.fu-filter { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.fu-filter-l { font-size: 12px; font-weight: 700; color: var(--muted); flex: none; }
.fu-filter .pl-pick-wrap { flex: 1; min-width: 0; }
.fu-filter .pl-pick { width: 100%; }
.row .fu-pills { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; min-width: 0; }
.row .fu-pills .pill.fu-pill { margin: 0; padding: 1px 7px; font-size: 11.5px; line-height: 16px; background: var(--field); color: var(--muted); }
/* Красный текст по красной заливке макета давал 4.33 и 4.07 при норме 4.5: текст --ink, срочность несёт заливка и жирный. */
.row .fu-pills .pill.fu-urgent { background: color-mix(in srgb, var(--red) 24%, transparent); color: var(--ink); font-weight: 700; }
.row .fu-pills .pill.fu-silent { background: color-mix(in srgb, var(--yel) 18%, transparent); color: var(--ink); }
.row .fu-pills .pill.fu-bad { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--ink); }
.row .fu-pills .pill.fu-back { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--ink); }
img.fu-mark { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: .35em; border-radius: 50%; }
.fu-tf { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: 12px 0; }
.fu-tf-n { font-size: 12.5px; color: var(--muted); }
.fu-chip .sgn.x { margin-left: 6px; }
.fu-note { margin-top: 14px; }
.fu-empty { margin: 8px 2px; }
/* П38d d2 (ARCH-P38D-AUTOSTART): тихая подсказка о дате отлёта в шапке карточки, текст листа «Вернуть в «Клиенты»». */
.fu-hint { margin: 6px 0 0; }
.fu-return-q { margin: 0 0 12px; }
/* П38d d3: карточка на уходе (макет 3). Полосы точек плана, «Сегодня» с галочкой, «Операция проведена», «Фото
   заживления», «Скрыто на follow-up». Точка: сделано зелёная, сегодня кольцо акцента, просрочено красная, пропущено
   полая серая, впереди полая; подписи текстом --ink и --muted (UI-RULES 3: контраст от 4.5). */
.fu-now { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.fu-now b { font-size: 15px; color: var(--ink); }
.fu-now small, .fu-lane-t small, .fu-leg, .fu-pay small, .fu-ph small, .fu-hid > h3 small { font-size: 12px; color: var(--muted); }
.fu-lane { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.fu-lane-t { display: flex; flex-direction: column; min-width: 0; }
.fu-lane-t b { font-size: 13px; color: var(--ink); white-space: nowrap; }
.fu-dots { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
i.fu-d { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--muted); box-sizing: border-box; flex: none; }
i.fu-d.done { background: var(--grn); border-color: var(--grn); }
i.fu-d.today { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
i.fu-d.late { background: var(--red); border-color: var(--red); }
i.fu-d.miss { border-style: dashed; opacity: .7; }
i.fu-d.next { border-color: var(--line); background: var(--field); }
.fu-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 4px; }
.fu-leg > span { display: inline-flex; align-items: center; gap: 6px; }
.fu-todo { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.fu-todo-t { font-weight: 600; }
.fu-ops .med-ops { margin: 0 0 8px; }
.fu-pay { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.fu-pay-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; color: var(--ink); }
.fu-ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-bottom: 10px; }
.fu-ph { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.fu-ph img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; background: var(--field); display: block; }
/* Подпись под «Скрыто на follow-up» строкой ниже заголовка, обычным регистром; стрелка остаётся справа в первой строке. */
.fu-hid > h3 { flex-wrap: wrap; row-gap: 2px; }
.fu-hid > h3 small { order: 3; flex-basis: 100%; font-weight: 400; text-transform: none; letter-spacing: normal; padding-bottom: 6px; }
.fu-dates-hint { margin-top: 6px; }
.fu-ph-status { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
/* П38d d3m: «До | После» рядом с «Добавить фото», в одну строку с переносом на узком экране. */
.fu-ph-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fu-ph-when { flex: none; }
/* П38d d4 п. 0 (наблюдение проверяющего 1 к d3m): «До» короче пальца, кнопка не уже 44. */
.fu-ph-when .seg-btn { min-width: 44px; }
/* П38d d4: плашка развилки над «Перепиской» (макет 7): рамка и подложка из сигнального токена её смысла, точка у
   заголовка; «Недовольна» на золоте с красной точкой. Кнопки M40 (В7) с пальцем 44 от .btn. */
.fu-fork { --tone: var(--accent); --dot: var(--tone); margin: 0 0 12px; padding: 12px 14px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--tone) 55%, var(--line)); background: color-mix(in srgb, var(--tone) 10%, var(--panel-solid)); }
.fu-fork[data-fork="urgent"] { --tone: var(--red); }
.fu-fork[data-fork="silent"] { --tone: var(--yel); }
.fu-fork[data-fork="unhappy"] { --dot: var(--red); }
.fu-fork-t { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px; color: var(--ink); }
.fu-fork-t::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.fu-fork-sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink); white-space: normal; }
.fu-fork-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fu-fork-acts .btn { margin: 0; }
.fu-fork-q { margin: 0 0 14px; }
/* П38d d5: «Сейчас в» в шапке карточки на уходе (макет 3): строка M40 с пальцем 44 (накладка по центру), подпись
   мелко, место в одну строку, метка «подтверждено» (рамка и подложка --grn) или «неизвестно» (пунктир); лист П25. */
.fu-where { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--h-m); margin: 4px 0 6px;
  padding: 3px 12px 3px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; }
.fu-where::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.fu-where-l { flex: 1; min-width: 0; display: grid; }
.fu-where-l small { font-size: 11px; line-height: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-where-l b { font-size: 13.5px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-where-tag { flex: none; font-size: 11px; line-height: 16px; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px dashed var(--line); color: var(--muted); }
.fu-where-tag[data-tone="ok"] { border-style: solid; border-color: color-mix(in srgb, var(--grn) 60%, var(--line)); background: color-mix(in srgb, var(--grn) 12%, transparent); color: var(--ink); }
.fu-where-chev { flex: none; width: 7px; height: 7px; margin: 0 3px 0 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); }
.fu-where-cur { display: grid; gap: 3px; justify-items: start; margin: 0 0 2px; }
.fu-where-cur b { font-size: 15px; line-height: 20px; }
.fu-where-cur small { font-size: 12.5px; color: var(--muted); }
/* d5f: .pl-sheet .note-hint { margin: 0 } сильнее одного класса: отступ до полей держит правило той же силы. */
.fu-where-sheet .fu-where-hint { margin: 0 0 10px; }
.fu-where-field { display: grid; gap: 4px; margin: 0 0 10px; }
.fu-where-lab { font-size: 12px; font-weight: 700; color: var(--muted); }
.fu-where-field .f { margin: 0; }
.fu-where-acts { display: grid; gap: 8px; }
/* П38d d6a: «Доложить врачу»: строка и кнопка в блоке Follow-up, лист П25 (подписи 12/700 над полем через 4, поля .f
   16px, сегменты S34), плитки фото с галочкой, лист «PDF для врача готов». */
.fu-dr { display: grid; gap: 8px; margin-top: 10px; justify-items: start; }
.fu-dr-line { display: grid; gap: 4px; justify-items: start; }
.fu-dr-cap { font-size: 12.5px; color: var(--muted); }
.fu-dr-quote { margin: 4px 0 0; padding: 8px 12px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--field); color: var(--ink); font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.fu-dr-lacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.fu-dr-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.fu-dr-body, .fu-dr-ready { display: grid; gap: 10px; }
.fu-dr-field { display: grid; gap: 4px; min-width: 0; }
.fu-dr-field .f { margin: 0; }
.fu-dr-lab { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); }
.fu-dr-h { margin: 8px 0 0; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fu-dr-sheet .note-hint { margin: 0; }
.fu-dr-since { justify-self: start; }
.fu-dr-phs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fu-dr-ph { position: relative; display: grid; gap: 4px; padding: 4px; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--ink); font: inherit; cursor: pointer; }
.fu-dr-ph img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--panel-solid); }
.fu-dr-ph small { font-size: 12px; color: var(--muted); }
.fu-dr-ph[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.fu-dr-ph:disabled { opacity: .45; cursor: default; }
.fu-dr-tick { display: none; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }
.fu-dr-tick::after { content: ''; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid #1a1409; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fu-dr-ph[aria-pressed="true"] .fu-dr-tick { display: block; }
.fu-dr-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.fu-dr-badge { flex: none; padding: 4px 7px; border-radius: 6px; font-size: 12px; font-weight: 800; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
.fu-dr-meta, .fu-dr-until { font-size: 12.5px; color: var(--muted); }
.fu-dr-url { font-size: 13px; color: var(--ink); word-break: break-all; }
.fu-dr-msg { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); font-size: 14px; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.fu-dr-nolink { margin: 0; font-size: 13.5px; color: var(--ink); }
.fu-dr-acts { display: grid; gap: 8px; }
.fu-dr-copybox { width: 100%; resize: none; }
/* d7: «Скопировать только текст» с подписью о медицинском тексте и лист «Текст для врача». */
.fu-dr-medcap { margin: -2px 0 0; font-size: 12.5px; line-height: 16px; color: var(--muted); }
.fu-dr-textbox { width: 100%; resize: none; }
.fu-ph-status:empty { display: none; }
.fu-send-q { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 12px; }
/* d6c (P2 стенда): фото листа «Доложить врачу» под шторкой, как «Фото заживления» и «Файлы». */
[data-privacy='on'] :is(.fu-ph img, .fu-dr-ph img, .fu-pay b, .fu-send-q) { filter: blur(5px); user-select: none; }

/* ---------- «Настройка» (deliverable 51, crm/public/setup.js; макет 51-setup-mock.html v2) ----------
   Строки подключений: точка состояния, название, пилюля; под ними факты, «что нужно заранее», «где
   взять», поле ключа (в выкатке 1 ничего не сохраняет) и кнопки. Цвета состояний - семантические
   токены (--grn, --red, --yel, --blue), не бренд. Движение только через --dur-*. */
.ai-confirm { display:flex; flex-wrap:wrap; gap:6px; }
.card > .ai-action { margin-top: 12px; }
.ai-confirm .btn.go { color:#0b0803; }
.ai-confirm[hidden], .ai-action button[hidden] { display:none; }
[data-privacy='on'] :is(.su-numrow .su-t, .su-wa-field input[type='text'], .su-wa-label, .wa-reply-channel) { filter:blur(5px); user-select:none; }
/* П33 (Макс 07.10 22:52, вариант А): ужатый формат П25. Карточки 12 · 14, строки через 8; сверху кольцо 48 и одна «Проверить» 34;
   помощник одной строкой; подзаголовки групп 13/700 серые, 18 над и 8 под; номера WhatsApp строками 40 с «›» (две строки текста
   дают около 45), действия в листе номера; поле и «Сохранить» 40 в строку; остальное в раскладушке «Подробнее». */
.card.su-prog, .card.su-help, .card.su-row { padding: 12px 14px; }
/* T-fix-press-edge: и при обычной анимации пружина за доли секунды сжимает плитку и вкладку, и палец у самого края, отпущенный
   уже за сжатым элементом, нажатия не засчитывал. На время нажатия прозрачная накладка размера несжатого элемента (как у
   .pill.st-chip и ::after у .btn): 1/0.96 и 1/0.94 с запасом. Стрелка «›» плитки живёт в ::after, накладка - в ::before. */
.stat:active::before { content: ''; position: absolute; inset: -3%; }
.tabs button:active::before { content: ''; position: absolute; inset: -3.3%; }
/* Пружина проскакивает ниже конечного сжатия (.stat до 0.956), поэтому запас с избытком. Плитки хирурга в калькуляторе
   накладки не имели вовсе; у кнопок калькулятора и «+ Статья» в «Ценах» свои ::after с inset по бокам 0 перебивали
   общий запас -3% у .btn:active::after; ☰ и Лале в шапке: зона 44 при сжатии .93 становилась 40.9; микрофон Лале был
   исключён из накладки #bot .icobtn без причины. Свидетель пробы: crm/test/press-edge-browser.test.js. */
.calc-tile { position: relative; }
.calc-tile:active::before { content: ''; position: absolute; inset: -4%; }
/* T-fix-press-edge-2 (F3): зона покоя 44 (inset -3 у кнопок 40, -6 у кнопок 34), на время нажатия 50: 50 × .956 = 47.8 > 44;
   раньше 44 × .956 = 42.06, и точка в 1 px от края зоны в перелёте пружины уходила в соседний блок. */
.calc-actions .btn:active::after { inset: -6px -3%; }
.btn.calc-pickcl:active::after, .calc-lale .btn:active::after, .calc-paste .btn.calc-parse:active::after, .pr-page .ei-toolbar > .btn.ei-add:active::after { inset: -9px -3%; }
.bar .icobtn:active::before { width: 48px; height: 48px; }
#bot .icobtn.mic:active::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; }   /* как у ✕ и «Что Лале помнит» (F1) */

/* T-fix-press-edge: при уменьшенной анимации сжатие на :active мгновенное (переходов нет), и палец у самого края, отпущенный
   уже за сжатым элементом, нажатия не засчитывал (плитки «Моего дня», «Отчёта», Follow-up, кнопки, чипы). Без анимации
   нажатие отвечает цветом, размер не меняется: край 44 срабатывает. Список - все правила :active со scale в этом файле; стоит после них,
   чтобы перебить их при той же специфичности; правила раздела pg- охраняет такой же блок в конце файла (охрана: crm/test/press-edge.test.js). */
@media (prefers-reduced-motion: reduce) {
  .bar .icobtn:active,
  .stat:active,
  .row .side a:active,
  .row .side button:active,
  .chip:active,
  .chip.send-channel-chip:active::before,
  .mini-btn:active,
  .pill.st-chip:active,
  .who .icobtn:active,
  .btn:active,
  .task .done:active,
  .tabs button:active,
  .seg-btn:active,
  #panel .item:active,
  #bot .icobtn:active,
  .hap-try:active,
  .calc-pm:active::before,
  .calc-x:active::before,
  .calc-tile:active,
  .tm-ws .icobtn:active,
  .tm-member .tm-side .icobtn:active,
  .sc-hbox:active,
  .pr-pm:active::before { transform: none; }
}

.su-prog { display: flex; align-items: center; gap: 12px; }
.su-ring { --p: 0; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--grn) calc(var(--p) * 1%), var(--field) 0); }
.su-ring span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-solid); font-size: 12px; font-weight: 700; }
.su-progtx { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.su-progtx b { font-size: 15px; }
.su-progtx small { color: var(--muted); font-size: 12.5px; }
.su-prog .mini-btn.su-check { margin-left: 0; align-self: center; }
/* F2 круга 2: запасное поле «План для ИИ» без буфера (Telegram на iPhone) встаёт отдельной строкой во всю ширину карточки. */
.su-help { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.su-help > .su-copybox { flex: 1 1 100%; min-width: 0; }
.su-help p { margin: 0; flex: 1 1 0; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--muted); white-space: normal; }
.su-help .mini-btn.su-plan { margin-left: 0; }
h4.su-grp { margin: 18px 4px 8px; font-size: 13px; line-height: 16px; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: 0; }
.su-row { display: grid; gap: 8px; }
.su-head { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; }
.su-t { min-width: 0; display: grid; gap: 1px; }
.su-t b { font-size: 15px; }
.su-t small { color: var(--muted); font-size: 12.5px; }
.su-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--field); color: var(--faint); box-shadow: inset 0 0 0 1.5px var(--line); flex: 0 0 auto; }
.su-dot.su-ok { background: var(--grn); color: var(--on-red, #fff); box-shadow: none; }
.su-dot.su-act { background: var(--red); color: var(--on-red, #fff); box-shadow: none; }
.su-dot.su-exp { background: var(--yel); color: #1a1409; box-shadow: none; }
.su-dot.su-info { background: var(--field); color: var(--muted); }
.su-pill { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--field); color: var(--muted); }
.su-pill.su-ok { background: color-mix(in srgb, var(--grn) 16%, var(--panel-solid)); color: var(--grn); }
.su-pill.su-act { background: color-mix(in srgb, var(--red) 14%, var(--panel-solid)); color: var(--red); }
.su-pill.su-exp { background: color-mix(in srgb, var(--yel) 18%, var(--panel-solid)); color: var(--yel); }
[data-theme='light'] .su-pill.su-ok { color: #176338; }
[data-theme='light'] .su-pill.su-act { color: #99261d; }
[data-theme='light'] .su-pill.su-exp { color: #805400; }
.su-row.su-act { border-color: color-mix(in srgb, var(--red) 45%, var(--edge)); }
.card p.su-text { margin: 0; font-size: 13.5px; color: var(--muted); white-space: normal; }
.su-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.su-facts b { color: var(--ink); font-weight: 600; }
/* «Подробнее»: summary 40 с пальцем 44, внутри строки через 8. */
.su-need summary { position: relative; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--tab-on); min-height: var(--h-m); display: flex; align-items: center; gap: 10px; list-style: none; }
.su-need summary::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
.su-need summary::-webkit-details-marker { display: none; }
.su-need summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
.su-need[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.su-morebody { display: grid; gap: 8px; padding-top: 4px; }
.su-morebody .note-hint { margin: 0; }
.su-needs b { display: block; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); }
.su-needs ul { margin: 4px 0 0; padding-left: 19px; font-size: 13px; color: var(--muted); }
.su-needs li { margin-bottom: 4px; }
.card p.su-where { margin: 0; font-size: 13px; color: var(--muted); white-space: normal; }
.su-where b { color: var(--ink); }
.su-key { display: grid; gap: 6px; }
.su-key label { margin-bottom: -6px; padding-bottom: 4px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); }
.su-inp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.su-inp .f { margin: 0; min-height: var(--h-m); }
.su-input { min-width: 0; min-height: var(--h-m); box-sizing: border-box; padding: 9px 12px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--field);
  color: var(--ink); font: inherit; font-size: 16px; line-height: 20px; }
.su-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.su-key > .btn { justify-self: start; }
.su-key > .btn.go { justify-self: stretch; }
/* SELFSERVE-CRM п.1: проверочный код вебхука Instagram и адреса для Meta в «Подробнее» карточки Instagram. */
.su-igv { display: grid; gap: 8px; }
.su-igv-t { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--muted); }
.su-igv .su-key .note-hint { margin: 0; }
/* Номера WhatsApp строками: строка 40 (две строки текста около 45), палец 44 накладкой, строки через 4 (накладки сходятся в середине). */
.su-nums { display: grid; gap: 4px; }
.su-numrow { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--h-m); box-sizing: border-box;
  padding: 4px 10px 4px 8px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--field); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
/* Накладка считается от внутреннего края рамки 1 px: -3, чтобы снаружи было ровно 2 (палец 44 у строки 40). */
.su-numrow::after { content: ''; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
.su-numrow:hover { background-color: var(--strong); }
.su-numrow .su-t { flex: 1 1 auto; }
.su-numrow .su-t b, .su-numrow .su-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.su-numrow .su-t b { font-size: 14.5px; }
.su-numrow .su-t small { font-size: 12.5px; }
.su-chev { color: var(--faint); font-size: 18px; line-height: 1; }
.su-numrow.su-addnum { background: transparent; }
.su-addnum .su-t b { font-size: 14px; font-weight: 600; color: var(--tab-on); }
/* Действия карточки 40 в ряд через 6; «План по этому шагу» отдельной строкой. */
.su-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.su-acts .btn { flex: 1 1 0; min-width: 0; }
.su-acts .btn.su-quiet { flex-basis: 100%; }
.btn.su-quiet { border-color: transparent; background: transparent; box-shadow: none; color: var(--tab-on); }
.btn.su-quiet:hover { background: var(--strong); }
.su-acts .btn:disabled { opacity: .55; cursor: default; }
.su-copybox { margin-top: 0; }
.su-at { text-align: center; font-size: 12px; }

/* Листы номера (П33 п. 6): название с номером и пилюлей, состояние словами, ряд действий 40 через 6, «Отключить» отдельно. */
.su-numhead { display: flex; align-items: center; gap: 10px; }
.su-numhead .su-wa-label { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.su-wa-sheet p.su-text { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); white-space: normal; }
.su-wa-sheet > .btn.su-wide { width: 100%; margin-top: 8px; }
/* F1 круга 2: главная кнопка листа («Проверить и подключить», «Сохранить», «Восстановить приём») шире и в одну строку, «Закрыть» не
   уже 112: ряд 40 без переноса (UI-RULES 0 и 3, макет 201 / 112). */
.su-wa-sheet .pl-acts .btn.go { flex: 1 1 auto; white-space: nowrap; }
.su-wa-sheet .pl-acts .sheet-cancel { flex: 0 0 auto; min-width: 112px; }
/* P3 круга 2: длинное название номера в шапке листа одной строкой с многоточием (шапка 34). */
.su-wa-sheet .sc-shd h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-wa-form { display:grid; gap:8px; }
/* Подпись поля 12/700 серая над полем, нижний отступ 4 внутри подписи (подпись оборачивает поле - нажатие его). */
.su-wa-field { display:grid; }
.su-wa-field > span { padding-bottom:4px; font-size:12px; line-height:16px; font-weight:700; color:var(--muted); }
.su-wa-field .f { min-width:0; margin:0; }
.su-wa-form .note-hint { margin:0; }
/* P3 круга 2: пустая строка состояния не держит строку сетки (до ряда кнопок 12, а не 28). */
.su-wa-form .note-hint:empty { display: none; }
/* Над рядом кнопок 12: 8 сетки формы и 4 своих (общий .pl-acts даёт 12 сверху сам, в сетке было 20). */
.su-wa-form > .pl-acts { padding-top: 4px; }

.su-wa-field .f[aria-invalid='true'] { border-color:var(--red); }



/* П61: принятая сверка П25, 20.10; П64: строки задач по центру, 21.10. */
.bar strong { line-height: var(--h-m); }
.bar input { box-sizing: border-box; height: var(--h-m); line-height: 20px; }
.bar .icobtn, .bar .back { width: var(--h-s); height: var(--h-s); }
.bar .back { padding: 0; display: grid; place-items: center; border-radius: 50%; }
.bar .back .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
#botBtn { margin-left: auto; }
/* Д1 и П64 «По центру» (Макс 20.10 и 21.10, ответ 22): название до двух строк, под ним одна тонкая строка «когда · клиентка»,
   обрезается в конце; кружок, значок и «Оплатили» по середине строки и у правого края (Д5); внутри 10, между строками 6,
   высота по содержимому, с клиентом и без одна. Клиентка и «Пересечение» строчным текстом, палец 44 накладкой от 6 px над
   своей строкой вниз, в отступ строки: строка текста названия остаётся названию, соседняя строка не задета. Накладка
   названия держится за .tx, поэтому обрезка двух строк её не режет; строка «когда» режет только вбок. */
.tdo-all .task.todo { align-items: center; gap: 10px; padding: 10px; min-height: 0; margin-bottom: 6px; }
.tdo-all .task.todo > :is(.tdo-cb, .tdo-kind, .pm-paid) { align-self: center; flex: 0 0 auto; margin: 0; }
.tdo-all .task.todo > .tx { position: relative; }
html .tdo-all .task .tdo-open { position: static; min-height: 0; font-size: 15px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tdo-all .task .tdo-open::before { top: -8px; bottom: auto; height: 44px; }
.tdo-all .tdo-meta { margin-top: 2px; white-space: nowrap; overflow-x: clip; text-overflow: ellipsis; font-size: 13px; line-height: 18px; }
.tdo-all .tdo-meta .tdo-tag { min-height: 0; font-size: 13px; line-height: 18px; white-space: nowrap; }
.tdo-all .tdo-meta button.tdo-client::before, .tdo-all .tdo-meta .btn.pl-warning::after { top: -6px; transform: none; }
/* «Пересечение» коробкой 18 по верху строки: по базовой линии значок 14 растил строку «когда» до 20 (замечание P3, круг 1). */
.tdo-all .tdo-meta .btn.pl-warning { vertical-align: top; height: 18px; line-height: 18px; align-items: center; }
/* Палец 44 (TOUCH44 и договор компоновки 23.10): середина названия и её края свободны.
   Справа резерв под метки; при двух кнопках отдельные колонки 44 + 6 + минимум44.
   Срок сжимается первым, имя внутри собственной кнопки уходит в многоточие. Группа
   не обрезает кнопки и не переносится; метки остаются 18, их накладки выходят вниз. */
.tdo-all .tdo-meta { display: flex; flex-wrap: nowrap; align-items: center; }
.tdo-all .tdo-meta > * { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow-x: clip; text-overflow: ellipsis; }
/* Повтор не занимает отдельную колонку между текстом и флажком: на 375 она отнимала 32 px у целей44. */
.tdo-all .tdo-meta > .tdo-rep { flex: 0 0 16px; width: 16px; height: 18px; pointer-events: auto; }
.tdo-all .tdo-meta > .tdo-rep::after { content: none; margin: 0; }
.tdo-all .tdo-meta > .tdo-meta-acts { display: grid; grid-template-columns: minmax(44px, 1fr); gap: 6px; flex: 0 0 calc(50% - 24px); min-width: 44px; margin-left: auto; overflow: visible; }
.tdo-all .tdo-meta > .tdo-meta-acts:has(> .pl-warning + .tdo-client) { grid-template-columns: 44px minmax(44px, 1fr); min-width: 94px; }
.tdo-all .tdo-meta-acts > button { min-width: 44px; width: 100%; }
.tdo-all .tdo-meta-acts > .tdo-client { overflow-x: clip; text-overflow: ellipsis; }
.tdo-all .tdo-meta-acts > .pl-warning > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tdo-all .tdo-meta-acts > .pl-warning > .sc-ico { flex: 0 0 14px; }
/* В раскрытом «Сделано» обрезка анимации не режет левый край галочки и низ последней метки. */
.tdo-all .tdo-done > div { margin-left: -4px; padding-left: 4px; }
.tdo-all .tdo-done > div::after { content: ''; display: block; height: 4px; }
.tdo-all .tdo-meta > :has(+ .tdo-meta-acts)::after { content: none; margin: 0; }
.td-row .pm-paid, .task.todo.ev > .pm-paid { margin: 0; }
.sc-calrow.sc-lale { align-items: center; padding-top: 5px; padding-bottom: 5px; }
.sc-stack.tight > .sc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.btn.sc-tsel b { font-weight: inherit; }
.pl-picker-body > :not([hidden]):not(:has(~ :not([hidden]))) { margin-bottom: 0; }
.sc-form > .sc-form-actions::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: calc(12px + max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px))); background: var(--panel-solid); pointer-events: none; }
.sc-fld textarea.f, .tdo-sheet .tdo-text { min-height: 64px; }
.sc-compose textarea { min-height: var(--h-m); }
.sc-ib.send { width: var(--h-s); height: var(--h-s); margin-bottom: 3px; }
.sc-wrow .li .tx { white-space: normal; overflow-wrap: break-word; }
.sc-wrow .li { align-items: flex-start; }
.btn.pr-doc1 { margin: 0 0 4px; padding-top: 0; padding-bottom: 0; }
.pr-doc1 .pr-nm { display: flex; align-items: baseline; gap: 6px; }
.pr-doc1 .pr-nm b { font-size: 14px; }
.sc-form[data-p36-state='ready'] > .sc-shd { top: -8px; padding-top: 6px; margin-top: -6px; }
.sc-fld > .btn.pr-pick { margin: 0; }
.p-btns.two { grid-template-columns: 1fr; gap: 6px; }
.p-second span { width: auto; }
.ex-section .p36-assistant-row > .p36-assistant-toggle.ex-shenel { border: 0; background: none; box-shadow: none; }
.p36-payment-list { gap: 4px; }
.p36-payment-choice.btn { justify-content: start; }
/* Кл8 (ответ 25): «Файлы» → «Папка» одной строкой «Документы · 0 файлов», строка 40; двухстрочные строки других листов как были. */
.files-folders .pl-pick-t.pl-pick-2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.files-folders .pl-pick-2 > :is(.pl-pick-m, .pl-pick-s) { display: inline; }
.files-folders .pl-pick-2 > .pl-pick-s::before { content: ' \00B7  '; }
.pl-sheet.files-sheet { max-height: calc(100dvh - 24px - 96px); }
.files-name { white-space: normal; overflow-wrap: break-word; }
.bub-who-link .ico, .wa-group-line .mini-btn .ico { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lale-box > p { margin: 0; }
.lale-box > .lale-draft-h { margin-bottom: -4px; }
.p40-unbooking > .ex-actions { margin-top: 4px; }
.q-row input.f { margin: 0; }
.pl-sheet.pl-picker.q-cat-sheet { overflow-y: auto; }
.q-cat-sheet .pl-acts { position: static; }
.q-cat-sheet .pl-acts:not(:has(> :not([hidden]))), .q-cat-sheet .q-cat-list:empty, .q-cat-opt .pr-nm small:empty, .q-found:empty { display: none; }
.q-cat-sheet .btn.pr-docopt { margin: 0; }
.q-cat-sheet > .sc-h2 { margin-top: 8px; }
/* П68: «Своя цена» - «Цена врача, €» и под ним «Скидка клиентке, €» (поля .f, подпись над полем), под каждым одна строка «что будет»
   12.5 серым, суммы жирным цветом текста, скидка красным; минус не отрывается от суммы. Тот же блок в листе калькулятора. */
.q-own { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.q-own > .sc-h2 { margin-bottom: 0; }
.q-own .calc-own-now { margin: 0; font-size: 15px; }
.q-own .q-own-say { margin: 4px 0 0; font-size: 12.5px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.q-own .q-own-say b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.q-own .q-own-say b.q-own-cut { color: var(--red-ink); }
.q-own .pl-acts { position: static; padding-top: 4px; }
.q-proc .q-proc-own { flex: 1 0 100%; font-size: 12.5px; line-height: 16px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.q-internal div.q-int-disc b { color: var(--red-ink); }
.q-row-sheet .calc-line { position: relative; min-height: var(--h-m); padding: 0; border-top: 0; }
.q-row-sheet .calc-line > .calc-sw { min-height: var(--h-m); }
.q-row-sheet .calc-line::after { content: ''; position: absolute; inset: -2px 0; }
.q-lbl { font-weight: 700; line-height: 16px; }
.card details.fold:not(.sec) { box-shadow: none; border: 1px solid var(--line); background: var(--field); border-radius: var(--r-m); overflow: visible; }
.card details.fold:not(.sec) > summary { position: relative; min-height: var(--h-m); padding: 0 12px; font-size: 14px; line-height: 20px; box-sizing: border-box; border-radius: inherit; }
.card details.fold:not(.sec) > summary::after { content: ''; position: absolute; inset: -2px 0; }
.q-status { min-height: 0; }
.q-status:empty { margin: 0; }
.ei-row .mini-btn.ei-hide { min-height: var(--h-m); padding: 0 14px; border-radius: var(--r-m); font-size: 14px; }
.pr-sheet .pr-sw + .sc-fld { margin-top: 8px; }
.pr-page .btn, .pr-sheet .btn { padding: 9px 14px; font-size: 14px; }
.pr-page .btn.pr-pick, .pr-sheet .btn.pr-pick { padding: 4px 12px; }
.pr-acts { gap: 6px; }
.mx-sheet .mx-fld { gap: 0; }
.mx-when { margin-top: 8px; }
.mx-sum { margin: 0; }
.calc-sw .sw { background: color-mix(in srgb, var(--muted) 75%, transparent); border-color: transparent; }
.calc-sw .sw.on { background: var(--accent); border-color: var(--accent-strong); }
.calc-sw .sw::after { background: #fff; }
.pl-sheet.calc-cl-sheet > input.f { margin: 0 0 6px; }
.calc-clrow { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field); padding: 3px 12px; }
.btn.calc-pickcl, .calc-lale .btn, .calc-paste .btn.calc-parse { min-height: var(--h-m); border-radius: var(--r-m); font-size: 14px; }
/* Кр4 (ответ 24): 40 с рамкой 1, накладка от внутреннего края рамки: -3 даёт 44, при нажатии -6 даёт 50, как у .btn. */
.btn.calc-pickcl::after, .calc-lale .btn::after, .calc-paste .btn.calc-parse::after { inset: -3px 0; }
.btn.calc-pickcl:active::after, .calc-lale .btn:active::after, .calc-paste .btn.calc-parse:active::after { inset: -6px -3%; }
.calc-h:has(> .calc-tag) { flex-wrap: wrap; row-gap: 4px; }
.calc-tag { white-space: nowrap; }
.card p.calc-incl > .btn.go { width: 100%; }
.tm-member .ago { display: block; white-space: normal; }
.rp-psheet .pl-acts .btn.go { min-height: var(--h-m); }
#report-body > .warn-line { margin-bottom: 8px; }
.imp-runs:empty { display: none; }
.imp-box .imp-body { margin-bottom: 9px; }
.reason-sheet .seg + .tm-link:empty + .pl-acts { padding-top: 4px; }
.tm-mlist + .tm-link:empty + .sheet-cancel { margin-top: 4px; }
.hp-intake .hp-sub + .ik-ways { margin-top: -8px; }
.hp-intake .hp-status:empty { min-height: 0; margin-top: -12px; }
#bot .b-head .st { white-space: normal; overflow: visible; text-overflow: clip; }
#bot .b-setup-banner { position: relative; min-height: var(--h-m); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
#bot .icobtn.mic, #bot .icobtn.send { width: var(--h-m); height: var(--h-m); flex-basis: var(--h-m); }
/* Л3: круги строки ввода 40 (M), палец 44 накладкой; при нажатии (сжатие .93) накладка 50, край зоны остаётся на круге. */
#bot .icobtn.mic::before, #bot .icobtn.send::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; }
#bot .icobtn.mic:active::before, #bot .icobtn.send:active::before { inset: -6px; }
#btext { min-height: var(--h-m); line-height: 20px; }
.pl-picker-body, .ex-fields { margin: 0 -5px; }
.num-sheet .pl-picker-body { margin: 0; }
.tdo-sheet .pl-picker-body, .pl-picker-body.sc-tolist { padding: 2px 0; margin: 0; }
.ex-footer { padding-top: 7px; }
.pl-picker:is(.calc-own-sheet, .q-row-sheet, .q-cat-sheet, .rp-psheet, .trash-export-sheet, .trash-clear-sheet, .wa-group-ask) > .sc-shd { margin-bottom: 10px; }
.trash-scope { margin: 8px 0 0; }
.stat { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.stat span { display: block; line-height: 1.25; margin-top: 2px; }
.seg.ads-seg { column-gap: 2px; }
.fu-where-acts { margin-top: 4px; }
.fu-dr-body, .fu-dr-ready { gap: 8px; }
.row .side a, .row .side button { width: var(--h-m); min-width: var(--h-m); min-height: var(--h-m); padding: 0; border-radius: var(--r-m); }
.row .side a::after, .row .side button::after { inset: -3px; }
.row .side a:active::after, .row .side button:active::after { inset: -5px; }
/* Кл9 (замечания кругов 2 и 3): кнопка 40 больше не держит строку, высоту задаёт текст, и она целая и чётная (дробная или
   нечётная ставила край на полпикселя, заливка статуса не доходила до края, П37-EDGES): имя 22 и срок 18 целыми строками без
   зазора (было 22,475 + 1 + 18,125), плашки в строке срока по верху, а не по базовой линии. Строка без плашки 64, была 66. */
.row b.nm { line-height: 22px; }
.row .ago { line-height: 18px; margin-top: 0; }
.row .ago > .pill { vertical-align: top; }
.row .nm-line > .pill { line-height: 16px; margin-top: 0; margin-bottom: 0; }   /* метка у имени 20, строка имени остаётся 22 */
.who .name-edit input.f { flex-basis: 100%; }
.cl-new .add-dupes > .card { border: 0; padding: 0; background: none; box-shadow: none; }
/* Кл11 (замечание круга 3): «Загрузить переписку» внутри липкого блока кнопок первой строкой во всю ширину, под ней ряд
   «Завести | Закрыть» через 6: при открытом «Кажется, он уже есть» на 375×812 отдельная кнопка уходила под липкий ряд. */
.cl-new .cl-new-acts .btn.cl-upload { grid-column: 1 / -1; }
.cl-new .add-dupes > .card h3 { font-size: 16px; font-weight: 700; }
.btn:is(.sc-when, .sc-pick-btn, .rp-until-day), #sc-fRepeat, #sc-fRem { position: relative; justify-content: flex-start; text-align: left; padding-left: 12px; padding-right: 36px; }
.btn:is(.sc-when, .sc-pick-btn, .rp-until-day)::before, #sc-fRepeat::before, #sc-fRem::before { content: ''; pointer-events: none; position: absolute; width: 6px; height: 6px; right: 14px; top: calc(50% - 5px); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
/* М5: значки состояния линией цветом состояния; на листе обеих тем от 3,4:1. */
.health-row > svg.health-ico { width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; color: var(--blue); }
.health-row.ok > svg.health-ico { color: var(--grn); }
.health-row.fail > svg.health-ico { color: var(--red); }
.health-row.warn > svg.health-ico { color: var(--yel); }
/* Кл4 (замечания круга 2): в «Убрать из «Ждут ответа»» четыре кнопки рядами по две; «Удалить» в обоих листах удаления
   красная, как в прежнем окне (.pl-acts .btn:not(.go) перекрывал её заливку и рамку заливкой поля). */
.pl-acts.dsm-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pl-sheet.danger .pl-acts .btn.danger-btn { border-color: color-mix(in srgb, var(--red) 38%, transparent); background-color: color-mix(in srgb, var(--red) 10%, transparent); }
.pl-sheet.danger .pl-acts .btn.danger-btn:hover { background-color: color-mix(in srgb, var(--red) 18%, transparent); }

/* ---------- «Мой прогресс» (deliverable 49 D, crm/public/progress.js; макет v2) ----------
   Классы с приставкой pg-: имена chart, legend, fold, sum, sw, meter уже заняты другими экранами.
   Золото на белом - через --tab-on (фирменное не держит контраст), «предметы» (итоги месяца,
   уровень, значки) - в цветах сайта --p-navy / --p-gold, одинаково в обеих темах. */
#progress-body { display: grid; gap: 12px; }
/* Компьютер: две колонки (цель и график, рекорды и уровень рядом), иначе график растягивался бы на
   всю ширину в 3,5 раза (проверка 608b74d). Широкие блоки - во всю строку. */
@media (min-width: 900px) {
  #progress-body { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #progress-body > .pg-seg, #progress-body > .pg-tiles, #progress-body > [data-pg='badges'], #progress-body > .pg-sum, #progress-body > [data-pg='team'] { grid-column: 1 / -1; }
}
.pg-ringcard .ring { margin: 0; }
/* «Неделя | Месяц» и «Показатель» - общий переключатель .seg (П25 п. 4); четыре показателя команды влезают в ряд на 375. */
.pg-seg.sm > .seg-btn { padding: 0 6px; }
.pg-h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.pg-h2 span { font-size: 12.5px; font-weight: 500; color: var(--faint); text-align: right; }
.pg-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--faint); }
/* цель месяца */
.pg-ringcard { display: flex; align-items: center; gap: 14px; }
.pg-ringtx { display: grid; gap: 4px; min-width: 0; }
.pg-ringtx b { font-size: 17px; }
.pg-ringtx b.pg-done { color: var(--grn); }
.pg-ringtx span { font-size: 13.5px; color: var(--muted); }
.pg-ringtx .pg-streak { display: inline-flex; align-items: center; gap: 6px; color: var(--tab-on); font-weight: 600; }
.pg-flame { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.pg-flame.sm { width: 12px; height: 12px; }
.pg-kpis { display: grid; gap: 6px; margin-top: 10px; }
.pg-kpi { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); min-height: var(--h-m); }
.pg-kpi b { color: var(--ink); font-size: 15px; }
.pg-kpi b.ok { color: var(--grn); }
.pg-step { display: inline-flex; align-items: center; gap: 6px; }
.pg-step b { min-width: 56px; text-align: center; }
/* Кнопка цели: сам элемент 44×44 (настоящая область нажатия), видимый круг S 34 нарисован в ::before, знак - .sgn.
   Отрицательное поле 5 px оставляет раскладку прежней. При нажатии сжимается только плашка: если сжимать саму
   кнопку, отпускание у края приходится мимо неё и нажатие теряется (проверка R-20261004-T-audit-fix-2-1ee51da-01). */
.pg-stb { position: relative; isolation: isolate; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -5px; border: 0; border-radius: 14px; background: none; color: var(--ink); font: inherit; padding: 0; cursor: pointer; }
.pg-stb::before { content: ''; position: absolute; inset: 5px; z-index: -1; border-radius: 50%; border: 1px solid var(--line); background: var(--field);
  transition: transform var(--dur-press) var(--spring); }
.pg-stb:active::before { transform: scale(.92); }
.pg-stb:disabled { opacity: .4; cursor: default; }
.pg-mbar { display: grid; gap: 6px; margin-top: 10px; }
.pg-mtop { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); align-items: baseline; }
.pg-mtop b { color: var(--tab-on); font-size: 14px; white-space: nowrap; }
.pg-track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pg-track i { display: block; height: 100%; border-radius: 4px; transform-origin: left; background: linear-gradient(90deg, #9A7642, var(--p-gold), var(--p-gold-hi)); }
/* плитки */
.pg-tiles { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-tiles > .pg-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) { .pg-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pg-tiles > .pg-tile:last-child:nth-child(odd) { grid-column: auto; } }
.pg-tile { border: 1px solid var(--edge); background: var(--panel); border-radius: 16px; padding: 12px; display: grid; gap: 2px; min-width: 0; box-shadow: inset 0 1px 0 var(--hl); }
.pg-tile b { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pg-tile span { font-size: 13px; color: var(--muted); }
.pg-tile small { font-size: 12px; color: var(--grn); font-weight: 600; }
.pg-tile small.flat { color: var(--faint); font-weight: 500; }
.pg-tile.gold b { color: var(--tab-on); }
/* график */
.pg-chart { width: 100%; height: auto; display: block; }
.pg-chart text { fill: var(--faint); font-size: 11px; font-family: inherit; }
.pg-chart .today { fill: var(--ink); font-weight: 700; }
/* Столбики - читаемым золотом --tab-on: фирменное на белом даёт 2,6:1 (правило графиков приложения). */
.pg-chart .bar { fill: color-mix(in srgb, var(--tab-on) 40%, transparent); }
.pg-chart .bar.hi { fill: var(--tab-on); }
.pg-chart .grid { stroke: var(--line); stroke-width: 1; }
.pg-chart .bk { fill: var(--p-navy); stroke: var(--p-gold-hi); stroke-width: 1.5; }
.pg-chart .vl { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.pg-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); margin-right: 5px; vertical-align: -1px; }
.pg-legend i.bk { border-radius: 50%; background: var(--p-navy); box-shadow: 0 0 0 1.5px var(--p-gold-hi); }
/* рекорды */
.pg-recs { display: grid; gap: 8px; }
.pg-rec { display: flex; gap: 10px; align-items: center; }
.pg-rec .mk { width: var(--h-s); height: var(--h-s); border-radius: var(--r-s); display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--tab-on); flex: 0 0 auto; }
.pg-rec .mk .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pg-rec .t { min-width: 0; display: grid; }
.pg-rec .t b { font-size: 15px; }
.pg-rec .t span { font-size: 13px; color: var(--muted); }
/* уровень */
.pg-lvl { display: flex; align-items: center; gap: 12px; }
.pg-lvbadge { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto; font-weight: 800; font-size: 20px; color: var(--p-gold-hi);
  background: radial-gradient(120% 120% at 30% 20%, var(--p-navy2), var(--p-navy)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--p-gold-hi) 55%, transparent); }
.pg-lvsteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.pg-lvsteps span { font-size: 12px; color: var(--faint); text-align: center; padding-top: 8px; border-top: 3px solid var(--line); }
.pg-lvsteps span.on { color: var(--tab-on); border-top-color: var(--accent); font-weight: 700; }
/* значки */
.pg-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .pg-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pg-badge { border: 1px solid var(--line); background: var(--field); border-radius: 16px; padding: 12px 10px; display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; font: inherit; color: inherit; cursor: pointer;
  transition: transform var(--dur-press) var(--spring), background-color var(--dur-1) var(--ease-out); }
.pg-badge:active { transform: scale(.96); }
/* Пока значок держат, он сжат на .96: накладка шире на 4 % с каждой стороны, отпускание у края не уходит мимо. */
.pg-badge { position: relative; }
.pg-badge:active::after { content: ''; position: absolute; inset: -4%; }
.pg-badge .bmed { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--line); color: var(--faint); }
.pg-badge .bmed .ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pg-badge.on { background: var(--panel-solid); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.pg-badge.on .bmed { background: radial-gradient(circle at 34% 28%, var(--p-gold-hi), var(--p-gold) 60%, #9A7642); color: var(--p-navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-gold-hi) 25%, transparent); }
.pg-badge .bt { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.pg-badge:not(.on) .bt { color: var(--muted); }
.pg-badge .bd { font-size: 11.5px; color: var(--faint); }
.pg-badge .bp { width: 70%; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.pg-badge .bp i { display: block; height: 100%; background: var(--faint); transform-origin: left; }
/* итоги месяца: карточка-«предмет» в цветах сайта */
.pg-sum { background: radial-gradient(130% 120% at 0% 0%, var(--p-navy2), var(--p-navy) 62%); color: var(--p-on-navy); border-radius: 22px; padding: 18px; display: grid; gap: 14px; position: relative; overflow: hidden; }
.pg-sum::after { content: ''; position: absolute; right: -60px; top: -60px; width: 190px; height: 190px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--p-gold-hi) 30%, transparent);
  box-shadow: 0 0 0 22px color-mix(in srgb, var(--p-gold-hi) 5%, transparent), 0 0 0 44px color-mix(in srgb, var(--p-gold-hi) 4%, transparent); pointer-events: none; }
.pg-sum .eye { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--p-gold-hi); }
.pg-sum h3 { margin: 2px 0 0; font-size: 24px; line-height: 1.15; color: inherit; letter-spacing: 0; text-transform: none; }
.pg-sum .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; position: relative; z-index: 1; }
@media (min-width: 900px) { .pg-sum .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pg-sum .grid b { display: block; font-size: 28px; line-height: 1.05; color: var(--p-gold-hi); font-variant-numeric: tabular-nums; }
.pg-sum .grid span { font-size: 13px; color: var(--p-on-navy-dim); }
.pg-sum .best { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--p-navy); background: var(--p-gold-hi); border-radius: 999px; padding: 4px 10px; justify-self: start; position: relative; z-index: 1; }
.pg-sum .best .ico { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.pg-sum .foot { font-size: 12px; color: var(--p-on-navy-dim); position: relative; z-index: 1; }
/* тихая таблица команды: свёрнута, раскрывается нажатием */
.pg-fold { position: relative; margin: 0 0 2px; border: 0; background: none; padding: 6px 0; display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint); min-height: var(--h-m); cursor: pointer; }
.pg-fold::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.pg-fold span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.pg-expand { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
/* Обрезка шире содержимого на 5 px с каждой стороны: область нажатия кнопок целей у края не режется. */
.pg-expand > div { overflow: hidden; min-height: 0; margin: 0 -5px; padding: 0 5px; }
.pg-expand.open { grid-template-rows: 1fr; opacity: 1; }
.pg-lbwrap { display: grid; gap: 10px; padding: 5px 0 2px; }   /* 2 снизу: палец последней строки («Не показывать мне таблицу») не режет обрезка раскладушки */
.pg-lb { display: grid; gap: 2px; }
.pg-lbrow { display: grid; grid-template-columns: 26px 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--r-m); }
.pg-lbrow.me { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pg-lbrow .rk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.pg-lbrow .rk.r1 { background: var(--accent); color: #1a1409; }
.pg-lbrow .rk.r2 { background: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--ink); }
.pg-lbrow .rk.r3 { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--ink); }
.pg-lbrow .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--field); color: var(--muted); }
.pg-lbrow .av.me { background: color-mix(in srgb, var(--accent) 30%, var(--panel-solid)); color: var(--tab-on); }
.pg-lbrow .nm { min-width: 0; display: grid; gap: 4px; }
.pg-lbrow .nm b { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.pg-lbrow .fl { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--tab-on); }
.pg-meter { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.pg-meter i { display: block; height: 100%; width: 100%; border-radius: 2px; background: var(--accent); transform-origin: left; transition: transform var(--dur-3) var(--ease-out); }
.pg-lbrow .v { font-weight: 700; font-size: 15px; }
.pg-tgoals { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
/* Ряды целей через 46 px (40 + 6), как у своих целей: области нажатия соседних рядов не пересекаются. */
.pg-tgoal { display: grid; gap: 6px; }
.pg-tgoal > b { font-size: 14px; }
.pg-hidden { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pg-swl { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); min-height: var(--h-m); cursor: pointer; position: relative; }
.pg-swl::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.pg-swl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pg-sw { position: relative; width: 44px; height: 24px; box-sizing: border-box; border: 1px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--muted) 75%, transparent); flex: 0 0 auto; transition: background-color var(--dur-2) var(--ease-out); }
.pg-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur-2) var(--ease-out); }
.pg-swl input:checked + .pg-sw { background: var(--accent); border-color: var(--accent-strong); }
.pg-swl input:checked + .pg-sw::after { transform: translateX(20px); }
.pg-swl input:focus-visible + .pg-sw { outline: 2px solid var(--accent); outline-offset: 2px; }
/* П8 (макет #P8): добавленные виды цели месяца с «прошло 0 из 2», лист «+ Ещё цель», «Как шли цели», правка цели у Лале.
   Полоска заполняется переходом transform (данные: --dur-3), от нуля при показе экрана; «уменьшить движение» - сразу. */
.pg-xgoal { display: grid; gap: 2px; }
.pg-fact { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
/* Зелёный «взята» мелким текстом: --grn в светлой теме на белом 4,06, с долей цвета букв (в тёмной светлее) 5,4 и 6,6. */
.pg-fact.ok span { color: color-mix(in srgb, var(--grn) 80%, var(--ink)); font-weight: 600; }
.pg-bar { height: 6px; border-radius: 3px; background: var(--field); border: 1px solid var(--line); overflow: hidden; }
.pg-bar i { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--accent-strong); transform-origin: left; transform: scaleX(0); transition: transform var(--dur-3) var(--ease-out); }
.pg-bar.ok i { background: var(--grn); }
/* T-motion-3: после смены периода полоски целей доезжают от прежней доли за --dur-2 (при показе экрана - --dur-3, как было). */
#progress-body.pg-swap .pg-bar i, #progress-body.pg-swap .pg-mbar .pg-track i { transition: transform var(--dur-2) var(--ease-out); }
.pg-add { width: 100%; margin: 10px 0 0; }
.pg-add.sm { margin-top: 2px; }
.pg-lead { margin: 0 0 8px; }
.pg-kinds .pg-kind { align-items: flex-start; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.pg-kinds .pg-kind[aria-pressed='true'] { border-color: var(--accent-strong); background: var(--gold-soft); }
.pg-kinds .pg-kind:active { background: color-mix(in srgb, var(--ink) 10%, var(--field)); }
.pg-kt { display: grid; gap: 2px; text-align: left; min-width: 0; }
.pg-kt small { font-weight: 400; color: var(--muted); font-size: 12px; }
.pg-num { margin: 0 0 8px; }
.pg-prev { margin: 0 0 8px; }
.pg-drop { width: 100%; margin: 0 0 2px; }
.pg-said { margin: 4px 0 0; font-size: 13px; color: var(--ink); }
.pg-said:empty { display: none; }
.pg-hist { display: grid; }
.pg-hrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.pg-hm { font-size: 15px; }
.pg-hs { justify-self: end; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: right; }
.pg-hs.ok { color: color-mix(in srgb, var(--grn) 80%, var(--ink)); }
.pg-hico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pg-hg { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.pg-hlate { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); font-style: italic; }
.pg-hrow .pg-bar { grid-column: 1 / -1; margin-top: 4px; }
.pg-edit { display: grid; gap: 6px; margin-bottom: 2px; }
/* В листе число шире («5 000 €», «без цели»): «−» в строках на одной вертикали. Цифры одной ширины: число докручивается
   (UI-RULES, числа), строка не прыгает. */
.pg-sheet .pg-step b { min-width: 80px; }
.pg-step b.num { font-variant-numeric: tabular-nums; }
.pg-mseg { margin-bottom: 6px; }

/* T-fix-press-edge: правила раздела pg- со сжатием на нажатии при уменьшенной анимации (см. общий блок перед стилями su- «Настройки»). */
@media (prefers-reduced-motion: reduce) {
  .pg-stb:active::before,
  .pg-badge:active { transform: none; }
}

/* П53/П60: строки денег и расходов одним компактным форматом П25. */
.p53-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; margin-bottom: 4px; font-size: 14px; }
.p53-top .p36-client-price.btn { width: auto; flex: 0 0 auto; margin: 0; }
.ex-section .p53-row { align-items: center; justify-content: flex-start; min-height: 44px; padding: 2px 0; gap: 6px; border: 0; font-size: 14px; }
.p53-name { min-width: 0; overflow-wrap: anywhere; }
.p53-row .p53-amount { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.p53-row > b { margin-left: auto; }
.p53-row .p53-switch, .ex-section .p53-row > .p36-assistant-toggle.ex-shenel { flex: 0 0 46px; width: 46px; min-width: 46px; margin: 0; padding: 7px 1px; justify-content: center; }
.p53-row .p53-switch { background: none; border: 0; box-shadow: none; }
.p53-doc-line { min-height: 44px; gap: 12px; font-size: 14px; }
.p53-doc-line > span { min-width: 0; overflow-wrap: anywhere; }
.p53-doc-line > b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.p60-other, .p60-results, .p60-results .btn { margin-top: 8px; }
.p60-other + input.f { margin-top: 8px; }
.p60-results { max-height: 140px; overflow-y: auto; padding: 2px; }
.p60-results .btn { width: 100%; }
.p60-price { font-size: 14px; font-weight: 600; margin: 8px 0; }

/* П51/П52 (frozen177 5cd30adf, договор ROOT 03ba16af): выбор аэропорта и поездка на листе операции. Форматы П25: полоса .seg 34,
   кнопки и поле 40, пальцы 44 (накладки .seg-btn/.btn), цвета из токенов обеих тем; день операции - цвет операции (--red). */
.m51-air { display: grid; grid-template-columns: minmax(0, 1fr); }
.m51-air .m51-seg { min-width: 0; }
.m51-air .m51-seg > .seg-btn { flex: 1 1 auto; min-width: 0; }
/* R216 F1: в строке поездки (.sc-tripk .row уже на заливке поля) полоса выбора аэропорта и найденное - без второй заливки поля: поле
   поверх поля давало серому тексту невыбранных в тёмной теме 4.36 при норме 4.5. Видом это та же полоса П25 (заливку под ней даёт
   строка), рамка, размеры и палец 44 прежние; вне строки поездки (форма прилёта, «Цены») полоса не меняется. */
.sc-tripk .m51-air .seg { background: transparent; }
/* Там же подсказка поиска и «Не нашла…» серым --muted, как подписи строк .sc-tripk small: общий .sc-small (--faint) на заливке строки
   давал 4.49. */
.sc-tripk .m51-air .m51-hint, .sc-tripk .m51-air .m51-none { color: var(--muted); }
.m51-air .m51-other { justify-self: start; width: auto; max-width: 100%; margin-top: 8px; }
.m51-search { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 8px; }
.m51-qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.m51-qrow > .f { margin: 0; min-width: 0; }
.m51-search .m51-found { justify-self: start; max-width: 100%; margin-top: 2px; }
.m51-search .m51-found > .seg-btn { flex: 0 1 auto; min-width: 0; }
.m52-trip { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 6px; }
.m52-trip[hidden] { display: none; }
.m52-done { color: var(--ink); }
.m52-depadd { margin-top: 8px; }
.pl-date.m52-opday { box-shadow: inset 0 0 0 2px var(--red); }
.m52-opnote { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; }
.m52-opnote i { flex: none; width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--red); }
.ei-addair { justify-self: start; width: auto; }
.ei-airport.m51-new { outline: 2px dashed var(--accent-graphic); outline-offset: 4px; border-radius: var(--r-m); }
/* П54 (frozen177 #P54): блок «Один трансфер» в листе трансфера. Только токены, кнопки П25 (.btn.sc-block, палец 44), обе темы. */
.m54-share { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 8px; }
.m54-share .m54-t { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.m54-share .m54-pay { overflow-wrap: anywhere; }
.m54-share .btn.sc-block + .m54-t { margin-top: 6px; }

/* P55 private reservation WIP */
.p55-reserve{background:transparent;border:1px dashed var(--faint);color:var(--ink)}

/* P66: translated text remains visibly separate from the editable original. */
.p66-translation { color: var(--muted, #777); font-size: .88em; margin-top: .35rem; white-space: pre-wrap; }
.qrow:has(> .p66-translation) { flex-wrap: wrap; }
.qrow > .p66-translation { flex-basis: 100%; }
/* P66: «Языки, которые ты знаешь» - выпадающий список строками выбора pl-pick-row прямо в «Приложении», без своего листа;
   кнопка как выпадающие pl-pick, длинный список языков переносится, а не уходит за край. */
.p66-known-languages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 8px 10px; }
/* P66: visible M40 rows use separate 48px slots; centered hit overlays remain disjoint while pressed. */
.p66-kl-list { gap: 8px; padding-block: 3px; }
.p66-known-languages .p66-kl-btn::after, .p66-kl-list > .btn::after { inset: -3px 0; height: auto; transform: none; }
.p66-known-languages .p66-kl-btn:active::after, .p66-kl-list > .btn:active::after { inset: -6px -3%; }
#panel .p66-known-languages > .group { padding: 6px 0 2px; }
.btn.pl-pick.p66-kl-btn { padding-block: 9px; }
.p66-kl-btn .pl-pick-t { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.p66-kl-btn[aria-expanded='true'] .pl-pick-c { transform: rotate(180deg); }
.p66-kl-list[hidden], .p66-kl-status[hidden] { display: none; }
.p66-kl-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.p66-kl-status .mini-btn { margin-left: 0; }
.p66-analysis .mini-btn { margin-block: .25rem; }

/* ---------- Заявки с формы (crm/lib/lead-intake.js): «Кто», очередь проверки, карточка, кампания ---------- */
/* Только существующие токены обеих тем. Кнопки - обычные .btn (M 40) рядами через 6: накладки 44 не сходятся. */
.p-lead { background: var(--field); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.lead-row .lead-col { flex: 1; min-width: 0; padding: 11px 13px; }
.lead-row .lead-col > .ago { display: block; white-space: normal; overflow-wrap: anywhere; }
.lead-who { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.lead-phone { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lead-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 2px 0; }
.lead-acts .btn { margin: 0; }
.lead-item { border-top: 1px solid var(--line); padding: 10px 0; min-width: 0; }
.lead-status { margin: 0 0 8px; }
.lead-warn { color: var(--red-ink); }
/* Шапка заявок: на широком экране #list-rows - сетка колонок; шапка во всю ширину над карточками, не своей колонкой. */
#list-rows > .lead-head { grid-column: 1 / -1; min-width: 0; }
.lead-head .btn { margin: 0 0 12px; }
.lead-head .note-hint { overflow-wrap: anywhere; }
.lead-prev-list { margin-top: 8px; }
.ads-leads-line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ads-leads-line b { font-weight: 700; }
/* ROOT7 ADS-GAP (Макс 06.11, снимки iPhone): подсказка над шапкой «Клиентов в CRM» и «Заявок с формы» до шапки 12, как над
   рядом кнопок (UI-RULES П25, `.add-dupes > .card > .note-hint`); «За всё время…» до первой карточки 10, как `.sort-seg` до строк
   «Моего дня» и `.rp-live` «Отчёта»; так же подсказка «Заявок с формы» до первой строки чисел 10. Только до карточки или первой
   строки: две подсказки подряд (пусто, нет данных) остаются через 6, ошибка и строки чисел между собой прежние. Шапка до
   подсказки под ней 8, карточки через 9 и подвал прежние.
   Классы обёрток и фраз о неопределённых в CSS не называются (campaign-attribution-browser): правило держится за сами раскладушки. */
.note-hint + details.sec:is(.ads-crm, .ads-leads) { margin-top: 12px; }
.ads-crm-src + .ads-crm-rows > .row:first-child, .ads-leads-nums > .ads-leads-line:first-child { margin-top: 10px; }
[data-privacy='on'] :is(.lead-who, .lead-phone) { filter: blur(5px); user-select: none; }

/* П69 «Оформление листа» (ROOT7 SHEETBRAND 10.11, crm/public/sheet-brand.js). Форматы П25: кнопки 40 (.btn) и 34 (чипы), поля 40
   с подписью 12 через 4, лист .pl-standard с шапкой 34, ряды листа через 8. Образцы цветов (.p69-sw) и миниатюры листов - данные
   агентства, не токены CRM (как цвета врачей); полосы «как лёг» - цвета сайта (--p-on-navy, --p-navy), одни в обеих темах. */
#panel .item .t span.p69-pair { display: inline; font-size: inherit; white-space: nowrap; }
#panel .item .t span.p69-v { display: inline; font-size: inherit; font-weight: 700; }
#panel .item .t span.p69-v.on { color: var(--grn); }
#panel .item .t span.p69-v.off { color: var(--muted); font-weight: 600; }
#panel .item .t span.p69-v.vst { color: var(--accent-strong); }
.p69-sheet .p69-st { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 20px; }
.p69-sheet .p69-st .sc-sw { width: 10px; height: 10px; }
.p69-sheet .p69-what { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.p69-sheet .p69-fig { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field); }
.p69-sheet .p69-fig figcaption { display: grid; gap: 6px; min-width: 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.p69-sheet .p69-fig figcaption b { color: var(--ink); font-size: 15px; line-height: 20px; }
.p69-sheet .p69-thumb { display: block; flex: 0 0 auto; width: 96px; aspect-ratio: 1240 / 1754; height: auto; border-radius: 4px; background: var(--line);
  box-shadow: 0 0 0 1px var(--line); object-fit: cover; }
.p69-sheet .p69-thumb.big { width: 108px; }
.p69-sheet .p69-sws { display: flex; gap: 4px; align-items: center; }
.p69-sheet .p69-sw { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px var(--line); flex: 0 0 auto; }
/* Шаг 1: логотип «как лёг» на светлой шапке и на тёмной полосе листа (на белой плашке, как на листе). */
.p69-sheet .p69-logo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.p69-sheet .p69-lay { display: grid; place-items: center; height: 64px; padding: 8px; border-radius: 10px; border: 1px solid var(--line); box-sizing: border-box; }
.p69-sheet .p69-lay.light { background: var(--p-on-navy); }
.p69-sheet .p69-lay.dark { background: var(--p-navy); border-color: transparent; }
.p69-sheet .p69-lay img { max-width: 100%; max-height: 46px; height: auto; display: block; }
.p69-sheet .p69-lay.dark img { max-height: 36px; padding: 4px 8px; border-radius: 6px; background: var(--p-white); }
.p69-sheet .p69-lay-c { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; color: var(--muted); }
.p69-sheet .p69-file { display: flex; align-items: center; gap: 8px; }
.p69-sheet .p69-file .sc-small { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.p69-sheet .p69-file .btn { flex: 0 0 auto; width: auto; margin: 0; min-height: var(--h-s); padding: 0 12px; border-radius: var(--r-s); font-size: 13.5px; }
.p69-sheet .p69-drop { display: grid; justify-items: center; gap: 2px; width: 100%; min-height: 96px; padding: 14px; border: 1.5px dashed var(--line); border-radius: var(--r-m);
  background: var(--field); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.p69-sheet .p69-drop .ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.p69-sheet .p69-drop small { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.p69-sheet .p69-mood { display: flex; flex-wrap: wrap; gap: 6px; }
.p69-sheet .p69-mood .chip { min-height: var(--h-s); }
.p69-sheet .p69-send { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 17px; color: var(--muted); }
.p69-sheet .p69-send .ico { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; margin-top: 1px; }
/* Шаг 2: этапы честно, без процентов: сделано, идёт (крутится), впереди. */
.p69-sheet .p69-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.p69-sheet .p69-steps li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 10px; font-size: 14px; line-height: 18px; color: var(--muted); }
.p69-sheet .p69-steps li.done { color: var(--ink); }
.p69-sheet .p69-steps li.now { color: var(--ink); font-weight: 700; background: var(--field); }
.p69-sheet .p69-steps .p69-dot { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; box-sizing: border-box; }
.p69-sheet .p69-steps li.done .p69-dot { border-color: var(--grn); background: var(--grn); }
.p69-sheet .p69-steps li.done .p69-dot svg { width: 12px; height: 12px; fill: none; stroke: var(--panel-solid); stroke-width: 3; }
/* Бесконечный индикатор живёт на своём числе (UI-RULES 1). */
.p69-sheet .p69-steps li.now .p69-dot { border-color: var(--line); border-top-color: var(--accent); animation: p69spin .9s linear infinite; }
@keyframes p69spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .p69-sheet .p69-steps li.now .p69-dot { animation: none; border-color: var(--accent); } }
.p69-sheet .p69-time { margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Шаг 3: карточка варианта - кнопка во всю ширину: миниатюра первой страницы, имя, строка, образцы цветов. */
.p69-sheet .p69-vars { display: grid; gap: 8px; }
.p69-sheet .p69-var { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px; text-align: left; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field); cursor: pointer; }
.p69-sheet .p69-vt { display: grid; gap: 6px; min-width: 0; align-content: start; }
.p69-sheet .p69-vt b { font-size: 16px; line-height: 20px; }
.p69-sheet .p69-vline { font-size: 13px; line-height: 18px; color: var(--muted); }
.p69-sheet .p69-open { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--tab-on); }
.p69-sheet .p69-hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Лист целиком: страницы друг под другом, листаются в листе. */
.p69-sheet .p69-pages { display: grid; gap: 6px; padding: 8px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); }
.p69-sheet .p69-pages img { display: block; width: 100%; height: auto; aspect-ratio: 1240 / 1754; border-radius: 3px; background: var(--line); }
.p69-sheet .p69-pages span { font-size: 12px; line-height: 16px; color: var(--muted); text-align: center; }
.p69-sheet .p69-warn { margin: 0; }
/* Липкие кнопки снизу листа: видимый зазор до ряда выше тот же 8. Две длинные кнопки (ошибка ИИ) друг под другом по 40. */
.p69-sheet .pl-acts { margin-top: -4px; }
.p69-sheet .pl-acts.p69-stack { display: grid; gap: 6px; }
.p69-sheet .sc-stack > .sc-h2 { margin-bottom: -4px; }
.p69-sheet .sc-shd .sc-back { margin-right: auto; }
.q-brand { margin: 6px 0 0; font-size: 12.5px; line-height: 17px; color: var(--muted); }
/* П70 «Цены», калькулятор и «Предложение» своего агентства (профиль pricing: "own", ROOT7 PRICES-BUILD 10.11, макет #P70).
   Форматы П25 по crm/UI-RULES.md: строки «Цен» .pr-row 40 через 4, кнопки 40 (.btn) и 34 (чипы), поля 40 с подписью 12 через 4,
   ряды листа через 8. Новых контролов нет: шаг настройки - та же строка .pr-row с отметкой слева. У VST этих узлов нет. */
.p70-setup > h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.p70-setup > h3 small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pr-row.p70-step { grid-template-columns: 24px minmax(0, 1fr) auto 16px; }
.p70-mk { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.p70-step.now .p70-mk { border-color: var(--accent); color: var(--accent-strong, var(--accent)); }
.p70-step.done .p70-mk { border-color: var(--grn); background: var(--grn); color: var(--on-red, #fff); }
.p70-mk svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.p70-step.done .pr-nm small { color: var(--grn); }
.p70-step.wait .pr-nm b { color: var(--muted); }
/* Пустой прайс врача, пустые «Наши расходы» и пустой каталог калькулятора: строка словами и кнопка во всю ширину. */
.p70-empty { margin: 2px 0 8px; font-size: 14px; line-height: 20px; color: var(--ink); }
.btn.p70-wide { width: 100%; }
/* Пример расчёта в «Правилах»: числа строкой, пустое правило «?» приглушённым. */
.p70-formula { margin: 0 0 8px; padding: 8px 10px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--field);
  font-size: 13.5px; line-height: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.p70-formula i { font-style: normal; color: var(--muted); }
.p70-formula b { white-space: nowrap; }
/* Два коротких поля в ряд (ночи, «от и до»): ряд листа 8 снизу; между полями 8. */
.p70-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0 0 8px; }
.p70-pair > .sc-fld { margin: 0; }
.p70-secs { margin: 0 0 8px; }
/* Калькулятор агентства, пока правил нет: строка словами и главная кнопка под ней через 8. */
.ag-off { display: grid; gap: 8px; }
.ag-off-t { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
/* Решение п. 9: выбор врача агентства (.btn.pr-pick из CAL.doctorPicker) - подсказка под именем, имя переносится только между
   словами; у .pr-nm b в «Ценах» overflow-wrap: anywhere рвал «Не выбран» и длинное имя. Выбор врача VST не меняется. */
.btn.pr-pick.ag-pick .pr-nm { display: grid; justify-items: start; gap: 1px; }
.btn.pr-pick.ag-pick .pr-nm b { overflow-wrap: normal; }