/* ═══════════════════════════════════════════════════════════════════════════
   GOLDJAXE Scribe · компонент «modal» — окно + диалог-подтверждение
   Стиль Synology DSM: плотно, малые радиусы, 1px-границы, плоские тени,
   золото (var(--c-gold)) — единственный акцент.

   Все цвета / отступы / тени / радиусы берутся из static/tokens.css — светлая и
   тёмная темы наследуются автоматически. Селекторы префикснуты `sc-`, чтобы не
   конфликтовать с .card/.btn/.seg/.t/.k/.pcard/.hdr существующих экранов.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Блокировка прокрутки фона + компенсация ширины скроллбара (без «прыжка» вёрстки) */
body.sc-modal-lock { overflow: hidden; padding-right: var(--sc-sbw, 0px); }

/* ── Подложка / затемнение ─────────────────────────────────────────────────── */
.sc-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  background: rgba(16, 20, 28, .55);          /* скрим (тон чернил теней токенов), не палитра */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .16s ease;
}
.sc-modal-overlay.is-open { opacity: 1; }
.sc-modal-overlay[hidden] { display: none; }
/* Без JS окно открывается адресом (GS-219): кнопка «Новый проект» — это
   <a href="#newProjectModal">, и :target показывает оверлей там, где modal.js
   не запустился. Форма внутри отправляется обычным POST, так что путь без
   скриптов остаётся рабочим. С JS клик перехватывает modal.js, до :target дело
   не доходит. */
.sc-modal-overlay[hidden]:target { display: flex; opacity: 1; }
.sc-modal-overlay:target .sc-modal { transform: none; }

/* ── Карточка ──────────────────────────────────────────────────────────────── */
.sc-modal {
  width: 100%; max-width: 440px;
  max-height: calc(100vh - var(--sp-8));
  max-height: calc(100dvh - var(--sp-8));
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3);
  transform: translateY(8px) scale(.98);
  transition: transform .18s cubic-bezier(.2, .7, .3, 1);
  outline: none;
}
.sc-modal-overlay.is-open .sc-modal { transform: none; }
.sc-modal--confirm { max-width: 420px; }
.sc-modal--wide    { max-width: 620px; }

/* ── Шапка ─────────────────────────────────────────────────────────────────── */
/* 🔴 ШАПКА НЕ ТОРГУЕТСЯ ЗА ВЫСОТУ С СОДЕРЖИМЫМ (GS-382, 12.09.2026).
   Замер на 390×844 с касанием: 79px, 9% экрана — при том, что несёт одну
   строку и крестик. Раздували её два слагаемых: padding 16px сверху и снизу
   и крестик 48px, растянутый правилом тач-цели (блок pointer:coarse ниже).

   Тач-цель крестика СОХРАНЕНА — уменьшать её нельзя, промах по «закрыть»
   стоит дорого. Но цель живёт за счёт отрицательных полей: поле нажатия
   остаётся 48px, а строку шапки задаёт текст заголовка. Вертикальный padding
   срезан до 10px, потому что зазор до крестика уже дают его собственные
   отступы — шапка платила дважды за один и тот же воздух. */
.sc-modal-head {
  flex: none;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}
/* 🔴 ЗАГОЛОВОК КРУПНЕЕ ОРГАНОВ УПРАВЛЕНИЯ ПОД НИМ (GS-383, 12.09.2026).
   После того как шапку ужали (GS-382), 16px заголовка оказались МЕЛЬЧЕ кнопок
   в теле окна: «Месяц»/«Год» набраны 13px, но сидят в цели 44px и читаются
   крупнее — заголовок переставал быть заголовком. Замечание владельца по
   снимку: «он сейчас меньше, чем любые из кнопок, смотрится неорганично».
   18px возвращают порядок старшинства, не отменяя выигрыш по высоте: строка
   подросла на 3px, а шапка была срезана на 34px. */
.sc-modal-title {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-family: var(--font-sans);
  font-size: 18px; font-weight: 700; line-height: 1.3;
  letter-spacing: -.2px; color: var(--c-ink);
}
.sc-modal-badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  color: var(--c-danger); background: var(--c-danger-bg);
}
.sc-modal-badge svg { width: 18px; height: 18px; }

/* Кнопка закрытия (✕ — текстовый глиф, а не иконка набора Lucide) */
.sc-modal-x {
  flex: none; width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--c-ink-3);
  font-family: var(--font-sans); font-size: 17px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.sc-modal-x:hover { background: var(--c-surface-3); color: var(--c-ink); }
.sc-modal-x:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ── Тело ──────────────────────────────────────────────────────────────────── */
.sc-modal-body {
  flex: 1 1 auto; overflow: auto;
  padding: var(--sp-5);
  font-size: 14px; line-height: 1.55; color: var(--c-ink-2);
}
.sc-modal-body :first-child { margin-top: 0; }
.sc-modal-body :last-child  { margin-bottom: 0; }
.sc-modal-body strong { color: var(--c-ink); font-weight: 600; }

/* ── Выбор объёма удаления (GS-68) ─────────────────────────────────────────── */
/* Варианты — крупные кликабельные строки, а не список радиокнопок мелочью:
   выбор здесь необратим, и попасть в него нужно с первого раза, в том числе
   пальцем. Объём («встреч: 12 — 340 МБ») стоит внутри своего варианта: это
   ответ на вопрос «что именно удалится», а не сноска под ним. */
.del-lead { margin: 0 0 var(--sp-3); color: var(--c-ink); }
.del-scopes { display: flex; flex-direction: column; gap: var(--sp-2); }
.del-scope {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--c-line); border-radius: var(--radius-md);
  background: var(--c-surface);
  cursor: pointer;
}
.del-scope:hover { background: var(--c-surface-3); }
.del-scope:has(input:checked) {
  border-color: var(--c-danger-line);
  background: var(--c-danger-bg);
}
/* Тач-цель 20px и своя строка: радиокнопка не должна съезжать относительно
   первой строки текста при переносе описания на второй ряд. */
.del-scope input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; }
.del-scope-txt { display: flex; flex-direction: column; gap: 2px; }
.del-scope-txt b { color: var(--c-ink); font-weight: 600; }
.del-scope-note { font-size: 13px; color: var(--c-ink-3); }
.del-scope input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Необратимость — последней строкой, ПОД вариантами (GS-46): человек читает её
   уже выбрав, за миг до нажатия, и это последнее, что он видит перед кнопкой.
   Над списком она попадалась бы на глаза до того, как есть что подтверждать. */
.del-warn { margin: var(--sp-3) 0 0; font-size: 13px; color: var(--c-danger); }
/* Кнопка удаления недоступна, пока объём не выбран: у этого окна нет безопасного
   умолчания. Гасим её ЗАМЕТНО — иначе нажатие «не срабатывает» без объяснений. */
