/* ============================================================
   КИТ АДМИНКИ — ТЕЛЕФОН
   Отдельный кит мобильной версии. Подключается последним, после
   styles.css и programs.css, поэтому перебивает их без ухищрений
   со специфичностью.

   Правило: все решения про телефон принимаются здесь. В styles.css
   и programs.css остались ранние мобильные правила отдельных
   компонентов — их не трогаем, при расхождении побеждает этот файл.

   Числа кита (приняты 23–24.09.2026, Аманта):
     поле страницы            16
     поле плашки              16
     между плашками            8
     между полями в плашке    12
     подпись до значения       4 (пробел в подписи)
     левая линия плашки
       с шевроном             56, шеврон с 28
     рост пилюли              28, кегль 10, поля 12
     зона касания             36 невидимой подложкой
     название                 15 / 500
     значение                 13 / 400
     подпись                  12 / 400, приглушённая, строчными
     поле ввода               16 (иначе Сафари увеличивает страницу)

   Чего на телефоне нет: шапок колонок, горизонтальной прокрутки,
   разделителей внутри плашки. Разделитель, если он есть, идёт от
   края до края своего контейнера и не висит.
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --m-pad-page: 16px;
    --m-pad-card: 16px;
    --m-gap-card: 8px;
    --m-gap-field: 12px;
    --m-pill-h: 28px;
    --m-touch: 36px;
    --m-title: 15px;
    --m-value: 13px;
    --m-label: 12px;
    --m-input: 16px;
    --m-control-h: 36px;
    --m-icon: 16px;
    /* приглушённый текст на телефоне на шаг темнее: подпись 12 на фоне
       страницы #ECE9E4 давала 4,42 к 1 при норме 4,5 для мелкого текста.
       #64646d даёт 4,84 на фоне и 5,86 на плашке. Замерено, не на глаз */
    --muted: #64646d;
  }
}

/* ---------- часть 1: общий кит админки ---------- */