.sc-modal-foot .sc-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Футер ─────────────────────────────────────────────────────────────────── */
.sc-modal-foot {
  flex: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.sc-modal-foot--split { justify-content: space-between; }

/* ── Кнопки модалки (самодостаточны — не зависят от .btn страницы) ──────────── */
.sc-btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; min-height: 36px;
  border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm);
  background: var(--c-surface);
  /* color НЕ задаём здесь: тот же класс .sc-btn есть в components.css без
     этого свойства, а тут modal.css грузится позже — жёсткий color на base
     перебивал бы .sc-btn--danger/--primary/--ghost (одинаковая специфичность
     0,1,0, побеждает порядок подключения). Цвет всегда идёт от модификатора. */
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; line-height: 1;
  letter-spacing: -.1px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, filter .15s;
}
.sc-btn:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.sc-btn:disabled { opacity: .5; cursor: not-allowed; }

.sc-btn--ghost { background: var(--c-surface); color: var(--c-ink-2); border-color: var(--c-line-strong); }
.sc-btn--ghost:hover { background: var(--c-surface-3); color: var(--c-ink); }

/* Primary — CTA-канон Макса: заливка яркое золото (--c-gold), ТЁМНЫЙ текст
   (--c-gold-contrast) в обеих темах. Hover СВЕТЛЕЕТ до --c-gold-mid (не темнеет
   в бронзу) — иначе тёмный текст на тёмной заливке терял бы контраст. */
.sc-btn--primary { background: var(--c-gold); color: var(--c-gold-contrast); border-color: var(--c-gold); }
.sc-btn--primary:hover { background: var(--c-gold-mid); border-color: var(--c-gold-mid); color: var(--c-gold-contrast); }

/* Узкий экран — кнопки футера растягиваются на всю ширину */
@media (max-width: 460px) {
  .sc-modal-foot .sc-btn { flex: 1 1 auto; }
}

/* Уважение к prefers-reduced-motion (тёмная тема приходит из токенов — медиазапрос темы не пишем) */
@media (prefers-reduced-motion: reduce) {
  .sc-modal-overlay, .sc-modal { transition: none; }
  .sc-modal { transform: none; }
}

/* ═══════════════ Форма проекта (.projform) ═══════════════ */
/* ─────────────────────────────────────────────────────────────────────────────
   🔴 ЖИВЁТ ЗДЕСЬ, а не в page_css страницы. Карточка проекта открывается в ДВУХ
   местах с разными наборами стилей: страница /my/projects/{key} грузит admin.css
   (каркас), а popup на главной — style.css. Общего файла у них нет, зато
   modal.css грузят ОБА — попап без него не работает вовсе.

   Пока правила лежали в <style> страницы (до 16.08.2026), форма в окне
   открывалась БЕЗ СТИЛЕЙ: системные поля, крохотные textarea, серые чекбоксы,
   кнопка «Сохранить» неотличимая от текста. Ровно та же грабля, что уже была с
   .upick и с .app-orgname: «стили из <style> одного шаблона второй странице не
   достаются» — это записано в комментарии рядом и всё равно повторилось.

   Селекторы намеренно ограничены .projform: голые input/textarea покрасили бы
   поле ссылки и поиск на главной, где у них свой вид.
   ───────────────────────────────────────────────────────────────────────────── */
.projform{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;box-shadow:var(--elev-1)}
/* 🔴 box-sizing ЗДЕСЬ, а не только в каркасе страницы. Глобального
   `*{box-sizing:border-box}` в сервисе нет, и при content-box «width:100%»
   означает 100% ПЛЮС padding и рамка — поле выходит за родителя на 28px.
   На странице это не видно: там форму обнимает .wrap с запасом по бокам. В
   окне запаса нет, и на 390px поля уезжали за правый край (замер 17.08.2026).
   Ставим на всю обвязку формы, а не на одни поля: за край вылезала и кнопка
   «Превью отчёта», и вложенные блоки. */
.projform, .projform *{ box-sizing: border-box; }
.projform input[type=text],.projform input[type=password],
.projform select,.projform textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 13px;font-size:14px;font-family:inherit;
  background:var(--c-surface-2);color:var(--ink);
  transition:border-color .15s,box-shadow .15s,background .15s}
.projform input:focus,.projform select:focus,.projform textarea:focus{
  outline:none;border-color:var(--gold);background:var(--surface);box-shadow:var(--focus-ring)}
.projform textarea{resize:vertical;line-height:1.5;min-height:120px}
.projform textarea.code{font-family:var(--font-mono);font-size:13px}
.projform .chk{display:flex;align-items:center;gap:9px;font-size:14px}
.projform .chk input{width:18px;height:18px;accent-color:var(--gold);flex:none}
.projform .note{font-size:13.5px;color:var(--faint);margin-top:6px}
/* Вводная строка карточки (GS-207 → GS-222): заголовок-подсказка с «i»,
   а не абзац. Читается первой, поэтому отступ снизу, а не сверху. */
/* Строка-вступление формы. flex-wrap — страховка от переноса на узком экране:
   при длинном переводе «i» иначе уехал бы за край. */
.projform .projform-lead{margin:0 0 14px;font-size:14px;line-height:1.45;color:var(--muted);display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.projform .projform-lead b{color:var(--ink-soft);font-weight:600}
.projform .pwbox,.projform .membox{border:1px solid var(--line);border-radius:var(--radius-md);
  padding:14px 16px;margin-bottom:18px;background:var(--c-surface-2)}
/* Память проекта — под одну галочку с подписью (GS-224, замечание владельца
   02.09.2026: «рамка очень уж большая, съедает много места»). Блок пароля
   оставлен прежним: у него внутри поле, статус и вторая галочка. Рамка и тон
   те же — соседние блоки не должны выглядеть по-разному без причины, разница
   только в воздухе внутри. */
.projform .membox{padding:9px 12px;margin-bottom:14px}
.projform .pwbox-head{display:flex;align-items:center;justify-content:space-between;
  gap:10px;font-size:14px;margin-bottom:12px}
.projform .pwbox-head b{display:inline-flex;align-items:center;gap:7px}
.projform .pwstatus{font-size:13px;font-weight:600;padding:3px 10px;border-radius:var(--radius-pill)}
.projform .pwstatus.on{background:var(--gold-bg);color:var(--gold)}
.projform .pwstatus.off{background:var(--c-surface-3);color:var(--faint)}
.projform .langpick{display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:2px}
.projform .langpick .chk{margin:0;font-weight:400}
.projform .membox .chk{margin-bottom:0}
.projform .membox .memlist{margin-top:8px;padding-top:8px}
.projform .membox .chk b{font-weight:700}
.projform .memlist{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.projform .memlist-h{font-size:13.5px;color:var(--faint);margin-bottom:6px}
.projform .memlist ul{margin:0;padding-left:16px}
.projform .memlist li{font-size:13px;color:var(--ink-soft);margin:3px 0}
.projform .memdate{font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.projform .memmeta{display:block;font-size:13px;color:var(--faint)}

/* Кнопки формы. .btn описан в admin.css (страница), но в окне на главной его
   нет — поэтому базовый вид кнопки задаём здесь же, в области .projform. */
.projform .bar{display:flex;gap:10px;align-items:stretch;margin-top:22px}

/* 🔴 В ОКНЕ «Сохранить» ПРИЛИПАЕТ к низу. Замер 16.08.2026: тело окна
   прокручивается на 1122px при видимых 749 — то есть кнопка честно есть, но
   человек её не видит и должен догадаться пролистать форму до конца. У формы
   проекта длинные поля (инструкция, контекст), и низ от них далеко.
   Только внутри окна: на странице кнопка стоит в потоке, там прокрутка своя и
   прилипание отняло бы место у содержимого. */
.sc-modal .projform .bar{
  position: sticky; bottom: calc(-1 * var(--sp-5));   /* компенсируем padding тела */
  margin-bottom: calc(-1 * var(--sp-5));
  padding: var(--sp-3) 0 var(--sp-5);
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  z-index: 1;
}
.projform .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:var(--radius-sm);padding:11px 18px;font:inherit;font-size:14px;
  font-weight:700;line-height:1.25;cursor:pointer;text-decoration:none;
  border:1px solid var(--line);background:transparent;color:var(--ink)}
.projform .btn.save{background:var(--gold);color:var(--gold-contrast);border-color:var(--gold)}
.projform .btn.save:hover{background:var(--gold-mid);border-color:var(--gold-mid)}
.projform .btn.ghost{color:var(--muted)}
.projform .btn.ghost:hover{color:var(--gold-strong);border-color:var(--gold)}
.projform .btn:focus-visible{box-shadow:var(--focus-ring);outline:none}

/* Телефон: одна колонка, кегль полей 16px (порог зума iOS Safari — ниже него
   страница зумится при фокусе и обратно не отъезжает), кнопки во всю ширину
   с тач-целью 48px. */
@media(max-width:767px){
  .projform{padding:16px 14px}
  .projform .two{grid-template-columns:1fr}
  .projform .bar{flex-direction:column;align-items:stretch;gap:10px}
  .projform .btn{width:100%;min-height:48px;padding:13px 20px}
  .projform input[type=text],.projform input[type=password],
  .projform select,.projform textarea{font-size:16px}
  .projform textarea.code{font-size:16px}
}

/* Обвязка полей: подпись, подсказка под полем, ключ проекта, сетка в две
   колонки. Те же правила есть в admin.css (страница грузит его), но на главной
   admin.css нет — а форма приезжает туда в окно. Дубль сознательный и
   ограничен .projform: без него в окне подписи были бы строчными, а поля
   становились в один столбец без отступов. */
.projform .fld{margin-bottom:18px}
.projform label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.projform label .hint{font-weight:400;color:var(--faint);font-size:13px}
.projform .fld-help{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.projform .fld-help b{color:var(--ink-soft);font-weight:600}
/* Счётчик затронутых встреч (GS-328) — парная копия к admin.css, см. там. */
.projform .fld-help--count{margin-top:4px;color:var(--ink-soft);font-weight:600}

.projform .keybox{font-family:var(--font-mono);font-size:13px;color:var(--muted);
  background:var(--c-surface-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:9px 12px}
.projform .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* 🔴 Одна колонка на телефоне — ПОСЛЕ базового правила, а не только в общем
   @media выше. Специфичность у них одинаковая (.projform .two), и при равной
   специфичности побеждает тот, кто ниже: базовое «1fr 1fr» на строке выше
   перебивало мобильное «1fr» из @media, стоявшего РАНЬШЕ. На главной это не
   всплывало — там форма открывается в окне на широком макете; вылезло на
   карточке организации (17.08.2026), где на 390px поля уезжали за правый край
   окна двумя колонками по 145px. */
@media(max-width:767px){
  .projform .two{grid-template-columns:1fr}
}
.projform .muted{color:var(--muted)}
/* Подпись у галочки — в строку с ней, иначе label{display:block} выше рвёт пару. */
.projform .chk label,.projform label.chk{display:flex;margin-bottom:0}

/* ═══════════════ Телефон: окно не тратит ширину на рамки ═══════════════ */
/* Замер 16.08.2026: у окна отступы складываются трижды — сама модалка, её тело
   и форма внутри. Полю ввода оставалось меньше половины экрана, а длинные
   значения (адрес почты, ключ проекта, ссылка) рвались посреди слова.
   Рамку окна оставляем — она отделяет его от страницы; срезаем дубли внутри. */
@media (max-width: 560px){
  .sc-modal{ max-width: none; }
  .sc-modal-head{ padding-inline: var(--sp-3); }
  .sc-modal-body{ padding: var(--sp-3); }
  /* 🔴 .wrap фрагмента внутри окна отступов НЕ добавляет. Фрагмент формы несёт
     собственный .wrap (он же обёртка страницы /my/projects и /admin/projects), и
     на странице его боковой padding уместен. В окне он ложится ТРЕТЬИМ слоем
     поверх отступов модалки и тела: на карточке организации (390px) поля из-за
     него уезжали за правый край на пару пикселей, а длинные значения рвались.
     Правило общее для всех окон с фрагментом, а не только для этой страницы:
     page_css у каждой свой, и чинить их поштучно — заводить тот же дубль. */
  .sc-modal .wrap{ padding-inline: 0; max-width: none; }
  /* Форма внутри окна своего бокового отступа не добавляет: его уже дало тело.
     🔴 И ВЕРХНЕГО ТОЖЕ (GS-382). Замер 12.09.2026: до первой строки формы
     набиралось 48px пустоты — 12px тела плюс 16px формы плюс отступ строки.
     На карточке проекта это ровно тот воздух, который владелец увидел как
     «искусственно растянуто»: окно открывается, а содержимое начинается
     где-то внизу. Боковой отступ тут срезали ещё 16.08.2026, верхний просто
     не заметили — он не давал горизонтального переполнения. */
  .sc-modal .projform{ padding-inline: 0; padding-block-start: 0; border: 0; background: transparent; box-shadow: none; }
  /* Прилипшая панель кнопок пересчитывает компенсацию под новый отступ тела. */
  .sc-modal .projform .bar{
    bottom: calc(-1 * var(--sp-3));
    margin-bottom: calc(-1 * var(--sp-3));
    padding-bottom: var(--sp-3);
  }
  /* Вложенные блоки формы (пароль, память проекта) — рамка остаётся, отступ ужат. */
  .projform .pwbox{ padding: 12px 10px; }
  .projform .membox{ padding: 8px 10px; }
}

/* ── Новая встреча (GS-45) ────────────────────────────────────────────────────
   Два состояния одного окна: форма (.meetform) и готовая ссылка (.meetdone).
   Поля здесь — общие .sc-field/.sc-input из components.css (он подключён на
   каждой странице через base.html), поэтому обвязку полей заново НЕ дублируем:
   дубль .projform выше существует только потому, что та форма приезжает
   фрагментом со страницы, где грузится admin.css. */
.meetform__check{
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--sp-4); cursor: pointer;
  min-height: 44px;                     /* тач-цель: строка целиком нажимается */
  font-size: 15px;
}
.meetform__check input{ width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; }
/* Подсказка ПОД ГАЛОЧКОЙ: отступ слева 28px подводит её под текст строки, а не
   под сам квадратик — иначе она висит под чекбоксом отдельным столбиком. */
.meetform__hint{ margin: 2px 0 0 28px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* Подсказка ПОД ПОЛЕМ ВВОДА — отдельный класс, а не тот же .meetform__hint.
   У подсказки под галочкой левый отступ 28px (подводит текст под строку
   чекбокса) — под полем ввода он неуместен. */
.meetform__note{
  margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted);
}

/* Знак «i» стоит ВНУТРИ <label> флажка. Нажатие на элемент внутри label обычно
   достаётся связанному полю — то есть подсказка переключала бы галочку. Здесь
   этого не происходит: общий обработчик .help-q (components.js) зовёт
   e.preventDefault(), а он и отменяет действие label. Своего правила не нужно —
   проверено в браузере, галочка не меняется. */

/* Редкие настройки — свёрнуты (§0 канона: прячем по частоте, а не по важности).
   Оформление тише флажков: это переход на второй уровень, а не действие. */
.meetform__more{ margin-top: var(--sp-4); }
.meetform__more-sum{
  display: flex; align-items: center; gap: 6px;
  min-height: 44px;                     /* тач-цель, как у строки флажка */
  cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600; color: var(--muted);
}
.meetform__more-sum::-webkit-details-marker{ display: none; }
.meetform__more-sum::before{
  content: "›"; display: inline-block; font-size: 17px;
  transition: transform .15s ease;
}
.meetform__more[open] .meetform__more-sum::before{ transform: rotate(90deg); }
.meetform__more .meetform__check{ margin-top: var(--sp-2); }
/* Первое ВИДИМОЕ поле внутри свёрнутого блока отступ ПОЛУЧАЕТ, в отличие от
   первого поля формы (см. правило .sc-field + .sc-field ниже). Сверху у него не
   край окна, а строка «Ещё настройки», и без отступа поле прилипает к ней —
   подпись поля читается как продолжение заголовка раскрывашки (GS-187).
   :not([hidden]) обязателен: скрытый блок закреплённых встреч остаётся первым
   по разметке, и без него отступ доставался бы ему, а не полю названия. */
.meetform__more .sc-field:not([hidden]){ margin-top: var(--sp-3); }

/* 🔴 hidden ОБЯЗАН побеждать display из класса (GS-187). `.sc-field` в
   components.css задаёт display:flex, а атрибут hidden — это display:none с
   нулевой специфичностью, и класс его молча отменяет: блок закреплённых встреч
   показывался пустым («— новая встреча —» единственной строкой) тем, у кого
   закреплённых нет вовсе. Симптом читается как ошибка данных, хотя и разметка,
   и скрипт правы — расхождение чисто в каскаде.
   Правило общее для полей окна, а не только для этого блока: тот же каскад
   сработал бы у любого .sc-field, скрываемого атрибутом. */
.sc-field[hidden]{ display: none; }
@media (prefers-reduced-motion: reduce){
  .meetform__more-sum::before{ transition: none; }
}

/* 🔴 Разделение блоков задаётся отступом СВЕРХУ У ПОДПИСИ, а не снизу у
   подсказки. Причина — схлопывание отступов: margin-bottom подсказки и
   margin соседнего .sc-field сливаются в один, и по ТЕКСТУ (а глаз меряет
   текст, не блоки) между подсказкой и подписью следующего блока оставалось
   2-3 px при 10 px до собственного поля. Подпись читалась как хвост чужой
   подсказки — замерено через Range.getClientRects() 19.08.2026; замер по
   getBoundingClientRect() этого НЕ показывает, он врёт на межстрочном
   интервале.

   Отступ вешаем на САМ БЛОК поля, а не на подпись внутри него: подпись —
   общий .sc-label из components.css, и правило под неё пришлось бы догонять
   специфичностью. Первый блок отступа не получает: сверху уже есть поле окна. */
.meetform .sc-field + .sc-field{ margin-top: var(--sp-4); }
/* Отказ — текстом и цветом сразу: один цвет не читается при дальтонизме и не
   произносится программой чтения с экрана (role=alert стоит в разметке). */
.meetform__err{
  margin: var(--sp-3) 0 0; padding: 10px 12px;
  border: 1px solid var(--red); border-radius: var(--radius-sm);
  color: var(--red); font-size: 14px; line-height: 1.45;
}
.meetform__actions{ display: flex; justify-content: flex-end; margin-top: var(--sp-4); }

/* Название созданной встречи — заголовок экрана, поэтому крупнее и плотнее
   пояснения под ним. Перенос по словам обязателен: имя вводит человек, и
   «Еженедельный созвон ЩЁЛКОВО» на телефоне иначе распирает окно. */
.meetdone__name{
  margin: 0 0 6px; font-size: 17px; font-weight: 600; line-height: 1.3;
  color: var(--ink); overflow-wrap: anywhere;
}
.meetdone__lead{ margin: 0 0 var(--sp-4); font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.meetdone__row{ display: flex; gap: 8px; align-items: stretch; }
/* Ссылка длинная и машинная: моноширинный кегль читается по символам, а
   text-overflow не даёт ей распирать окно на узком экране. */
.meetdone__url{
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-mono); font-size: 13.5px;
  text-overflow: ellipsis;
}
/* Кнопка не сжимается под напором поля: flex-basis:auto у неё уже стоит, но
   без white-space подпись переносилась внутри узкой кнопки, а с длинной
   ссылкой поле отжимало её до состояния «значок и половина слова». */
.meetdone__copy{
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; min-height: 44px; white-space: nowrap; padding-inline: 16px;
}
.meetdone__actions{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-4);
}
/* Кнопка входа — ССЫЛКА (<a>), и подчёркивание ей ставит сам браузер.
   Среди прочих кнопок сервиса она из-за этого выглядела чужой. */
.meetdone__actions .btn{ text-decoration: none; }

/* Вход ЖДЁТ, пока бот войдёт в комнату (24.08.2026).
   На secure domain комнату открывает бот, и до его входа ссылка отвечает
   «нужны права администратора» — заходит он секунд двадцать. Кнопка, живая с
   первой секунды, обещает то, чего ещё нет.

   🔴 pointer-events обязателен вместе с opacity: у ССЫЛКИ нет `disabled`, и без
   него погашенная на вид кнопка продолжала бы открывать вкладку — то есть
   ровно то поведение, ради которого её и гасят. Курсор говорит, что это
   ожидание, а не запрет навсегда. */
.meetdone__actions .btn.is-disabled{
  opacity: .5; cursor: progress; pointer-events: none;
}
/* Кольцо ожидания в самой кнопке — тот же знак, что у кнопок «Завершить» на
   странице встреч: одно ожидание на весь сервис выглядит одинаково.
   Рисуем ::before, а не отдельным узлом: подпись кнопки приходит из шаблона,
   и вставлять в неё разметку из JS значило бы держать два источника слов. */
.meetdone__actions .btn.is-disabled::before{
  content: ""; flex: none;
  width: 15px; height: 15px; margin-right: 9px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; opacity: .75;
  animation: btn-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .meetdone__actions .btn.is-disabled::before{ animation: none; }
}
.meetdone__more{
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
  text-decoration: none; border-bottom: 1px dashed transparent;
}
.meetdone__more:hover{ color: var(--gold-strong); border-bottom-color: var(--gold-line); }
.meetdone__bot{ margin: var(--sp-3) 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
/* Ожидание бота — ЗАМЕТНОЙ полосой, а не серой строкой снизу.
   Строка объясняет, почему кнопка входа не нажимается, и человек её просто не
   видел: смотрел на погашенную кнопку и не понимал, что происходит (замечание
   владельца 24.08.2026). Приём тот же, что у полосы «данные могли устареть» на
   странице встреч: цветная черта слева и своя подложка.
   Цвет текста возвращаем к основному — приглушённый на подложке теряется. */
.meetdone__bot.bot-invite__state--wait{
  padding: 10px 13px;
  border-left: 3px solid var(--c-gold-strong);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--ink);
}

/* 🔴 ОТКАЗ БОТА — тот же приём полосой, но красной чертой (GS-159).
   Отказ был серой строкой 13.5px под жёлтой кнопкой «Войти во встречу», и
   человек его не читал: рассылал ссылку на комнату, которую некому открыть
   (владелец, 31.08.2026). Кегль поднят до основного — это сообщение экрана, а
   не сноска.

   Цвет НЕ единственный носитель смысла: сообщение объясняет словами, что
   записи не будет и комнату надо открыть самому. Дальтоник и монохромный
   экран теряют акцент, но не содержание — норма WCAG 1.4.1. */
.meetdone__bot--failed{
  margin-top: var(--sp-4);
  padding: 11px 13px;
  border-left: 3px solid var(--red);
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  color: var(--ink);
  font-size: 14.5px;
}
/* Повтор приглашения — главное действие в состоянии отказа, поэтому стоит
   отдельной строкой и во всю ширину: рядом с погашенной кнопкой входа он
   читается как выбор, а не как «ещё одна кнопка». */
.meetdone__retry{ margin-top: var(--sp-3); }
.meetdone__retry .btn{ width: 100%; min-height: 44px; }

/* 🔴 Телефон — ПОСЛЕ базовых правил, а не в общем @media выше: специфичность
   одинаковая, и при равной специфичности побеждает нижний (та же грабля, что
   у .projform .two, см. комментарий выше по файлу).

   Кнопка копирования уходит под поле: рядом с ним на 390px ей остаётся ~70px,
   и подпись «Копировать» ужимается до нечитаемого. Кегль поля 16px — порог
   зума iOS Safari. */
@media(max-width:767px){
  .meetdone__row{ flex-direction: column; }
  .meetdone__url{ font-size: 16px; }
  .meetdone__copy{ width: 100%; justify-content: center; min-height: 48px; }
  .meetdone__actions{ flex-direction: column; align-items: stretch; }
  .meetdone__actions .btn{ width: 100%; min-height: 48px; }
  .meetdone__more{ text-align: center; padding: 10px 0; }
  .meetform__actions .btn{ width: 100%; min-height: 48px; }
  .meetform__check{ font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Тарифы в поп-апе (GS-51) — оформление «Крупная цена», выбрано 21.08.2026.

   Устройство: тарифы — радиокнопки, кнопка оплаты ОДНА и всегда на виду. Так
   решается «оплата в один шаг» из задачи: взгляду не нужно выбирать между тремя
   одинаковыми кнопками, а сумма на кнопке подтверждает выбор до нажатия.

   Показываем ТРИ платных тарифа + «Компанию» строкой. Пять карточек в ширину
   модалки не помещаются физически: столбцы по 110px, где не влезает ни
   название, ни цена. Пробу не показываем — открывший этот поп-ап уже внутри.

   🔴 ЦЕЛЬ РАСКЛАДКИ — УМЕСТИТЬСЯ В ЭКРАН ТЕЛЕФОНА ЦЕЛИКОМ. Замер на 390×844:
   728px против потолка 812. Платёжный экран, где кнопка оплаты ушла за край,
   теряет клиентов на ровном месте, и внутренняя прокрутка тут — дефект.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Период оплаты: месяц или год со скидкой. Сегмент, а не галочка — у выбора
   два равноправных значения, и оба надо назвать словом. */
.tiers__per{ display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.tiers__seg{
  display: inline-flex; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); overflow: hidden;
}
.tiers__seg button{
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 16px; min-height: 44px;
  cursor: pointer; background: transparent; color: var(--muted); border: 0;
  transition: background .2s, color .2s;
}
.tiers__seg button:hover{ background: var(--surface-2); color: var(--ink); }
.tiers__seg button[aria-pressed="true"]{ background: var(--gold); color: var(--gold-contrast); }
.tiers__seg button:focus-visible{ outline: 1px solid var(--gold); outline-offset: -2px; }
/* Скидка живёт ВНУТРИ кнопки «Год» (GS-383). Своей рамки и фона нет: коробка
   уже есть — сама кнопка, а вторая внутри дала бы «коробку в коробке» (канон
   П2). Роль передаёт кегль и цвет. */
.tiers__save{
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--gold-strong);
}
/* 🔴 НА НАЖАТОЙ КНОПКЕ ФОН ЗОЛОТОЙ — золотой текст на нём нечитаем. Берём
   тот же контрастный токен, что и подпись кнопки, и приглушаем прозрачностью:
   скидка остаётся уточнением, а не спорит с названием периода. */
.tiers__seg button[aria-pressed="true"] .tiers__save{
  color: var(--gold-contrast); opacity: .78;
}

/* 🔴 .sr-only ЖИВЁТ ТОЛЬКО В admin.css, а он подключён НЕ ВЕЗДЕ — на главной
   его нет (поймано в браузере: подпись группы 96×21 вместо скрытой). Держим
   свою копию здесь: modal.css идёт на всех страницах, где может открыться
   модалка, и подпись для читалки не имеет права стать видимой надписью просто
   потому, что страница не админская. */
.sc-modal-body .sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Список тарифов. Это <fieldset> — ради связи «это один выбор» для читалок,
   но собственное оформление у него браузерное: рамка и вырез под <legend>.
   Снимаем всё до нуля, иначе на экране появляется вторая рамка вокруг списка,
   а подпись группы торчит поверх неё (поймано снимком). Сама подпись остаётся
   в разметке под .sr-only — её читает голос, а не глаз. */
.tiers__list{
  display: grid; gap: var(--sp-2);
  margin: 0; padding: 0; border: 0; min-width: 0;
}
.tiers__opt{
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); cursor: pointer;
  border: 1px solid var(--line); border-left: 3px solid transparent;
  background: var(--card); transition: background .2s, border-color .2s;
}
.tiers__opt:hover{ background: var(--surface-2); }
/* Выбранный помечен ЗОЛОТОЙ ПОЛОСОЙ СЛЕВА, а не заливкой. Причина не
   вкусовая: `--gold-bg` — жёлтый с альфой, и поверх тёмной поверхности
   #1E2229 он даёт грязно-оливковый (болото). Полоса + подъём светлоты
   работают в обеих темах, потому что смешивать нечего. */
.tiers__opt:has(input:checked){
  border-color: var(--gold-line); border-left-color: var(--gold);
  background: var(--tier-pick-bg);
}
.tiers__opt:has(input:focus-visible){ outline: 1px solid var(--gold); outline-offset: 1px; }
.tiers__opt input{ margin: 0; width: 18px; height: 18px; accent-color: var(--gold-strong); cursor: pointer; }
.tiers__body{ min-width: 0; }
.tiers__name{ font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Скруглённый — окно оплаты клиентский экран (GS-383). Форма та же, что у
   «Пробный доступ» и статусов на главной; острый край остаётся в админке. */
.tiers__tag{
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--gold); color: var(--gold-contrast);
}
/* Объём — в МИНУТАХ (решение 21.08.2026): их больше, и они точнее отвечают на
   вопрос «сколько встреч я загружу». Часы рядом в скобках, мельче — для тех,
   кто считает часами. Число моноширинным: колонка цифр не пляшет. */
.tiers__mins{ display: block; font-size: 11px; color: var(--ink-soft); margin-top: 3px; }
.tiers__mins b{ font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; }
.tiers__mins i{ font-style: normal; color: var(--faint); font-size: 11px; }
/* Цена держит правый край и набрана крупно: её и сравнивают. */
.tiers__price{
  text-align: right; font-family: var(--font-mono); font-size: 19px; font-weight: 700;
  letter-spacing: -.6px; white-space: nowrap;
}
.tiers__price i{
  display: block; font-style: normal; font-size: 11px; font-weight: 400;
  color: var(--faint); font-family: var(--font-sans);
}

/* Промокод (GS-227) — поле и кнопка в одну строку над оплатой.

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

   min-height: 44px у обоих — минимальная цель нажатия на телефоне; поле ниже
   кнопки выглядело бы съехавшим. */
/* Свёрнутая панель промокода (GS-382). Строка-переключатель выглядит ссылкой,
   а не кнопкой: это переход на второй уровень, а не действие с последствиями.
   Своей рамки и фона у неё нет — рядом стоит кнопка оплаты, и второй заметный
   орган спорил бы с ней за внимание. */
.tiers__promo-wrap{ margin-top: var(--sp-3); }
.tiers__promo-toggle{
  display: inline-flex; align-items: center; gap: 6px;
  /* 44px — цель нажатия под палец. Ширину не растягиваем: строка короткая, и
     во всю ширину она читалась бы как поле, а не как ссылка. */
  min-height: 44px;
  font-size: 13px; font-weight: 600; color: var(--gold-strong);
  cursor: pointer; list-style: none; user-select: none;
}
/* Штатный треугольник убираем в обоих движках и рисуем свой — он обязан
   совпадать по виду с остальными раскрывашками продукта. */
.tiers__promo-toggle::-webkit-details-marker{ display: none; }
.tiers__promo-toggle::before{
  content: "+"; font-size: 15px; font-weight: 700; line-height: 1;
  transition: transform .15s;
}
.tiers__promo-wrap[open] .tiers__promo-toggle::before{ content: "−"; }
.tiers__promo-toggle:focus-visible{ outline: 1px solid var(--gold-strong); outline-offset: 2px; border-radius: var(--radius-sm); }
.tiers__promo-toggle:hover{ color: var(--ink); }

/* 🔴 display У СОДЕРЖИМОГО <details> ОТМЕНЯЕТ СКРЫТИЕ. Браузер прячет
   содержимое закрытой раскрывашки через content-visibility, но заданный
   явно `display: flex` перебивает это: поле промокода оставалось на экране
   при закрытой панели (замер 12.09.2026 — rect 223×48 при open:false), то
   есть раскрывашка не сворачивала ничего. Поэтому flex включается ТОЛЬКО у
   раскрытой панели, а в закрытой содержимое остаётся скрытым.
   Та же ловушка, что с `display` поверх атрибута `hidden`. */
.tiers__promo{
  display: flex; gap: var(--sp-2); align-items: stretch; margin-top: var(--sp-2);
}
/* Скрытие стоит ПОСЛЕ базового правила намеренно: селекторы разной
   специфичности здесь не спасают от порядка — правило с `display:flex` выше
   перебивало бы `none`, стой оно ниже. Та же ловушка, что у `.projform .two`
   на телефоне (см. выше в этом файле). */
.tiers__promo-wrap:not([open]) .tiers__promo{ display: none; }
.tiers__promo-in{
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  /* Код диктуют и переписывают: заглавные и просторные буквы читаются вернее,
     а не-латиница в поле означает опечатку раскладки. */
  text-transform: uppercase; letter-spacing: .04em;
}
.tiers__promo-in::placeholder{ text-transform: none; letter-spacing: normal; }
.tiers__promo-btn{
  flex: none; min-height: 44px; padding: 0 var(--sp-3);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  border-radius: var(--radius-sm);
  background: transparent; color: var(--gold-strong);
  border: 1px solid var(--gold-line);
  transition: border-color .2s, color .2s;
}
.tiers__promo-btn:hover:not(:disabled){ color: var(--ink); border-color: var(--gold); }
.tiers__promo-btn:focus-visible{ outline: 1px solid var(--gold-strong); outline-offset: 2px; }
.tiers__promo-btn:disabled{ opacity: .55; cursor: default; }

/* Ответ о коде. Пустой — не занимает места: margin появляется только вместе с
   текстом, иначе под полем висела бы дыра при каждом открытии поп-апа. */
/* Старая цена при действующем промокоде: зачёркнута и приглушена. Приём
   читается без подписи — иначе на экране две разные цены без объяснения. */
.tiers__price [data-price].is-struck{
  text-decoration: line-through; color: var(--muted); opacity: .75;
}

.tiers__promo-msg{ margin: 0; font-size: 11px; line-height: 1.45; }
.tiers__promo-msg:not(:empty){ margin-top: var(--sp-2); }
.tiers__promo-msg.is-ok{ color: var(--gold-strong); }
/* Токен именно --c-danger: короткий алиас --danger в этом слое не объявлен, а
   var() с опечаткой молча падает на запасное значение и застывает на одной
   теме. */
.tiers__promo-msg.is-bad{ color: var(--c-danger); }
.tiers__promo-msg.is-wait{ color: var(--muted); }

/* Кнопка оплаты — ССЫЛКА (касса живёт снаружи), поэтому явно снимаем всё, что
   браузер даёт ссылке по умолчанию: подчёркивание и выравнивание по базовой
   линии. Без этого она выглядела подчёркнутым текстом, а не кнопкой. */
.tiers__cta{
  display: flex; align-items: center; justify-content: center; text-align: center;
  text-decoration: none;
  margin-top: var(--sp-3); width: 100%; min-height: 52px; font: inherit; font-size: 15px;
  font-weight: 700; cursor: pointer; border-radius: var(--radius-sm);
  background: var(--gold); color: var(--gold-contrast); border: 1px solid var(--gold);
  transition: filter .2s;
}
.tiers__cta:hover{ color: var(--gold-contrast); text-decoration: none; }
.tiers__cta:hover{ filter: brightness(1.06); }
.tiers__cta:focus-visible{ outline: 1px solid var(--gold-strong); outline-offset: 2px; }

/* «Компания» — строкой, а не карточкой: её берут через разговор, а не кнопкой,
   и равноправная карточка обещала бы самостоятельную оплату. */
.tiers__ent{
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); background: var(--surface-2);
}
.tiers__ent-t{ flex: 1 1 200px; min-width: 0; font-size: 11px; color: var(--ink-soft); line-height: 1.4; }
.tiers__ent-t b{ font-size: 12px; color: var(--ink); }
.tiers__ent-a{
  flex: none; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12px; font-weight: 700; color: var(--gold-strong);
  text-decoration: none; border-bottom: 1px solid var(--gold-line);
}
.tiers__ent-a:hover{ color: var(--ink); border-bottom-color: var(--gold); }

/* Сноска про бессрочные тексты — ЦИТАТОЙ: полоса слева и подъём светлоты,
   без заливки цветом (см. причину у .tiers__opt выше). Обещание общее для всех
   тарифов, поэтому одной строкой под списком, а не повтором в каждой строке. */
.tiers__keep{
  display: flex; gap: var(--sp-3); margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border-left: 3px solid var(--gold);
  font-size: 11px; color: var(--muted); line-height: 1.45;
}
.tiers__keep b{ color: var(--ink-soft); font-weight: 700; }
.tiers__keep .ic{ flex: none; margin-top: 2px; color: var(--gold-strong); }

/* Предупреждение о сгорании остатка (GS-375). Та же сноска-цитата, что у
   соседа, но полосой тревоги: человек теряет оплаченное, и строка обязана
   отличаться от справочной. Заливку не трогаем по той же причине, по которой
   её нет у .tiers__keep — цветная подложка с альфой даёт болотный оттенок на
   тёмной поверхности (замечание владельца 21.08.2026). */
.tiers__burn{
  display: flex; gap: var(--sp-3); margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border-left: 3px solid var(--c-warn);
  font-size: 11px; color: var(--muted); line-height: 1.45;
}
.tiers__burn .ic{ flex: none; margin-top: 2px; color: var(--c-warn); }

.tiers__foot{
  margin: var(--sp-3) 0 0; padding-top: var(--sp-2); border-top: 1px solid var(--line);
  font-size: 10px; color: var(--faint); line-height: 1.45;
}
.tiers__foot a{ color: var(--muted); }

/* Телефон — ПОСЛЕ базовых правил (та же причина, что у блока выше).
   Режем не смысл, а воздух: поля, повторы и то, что на телефоне очевидно.
   Без этого блока раскладка не влезает в экран и получает внутреннюю прокрутку
   ровно там, где стоит кнопка оплаты. */
@media(max-width:767px){
  /* Крестик здесь БОЛЬШЕ НЕ ЗАДАЁТСЯ (GS-225). Раньше он рос точечно у одного
     поп-апа тарифов с доводом «платёжный экран важнее прочих». Довод не пережил
     проверки: промах по «закрыть» одинаково неприятен в любом окне, а точечная
     правка означала, что каждое следующее окно рождается с ошибкой и ждёт
     своего разбора. Теперь 48px даёт общее правило под pointer: coarse (см.
     блок в конце файла) — и оно приходит во все окна разом. */
  .tiers__opt{ padding: var(--sp-3); gap: var(--sp-2); }
  .tiers__list{ gap: 6px; }
  .tiers__price{ font-size: 17px; }
  /* Подробности «Компании» прячем: на телефоне они переносятся на три строки,
     а обсуждаются всё равно в переписке — здесь важен сам факт тарифа. */
  .tiers__ent-more{ display: none; }
  .tiers__ent{ margin-top: var(--sp-2); }
  .tiers__keep{ margin-top: var(--sp-2); }
  /* Промокод на телефоне: тот же воздух, что у соседей. Строку не разрываем на
     две — поле и кнопка рядом занимают меньше высоты, а высота здесь дефицит:
     поп-ап обязан помещаться в экран целиком. */
  .tiers__promo{ margin-top: var(--sp-2); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ВЫРАВНИВАНИЕ ОКОН ПОД ПАЛЕЦ (GS-225, 03.09.2026)
   ═══════════════════════════════════════════════════════════════════════════
   Разбор скриншотов владельца: поля выезжали за окно, кнопка «Создать» была
   НИЖЕ поля над ней, крестик не попадался пальцем. Три разных симптома — три
   разные причины, и каждая лечится в своём месте, а не общим «сделать красиво».

   🔴 1. ПОЛЕ ШИРЕ СВОЕЙ КОЛОНКИ НА 22px. Глобального `*{box-sizing:border-box}`
   в сервисе НЕТ намеренно (см. комментарий у .projform выше): он раздаётся
   локально — `.app-shell *`, `.projform *`, `.sc-asst *`. Окно карточки проекта
   и окно канала modal.js переносит в <body> (вложенный оверлей обязан лежать в
   body, иначе его накрывает родительское окно), и там они оказываются СНАРУЖИ
   .app-shell — сброс до них не доезжает. При content-box `width:100%` означает
   100% ПЛЮС padding и рамка: замер 03.09.2026 — поле 376px в колонке 354px.
   Симптом обманчив: на /team те же .sc-input ведут себя правильно, потому что
   окна «Новый проект» и «Пригласить» лежат внутри .app-shell.
   Лечим адресно — по самому оверлею, а не новым глобальным сбросом.

   🔴 2. КНОПКА МЕНЬШЕ ПОЛЯ НАД НЕЙ. Под pointer:coarse components.css растит
   поля до 48px, а для .sc-btn такого правила не было вовсе: поле 48px, кнопка
   36px (замер). Действие обязано быть не мельче того, что человек заполнил, —
   иначе главный орган окна выглядит второстепенным. Норма холдинга 48px
   (GS-139), граница по СПОСОБУ ВВОДА, а не по ширине окна: у сенсорного
   ноутбука ширина десктопная, а палец тот же.

   🔴 3. КРЕСТИК 28px. Правило #tiersModal выше растило его точечно и объясняло
   это «платёжный экран важнее». Довод не пережил проверки: промах по «закрыть»
   одинаково неприятен в любом окне, а точечная правка означала, что каждое
   следующее окно рождается с той же ошибкой. Растим общий .sc-modal-x —
   частный случай тарифов теперь избыточен, но безвреден (то же число).
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Сброс модели коробки для окон ВНЕ каркаса страницы. Здесь, а не в
      components.css: чинится ровно тот случай, который создаёт modal.js
      переносом узла в body. */
.sc-modal-overlay,
.sc-modal-overlay *,
.sc-modal-overlay *::before,
.sc-modal-overlay *::after{ box-sizing: border-box; }

@media (pointer: coarse){
  /* 🔴 2. ПАРНЫЙ БЛОК К components.css. Тот же класс .sc-btn объявлен ДВАЖДЫ:
        там и здесь (см. предупреждение про color в базовом правиле выше).
        Специфичность одинаковая (0,1,0), modal.css грузится позже — и его
        `min-height: 36px` перебивал 48px, поднятые в components.css. Симптом
        при этом не в окне, а НА СТРАНИЦЕ: «Добавить канал» на карточке проекта
        оставался 36px, хотя правило «кнопка не мельче поля» уже было написано.
        Правку в одном файле здесь делать НЕЛЬЗЯ — нужны оба.
        Селектор без .sc-modal: правило чинит и кнопки вне окон, до которых
        общее правило не доезжает по той же причине. */
  .sc-btn{ min-height: 48px; font-size: 15px; }
  .sc-modal .sc-btn,
  .sc-modal-foot .sc-btn{ min-height: 48px; font-size: 15px; padding-inline: 18px; }

  /* 3. Крестик — та же тач-цель, что у остальных органов окна. Размер задаём
        полю нажатия, а не значку: сам знак остаётся 17px и ритм шапки держит.

        🔴 ЦЕЛЬ 48px ЕСТЬ, ВЫСОТЫ ШАПКЕ ОНА НЕ ДОБАВЛЯЕТ (GS-382). Раньше эти
        48px складывались с padding шапки и давали 79px полосы на строку
        текста. Отрицательные вертикальные поля выносят цель ЗА пределы
        строки: палец по-прежнему попадает в 48px (она перекрывает рамку и
        часть тела окна — там всё равно нет других органов), а высоту шапки
        задаёт заголовок. Уменьшать саму цель нельзя: промах по «закрыть»
        одинаково неприятен в любом окне.

        🔴 ЦЕЛЬ НЕВИДИМА, РИСУНОК ОСТАЁТСЯ В ШАПКЕ. Заливка при наведении и
        кольцо фокуса рисуются по РАМКЕ элемента — то есть по всем 48px, и,
        выступая за шапку, читались как «кнопка выпала из строки» (снимок
        12.09.2026: при открытии окна scModal переводит фокус на крестик, и
        кольцо вылезало на тело окна). Поэтому сама кнопка прозрачна, а фон и
        кольцо переехали на псевдоэлемент размером с глиф, стоящий по центру
        цели. Нажимается 48px, видно 28px. */
  .sc-modal-x{
    width: 48px; height: 48px; margin-block: -12px;
    position: relative; background: transparent;
  }
  /* z-index: -1 — подложка уходит ПОД глиф. Без этого прямоугольник
     псевдоэлемента накрывал бы сам знак «✕», и кнопка выглядела бы пустой
     плиткой. */
  .sc-modal-x::before{
    content: ""; position: absolute; inset: 50% auto auto 50%; z-index: -1;
    width: 28px; height: 28px; transform: translate(-50%, -50%);
    border-radius: var(--radius-sm);
    transition: background .15s;
  }
  .sc-modal-x:hover{ background: transparent; }
  .sc-modal-x:hover::before{ background: var(--c-surface-3); }
  /* Кольцо — на псевдоэлементе, поэтому у самой кнопки его снимаем: иначе
     нарисовались бы два, одно поверх другого. */
  .sc-modal-x:focus-visible{ box-shadow: none; }
  .sc-modal-x:focus-visible::before{ box-shadow: var(--focus-ring); }

  /* Флажок в окне («Память проекта» на скриншоте владельца): цель — вся строка
     с подписью, а не квадратик 18px. Тот же канон, что у .meetform__check.
     Строку задаём и у .projform: карточку проекта рисует именно она, а её
     галочка жила отдельно от общих .sc-check. Сам квадратик тоже растим —
     иначе строка нажимается, а видимая цель остаётся с ноготь. */
  .sc-modal .chk,
  .sc-modal .memtoggle,
  .projform .chk,
  .projform label.chk{ min-height: 48px; }
  .projform .chk input{ width: 22px; height: 22px; }
}