@media (max-width: 768px) {
  /* ── таблицы на телефоне: строка становится плашкой-модулем ──
     Решение Аманты 23.09.2026: горизонтальной прокрутки нет ни на одном экране;
     таблица превращается в плашки-модули с зазором 8, линии-разделители убираются.
     Раньше здесь была прокрутка вбок внутри .table-inline (min-width 560–860) —
     она и давала вылет колонок за край на 360. */
  .block:has(> .table-inline),
  .block:has(> .table-wrap > .table-inline) {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }
  /* вес селектора держим на уровне .clients-table .table-inline и т. п.,
     иначе их отрицательные поля и overflow:hidden остаются в силе */
  .main .table-inline,
  .block .table-inline {
    overflow: visible;
    margin: 0;
    border-radius: 0;
  }
  /* шапки колонок нет: колонок на телефоне нет */
  .main .table-inline .table-head { display: none; }
  .table-inline .row { min-width: 0; }
  /* сетка в две колонки, а не свободный поток: тогда у всех плашек одной
     таблицы одинаковый рост (А26) и ровный правый край */
  .main .table-inline .table-row,
  .table-inline .table-row {
    display: grid;
    /* две колонки — раскладка, которую Аманта выбрала 23.09.2026 по демо:
       подпись над значением. Длинные значения (пилюли, почта, тексты)
       ведём во всю ширину плашки, чтобы их не резало троеточием. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* dense: короткое значение подтягивается в свободную половину строки,
       иначе после значения во всю ширину правая половина пустует (база 27) */
    grid-auto-flow: row dense;
    align-items: start;
    gap: 8px 14px;
    /* Решение Аманты 24.09.2026 по демо трёх вариантов: название видно
       целиком, плашку уплотняем и убираем пустоты. Рост строки — по
       содержимому: жёсткие 38 оставляли воздух внутри каждой строки. */
    grid-auto-rows: auto;
    height: auto;
    min-height: 64px;
    align-content: start;
    padding: 12px 16px;
    background: var(--card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border-top: 0;
  }
  .table-inline .table-row + .table-row { margin-top: 8px; border-top: 0; }
  .table-inline .table-row:last-child { border-radius: var(--radius-card); }
  /* значения — тихой строкой под названием; длинное не обрезаем, а переносим */
  .table-inline .table-row > * {
    min-width: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    /* рвать слово только если оно само не помещается в строку. Было
       anywhere — и «18 формулировок» вставало как «формулиров/ок»,
       а почта как «yandex.r/u». Имена не режем (правило Аманты 23.09) */
    overflow-wrap: break-word;
  }
  /* первая колонка — название плашки, своей строкой */
  .table-inline .table-row > :first-child {
    grid-column: 1 / -1;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
  }
  /* у значения своя подпись: шапки колонок на телефоне нет, и без подписи
     числа в строке читаются как шум. Подпись берёт app.js из шапки таблицы. */
  .table-inline .table-row > [data-label] {
    display: block;
    color: var(--text);
    line-height: 1.35;
  }
  /* Во всю ширину идут только те колонки, которым она правда нужна.
     Замер пилюль: продукт 201 при половине строки 141, остальные 82–111
     и в половину влезают. Лишние полные строки и были главной пустотой
     в плашке (правка Аманты 24.09.2026: «уменьшить и убрать пустоты»). */
  .table-inline .table-row > .col-product,
  .table-inline .table-row > .col-name,
  .table-inline .table-row > .col-text,
  .table-inline .table-row > .col-changes,
  .table-inline .table-row > .col-subject { grid-column: 1 / -1; }
  /* у идей пилюля продукта 111 — ей хватает половины */
  .ideas-table .table-row > .col-product { grid-column: auto; }
  /* пилюля в плашке не растит строку: рост держит сама строка */
  .table-inline .table-row .chip,
  .table-inline .table-row .status-pill {
    margin: -3px 0;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* значение переносится целиком и никогда не режется троеточием
     (решение Аманты 23.09.2026) */
  .table-inline .table-row > [data-label] > *,
  .table-inline .table-row > [data-label] {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .table-inline .table-row > [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    /* подпись — как в ките: 12 px, Manrope 400, --muted, строчными, 0.01em */
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--muted);
    text-transform: lowercase;
    letter-spacing: 0.01em;
  }
  .table-inline .table-row > :first-child::before { content: none; }
  /* у ячейки с кнопками подписи нет: кнопка называет действие сама,
     а подпись занимала лишнюю строку в плашке */
  .table-inline .table-row > .col-act::before,
  .table-inline .radar-row .radar-decide::before { content: none; display: none; }
  /* сводка мастера рассылки — не таблица сущностей, а пары «подпись — значение»:
     плашка на строку тут не к месту, оставляем список в две колонки */
  .table-inline.wizard-summary .table-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    min-height: 40px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .table-inline.wizard-summary .table-row + .table-row {
    margin-top: 0;
    border-top: 1px solid var(--line);
  }
  .table-inline.wizard-summary .table-row > :first-child {
    grid-column: auto;
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
  }
  .table-inline.wizard-summary .table-row > * { font-size: 13px; }

  /* колонки, спрятанные на средних ширинах, в плашке помещаются — возвращаем */
  .table-inline .row .col-source,
  .table-inline .row .col-sum { display: block; }
  /* карточка заявки базового курса: согласия и кнопки не едут вбок */
  .bca-consents, .bca-history { padding-left: 0; }
  .bca-consent { flex-wrap: wrap; }
  .bca-consent-meta { overflow-wrap: break-word; min-width: 0; white-space: normal; }
  .bca-btn { max-width: 100%; }
  /* ряд перевода статуса не помещался в 326: список и кнопка своими строками */
  .bca-head-actions,
  .bca-head-transition { flex-wrap: wrap; min-width: 0; }
  .bca-head-transition > * { flex: 1 1 100%; min-width: 0; }
  .card.bca-head { flex-wrap: wrap; }

  /* ── что остаётся в плашке ──
     Канон: «остаются главные столбцы, второстепенные прячутся».
     Решение Аманты 23.09.2026 по демо двух вариантов — берём главные поля.
     Ниже у каждой таблицы перечислено, что уходит с телефона. */
  /* аудит: когда · кто, действие, что поменялось */
  .audit-table .row > .col-table,
  .audit-table .row > .col-row { display: none; }
  /* заявки базового курса: имя · статус, дата, оплата */
  .bca-table:not(.psy-table) .row > .col-phone,
  .bca-table:not(.psy-table) .row > .col-email { display: none; }
  /* брони и оплаты в сессиях: когда · клиент, статус, оплата, сумма.
     Оплату оставляем: карточки брони нет, и с телефона посмотреть,
     оплачена ли запись, было бы негде. */
  .bookings-table .row > .col-tg,
  .bookings-table .row > .col-type,
  .bookings-table .row > .col-created { display: none; }
  /* рассылки: создана · название, получателей, состояние */
  .broadcasts-table .row > .col-kind,
  .broadcasts-table .row > .col-channel { display: none; }
  /* клиенты: имя · дата подписки, продукт, email */
  .clients-main .row > .col-channel { display: none; }
  /* сессии: имя · telegram, дата последней сессии, сессий */
  .clients-sessions .row > .col-brought,
  .clients-sessions .row > .col-cancelled { display: none; }
  /* идеи: дата · кто, предложение, статус */
  .ideas-table .row > .col-product { display: none; }
  /* психологи: имя · статус, дата, дипломы */
  .psy-table .row > .col-city,
  .psy-table .row > .col-photo { display: none; }
  /* письма по расписанию: проект · тема, когда уходит, кому */
  .se-map .row > .col-track { display: none; }

  /* таблица выручки перестроена отдельно (см. блок финансов ниже) */

  /* ── контент: доска в одну дорожку ──
     Доска была сеткой из колонок с прокруткой вбок (+513 на 360).
     Телефон — не уменьшенная копия: дорожки идут сверху вниз. */
  .content-board {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    overflow-x: visible;
    height: auto;
    min-height: 0;
    gap: 8px;
  }
  .content-col { min-height: 0; }
  .content-card-title { white-space: normal; overflow-wrap: break-word; }

  /* ── контент: календарь днями сверху вниз ──
     Сетка 7 колонок листалась вбок (min-width 560). Теперь день — строка:
     число слева, карточки справа; пустой день сжимается в тонкую строку. */
  .content-cal { overflow-x: visible; }
  .content-cal-grid { min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .content-cal-dows { display: none; }
  .content-cal-day {
    min-height: 44px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
    column-gap: 8px;
    border-radius: 0;
    border-top: 1px solid var(--line);
    padding: 8px;
  }
  .content-cal-day:first-child { border-top: 0; }
  .content-cal-day > .content-cal-daynum { grid-column: 1; }
  .content-cal-day > :not(.content-cal-daynum) { grid-column: 2; }
  .content-cal-day .week-cal-card-title { font-size: 13px; line-height: 1.3; }
  .content-cal-day .week-cal-card-meta { font-size: 11px; }

  /* ── радар: тема становится плашкой ──
     Было: таблица min-width 960 с прокруткой вбок внутри блока. */
  .radar-table { overflow-x: visible; }
  .radar-table .table-inline { min-width: 0; overflow: visible; margin: 0; }
  .radar-row { margin-bottom: 8px; }
  .radar-row + .radar-row > .table-row { border-top: 0; }
  .radar-row > .table-row { border-radius: var(--radius-card); }
  /* длинное название темы переносим, не режем троеточием.
     Вес селектора поднят до трёх классов: общее правило плашки
     (.table-inline .table-row > [data-label] > *) иначе держит nowrap. */
  .table-inline .radar-row .radar-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .radar-grid,
  .radar-grid--num { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radar-grid > .radar-decide { grid-column: 1 / -1; }
  /* номер темы стоял своей строкой во всю ширину — справа от него
     оставалась пустая полоса 286 × 20. Теперь номер и тема в одной
     строке: номер слева, тема с отступом под него */
  .radar-grid--num > .radar-n { grid-row: 1; grid-column: 1; align-self: baseline; }
  .radar-grid > .radar-toggle { grid-row: 1; grid-column: 1 / -1; }
  .radar-grid--num > .radar-toggle { padding-left: 26px; }
  /* у строки радара три кнопки решения — в строку сетки 38 px они не влезают
     и плашки наезжали друг на друга. Здесь рост считаем по содержимому:
     строение у всех строк радара одинаковое, высоты всё равно равны (А26). */
  .radar-row > .table-row {
    grid-auto-rows: auto;
    min-height: 0;
    row-gap: 10px;
  }
  /* «БЕРУ ПОТОМ НЕ МОЁ» — ряд кнопок в одну строку (А13). Общее правило
     плашки делало ячейку блоком, и кнопки вставали столбиком. */
  .table-inline .radar-row .radar-decide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .table-inline .radar-row .radar-decide::before { flex: 0 0 100%; }
  /* зона касания на телефоне — от 44 (веб-канон); в ките пилюля-фильтр 36 */
  .radar-decide .bca-chip { min-height: 44px; }
  /* главная точка плашки — тема, а не её номер (база 7 и 11):
     номер тихий и мелкий, тема крупная */
  .radar-row > .table-row > .radar-n {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
  }
  .table-inline .radar-row .radar-toggle { font-size: 15px; font-weight: 500; color: var(--text); }
  .table-inline .radar-row .radar-title { font-size: 15px; font-weight: 500; }
  .table-inline .radar-row .radar-toggle::before { content: none; }
  .radar-panel { position: static; max-width: none; left: auto; }
  .radar-cols { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .radar-col, .radar-pills { min-width: 0; }
  /* пилюля формулировки бывает длиннее экрана — переносим её текст */
  .radar-pills .chip { white-space: normal; max-width: 100%; height: auto; }
  .radar-panel-inner,
  .radar-row:has(.radar-grid--num) .radar-panel-inner { padding-left: 16px; padding-right: 16px; }
  .radar-row.open:has(.radar-grid--num) .radar-panel-inner::before { margin-left: -16px; }

  /* ── финансы: выручка по месяцам становится плашками ──
     Строка была сеткой 1.3fr + шесть направлений + итого, min-width 860. */
  .fin-rev-table { overflow-x: visible; margin: 0; }
  /* обёртка была белой с полями 24 — белая плашка месяца ложилась на белый
     блок и по краям оставались белые полосы (кит: пустых полос по краям нет) */
  .fin-rev-block { background: transparent; box-shadow: none; padding: 0; }
  .fin-rev-row {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(38px, auto);
    gap: 8px 14px;
    /* у строки стояла жёсткая высота 56 — плашки наезжали друг на друга */
    height: auto;
    min-height: 0;
    padding: 12px 16px;
    background: var(--card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border: 0;
  }
  .fin-rev-row + .fin-rev-row { margin-top: 8px; }
  .fin-rev-head { display: none; }
  .fin-rev-row > * { min-width: 0; font-size: 13px; color: var(--text); white-space: normal; }
  /* знак рубля не уходит на свою строку */
  .fin-rev-row .num-cell { display: block; }
  .fin-rev-row > .fin-rev-month,
  .fin-rev-row > :first-child {
    grid-column: 1 / -1;
    font-size: 15px;
    font-weight: 500;
  }
  .fin-rev-row > [data-label] { display: block; line-height: 1.35; }
  .fin-rev-row > [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--muted);
    text-transform: lowercase;
  }
  .fin-rev-row + .fin-rev-row { border-top: 0; }
  .fin-rev-foot { background: var(--fill-dark); }
  /* итог в плашке месяца — обычным числом: своя тёмная пилюля внутри
     тёмной плашки итога не читается */
  .fin-rev-row:not(.fin-rev-head) .num-cell.fin-rev-total {
    display: block;
    grid-column: 1 / -1;
    height: auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--text-strong);
  }
  /* вес как у правила выше (:not считается за класс), иначе итог остаётся
     тёмным на тёмной плашке и не читается */
  .fin-rev-foot:not(.fin-rev-head) .num-cell.fin-rev-total { color: var(--on-dark); }
  .fin-rev-row:not(.fin-rev-head) .num-cell.fin-rev-total .rub { color: var(--muted); }
  .fin-rev-foot > *,
  .fin-rev-foot > div:first-child,
  .fin-rev-foot .rub,
  .fin-rev-foot:not(.fin-rev-head) .num-cell.fin-rev-total .rub,
  .fin-rev-foot .num-cell,
  .fin-rev-foot .num-cell.zero,
  .fin-rev-foot .rub,
  .fin-rev-foot > [data-label]::before { color: var(--on-dark); }
  .fin-rev-empty { grid-template-columns: minmax(0, 1fr); }

  /* оплаты: имя клиента переносится, а не едет вбок */
  .table-inline .table-row .payments-client {
    white-space: normal;
    overflow-wrap: break-word;
    overflow: visible;
  }
  /* окно записи: неделя внутри него листалась вбок на 274, хотя на странице
     ту же неделю разложили днями сверху вниз. Делаем одинаково. */
  .modal-week-scroll { overflow-x: visible; min-height: 0; }
  .modal-week .week-cal { min-width: 0; }
  .modal-week .week-cal-stack { min-height: 0; }

  /* пустое состояние таблицы — по ширине плашки, без вылета */
  .table-inline .table-row > .bookings-empty,
  .table-inline .table-row > .audit-empty,
  .table-inline .table-row > .ideas-empty,
  .table-inline .table-row > .clients-empty {
    grid-column: 1 / -1;
    padding: 8px 0;
    font-size: 15px;
    margin: 0;
  }

  /* А13: «на телефоне… мельче кегль и разрядка, короче подписи».
     Длинным подписям кнопок не хватало 14–15 px до одной строки
     («показать чувствительные данные» просила 343 при кнопке 328).
     Разрядку на телефоне даём 0.16em вместо 0.22em — подпись встаёт. */
  .btn-primary,
  .btn-secondary,
  .btn-block,
  .bca-btn,
  .fb-send,
  .text-btn,
  .prg-btn { letter-spacing: 0.16em; }

  /* поля ввода на телефоне — 16 px: Safari на айфоне увеличивает страницу,
     когда кегль поля меньше 16, и вернуть масштаб потом нечем */
  .form-input,
  .fin-select,
  .fin-input,
  .login-input,
  .clients-select,
  .finance-cat-select,
  .prg-hselect,
  .modal-form input,
  .modal-form select,
  .modal-form textarea,
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="number"],
  input[type="password"],
  select,
  textarea { font-size: 16px; }

  /* вкладка-пилюля: правило файла поднимало её до 44, а .content-tabs
     тут же возвращал min-height: 0 — палец не попадал */
  .content-tabs .seg-pill-btn,
  .seg-pill-btn { min-height: 44px; }
  /* ── полосы вкладок переносятся, а не листаются ──
     Замер на 360: у броней вкладка «Отменены» начиналась ровно на 360 —
     её не было видно совсем; на сессиях обрезана АКТИВНАЯ вкладка
     (337..395); у рассылок за кадром 189 px, два сегмента из пяти,
     и плашка упиралась в правый край экрана без поля.
     Расхождение с китом: он говорит «вкладки листаются внутри своей
     полосы». Но там же сказано «вбок ничего не вылезает с 360», а признака
     прокрутки у полосы нет — вкладки просто пропадали. Выбрала перенос. */
  .subnav,
  .seg-pill,
  .content-tabs,
  .schedule-tabs,
  .bca-filter-row {
    flex-wrap: wrap;
    overflow-x: visible;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    row-gap: 4px;
  }
  .seg-pill { height: auto; }
  /* переключатель внутри клиентов-психологов: общее правило строки фильтра
     держит высоту 40, а на телефоне пилюля переносится на две строки —
     второй ряд наезжал на селект «продукты» (замер 390, 27.09.2026) */
  .clients-filter-row .seg-pill { height: auto; }
  /* у радара своё правило с двумя классами — перебивало перенос,
     и за кадром оставалось 542 px фильтров */
  .bca-filter-row.radar-filter { flex-wrap: wrap; overflow-x: visible; }
  /* полосы после подразделов сдвигались на 16 тем же правилом
     .headline > .subnav + :not(.topbar-actions) — общая левая линия */
  .headline > .subnav + .seg-pill:not(.topbar-actions),
  .headline > .subnav + .content-tabs:not(.topbar-actions),
  .headline > .subnav + .content-filters:not(.topbar-actions),
  .headline > .subnav + .schedule-tabs:not(.topbar-actions) { margin-left: 0; }

  /* строка отправителя шла с 24 — сдвиг 8 от общей левой линии */
  .se-sender { margin-left: 0; }
  /* полоса пилюль шла 32..375: слева мимо общей линии 16, справа в край */
  .seg-pill { margin-left: 0; margin-right: 0; padding-right: 16px; }
  /* пилюли фильтров и решений одного роста */
  .bca-chip { min-height: 44px; }

  /* плитки KPI: поля 20/24 на плитке шириной 167 съедали 48, подпись ломалась
     на две строки и плитки расходились по высоте (кит: высота одинаковая) */
  .kpi-tile { padding: 16px; min-height: 112px; }
  .kpi-tile .kpi-caption { font-size: 12px; }

  /* Зона касания значков-кнопок — от 44 × 44 (веб-канон), но расширяем её
     ПОДЛОЖКОЙ, а не шириной самого значка: значки стоят в колонках сетки
     по 24 px, и от ширины 44 они вылезали из своей колонки и налезали
     на соседнюю (шеврон карточки программы наезжал на название). */
  .content-del-btn,
  .sup-cal-nav,
  .prg-pchev,
  .prg-menu-btn,
  .prg-lmove,
  .prg-schev,
  .cc-toggle-btn,
  .letter-block-act,
  .content-col-add { position: relative; }
  .content-del-btn::after,
  .sup-cal-nav::after,
  .prg-pchev::after,
  .prg-menu-btn::after,
  .prg-lmove::after,
  .prg-schev::after,
  .cc-toggle-btn::after,
  .letter-block-act::after,
  .content-col-add::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* кнопка «скопировать» растягивалась на 264 при поле с адресом 142 —
     вдвое крупнее того, что копирует. Кит: кнопка по ширине содержимого */
  .sup-btn { width: auto; flex: 0 0 auto; align-self: flex-start; }

  /* супервизия: строка участника — поля 32 по бокам съедали 64 из 328,
     и счётчик «14 из 14» со стрелкой вылезал за плашку */
  .sup-prow {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    column-gap: 8px;
    padding: 0 16px;
  }
  .sup-prow > * { min-width: 0; }
  .sup-psummary-end { white-space: nowrap; }
  /* супервизия: поля ссылок не шире плашки */
  .sup-card input,
  .sup-zoom-form input,
  .sup-createf input,
  .sup-addp input { max-width: 100%; min-width: 0; }
  .sup-participants { min-width: 0; }

  /* ===== 24.09: подписи рядом со значением, а не над ним =====
     Плашка собиралась механически: подпись строкой сверху, значение строкой
     снизу — на каждое поле две строки. Отсюда высота 147 у рассылки и пустота
     справа: значение занимает 40 px в колонке 152. Подпись уходит в строку
     к значению, кегль и цвет прежние (кит: подпись 12, приглушённая). */
  .table-inline .table-row > [data-label]::before {
    /* пробел в конце подписи обязателен: он даёт строке место для переноса.
       Без него «цифры» и значение — один неразрывный кусок, и слово рвётся
       посередине: «18 формулиров / ок» */
    content: attr(data-label) " ";
    display: inline;
    margin: 0 4px 0 0;
  }
  /* где значение длинное или это пилюля — подпись остаётся сверху,
     иначе она отрывается от своего значения при переносе */
  .table-inline .table-row > .col-product::before,
  .table-inline .table-row > .col-text::before,
  .table-inline .table-row > .col-subject::before,
  .table-inline .table-row > .col-changes::before { display: block; margin: 0 0 2px; }

  /* ===== рассылки: заголовком плашки было не то поле =====
     Крупным шло 22.09.2026, а название письма — мелким под подписью
     «название». Дата стояла заголовком лишь потому, что в таблице она
     первая колонка. Главное в рассылке — про что письмо. */
  .broadcasts-table .table-row > .col-name {
    order: -2;
    grid-column: 1 / -1;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
  }
  .broadcasts-table .table-row > .col-name::before { content: none; }
  .broadcasts-table .table-row > .col-when {
    order: -1;
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
  }

  /* ===== клиенты: почта ломалась посреди слова =====
     Ячейка почты попадала в половину плашки (152) и адрес рвался как
     yandex.r / u. Почта — вторая часть имени клиента, ставим строкой под
     именем во всю ширину. */
  .clients-main .table-row > :first-child { order: -2; }
  .clients-main .table-row > .col-email {
    order: -1;
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--muted);
  }
  .clients-main .table-row > .col-email::before { content: none; }
  /* «дата подписки 23 сентября 2026» не влезает в половину плашки (152)
     и ломается на две строки — даём всю ширину */
  .clients-main .table-row > .col-last { grid-column: 1 / -1; }

  /* ===== доска: фильтры шли с 32, страница с 16 ===== */
  .content-filters { margin-left: 0; }

  /* ===== тёмная полоса состояний =====
     Полоса рассчитана на одну строку: скругление 999. С переносом на две
     строки она превращалась в чёрную каплю 328×100. До выбора Аманты —
     скругление плашки и кнопки, растянутые по строке, чтобы не было рваного
     правого края. */
  .seg-pill {
    border-radius: var(--radius-card);
    row-gap: 4px;
  }
  .seg-pill-btn { flex: 1 1 auto; justify-content: center; }

  /* ===== кнопка во всю ширину со стрелкой у дальнего края =====
     «новая программа» шла 328: текст слева, стрелка справа, между ними
     150 px пустоты. Кит: кнопка по ширине содержимого. */
  .headline .btn,
  .topbar-actions .btn,
  .headline-tools .btn { width: auto; flex: 0 0 auto; align-self: flex-start; }

  /* ===== плитки: числа расходились по высоте =====
     Подпись «оплат на сумму за месяц» занимает две строки, соседняя одну —
     и числа стояли на 15 px в разнобой. Число прижимаем к низу плитки. */
  .kpi-tile { justify-content: space-between; }

  /* ===== одинокая плитка в конце ряда =====
     Пятая плитка занимала всю ширину 328 ради числа 43: справа 250 пустоты
     и 112 высоты. Подпись и число в одну строку. */
  .kpi-row .kpi-tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
  }
  .kpi-row .kpi-tile:last-child:nth-child(odd) .kpi-caption { margin: 0; }

  /* ===== «новая программа» растягивалась на всю ширину =====
     Кнопка — строчный блок, а стояла блоком 328: текст слева, стрелка
     справа, между ними 150 пустоты. Кит: кнопка по ширине содержимого. */
  /* растягивала не ширина, а рост внутри строки: кнопка — гибкий элемент
     в .topbar-actions и забирала всю свободную ширину */
  .fb-send { display: inline-flex; width: auto; flex: 0 0 auto; align-self: flex-start; }
  .prg-addrow .fb-send, .prg-addrow .btn-secondary { width: auto; flex: 0 0 auto; }
  /* растягивал ряд шапки: .headline .topbar-actions > * даёт flex 1 1 100%.
     Полям и выборам ширина нужна, кнопке — нет */
  .headline .topbar-actions > .fb-send,
  .headline .topbar-actions > .btn-primary,
  .headline .topbar-actions > .btn-secondary { flex: 0 0 auto; width: auto; }

  /* ===== запрет подписи — после правила, которое её задаёт =====
     Подпись со значением в строку я дописала ниже по файлу, и она перебила
     прежние «подписи здесь не нужно»: на радаре вылезли «тема» и «решение»,
     в столбце действий — подпись над кнопкой. Повторяем запрет здесь. */
  .table-inline .table-row > :first-child::before,
  .table-inline .table-row > .col-act::before,
  .table-inline .radar-row .radar-decide::before,
  .table-inline .radar-row .radar-toggle::before { content: none; }
  .table-inline .table-row > .col-act::before,
  .table-inline .radar-row .radar-decide::before { display: none; }

  /* ===== промежутки: подпись своя, поля чужие =====
     Подпись отбивалась от значения на 8, и ровно 8 стояло между полями —
     группа не читалась (А18: внутри группы теснее, чем между группами).
     Теперь подпись держит пробел (около 4), а поля разведены на 12. */
  .main .table-inline .table-row,
  .table-inline .table-row { gap: 12px 14px; }
  .table-inline .table-row > [data-label]::before { margin: 0; }

  /* пилюля состояния — inline-flex, внутри себя не рвётся, и в половину
     плашки (141) вместе с подписью не встаёт. Подпись остаётся сверху */
  .table-inline .table-row > .col-status:has(.dot-pill)::before,
  .table-inline .table-row > .col-status:has(.status-pill)::before { display: block; margin: 0 0 2px; }

  /* поля тёмной полосы были 4 слева и 16 справа — заметная асимметрия */
  .seg-pill { padding: 6px; }

  /* значение-прочерк на телефоне прячем совсем: «продукт —» занимало строку
     ради того, что продукта нет. Класс ставит app.js: селектора :empty мало,
     внутри ячейки перевод строки и пробелы */
  .table-inline .table-row > [data-label].is-empty-value { display: none; }

  /* ===== поля ввода мельче 16 на соседних экранах =====
     Общее правило перечисляет голый textarea и select — их перебивает любой
     класс. Сафари на айфоне увеличивает страницу на поле мельче 16, и вернуть
     масштаб нечем. Перечисляем поимённо тех, кто был мельче. */
  .fb-input,
  .note-add textarea,
  .letter-block textarea.form-input,
  .prg-media-row select.form-input,
  .prg-media-row input.form-input,
  .prg-section-rule select,
  select.content-status-select { font-size: 16px; }

  /* ===== календарь: пустые клетки до первого числа =====
     На широком экране это невидимые клетки первой недели. На телефоне сетка
     разложена строками, и они становятся пустыми разлинованными полосами —
     до шести штук над первым числом месяца. */
  .content-cal-day.is-empty { display: none; }

  /* ===== полоса состояний: выбран вариант 3 (Аманта, 24.09) =====
     Тёмной подложки нет, пилюли стоят в ряд, выбранная тёмная. Просила
     заметно мельче: рост 28 вместо 44, поля 12 вместо 16.
     Палец не страдает — под каждой пилюлей невидимая подложка 36,
     она шире самой пилюли. Расхождение с китом: кит даёт пилюле 36,
     здесь 28, потому что их пять в ряд на ширине 360. */
  .seg-pill,
  .bca-filter-row {
    background: transparent;
    padding: 0;
    border-radius: 0;
    gap: 8px;
    row-gap: 8px;
    height: auto;
  }
  /* .content-tabs .seg-pill-btn выше по файлу держит min-height 44 —
     перебиваем тем же весом селектора */
  .seg-pill-btn,
  .content-tabs .seg-pill-btn,
  .bca-chip {
    position: relative;
    flex: 0 0 auto;
    min-height: var(--m-pill-h);
    height: auto;
    padding: 0 12px;
    font-size: 10px;
    letter-spacing: 0.1em;
    background: var(--card);
    color: var(--muted-strong);
    border-radius: var(--radius-pill);
  }
  .seg-pill-btn.active,
  .bca-chip.active,
  .bca-chip[aria-pressed="true"] {
    background: var(--fill-dark);
    color: var(--on-dark);
  }
  .seg-pill-btn::after,
  .content-tabs .seg-pill-btn::after,
  .bca-chip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--m-touch);
    transform: translateY(-50%);
  }

  /* ===== все пилюли телефона одного роста (Аманта, 24.09) =====
     Просила сделать как мелкие в полосе состояний: рост 28, поля 12,
     кегль 10. До этого в одной админке жили 30, 36, 40 и 44.
     Расхождение с китом: кит даёт пилюле 36. */
  .chip,
  .status-pill,
  .cat-pill,
  .dot-pill,
  .bca-status-pill,
  .bca-stale,
  .content-cat-btn,
  .prg-access,
  .sup-pill,
  .sup-vis,
  .se-flag {
    /* рост, а не жёсткая высота: длинная подпись («индивидуальная терапия»)
       в узкой плашке переносится на вторую строку и остаётся внутри пилюли.
       Обрезать её многоточием нельзя — решение Аманты 23.09 */
    min-height: var(--m-pill-h);
    height: auto;
    padding-top: 4px;
    padding-bottom: 4px;
    padding: 0 12px;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.1em;
  }
  /* палец: подложка шире самой пилюли */
  .content-cat-btn { position: relative; }
  .content-cat-btn::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--m-touch);
    transform: translateY(-50%);
  }

  /* подпись «продукт» убрана: пилюля сама себя называет */
  .table-inline .table-row > .col-product::before { content: none; }
}

/* ---------- часть 2: раздел «программы» ---------- */

@media (max-width: 768px) {
  .mobile-topbar { display: flex; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s var(--ease-soft);
    background: var(--bg-gradient);
    animation: none;
    /* ширина шторки одна на всю админку: в styles.css она 100vw,
       здесь стояла 260 и раздел выглядел иначе остальных */
    width: 100vw;
  }
  .sidebar.open { transform: translateX(0); }

  .main {
    margin-left: 0;
    padding: 8px 16px 64px;
  }

  .headline { column-gap: 20px; }
  /* каждая кнопка шапки — своей строкой во всю ширину, иначе подпись
     переносится внутри кнопки и высоты разъезжаются */
  .headline .topbar-actions { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 8px; }
  .headline .topbar-actions > * { flex: 1 1 100%; }

  .prg-facts { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .prg-fact { padding: 16px; }
  .prg-fact-num { font-size: 40px; }
  /* прятать третью плитку нельзя: число исчезает с телефона совсем.
     Нечётная встаёт во всю ширину */
  /* План раздела, «Телефон»: строка фактов на экране студентов
     сворачивается до двух плашек — всего и за 30 дней. Третья плитка
     («новых за 7 дней») растягивалась на всю ширину под однознаковое
     число: 328 × 112 ради одного глифа. Правило только для страницы
     студентов: на /programs те же три плитки несут «студентов с доступом»,
     и прятать вторую там нельзя. */
  .prg-facts-students .prg-fact:nth-child(2) { display: none; }
  /* кит: «плитки по две в ряд, нечётная последняя во всю ширину» */
  .prg-facts-2col .prg-fact:nth-child(n + 3),
  .prg-facts-3:not(.prg-facts-students) .prg-fact:nth-child(n + 3) { grid-column: 1 / -1; }

  /* кит: «На телефоне: плитки по две в ряд, нечётная последняя во всю ширину».
     Здесь стоял один столбец — раздел расходился с остальной админкой */
  /* А27: сверху втрое больше, чем снизу. Было 24 / 12 */
  .stat-header, .section-header { margin-top: 36px; margin-bottom: 12px; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi-value { font-size: 32px; }

  /* Зона касания — подложкой, а не шириной значка: значки стоят в узких
     колонках сетки, и от ширины 44 они налезали на соседнюю колонку.
     Сами правила касания живут в styles.css, здесь только снимаем
     здешние 32 × 32, которые грузятся позже и их перебивали. */
  .prg-menu-btn,
  .prg-lmove,
  .prg-pchev,
  .prg-schev { position: relative; }
  /* поля ввода 16 px: иначе Safari на айфоне увеличивает страницу.
     Общее правило в styles.css перебивалось здешними 13 px */
  .prg-hselect,
  .prg-hsearch input,
  .prg-search input,
  .prg-prefix-field input { font-size: 16px; }

  /* Карточка программы. Поля 16, как у плашек таблиц: было 24, и левая
     линия содержимого раздела не совпадала с остальной админкой. */
  .prg-card { padding: 12px 16px; }
  /* Значения шли по одному в строку во всю ширину — справа от коротких
     («1 уроков», «29 студенты») оставалось пусто около 180 px.
     Шеврон выведен из сетки и стоит подложкой слева: пока он занимал
     колонку, автопоток загонял короткие значения под него, в 24 px. */
  /* колонка шеврона слева — 24 px, как в ките раздела: было 28 и левое
     поле карточки расходилось с правым сильнее нужного */
  .prg-card { position: relative; padding: 12px 16px 12px 36px; }
  .prg-card .prg-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
  }
  .prg-card .prg-card-grid > .prg-pchev {
    position: absolute;
    left: 0;
    top: 14px;
  }
  /* название, даты и действия занимают строку целиком; короткие значения
     встают парой. Вес селектора поднят: правило .prg-card-grid >
     .prg-card-value из блока 1150 давало целую строку каждому значению */
  /* Дата с подписью («13 сентября 2026 · дата старта») в половину строки
     не встаёт: в 128 px она ломается на три строки и карточки разъезжаются
     по высоте. Дата занимает строку целиком, парой встают только числа. */
  .prg-card .prg-card-grid > .prg-card-name,
  .prg-card .prg-card-grid > .prg-card-value.prg-dot,
  .prg-card .prg-card-grid > .prg-actions { grid-column: 1 / -1; }
  .prg-card .prg-card-grid > .prg-card-value:not(.prg-dot) { grid-column: auto; }
  /* действия — по левому краю колонки: эталон раздела «программы» требует,
     чтобы кнопки строки и кнопки вложенных строк стояли одной вертикалью */
  .prg-card .prg-actions { justify-content: flex-start; }
  /* «⋯» у правого края: кит — «деструктивное в меню ⋯ у правого края».
     Нижняя строка карточки была заполнена на 57 %, справа 115 px пустоты */
  .prg-card .prg-actions .prg-menu { margin-left: auto; }
  .prg-card .prg-card-grid > .prg-actions { margin-top: 4px; }

  .prg-search { min-width: 0; width: 100%; }
  .prg-filter-row .form-input { width: 100%; }

  /* шапка раздела: поиск и списки идут своими строками во всю ширину.
     Списки были по 150 px и в ряд с поиском просили 476 при экране 360. */
  .headline { flex-wrap: wrap; }
  .headline-tools {
    /* шла с 32, когда вся страница идёт с 16 — общая левая линия (А1).
       margin-left: 16px приходил из блока промежуточной ширины */
    margin-left: 0;
    padding-left: 0;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
  }
  .headline-tools > * { flex: 1 1 100%; width: 100%; min-width: 0; }
  /* сдвиг 16 приходит из правила .headline > .subnav + :not(.topbar-actions):
     на широком экране он отделяет инструменты от подразделов, на телефоне
     они на разных строках и сдвиг только ломает общую левую линию */
  .headline > .subnav + .headline-tools:not(.topbar-actions) { margin-left: 0; }
  .prg-hselect,
  .stat-period .prg-hselect { width: 100%; flex: 1 1 100%; }
  .stat-period { margin-left: 0; width: 100%; }

  /* строка раздела программы: она была сеткой с колонками на 610 px.
     На телефоне — простая строка: название, под ним счётчик уроков */
  .prg-section-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
  }
  .prg-section-toggle { flex: 1 1 auto; min-width: 0; }
  /* «5 уроков» занимало строку целиком: 45 px текста в строке 296 */
  .prg-section-count { flex: 0 0 auto; width: auto; }
  .prg-tablewrap, #lessons { min-width: 0; overflow: visible; }

  .block { padding: 16px; }
  .block.list-block { padding: 0; background: transparent; box-shadow: none; }
  /* обёртки групп были белыми с полями 24 — белая плашка ложилась на белый
     блок и по краям оставались белые полосы (кит: пустых полос по краям нет) */
  .prg-sgroup,
  .prg-sgroup.open,
  .prg-students,
  .prg-lwrap,
  .prg-lessons { background: transparent; padding-left: 0; padding-right: 0; }
  /* раскрытая часть остаётся внутри плашки, а не выпадает на фон страницы */
  .prg-sgroup.open { background: var(--card); border-radius: var(--radius-card); }
  .prg-sgroup.open .prg-srow { border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .prg-spanel-inner,
  .prg-spanel-pad { margin-left: 0; margin-right: 0; }
  .prg-sgroup + .prg-sgroup { margin-top: 8px; }
  .prg-students { display: flex; flex-direction: column; gap: 8px; }
  .prg-lbody > .prg-lrow:last-child,
  .prg-slesson:last-of-type,
  .prg-spanel-actions:last-child,
  .prg-uprogram:last-of-type { border-radius: var(--radius-card); }
  /* отрицательных полей больше нет: блок-обёртка на телефоне прозрачный
     и без полей, плашки сами держат свои поля. С прежними -16 они
     вылезали за оба края экрана и текст срезался */
  .block.list-block .prg-lhead,
  .block.list-block .prg-lrow,
  .block.list-block .prg-section-row,
  .block.list-block .prg-media-head,
  .block.list-block .prg-media-row { margin-left: 0; margin-right: 0; }
  .block .prg-shead,
  .block .prg-sgroup { margin-left: 0; margin-right: 0; }
  /* полей у обёрток на телефоне нет, значит и отрицательных полей у строк
     тоже: с прежними -24 плашка урока была 376 при экране 360 */
  /* раздел — не плашка, а просто группа: белые плашки уроков внутри белого
     раздела сливались в одно пятно (А2 — контраст). Плашка здесь одна: строка */
  .prg-section,
  .prg-section.open {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    box-shadow: none;
  }
  .prg-section-row { background: var(--card); }
  .prg-lbody { gap: 8px; padding-top: 8px; }
  .prg-lrow,
  .prg-lwrap,
  .prg-lhead,
  .prg-media-row,
  .prg-media-head,
  .prg-slesson,
  .prg-spanel-actions,
  .prg-uprogram { margin-left: 0; margin-right: 0; }
  .prg-spanel-inner { padding: 0 16px; }
  /* .form-grid — flex, поэтому в одну колонку его сводит базис, а не сетка */
  .form-grid > .form-field { flex-basis: 100%; }

  /* таблица уроков — плашки-модули */
  .prg-lhead { display: none; }
  .prg-lessons { display: flex; flex-direction: column; gap: 8px; }
  .prg-lbody { display: flex; flex-direction: column; gap: 8px; }
  /* плашка-модуль вместо строки таблицы: название своей строкой,
     под ним доступ и стрелки порядка — так все плашки одной высоты */
  /* плашка одного вида со всей админкой: белая, скругление --radius-card.
     Была серая со скруглением 8 — три разных плашки на телефоне (база 4) */
  /* Плашка урока — сетка, а не свободный поток: на потоке длинное
     название выталкивало номер и пилюлю на свои строки, и плашки
     расходились по высоте (86 против 105). Номер, название и пилюля
     стоят одной строкой, действия — следующей, по левому краю. */
  .prg-lrow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    padding: 12px 16px;
    border-bottom: 0;
    border-radius: var(--radius-card);
    background: var(--card);
  }
  .prg-lrow > :empty { display: none; }
  /* margin-left: auto из правила раздела сдвигал кнопку вправо:
     эталон требует кнопки строк по ЛЕВОМУ краю колонки */
  .prg-lrow > .prg-lend {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-left: 0;
  }
  .prg-lgrip { display: none; }
  .prg-ltags { display: none; }
  .prg-lend { margin-left: auto; justify-content: flex-end; }
  .prg-lend > .prg-act { display: none; }
  .prg-section-row { border-bottom: 0; border-radius: var(--radius-card); flex-wrap: wrap; padding: 10px 16px; }
  .prg-section-rule { margin-left: 0; width: 100%; }

  /* материалы */
  .prg-media-head { display: none; }
  .prg-media-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 8px;
    padding: 12px 16px;
    border-bottom: 0;
    border-radius: var(--radius-card);
    background: var(--card);
  }
  .prg-media-ref { grid-column: 1 / -1; white-space: normal; }

  /* студентки */
  .prg-shead { display: none; }
  /* Строка студентки собрана как карточка программы: шеврон подложкой
     слева, имя и значения на одной левой вертикали, значения парами.
     Было: имя с 60, значения с 32 (разные вертикали), значения шириной
     152 при плашке 328 — справа пустовало 144 px. */
  .prg-srow {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
    padding: 12px 16px 12px 44px;
    background: var(--card);
    border-radius: var(--radius-card);
  }
  .prg-srow > .prg-schev-cell {
    position: absolute;
    left: 12px;
    top: 14px;
  }
  .prg-srow > .prg-sname-cell,
  .prg-srow > .prg-sprofile { grid-column: 1 / -1; }
  .prg-srow > .prg-scell { grid-column: auto; }
  /* соседние значения — по верхней линии (А16): общее правило раздела
     ставит содержимому строки align-self: center, и значение без подписи
     опускалось на 22 px ниже соседа с подписью */
  .prg-srow > * { align-self: start; }
  .prg-sprofile { justify-self: start; }
  .prg-srow .prg-scell-activity { display: block; }
  /* значения встают парами — целую строку им давало прежнее правило,
     и справа от коротких пустовало 144 px */
  /* подпись — как в плашках таблиц: строчными, серым, НАД значением */
  .prg-srow [data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    text-transform: lowercase;
    letter-spacing: 0.01em;
  }
  /* точка-индикатор рисуется своим ::before — подпись туда писать нельзя:
     она ложилась прописными на лаймовую заливку и разрывала дату надвое */
  .prg-srow .prg-dot[data-label]::before {
    content: '';
    display: inline-block;
  }
  /* имя и почта — в столбик: рядом имя ужималось и рвалось на две строки.
     План раздела: «колонка email → под имя, второй строкой мелким --muted» */
  .prg-sname-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
  }
  /* почта студентки: прятали её в расчёте на .prg-smobile-mail, которого
     в шаблонах нет — адрес пропадал с телефона совсем */
  .prg-semail {
    display: block;
    font-size: 12px;
    color: var(--muted);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .prg-spanel-pad { padding: 6px 12px 0; }
  .prg-slesson { grid-template-columns: 1fr auto; row-gap: 4px; padding: 8px 0; }
  .prg-slesson-state { grid-column: 1 / -1; }
  /* одна колонка: на 390 px строка не помещается в ряд.
     grid-row: auto снимает привязку к первой строке, заданную на планшете */
  .prg-uprogram { grid-template-columns: 1fr; row-gap: 6px; padding: 12px 0; }
  .prg-uprogram-name,
  .prg-uprogram > .dot-pill,
  .prg-uprogram-end,
  .prg-uprogram-acts { grid-column: 1; grid-row: auto; }
  /* на телефоне действиям разрешён перенос: «уроки» и поле даты в одну
     строку шириной 326 px не встают */
  .prg-uprogram-acts { gap: 10px 14px; flex-wrap: wrap; white-space: normal; }
  .prg-date-inline { flex: 1 1 100%; }

  .prg-addrow { margin: 0; padding-left: 0; padding-right: 0; flex-direction: column; align-items: stretch; }
  .prg-addrow .prg-add-email,
  .prg-addrow .prg-add-first,
  .prg-addrow .prg-add-last,
  .prg-addrow .prg-add-program { flex: 1 1 auto; width: 100%; min-width: 0; }
  .prg-addrow .fb-send,
  .prg-addrow .btn-secondary { width: 100%; }

  .prg-magnet-row { grid-template-columns: 1fr; row-gap: 8px; }
  .prg-magnet-head { display: none; }
  .prg-magnet-nums { grid-template-columns: 1fr; row-gap: 2px; }
  /* подпись печаталась дважды: ::before приходил из блока 1150, ::after —
     отсюда, и на 375 срабатывали оба («с доступом 404 с доступом»).
     Оставляем один ::before и пишем его как подпись в ките: 12 px,
     строчными, серым, над значением. */
  .prg-magnet-num[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    text-transform: lowercase;
    letter-spacing: 0.01em;
  }
  .prg-magnet-num[data-label]::after { content: none; }
  .prg-menu-list { right: 0; left: auto; min-width: 0; width: max-content; max-width: calc(100vw - 32px); }
  /* меню строки раздела прижато к левому краю строки: справа ему не хватает места */
  .prg-section-row .prg-menu-list { right: auto; left: 0; }
  .prg-date-field input { width: 100%; }

  /* полоса «глазами студентки» — тот же отступ от края, что у контента */
  .prg-eyes { padding: 0 16px; }

  /* ===== 24.09: подпись читалась задом наперёд =====
     На широком экране подпись — шапка колонки, и при сужении её поставили
     после значения: «5 СЕНТЯБРЯ 2026 ДАТА СТАРТА». На плашке это читается
     наоборот. Подпись у точки нельзя дать через ::before — там кружок,
     поэтому ячейку делаем строкой и подпись ставим первой порядком. */
  .prg-card-grid > .prg-card-value[data-label] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
  }
  .prg-card-grid > .prg-card-value[data-label]::after { order: -1; }
  .prg-card-grid > .prg-card-value.prg-dot::before { order: -2; align-self: center; }

  /* ===== студенты: подписи над значениями и рваные колонки =====
     «доступ» с текстом «активный · из Продамуса» стоял в половине плашки
     (128) и ломался на три строки — рядом с ним дата в одну, под датой
     43 px пустоты. Подпись уходит в строку к значению, длинная ячейка
     берёт всю ширину. */
  .prg-srow > .prg-scell[data-label]::before {
    content: attr(data-label) " ";
    display: inline;
    margin: 0 4px 0 0;
  }
  /* каждая ячейка — своя строка: «открыто уроков 59 из 59» в половине 128
     ломалось на две строки, а рядом пустовало */
  .prg-srow > .prg-scell { grid-column: 1 / -1; }

  /* ===== 24.09, второй заход: меньше наборов, ровные промежутки =====
     Аманта: «расстояния хорошо бы симметричные, количество стилей рябит».
     В одной плашке жили четыре набора сразу: мелкий капс с разрядкой у даты
     и доступа, строчная подпись 12, значение 13, название 15. Оставляем три
     — название 15, значение 13, подпись 12 приглушённая, все строчными.
     Расхождение с китом: на широком экране дата и доступ набраны мелким
     капсом с разрядкой (.prg-dot, programs.css:2387). На телефоне это пятый
     набор в плашке шириной 328, поэтому здесь они как остальные значения. */
  .prg-card .prg-dot,
  .prg-srow .prg-dot {
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    text-transform: none;
    letter-spacing: normal;
  }
  .prg-card-grid > .prg-card-value[data-label]::after,
  .prg-srow > .prg-scell[data-label]::before {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0.01em;
  }

  /* точка-индикатор: подпись в неё писать нельзя, ::before занят кружком.
     Правило выше перебило защиту 4188 — и вместо зелёного кружка в строке
     студентки печаталось «последняя активность» прямо по цветной заливке */
  .prg-srow .prg-dot[data-label]::before { content: ''; display: inline-block; }

  /* одна левая линия у плашек с шевроном: карточка программы шла с 52,
     строка студентки с 60. Теперь обе с 56, шеврон обеих — с 28 */
  .prg-card { padding: 12px 16px 12px 40px; }
  .prg-srow { padding: 12px 16px 12px 40px; }
  .prg-card .prg-card-grid > .prg-pchev { left: 12px; }
  .prg-srow > .prg-schev-cell { left: 12px; }

  /* подпись ближе к своему значению, чем поля друг к другу (А18):
     было 8 и там и там, группа не читалась */
  .prg-card .prg-card-grid { row-gap: 12px; }
  .prg-srow { row-gap: 12px; }

  /* верхнее поле страницы как во всей админке: здесь стояло 8 против 16 */
  .main { padding: 16px 16px 64px; }

  /* ===== строки уроков внутри раскрытой плашки программы =====
     Сетка оставалась широкой: 24 190 110 120 0 0 166. Пилюля «показан»
     уходила на 400 при экране 360, кнопки на 562 — и всё это обрезала
     плашка, поэтому замер вылета не видел, а на экране пилюля была
     обрезана посреди слова. Разворачиваем в два ряда. */
  .prg-plesson {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 8px;
    align-items: center;
    padding: 12px 0;
  }
  .prg-plesson > :empty { display: none; }
  .prg-plesson > .prg-lnum { grid-column: 1; grid-row: 1; }
  .prg-plesson > .prg-plesson-title { grid-column: 2; grid-row: 1; min-width: 0; }
  .prg-plesson > .prg-plesson-vis { grid-column: 3; grid-row: 1; justify-self: end; }
  .prg-plesson > .prg-ltags { grid-column: 2 / -1; grid-row: 2; }
  /* «редактировать» ведёт ровно по тому же адресу, что и название урока
     (/programs/lessons/<id>?course=<id>) — на телефоне это третий ярус
     в каждой строке ради того же перехода. Название остаётся ссылкой */
  .prg-plesson > .prg-plesson-act { display: none; }

  /* ===== раскрытая панель студентки на карточке программы =====
     Панель — ячейка сетки, а у ячейки по умолчанию min-width: auto: она
     растягивается по содержимому, а не по плашке. Внутренности вставали
     на 998 при экране 360, и страница уезжала вбок на 654. Свёрнутой
     панели замер не видел, потому что её просто нет в разметке. */
  .prg-spanel,
  .prg-spanel-inner,
  .prg-spanel-pad { min-width: 0; }
  .prg-spanel-actions {
    flex-wrap: wrap;
    min-width: 0;
    gap: 8px;
  }
  .prg-spanel-inner > *,
  .prg-spanel-pad > * { min-width: 0; max-width: 100%; }

  /* зона касания у кнопок строки: рост 32 при норме пальца 44.
     Расширяем подложкой, а не ростом кнопки, иначе поедет сетка строки */
  .prg-btn { position: relative; }
  .prg-btn::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* ===== разделитель идёт от края до края плашки =====
     Строки уроков внутри раскрытой плашки шли 32..352 при плашке 16..344:
     слева линия висела в 16 от края, справа вылезала на 8. Правило Аманты:
     разделитель есть — значит от края до края контейнера, висеть не должен.
     Внутренности панели растягиваем до краёв плашки, поля переносим
     на саму строку, чтобы номер урока встал на общую линию 56. */
  .prg-card .prg-ppanel-inner {
    margin-left: -40px;
    margin-right: -16px;
  }
  .prg-plesson { padding: 12px 16px 12px 40px; }
}

/* ---------- часть 3: общее для всех страниц ---------- */

@media (max-width: 768px) {
  /* ===== выламывание из поля плашки =====
     В общем ките таблица выламывается из плашки на её поле 24
     (margin: 0 -24px) — чтобы разделитель шёл ровно по краю плашки.
     На телефоне у блока полей нет, таблица и так во всю ширину, и эти
     -24 просто выносят содержимое за экран на 8 с каждой стороны.
     Нашлось после того, как кит телефона стал общим для всех страниц:
     раньше часть правил грузилась только в разделе «программы». */
  .payout-table,
  .note-add,
  .bca-consent,
  .bca-comment-form,
  .bca-history-item { margin-left: 0; margin-right: 0; }
}

/* ---------- часть 4: платформа телефона ---------- */
/* Мелочи, которые отличают приложение от сайта в браузере. Каждая — одна
   строка, каждая чинит своё. Проверить до конца можно только на живом
   телефоне: в браузере на компьютере эти поведения не воспроизводятся. */

html {
  /* серая вспышка поверх всего, по чему попали пальцем — самый громкий
     признак сайта. Убираем её и даём своё нажатие ниже */
  -webkit-tap-highlight-color: transparent;
  /* в альбомной ориентации Сафари сам увеличивает шрифты */
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 768px) {
  /* потянул страницу вниз — Андроид перезагружает её, Айфон тянет всю
     страницу резинкой. В админке это мешает: у неё свои списки */
  html,
  body { overscroll-behavior: none; }

  /* внутренние списки не тянут за собой страницу, но своё качание оставляют */
  .modal-body,
  .chat-list,
  .chat-main,
  .prg-spanel-inner { overscroll-behavior: contain; }

  /* браузер ждёт второго касания, чтобы понять — не двойное ли это нажатие
     с увеличением. manipulation говорит: увеличения здесь нет, работай сразу */
  a,
  button,
  [role="button"],
  .table-row[data-href],
  .seg-pill-btn,
  .chip { touch-action: manipulation; }

  /* долгое нажатие на кнопку выделяло её подпись и показывало меню копирования.
     Текст-содержимое остаётся выделяемым: адреса и суммы из админки копируют */
  button,
  [role="button"],
  .seg-pill-btn,
  .subnav-item,
  .nav-item,
  .bca-chip,
  .prg-btn,
  .fb-send {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  /* нажатие видно сразу, а не после отпускания: родное приложение отвечает
     в момент касания. 120 мс, кривая на выход */
  @media (prefers-reduced-motion: no-preference) {
    .fb-send,
    .btn-primary,
    .btn-secondary,
    .prg-btn,
    .seg-pill-btn,
    .bca-chip,
    .text-btn { transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1); }
    .fb-send:active,
    .btn-primary:active,
    .btn-secondary:active,
    .prg-btn:active,
    .seg-pill-btn:active,
    .bca-chip:active,
    .text-btn:active { transform: scale(0.97); }
  }

  /* вырез и полоса дома: страница рисуется под ними, а содержимое
     отодвигается обратно. Без viewport-fit=cover в мета env() даёт 0 */
  .mobile-topbar { padding-top: env(safe-area-inset-top, 0px); }
  .main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .sidebar { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .modal,
  .modal-card { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

  /* 100vh на телефоне — это высота с убранной адресной строкой: при
     показанной строке экран оказывается ниже, и низ уезжает под неё */
  .app,
  .sidebar { min-height: 100dvh; }
  .content-board { height: auto; min-height: 50dvh; }
}

@media (max-width: 768px) {
  /* верхняя панель липкая: при переходе с клавиатуры фокус уезжал под неё,
     и было не видно, где ты находишься (WCAG 2.2, «фокус не перекрыт») */
  html { scroll-padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
}

/* ---------- часть 5: размеры — два роста на весь телефон ---------- */
/* Замер 24.09 по 46 экранам: кнопки были ростом 44, 40, 32, 20 и 18 при
   кегле от 10 до 14; поля — 40, 43, 38 и 24; значки в кнопках — 14, 16,
   18 и 20; поля карточек 24 при 16 у плиток и строк. Теперь два роста:
   36 — всё, чем управляют (кнопка, выпадающий список, поле ввода),
   28 — действие внутри строки и пилюля. Значок в кнопке — 16. */

@media (max-width: 768px) {
  .btn-primary,
  .btn-secondary,
  .fb-send,
  .bca-btn,
  .main select,
  .main .form-input:not(textarea),
  .main input[type="text"],
  .main input[type="search"],
  .main input[type="email"],
  .main input[type="number"],
  .main input[type="date"],
  .main input[type="tel"],
  .main input[type="url"],
  .main input[type="password"] {
    height: var(--m-control-h);
    min-height: var(--m-control-h);
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
  }

  /* действие внутри строки: «студенты», «профиль», «беру / потом / не моё».
     На радаре три кнопки по 44 в каждой из 226 карточек — самое тяжёлое
     место телефона. Правило .radar-decide .bca-chip выше держало 44 */
  .prg-btn,
  .radar-decide .bca-chip,
  .radar-decide button {
    height: var(--m-pill-h);
    min-height: var(--m-pill-h);
    padding-top: 0;
    padding-bottom: 0;
  }

  .btn-primary svg,
  .btn-secondary svg,
  .fb-send svg,
  .prg-btn svg,
  .bca-btn svg,
  .text-btn svg {
    width: var(--m-icon);
    height: var(--m-icon);
  }

  /* карточка с полями 24 стояла рядом с плашками и плитками на 16 */
  .card { padding: var(--m-pad-card); }

  /* фильтры раздела программы: два выпадающих списка шли друг под другом,
     каждый во всю ширину 328 — два огромных поля ради «все статусы» и
     «по дате». Теперь поиск во всю ширину, списки рядом */
  .headline-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .headline-tools > .prg-hsearch { grid-column: 1 / -1; }
  .headline-tools > .prg-hselect { width: 100%; min-width: 0; }
}

@media (max-width: 768px) {
  /* меню второго уровня: на пяти экранах одно слово уезжало на вторую
     строку — АРХИВ, СЕССИИ, АЛИНА — и под ним дыра во всю ширину. На доске
     не хватало 3 px: пункты 235 плюс три промежутка по 32 — 331 при 328.
     Промежуток 16, разрядка 0,06em вместо 0,12em — всё встаёт в строку
     (клиентам при 0,08 не хватало 2 px).
     Расхождение с китом: на широком экране промежуток 32 */
  .subnav { column-gap: 16px; }
  .subnav-item { letter-spacing: 0.06em; }
}

@media (max-width: 768px) {
  /* ===== плитки без дыры =====
     Плитка держала рост 112: подпись сверху, число снизу, между ними 40
     пустоты. Рост теперь по содержимому. Числа соседних плиток всё равно
     на одной линии: ячейки ряда сетки растягиваются до самой высокой,
     а число прижато к низу */
  .kpi-tile { min-height: 0; gap: 12px; justify-content: space-between; }
  .kpi-tile .kpi-caption { margin: 0; }
  /* у крупного числа свой воздух над цифрами — межстрочный 1,4 давал ещё
     около 10 px пустоты между подписью и числом */
  .kpi-tile .kpi-value { line-height: 1; }

  /* ===== подпись над списком (А22, А27) =====
     «клиенты», «выручка», «10 последних оплат» стояли текстом с 24 при
     плашке с 16 — сдвиг 8. По А22 первая подпись в 5 px от левого края
     плашки. По А27 подпись принадлежит блоку под собой: сверху втрое
     больше, чем снизу, — 36 и 12. Над «клиентами» было 60 */
  .section-header {
    padding-left: 5px;
    /* колонка страницы — флекс с общим шагом 24 (.main gap): мои 36
       складывались с ним в 60. По А27 шаг колонки учитываем:
       12 своих + 24 колонки = 36 сверху, 12 снизу */
    margin: 12px 0 12px;
  }
  .kpi-row { margin-bottom: 0; }
}

/* ---------- часть 6: карточки с действиями внизу (Аманта, 24.09) ---------- */
/* Шеврон слева внизу карточки, кнопки — к правому краю, над ними тонкая
   линия от края до края: так отмечено всё, на что нажимают. Сетка
   карточки: 44 · половина · половина · 44. Сведения — парами, 12, строки
   через 8. Цветная точка стоит на левой линии карточки, а не на полях.
   Шаги: название → сведения 12, сведения → линия 12, линия → кнопки 8,
   кнопки → низ 8. */

@media (max-width: 768px) {
  /* ===== карточка программы ===== */
  .prg-card { padding: 16px 16px 8px; }
  .prg-card .prg-card-grid {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
  }
  .prg-card .prg-card-grid > .prg-card-name { grid-column: 1 / -1; grid-row: 1; margin-bottom: 4px; }
  /* название программы 15, как имя студентки: 17 читалось заголовком страницы */
  .prg-card .prg-card-name .prg-card-title { font-size: 15px; }
  /* вес селектора как у прежнего правила .prg-card-value.prg-dot
     { grid-column: 1 / -1 } — иначе обе даты ложились в одну клетку
     друг на друга */
  /* слева друг под другом «уроков» и «студенты», справа «старт» и «доступ» */
  .prg-card .prg-card-grid > .prg-card-value[data-label="уроков"]:not(.prg-dot)   { grid-column: 1 / 3; grid-row: 2; }
  .prg-card .prg-card-grid > .prg-card-value[data-label="студенты"]:not(.prg-dot) { grid-column: 1 / 3; grid-row: 3; }
  .prg-card .prg-card-grid > .prg-card-value.prg-dot[data-label="дата старта"] { grid-column: 3 / 5; grid-row: 2; }
  .prg-card .prg-card-grid > .prg-card-value.prg-dot[data-label="доступ"]      { grid-column: 3 / 5; grid-row: 3; }
  /* сведения — 12: даты стояли 13, «уроков» и «студенты» тоже */
  .prg-card .prg-card-grid > .prg-card-value { font-size: 12px; }
  .prg-card .prg-card-grid::after {
    content: '';
    grid-column: 1 / -1;
    grid-row: 4;
    height: 1px;
    margin: 4px -16px 0;
    background: var(--line);
  }
  .prg-card .prg-card-grid > .prg-pchev {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1;
    grid-row: 5;
    justify-self: start;
  }
  /* «студенты» и «⋯» — вместе у правого края */
  .prg-card .prg-card-grid > .prg-actions {
    display: flex;
    grid-column: 2 / -1;
    grid-row: 5;
    justify-self: end;
    align-items: center;
    gap: 16px;
    margin: 0;
  }
  .prg-card .prg-actions > .prg-btn,
  .prg-card .prg-actions > .prg-menu { grid-column: auto; grid-row: auto; margin-left: 0; }

  /* ===== уроки раскрытой программы =====
     Номер, рядом название — номер на оси первой строки названия. Под
     названием, по его левому краю, «редактировать», справа от неё
     «показан». Линии внутри урока нет, между уроками — от края до края */
  .prg-card .prg-ppanel-inner { margin-left: -16px; margin-right: -16px; }
  .prg-card .prg-ppanel-inner > .fb-empty { margin: 0; padding: 12px 16px; }
  .prg-plesson {
    grid-template-columns: 16px auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    padding: 8px 16px;
  }
  /* строка номера равна строке названия: цифра стоит на её оси, а не
     на нижней линии букв и не посередине двух строк */
  .prg-plesson > .prg-lnum {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    line-height: 19px;
  }
  .prg-plesson > .prg-plesson-title { grid-column: 2 / -1; grid-row: 1; align-self: start; line-height: 19px; }
  .prg-plesson .prg-plesson-name { line-height: 19px; }
  .prg-plesson > .prg-plesson-act { display: block; grid-column: 2; grid-row: 2; justify-self: start; }
  .prg-plesson > .prg-plesson-vis { grid-column: 3; grid-row: 2; justify-self: start; margin-left: 4px; }

  /* ===== строка студентки ===== */
  .prg-srow {
    padding: 16px 16px 8px;
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
  }
  .prg-srow > .prg-sname-cell { grid-column: 1 / -1; grid-row: 1; margin-bottom: 4px; }
  .prg-srow > .prg-scell-activity { grid-column: 1 / 3; grid-row: 2; }
  .prg-srow > .prg-scell[data-label="доступ"] { grid-column: 3 / 5; grid-row: 2; }
  .prg-srow > .prg-scell[data-label="открыто уроков"] { grid-column: 1 / -1; grid-row: 3; }
  .prg-srow > .prg-scell { font-size: 12px; }
  .prg-srow::after {
    content: '';
    grid-column: 1 / -1;
    grid-row: 4;
    height: 1px;
    margin: 4px -16px 0;
    background: var(--line);
  }
  .prg-srow > .prg-schev-cell {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1;
    grid-row: 5;
    justify-self: start;
  }
  .prg-srow > .prg-sprofile { grid-column: 2 / -1; grid-row: 5; justify-self: end; }
  /* «из Продамуса» на телефоне не нужно — достаточно «доступ активный» */
  .prg-access-src { display: none; }

  /* ===== имя и почта — одинаково у студентов и клиентов =====
     Было: у студентов 2 между строками, у клиентов 12. Стало 4 на обеих
     страницах, имя 15 с межстрочным 1,25, почта 12 */
  .prg-sname-cell { gap: 4px; }
  .prg-srow .prg-sname { line-height: 1.25; }
  .prg-srow .prg-semail { line-height: 1.35; }
  .main .clients-main .table-inline .table-row,
  .main .clients-main .table-row { padding: 16px; row-gap: 8px; }
  .main .clients-main .table-row > :first-child { line-height: 1.25; }
  .main .clients-main .table-row > .col-email { margin-top: -4px; line-height: 1.35; }
  .main .clients-main .table-row > [data-label] { font-size: 12px; }

  /* ===== программы студентки в раскрытой панели =====
     Название во всю строку, «бессрочно» и «с 8 июня 2025» рядом, под ними
     «9 из 9 уроков» слева и «уроки» у правого края. Линия — только между
     программами, на всю карточку; поля — на самой строке */
  .prg-spanel-pad,
  .prg-spanel-inner { padding: 0; }
  .prg-uprogram {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 8px;
    align-items: center;
    padding: 12px 16px 8px;
    margin: 0;
  }
  /* линия между программами одна: у верхней строки своя линия панели,
     у соседних строк сходились нижняя и верхняя — выходило 2 px */
  .prg-sgroup .prg-spanel-pad > .prg-uprogram { border-top: 0; border-bottom: 0; }
  .prg-sgroup .prg-spanel-pad > .prg-uprogram + .prg-uprogram { border-top: 1px solid var(--line); }
  .prg-uprogram > .prg-uprogram-name { grid-column: 1 / -1; grid-row: 1; white-space: normal; }
  .prg-uprogram > .dot-pill { grid-column: 1; grid-row: 2; margin-left: 0; }
  .prg-uprogram > .prg-uprogram-date { grid-column: 2; grid-row: 2; }
  .prg-uprogram > .prg-uprogram-end {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
  }
  .prg-uprogram-cell { white-space: nowrap; font-size: 12px; }
  /* даты и сроки в панели — 12, как остальные сведения, без капса */
  .prg-uprogram .prg-dot,
  .prg-uprogram .dot-pill {
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    height: auto;
    min-height: 0;
    padding: 0;
    background: none;
  }

  /* ===== куда нажимать — красным ===== */
  .prg-btn { color: var(--accent); }
  .prg-btn svg { color: var(--accent); }

  /* нижняя строка: шеврон стоял на 6 px выше «профиля» — старое правило
     выравнивало все ячейки строки по верху */
  .prg-srow > .prg-schev-cell,
  .prg-srow > .prg-sprofile,
  .prg-card .prg-card-grid > .prg-pchev,
  .prg-card .prg-card-grid > .prg-actions { align-self: center; }

  /* ===== старт и доступ — одной строкой =====
     «дата старта 13 сентября 2026» в половину карточки (142) не входила
     и вставала в две строки. Подпись короче — «старт», дата цифрами:
     «● старт 13.09.26», «● доступ до 13.03.27». Точка — в начале строки */
  .prg-card .prg-card-grid > .prg-card-value.prg-dot {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    white-space: nowrap;
  }
  .prg-card .prg-card-grid > .prg-card-value.prg-dot::before {
    position: static;
    order: -2;
    flex: none;
    margin: 0 6px 0 0;
  }
  .prg-card .prg-card-grid > .prg-card-value.prg-dot::after {
    order: -1;
    content: attr(data-label);
    padding-left: 0;
    margin-right: 4px;
  }
  .prg-card .prg-card-grid > .prg-card-value.prg-dot[data-label="дата старта"]::after { content: 'старт'; }
  .prg-card .prg-card-value .prg-when { display: none; }
  .prg-card .prg-card-value .prg-when-short { display: inline; }

  /* ===== шапка с поиском: кнопка и поиск рядом, пополам =====
     Программы, студенты: кнопка раздела в половину экрана, поиск рядом во
     вторую половину, списки под ними тоже пополам */
  .headline:has(.prg-hsearch) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
  }
  .headline:has(.prg-hsearch) > .subnav { grid-column: 1 / -1; }
  .headline:has(.prg-hsearch) > .headline-tools,
  .headline:has(.prg-hsearch) > .topbar-actions { display: contents; }
  .headline:has(.prg-hsearch) .fb-send {
    order: 1;
    width: 100%;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 8px;
    /* в половине экрана (160) подпись переносилась на две строки, а
       «добавить к программе» при разрядке 0,06 вылезала на 13 */
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: 0;
    gap: 4px;
  }
  .headline:has(.prg-hsearch) .prg-hsearch { order: 2; grid-column: auto; }
  .headline:has(.prg-hsearch) .prg-hselect { order: 3; }
  /* сессии клиентов: «добавить запись» переносилась на две строки, поиск
     не доходил до правого края. Так же пополам */
  .topbar-actions:has(> .clients-search) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
    width: 100%;
    margin-left: 0;
  }
  .topbar-actions:has(> .clients-search) > .btn-secondary {
    width: 100%;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 8px;
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: 0;
    gap: 4px;
  }
  .topbar-actions:has(> .clients-search) > .clients-search { width: 100%; min-width: 0; margin: 0; }

  /* ===== подсказки в поиске и списках-фильтрах — мелко =====
     Как подпись плитки «видны в кабинете»: 12, приглушённая. Во всей
     админке: программы, студенты, клиенты, финансы. Текст, который
     набирают в поиске, остаётся 16 — иначе Сафари увеличивает страницу */
  .prg-hsearch input::placeholder,
  .main input[type="search"]::placeholder { font-size: 12px; color: var(--muted); }
  .prg-hselect,
  .clients-select,
  .fin-select {
    font-size: 12px;
    color: var(--muted);
  }

  /* ===== меню телефона — чёрное (Аманта, 24.09) =====
     Шторка и верхняя полоса над ней — тёмные, пункты светлые, выбранный —
     светлой пилюлей. Приглушённые пункты 64 % белого: 6,8 : 1 на чёрном */
  .sidebar { background: var(--fill-dark); }
  .mobile-topbar { transition: background-color 0.24s cubic-bezier(0.16, 1, 0.3, 1); }
  .app.nav-open .mobile-topbar { background: var(--fill-dark); }
  .app.nav-open .nav-toggle { color: var(--on-dark); }
  .sidebar .nav-item { color: rgba(240, 240, 238, 0.64); }
  .sidebar .nav-item.active { background: var(--on-dark); color: var(--fill-dark); }
  .sidebar .nav-item.disabled.faded { color: rgba(240, 240, 238, 0.32); }
}

@media (max-width: 768px) {
  /* ===== меню второго уровня выше, линия ближе к слову (Аманта, 24.09) =====
     Пункт был 44 с текстом посередине: линия стояла на 16 ниже букв,
     а до кнопок под ней оставалось 8. Теперь пункт 36, текст внизу,
     линия на 6 под буквами; всё меню на 10 выше. От линии до того, что
     под меню, — 16 на всех страницах: в сетке шапки шаг 8, во флексе 12,
     одно меню в шапке — дальше шаг колонки 24 */
  .subnav-item {
    min-height: 36px;
    align-items: flex-end;
    padding: 0 0 6px;
  }
  /* шапка держала рост 44 и ставила меню посередине — сдвиги меню
     внутри неё гасли */
  .headline { min-height: 0; }
  .headline > .subnav { margin-top: -10px; margin-bottom: 4px; }
  .headline:has(.prg-hsearch) > .subnav { margin-bottom: 8px; }
  .headline > .subnav:only-child { margin-bottom: -8px; }

  /* ===== сессии: неделя в одну строку, календарь по краям плашки =====
     Шапка недели и сетка выламывались на 24, как на широком экране, где
     поле плашки 24. На телефоне поле 16: сетка вылезала на 8 за плашку,
     и выделенный день торчал слева. Линии — от края до края плашки,
     число дня и заголовок недели — на общей линии 32 */
  .schedule-header { margin: 0 -16px; padding: 0 16px 16px; }
  .schedule-nav { gap: 0; }
  .schedule-date-range {
    flex: 1 1 auto;
    padding-right: 8px;
    overflow-wrap: break-word;
  }
  .schedule-date-range,
  .schedule-date-range .num { font-size: 14px; line-height: 20px; }
  .week-cal { margin: 0 -16px -16px; }
  .week-cal .week-cal-head,
  .week-cal .week-cal-col:first-child .week-cal-head { padding-left: 16px; }
  .block:has(> .week-cal) { overflow: hidden; }
}