/* Мобильный слой кабинета. Подключается ПОСЛЕ cabinet.css и почти
   целиком живёт внутри @media (max-width: 760px): десктоп остаётся
   ровно таким, каким был. */

:root {
  --tabbar-h: 60px;
  --tabbar-bottom: env(safe-area-inset-bottom, 0px);
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.tabbar { display: none; }

/* Ширина шире планшета: мобильная навигация не показывается вовсе. */
@media (min-width: 761px) {
  .tabbar, .tab-sheet { display: none !important; }

  /* Панель фильтров свёрнута в <details> ради телефона; на широком
     экране она обязана выглядеть как раньше — раскрытой и без сводки.
     Два правила подряд: старое поведение UA (потомки закрытого details)
     и новое (::details-content в свежем Chrome). */
  .filters > summary { display: none; }
  .filters:not([open]) > *:not(summary) { display: block; }
  .filters:not([open])::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  /* Правило выше задаёт display всем потомкам скопом и затирает раскладку
     тем, у кого она своя (форма периода — прямой потомок details).
     Возвращаем её тем же весом селектора, ниже по файлу. */
  .filters:not([open]) > form { display: flex; }
}

@media (max-width: 760px) {

  /* --- Каркас ------------------------------------------------------- */

  /* Приглушённый текст затемняется до 4.5:1 (WCAG AA). Прежний #7789a0
     даёт 3.6:1 на белом — на десктопе за столом это терпимо, а бригада
     читает те же подписи с телефона на улице. Переопределяются токены,
     а не полсотни правил: цвет один и тот же во всём кабинете. */
  :root {
    --muted: #5a6d83;
    --off-fg: #5b6675;
    /* Прежний #b45309 даёт 4.47:1 — промах мимо AA на сотые доли, и
       именно им набраны предупреждения над деньгами. */
    --warn: #9a4708;
  }

  html { -webkit-text-size-adjust: 100%; }

  body {
    overflow-x: hidden;
    padding-bottom: calc(var(--tabbar-h) + var(--tabbar-bottom));
  }

  .wrap { padding: 14px 14px 28px; }

  .nav { display: none; }

  /* Шапка сжимается до одной строки: имя кабинета + выход. Период,
     подписи источников и прочая мета уезжают в текст страницы. */
  .head {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 14px;
  }
  .brand { gap: 9px; min-width: 0; }
  .head h1 { font-size: 17px; }
  .eyebrow { font-size: 10px; letter-spacing: .07em; margin-bottom: 2px; }
  .head-right { align-items: flex-end; gap: 4px; flex: none; }
  .user-meta { gap: 8px; font-size: 12px; }
  .user-meta b { display: none; }
  .meta { display: none; }

  /* --- Нижняя панель разделов --------------------------------------- */

  .tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    display: flex;
    align-items: stretch;
    height: calc(var(--tabbar-h) + var(--tabbar-bottom));
    padding-bottom: var(--tabbar-bottom);
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -1px 12px rgba(16, 24, 38, .06);
  }

  .tab,
  .tab-more {
    flex: 1 1 0;
    min-width: 0;
  }

  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: var(--tabbar-h);
    padding: 6px 2px;
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tab:hover { text-decoration: none; }

  .tab__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 26px;
    border-radius: 999px;
  }
  .tab__mark svg { width: 21px; height: 21px; }

  .tab__text {
    font-size: 10.5px;
    line-height: 1.1;
    letter-spacing: -.01em;
    white-space: nowrap;
  }

  .tab[aria-current] { color: var(--accent2); }
  .tab[aria-current] .tab__mark { background: var(--soft); }
  .tab[aria-current] .tab__text { font-weight: 700; }

  /* Засечка над активным разделом. Заливки капсулы для этого мало:
     у «Платежей» она есть всегда (это действие, а не состояние), и без
     засечки нельзя было понять, открыт раздел или нет. */
  .tab { position: relative; }
  .tab[aria-current]::before {
    content: "";
    position: absolute;
    top: 0;
    width: 20px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--accent);
  }

  /* Частое действие Максима — «Платежи»: тот же размер цели, но
     заливкой, чтобы большой палец находил её не глядя. */
  .tab--key .tab__mark {
    background: linear-gradient(180deg, var(--accent), var(--accent2));
    color: #fff;
    box-shadow: 0 2px 6px rgba(13, 124, 102, .35);
  }
  .tab--key { color: var(--accent2); }
  .tab--key[aria-current] .tab__mark { background: linear-gradient(180deg, var(--accent), var(--accent2)); }

  /* «Ещё» — нативный <details>: раскрывается без единой строки JS. */
  .tab-more { position: relative; }
  .tab-more > summary {
    list-style: none;
    cursor: pointer;
  }
  .tab-more > summary::-webkit-details-marker { display: none; }
  .tab-more > summary::marker { content: ""; }
  .tab-more[open] > summary { color: var(--accent2); }
  .tab-more[open] > summary .tab__mark { background: var(--soft); }

  .tab-sheet {
    position: absolute;
    right: 6px;
    bottom: calc(100% + 8px);
    min-width: 216px;
    padding: 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
  }
  .tab-sheet__title {
    margin: 4px 10px 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .tab-sheet a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 11px;
    color: var(--ink2);
    font-size: 14.5px;
    font-weight: 600;
  }
  .tab-sheet a:hover { background: var(--line2); text-decoration: none; }
  .tab-sheet a[aria-current] { background: var(--soft); color: var(--accent2); }
  .tab-sheet svg { width: 19px; height: 19px; flex: none; color: var(--muted); }
  .tab-sheet a[aria-current] svg { color: var(--accent2); }

  /* --- Числа --------------------------------------------------------- */

  /* Одна колонка вместо сетки: на 375 px две карточки рядом дают
     перенос числа на вторую строку, а деньги должны читаться целиком. */
  .kpis {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
  }
  .kpi { padding: 13px 14px; border-radius: 13px; }
  .kpi .lbl { font-size: 10.5px; margin-bottom: 6px; }
  .kpi .val { font-size: 21px; }
  .kpi .sub { font-size: 11.5px; margin-top: 5px; }

  /* На десктопе «ведущих» карточек может быть несколько — там это просто
     акцент. На телефоне ведущая ровно одна: .hero. Она поднимается на
     первое место сеткой, а не порядком в разметке, — десктоп у Игоря
     остаётся с прежней последовательностью показателей. */
  .kpi.lead { grid-column: auto; }

  h2 {
    margin: 22px 0 10px;
    font-size: 11px;
  }

  .panel { border-radius: 14px; }
  .note { font-size: 12px; line-height: 1.5; }

  /* --- Таблицы → карточки-строки ------------------------------------- */

  /* Приём один на все ленты: строка таблицы становится карточкой,
     заголовок колонки печатается перед значением из data-label.
     Роли ARIA проставлены в разметке — смена display у table-*
     стирает табличную семантику, и без ролей скринридер потерял бы
     связь «колонка → значение». */
  .cards { border: 0; }
  .cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .cards,
  .cards tbody,
  .cards tr,
  .cards td,
  .cards th {
    display: block;
    text-align: left;
    border: 0;
    padding: 0;
    background: none;
    white-space: normal;
  }
  .cards tbody tr {
    padding: 13px 15px;
    border-bottom: 1px solid var(--line2);
  }
  .cards tbody tr:last-child { border-bottom: 0; }
  .cards tbody tr:hover td,
  .cards tbody tr:hover th { background: none; }

  .cards tbody td,
  .cards tbody th {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    font-size: 13.5px;
  }
  .cards tbody td::before,
  .cards tbody th[data-label]::before {
    content: attr(data-label);
    flex: none;
    max-width: 52%;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
  }
  .cards tbody td:not([data-label]) {
    justify-content: flex-start;
    text-align: left;
  }
  .cards tbody td:not([data-label])::before { content: none; }
  .cards tbody td[data-label] > * { text-align: right; }

  /* Заглавная строка карточки: дата (или другой первый столбец) крупно,
     без подписи — она и есть название карточки. */
  .cards tbody th[scope="row"] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 650;
    color: var(--ink);
  }

  /* Пустая лента: «Движений нет» без разлиновки под карточку. */
  .cards tbody tr.is-empty { padding: 16px 15px; }

  /* Сделки карточками (31.07.2026). Номер сделки набран nowrap ради
     десктопной колонки — в карточке он обязан переноситься, иначе
     длинный номер с телефонами вылезает за край. */
  .cards.deals td.deal-cell { white-space: normal; }
  .cards.deals td.status-cell { max-width: none; }
  .cards.deals .problem-badges { display: flex; flex-wrap: wrap; gap: 4px; }
  .cards.deals td.row-actions { padding-top: 6px; }

  /* Формы внутри карточек: поле и кнопка во всю ширину и с зазором —
     иначе они слипаются и вылезают за край (слово владельца
     31.07.2026: «формы тоже слипаются, поля куда-то уезжают»). */
  .inline-form { gap: 8px; width: 100%; }
  .inline-form input[type="date"] { flex: 1 1 140px; max-width: none; min-height: 44px; }
  .inline-form button { min-height: 44px; }


  /* В таблице прочерк держит колонку и это правильно; в карточке строка
     «Комментарий — —» только мешает искать деньги глазами. */
  .cards tbody td.blank { display: none; }

  /* Суммы в карточке — крупнее подписи: их ищут глазами первыми. */
  .cards td.num,
  .cards td.money {
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 650;
  }
  .cards td.dim { font-weight: 400; }

  /* Итоговая строка городов/лент — отдельной плашкой. */
  .cards tbody tr.total {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    border-top: 1px solid var(--line);
  }

  /* Денежные ленты: карточка ведётся ПАРОЙ «дата — сумма» в одной
     строке, остальные поля укладываются ниже сами (авторазмещение
     сетки). Привязка к классу ячейки, а не к её номеру: колонки лент
     разные, а смысл «вот дата, вот деньги» — один. */
  .cards.money-first tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 3px 12px;
  }
  .cards.money-first tbody tr > * { grid-column: 1 / -1; }
  .cards.money-first tbody th[scope="row"] {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  .cards.money-first tbody td.money {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    font-size: 19px;
    font-weight: 660;
    letter-spacing: -.02em;
  }
  .cards.money-first tbody tr.is-empty { display: block; }
  .cards.money-first tbody td.row-actions,
  .cards.money-first tbody td:last-child:empty { margin-top: 6px; }

  /* Лента ДДС карточками: подпись к каждому значению («Счёт — Озон»,
     «Способ — перевод по карте», «Статус — действует») давала по шесть
     строк на запись. Второстепенное сведено в одну строку без подписей,
     как в списке сделок. */
  .cards.cf-feed tbody td.cf-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    padding: 2px 0 0;
    font-size: 11.5px;
    color: var(--muted-strong);
  }
  .cards.cf-feed tbody td.cf-meta::before { content: none; }
  .cards.cf-feed tbody td.cf-meta > span + span::before {
    content: "·";
    margin-right: 6px;
    color: var(--muted);
  }
  .cards.cf-feed tbody td.cf-meta .tag { font-size: 10px; }
  .cards.cf-feed tbody td[data-label="Партнёр"],
  .cards.cf-feed tbody td[data-label="Счёт"],
  .cards.cf-feed tbody td[data-label="Способ"],
  .cards.cf-feed tbody td[data-label="Город"] { display: none; }
  /* Статус остаётся только у сторнированной записи: там он несёт
     причину отмены, а «действует» на каждой карточке — шум. */
  .cards.cf-feed tbody tr:not(.cancelled) td[data-label="Статус"] { display: none; }

  /* Справочник бригад карточками: слаг, логин и состояние — строкой. */
  .cards tbody td.part-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    padding: 2px 0 0;
    font-size: 11.5px;
    color: var(--muted-strong);
  }
  .cards tbody td.part-meta::before { content: none; }
  .cards tbody td.part-meta > span + span::before {
    content: "·";
    margin-right: 6px;
    color: var(--muted);
  }
  .cards tbody td[data-label="Слаг"],
  .cards tbody td[data-label="Логин"],
  .cards tbody td[data-label="Активен"] { display: none; }
  .row-fold > summary { min-height: 34px; display: inline-flex; align-items: center; }

  /* Журнал поступлений карточками: те же подписи-к-каждому-значению. */
  .cards.payments tbody td.pay-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    padding: 2px 0 0;
    font-size: 11.5px;
    color: var(--muted-strong);
  }
  .cards.payments tbody td.pay-meta::before { content: none; }
  .cards.payments tbody td.pay-meta > span + span::before {
    content: "·";
    margin-right: 6px;
    color: var(--muted);
  }
  .cards.payments tbody td.pay-meta .tag { font-size: 10px; }
  .cards.payments tbody td[data-label="Партнёр"],
  .cards.payments tbody td[data-label="Плательщик"],
  .cards.payments tbody td[data-label="Получатель"],
  .cards.payments tbody td[data-label="Счёт"],
  .cards.payments tbody td[data-label="Способ"],
  .cards.payments tbody td[data-label="Кто внёс"] { display: none; }
  .cards.payments tbody tr:not(.cancelled) td[data-label="Статус"] { display: none; }

  /* Счета карточками: подпись к каждому полю печаталась даже там, где
     значение и так себя называет (номер карты, «по номеру телефона»).
     Второстепенное сведено в одну строку. */
  .cards.accounts tbody td.acc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    padding: 2px 0 0;
    font-size: 12px;
    color: var(--muted-strong);
  }
  .cards.accounts tbody td.acc-meta::before { content: none; }
  .cards.accounts tbody td.acc-meta > span + span::before {
    content: "·";
    margin-right: 6px;
    color: var(--muted);
  }
  .cards.accounts tbody td[data-label="Банк"],
  .cards.accounts tbody td[data-label="Как переводить"],
  .cards.accounts tbody td[data-label="Реквизит"],
  .cards.accounts tbody td[data-label="Получатель"],
  .cards.accounts tbody td[data-label="Активен"],
  .cards.accounts tbody td[data-label="Движений"] { display: none; }
  .cards.accounts tbody td.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }

  .cards.cf-feed { font-size: inherit; }
  .cards.cf-feed tbody td,
  .cards.cf-feed tbody th { padding: 2px 0; }
  .cards.cf-feed .row-actions { width: auto; display: flex; gap: 8px; }
  .cards.cf-feed .row-actions .btn-link {
    flex: 1;
    margin: 0;
    min-height: 44px;
    font-size: 13px;
    border-radius: 10px;
  }
  .cards.cf-feed .row-actions .dim { text-align: left; }
  .cards.cf-feed td.comment { max-width: none; }
  /* Липкая колонка действий — приём широкой таблицы; в карточке она
     ломает раскладку. */
  .cards.cf-feed th:last-child,
  .cards.cf-feed td:last-child {
    position: static;
    box-shadow: none;
    background: none;
  }

  /* Контейнер горизонтального скролла: там, где карточек нет
     (широкие сверочные таблицы), едет ОН, а не страница. */
  .scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .panel > .scroll:only-of-type > table { min-width: 0; }

  /* --- Формы одной рукой --------------------------------------------- */

  /* 16px — не «крупнее для красоты»: при меньшем размере iOS зумит
     страницу на фокусе поля, и после ввода суммы вёрстка уезжает вбок. */
  input[type="text"],
  input[type="date"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    max-width: none;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 12px;
  }
  textarea { min-height: 84px; }
  input[type="checkbox"] { width: 22px; height: 22px; }

  label { font-size: 12.5px; margin-bottom: 6px; }

  button {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 12px;
  }
  button.sm { min-height: 44px; padding: 9px 14px; font-size: 13px; }
  .btn-link { min-height: 48px; font-size: 14.5px; border-radius: 12px; }
  .btn-link.sm { min-height: 44px; font-size: 13px; }

  .form-panel .field { margin-bottom: 16px; }
  .form-panel .field .dim { max-width: none; }
  .form-panel button { width: 100%; margin-top: 8px; }
  .form-panel form > a { display: block; margin: 12px 0 0; text-align: center; }

  /* Фильтры — в колонку и под раскрытие: на телефоне они мешают
     смотреть ленту, ради которой человек и пришёл. Заголовок «Фильтры»
     над свёрнутой панелью — повтор её же сводки, поэтому скрывается. */
  h2:has(+ .filters) { display: none; }
  .filters { margin: 0 0 18px; }
  .filters > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: var(--shadow);
    color: var(--ink2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }
  .filters > summary::-webkit-details-marker { display: none; }
  .filters > summary::marker { content: ""; }
  .filters > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translate(-2px, -2px);
  }
  .filters[open] > summary {
    border-radius: 13px 13px 0 0;
    border-bottom-color: transparent;
  }
  .filters[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
  .filters > .filter-panel {
    margin: 0;
    border-radius: 0 0 13px 13px;
  }

  /* Выбор периода: сначала пресеты («текущий месяц» — один тап и
     попадание в 90 % случаев), поля дат — под ними. */
  .period-picker {
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
  }
  .period-picker .presets {
    order: -1;
    gap: 8px;
    margin: 0 0 12px;
  }
  .period-picker .presets a {
    flex: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    font-size: 13.5px;
    font-weight: 600;
  }
  .period-picker form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
  }
  .period-picker label { margin: 0; white-space: nowrap; }
  .period-picker input { max-width: none; }
  .period-picker .errorlist,
  .period-picker button { grid-column: 1 / -1; }
  .period-picker button { width: 100%; }
  .period-picker .period-fallback { margin: 10px 0 0; }

  /* Точные даты — внутри карточки периода, поэтому сводка без своей
     рамки и тени: панель тут уже есть. */
  .period-dates { margin: 0; }
  .period-dates > summary {
    min-height: 40px;
    padding: 4px 0;
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    color: var(--accent2);
    font-size: 13.5px;
  }
  .period-dates[open] > summary { border: 0; margin-bottom: 8px; }
  .period-dates > summary::after {
    border-color: var(--accent2);
    margin-left: 6px;
  }

  /* --- Плитки ввода и модалки ---------------------------------------- */

  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { min-height: 76px; padding: 13px 14px; }
  .tile-name { font-size: 13.5px; }

  .cf-modal-foot { padding-bottom: calc(18px + var(--tabbar-bottom)); }
  .cf-modal-foot button { flex: 1; }

  /* Модалка открыта — панель разделов уводится вниз, чтобы не спорить
     с липкой кнопкой сохранения. */
  body:has(dialog.cf-modal:modal) .tabbar { display: none; }

  .pagination { gap: 10px; }
  .pagination a { min-height: 48px; flex: 1; justify-content: center; }
}

/* --- Ведущее число: вердикт словами -------------------------------- */

/* Одно правило для всех кабинетов: сумма набирается чернилами, а знак
   («долг» / «переплата» / «клиника должна») говорит СЛОВОМ в своём
   цвете. Красная цифра на солнце читается как сбой, а не как минус. */
.verdict-word {
  display: block;
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.verdict-word.owed { color: var(--crit); }
.verdict-word.ahead { color: var(--good); }
.verdict-word.even { color: var(--muted); }

.kpi.hero {
  background: linear-gradient(180deg, var(--soft), var(--panel));
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
}
.kpi.hero .val {
  color: var(--ink);
  font-size: 34px;
  letter-spacing: -.025em;
}

@media (max-width: 760px) {
  .kpi.hero {
    grid-column: 1 / -1;
    order: -1;
    padding: 16px 18px 18px;
  }
  .kpi.hero .val { font-size: 40px; }
  .kpi.hero .val small { font-size: 19px; }
  .verdict-word { font-size: 16px; }
}

/* --- Сводка по городам карточками ---------------------------------- */

.city-cards { display: none; }

@media (max-width: 760px) {
  .city-cards { display: grid; gap: 10px; margin-bottom: 20px; }
  .city-table { display: none; }

  .city-card {
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
  }
  .city-card.is-total {
    background: linear-gradient(180deg, var(--soft), var(--panel));
    border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
  }
  .city-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .city-card__name {
    font-size: 15.5px;
    font-weight: 650;
    letter-spacing: -.01em;
  }
  .city-card__balance {
    font-size: 20px;
    font-weight: 660;
    letter-spacing: -.02em;
    white-space: nowrap;
  }
  .city-card__meta {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
  }
  .city-card > details { margin-top: 10px; }
  .city-card > details > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    color: var(--accent2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }
  .city-card > details > summary::-webkit-details-marker { display: none; }
  .city-card > details > summary::marker { content: ""; }
  .city-card > details > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
  }
  .city-card > details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

  .city-cards__legend > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 2px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }
  .city-cards__legend > summary::-webkit-details-marker { display: none; }
  .city-cards__legend > summary::marker { content: ""; }
  .city-cards__legend > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
  }
  .city-cards__legend[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .city-cards__legend p {
    margin: 0 0 8px;
    padding: 0 2px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
  }
  .city-cards__legend p b { color: var(--ink2); }

  .city-card dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 12px;
    margin: 4px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--line2);
    font-size: 13px;
  }
  .city-card dt { color: var(--muted); }
  .city-card dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
  }
}

/* --- Мелочи ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

a:focus-visible,
summary:focus-visible,
.tab:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== Телефон: отбор «Сделок», полосы счётчиков, строка периода =========
   Слово владельца 31.07.2026: «фильтры как-то сильно много места
   занимают», про строку периода — «выглядит как говно». Оба блока
   свёрнуты, а то, что осталось снаружи, растянуто в тач-цели. */

@media (max-width: 760px) {

  .scope {
    padding: 14px;
    margin-bottom: 18px;
    border-radius: 14px;
  }

  /* Ширина по содержимому, а не равные трети: «Несопоставленные» в треть
     экрана не помещается и упирается в соседа, а естественные ширины
     втроём укладываются в строку с запасом. */
  .scope-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    max-width: 100%;
  }
  .scope-switch a {
    flex: 0 1 auto;
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
    text-align: center;
    line-height: 1.2;
  }

  .scope-said { font-size: 13.5px; }
  .scope-chips a { min-height: 34px; font-size: 13px; }

  .refine > summary {
    width: 100%;
    min-height: 46px;
    justify-content: space-between;
    border-radius: 12px;
    font-size: 14px;
  }
  .refine > summary::after { margin-left: auto; }
  .refine-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .refine-row .field { min-width: 0; }
  .refine-row .field.check { flex-direction: row; padding-bottom: 0; }
  .refine-row input,
  .refine-row select { max-width: none; }

  /* Форма длинная, и «Показать» не должна прятаться в её конце: подвал
     прилипает над панелью разделов и виден на любом месте прокрутки. */
  .refine-actions {
    position: sticky;
    bottom: calc(var(--tabbar-h) + var(--tabbar-bottom));
    z-index: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 4px -14px -18px;
    padding: 12px 14px calc(12px + var(--tabbar-bottom));
    background: var(--panel);
    border-top: 1px solid var(--line);
  }
  .refine-actions button { width: 100%; }
  .refine-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  /* Счётчики полосами: двенадцать плиток подряд читаются как простыня,
     а группами — как четыре ответа. Деньги идут первыми. */
  .kpis--banded {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .kpi-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 8px;
  }
  .kpi-band__title {
    display: block;
    grid-column: 1 / -1;
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .kpi-band--money { grid-template-columns: minmax(0, 1fr); order: -3; }
  .kpi-band--money .kpi .val { font-size: 27px; }
  .kpi-band--flow { order: -2; }
  .kpi-band--gaps { order: -1; }

  /* Бейджи проблем в карточке: ширина колонки таблицы и запрет переноса
     обрезали их по краю экрана («город не определ…»). */
  .cards.deals .problem-badges { max-width: none; }
  .cards.deals .problem-badge { white-space: normal; }

  /* Строка периода: свёрнутый диапазон во всю ширину, пресеты — сеткой
     равных целей под ним. */
  .period-pick { width: 100%; }
  .period-pick > summary {
    width: 100%;
    min-height: 46px;
    justify-content: space-between;
    border-radius: 12px;
    font-size: 14px;
  }
  .period-pick > summary::after { margin-left: auto; }
  .period-bar .presets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
    width: 100%;
    margin: 0;
  }
  .period-bar .presets a {
    min-height: 44px;
    justify-content: center;
    padding: 0 6px;
    font-size: 13px;
    text-align: center;
  }
}

/* ===== Телефон: остатки таблиц и тач-цели ================================ */

@media (max-width: 760px) {

  /* Подпись таблицы в карточной раскладке — обычный блок: table-caption
     без таблицы схлопывается. */
  .cards caption { display: block; }

  /* «В работе» — три узкие колонки, которые всё равно не помещались и
     ехали внутри своего скролла. */
  .cards.pending tbody tr { padding: 12px 14px; }
  .cards.pending tbody td { color: var(--muted); }
  .cards.pending tbody tr.total td.strong { color: var(--ink); }

  /* Сводка разбора: «показатель — число — пояснение». Пояснение уходит
     под пару, иначе оно прижимается к правому краю и рвётся на слоги. */
  .totals,
  .totals tbody,
  .totals tr,
  .totals th,
  .totals td {
    display: block;
    text-align: left;
    border: 0;
    padding: 0;
  }
  .totals tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 12px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--line2);
  }
  .totals tbody tr:last-child { border-bottom: 0; }
  .totals tbody tr:hover th,
  .totals tbody tr:hover td { background: none; }
  .totals th { font-size: 14px; font-weight: 600; }
  .totals td.num {
    grid-column: 2;
    grid-row: 1;
    font-size: 17px;
    font-weight: 650;
  }
  .totals td.dim { grid-column: 1 / -1; font-size: 12px; line-height: 1.45; }

  /* Отметка строки в очереди разбора — палец, а не мышь. */
  .cards tbody td.pick { min-height: 44px; align-items: center; }

  /* 24px — нижняя граница размера цели по WCAG 2.5.8; прежние 22px её
     не проходили ровно на два пикселя. */
  input[type="checkbox"] { width: 24px; height: 24px; }

  /* Действия строки и «Сбросить» рядом с кнопкой фильтра — настоящие
     цели нажатия, а не ссылки внутри предложения. */
  .cards tbody td.row-actions a,
  .filter-panel form > a,
  .refine-actions a,
  .cf-modal-close {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .cf-modal-close {
    justify-content: center;
    min-width: 44px;
    margin-right: -8px;
  }
}

@media (max-width: 760px) {
  /* Номер сделки — главная ссылка карточки (открывает карточку в Amo).
     Растить строку до 44px нельзя: это +20px на каждой карточке списка,
     поэтому расширяется ОБЛАСТЬ НАЖАТИЯ, а не сам текст. */
  .cards.deals td.deal-cell { position: relative; }
  .cards.deals td.deal-cell > a { position: relative; }
  .cards.deals td.deal-cell > a::after {
    content: "";
    position: absolute;
    inset: -11px -10px;
  }
}

@media (max-width: 760px) {
  /* «В работе» — три колонки чисел: это таблица по существу, и карточки
     ей вредят (пять строк вырастают с 240 до 630 px). Вместо разбора на
     карточки она ужимается так, чтобы влезть в 375 px без скролла вбок. */
  table.pending { font-size: 12.5px; }
  table.pending thead th { padding: 8px 8px; font-size: 10px; letter-spacing: .02em; }
  table.pending tbody th,
  table.pending tbody td { padding: 8px; }
  table.pending tbody th { font-size: 12.5px; }
  table.pending .sub-line { font-size: 11px; }
  .pending-block { overflow-x: visible; }
}

@media (max-width: 760px) {
  /* Разбор города под строкой ленты: на телефоне две колонки чисел
     схлопываются в одну — «Расход наших РК» и сумма в 375 px рядом не
     помещаются и рвут строку посередине слова. */
  .ledger-open > summary { min-height: 40px; display: flex; align-items: center; }
  /* Сравнение колонками на 375 px не помещается: широкая раскладка разбора
     выключена, читается тот же расчёт списками. */
  .breakdown-compare { display: none; }
  .breakdown { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .breakdown__list { font-size: 12.5px; }
  .breakdown__list dt,
  .breakdown__list dd { padding: 6px 0; }

  .ledger-total--period { flex-wrap: wrap; }
  .ledger-total--period b { font-size: 20px; }
  .ledger-total-note { padding: 0 16px 14px; }
  .section-lead { margin: -2px 0 12px; }
  .register-group__meta { margin: -2px 0 10px; }

  /* Деньги по городам: карточки в одну колонку, чипы дыр — тач-цели. */
  .money-total { grid-template-columns: minmax(0, 1fr); }
  .money-total .duo-value.money-total__value { font-size: 25px; }
  .city-money { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .city-money__gaps a {
    display: inline-flex;
    align-items: center;
    /* Пробел между подписью и числом во flex-строке съедается: «без
       партнёра3» вместо «без партнёра 3». */
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
  }
}

@media (max-width: 760px) {
  /* --- Компактная подача (31.07.2026) ------------------------------- */

  /* Главные цифры одной колонкой, но без плиток во весь экран. */
  .today-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .today-card { padding: 11px 14px 12px; }
  .today-card .today-value { font-size: 25px; }
  .verdict-figure { font-size: 40px; }

  /* Карточка бригады: имя и долг одной строкой, спарклайн, действие. */
  .pcards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pcard { padding: 11px 14px 12px; }
  .pcard__name { font-size: 15px; }
  .pcard__debt { font-size: 18px; }
  .spark { height: 30px; }
  .spark__month { font-size: 9px; }

  /* Счётчики выборки: два столбца чисел вместо шести плиток. */
  .tally { grid-template-columns: minmax(0, 1fr); padding: 10px 14px; }
  .tally__item { font-size: 11.5px; }
  .tally__item > b { font-size: 16px; }

  /* Панель над списком липнет к верху: фильтр нужен, когда список уже
     пролистан, а не только в самом начале страницы. */
  .listbar {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 -14px 10px;
    padding: 8px 14px;
    background: var(--bg);
  }
  .listbar__filters { flex: 1; min-height: 44px; justify-content: center; }
  .listbar__reset { min-height: 44px; display: inline-flex; align-items: center; }

  /* Отбор выезжает снизу: панель на часть экрана, кнопки во всю ширину,
     тач-цели 44px, поля 16px (иначе iOS зумит и вёрстка едет). */
  dialog.cf-modal.sheet:modal {
    width: 100vw;
    max-width: none;
    max-height: 86vh;
    margin: auto auto 0;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
  }
  .cf-modal.sheet .cf-modal-body { grid-template-columns: minmax(0, 1fr); }
  .cf-modal.sheet .refine-group { margin: 0 0 4px; }
  .cf-modal.sheet .refine-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Флажок — единственное поле, которое браузер рисует 24px: тач-целью
     служит вся строка с подписью, иначе в неё не попасть пальцем. */
  .cf-modal-body .field.check,
  .cf-modal-body .field:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
  }
  .cf-modal-body input[type="checkbox"] { width: 22px; height: 22px; }
  .cf-modal-body .field.check label { margin: 0; font-size: 15px; }

  .cf-modal.sheet .cf-modal-foot { flex-wrap: wrap; }
  .cf-modal.sheet .cf-modal-foot .btn-link {
    flex: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Сделки: компактная карточка ---------------------------------- */

  /* Первая строка — то, по чему сделку узнают: номер и деньги. Вторая —
     контекст одной строкой без подписей к каждому значению: именно
     подписи раздували карточку почти до экрана. Остальное — под
     раскрытием, оно же несёт значения колонок, скрытых на телефоне. */
  .cards.deals tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    padding: 10px 15px 11px;
  }
  .cards.deals tbody th.deal-id {
    order: 1;
    flex: 1 1 auto;
    margin: 0;
    font-size: 14.5px;
  }
  .cards.deals tbody td.price-cell {
    order: 2;
    flex: 0 0 auto;
    justify-content: flex-end;
    font-size: 17px;
  }
  .cards.deals tbody td.price-cell::before { content: none; }
  .cards.deals tbody td.deal-meta {
    display: flex;
    order: 3;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    padding: 0;
    font-size: 11.5px;
    color: var(--muted-strong);
  }
  .cards.deals tbody td.deal-meta::before { content: none; }
  /* Разделитель между значениями — только там, где у значения нет
     своего маркера: у статуса он свой (цветная точка категории). */
  .cards.deals tbody td.deal-meta > span + span:not(.status-name)::before {
    content: "·";
    margin-right: 6px;
    color: var(--muted);
  }
  .cards.deals tbody td.deal-meta .status-name { font-size: 11.5px; }
  .cards.deals tbody td.deal-meta .tag { font-size: 10px; }
  .cards.deals tbody th.deal-id .problem-badges { flex: 1 1 100%; margin-top: 3px; }

  .cards.deals tbody td.date-cell,
  .cards.deals tbody td.city-cell,
  .cards.deals tbody td.status-cell,
  .cards.deals tbody td.comm,
  .cards.deals tbody td.partner-cell,
  .cards.deals tbody td.charge-cell { display: none; }

  .cards.deals tbody td.deal-fold { display: block; order: 4; flex: 0 1 auto; padding: 0; }
  .cards.deals tbody td.deal-fold summary {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent2);
    cursor: pointer;
  }
  .cards.deals tbody td.row-actions {
    order: 5;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    width: auto;
  }
  .cards.deals tbody td.row-actions .btn-link { min-height: 34px; margin: 0; font-size: 12px; }
}

/* ===== Телефон: разбор дыр плотнее ====================================== */

@media (max-width: 760px) {
  .attention-card { padding: 10px 14px; gap: 5px; }
  .attention-value { font-size: 16px; }
  .attention-value--split { font-size: 13px; }
  .attention-body h3 { font-size: 13.5px; }
  .attention-body .plain { font-size: 12.5px; }
  .attention-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .attention-side .btn-link { min-height: 40px; display: inline-flex; align-items: center; }
}

@media (max-width: 760px) {
  /* Ширина колонки действий задана для ТАБЛИЦЫ; в карточке телефона
     фиксированные 132 px вылезали за правый край на 3 px. */
  .cf-feed .row-actions {
    width: auto;
    max-width: 100%;
    justify-content: flex-end;
  }
  .row-more__items { justify-content: flex-end; }
  .row-more > summary { min-height: 34px; }
}

@media (max-width: 760px) {
  /* В карточке действия прижаты вправо и не растягиваются на всю
     ширину: строка кнопки во весь экран читалась как баннер. */
  .cards.cf-feed .row-actions { justify-content: flex-end; }
  .cards.cf-feed .row-actions .btn-link { flex: 0 0 auto; }
  .cards.deals tbody td.row-actions { white-space: normal; display: flex; flex-wrap: wrap; gap: 4px; }
}

@media (max-width: 760px) {
  /* Действия карточки встают справа от строки «счёт · город · способ»,
     а не отдельной полосой под ней: полоса стоила 44 px в каждой
     карточке ленты, а действие в ней одно. */
  .cards.cf-feed tbody td.cf-meta { grid-column: 1; align-self: center; }
  .cards.cf-feed tbody td.row-actions {
    grid-column: 2;
    align-self: center;
    justify-content: flex-end;
    padding: 0;
  }
}

/* ===== Кабинет бригады: карточки без подписей у каждого значения ==========
   Блок добавлен целиком в конец файла и ничего выше не переписывает.

   Слово владельца 31.07.2026: подпись у каждого значения («Телефон:»,
   «Стоимость услуги:») превращает строку списка в простыню — в экран
   помещалась половина одной заявки. Здесь ячейки расставлены по сетке
   явно, подписей нет вовсе, а два значения, которые без заголовка
   колонки не опознать (комиссия и остаток), получают микроподпись —
   одну на карточку, а не одну на каждое поле. */

@media (max-width: 760px) {

  /* Плашка «фактов» в две колонки: в строку они не помещаются и
     разъезжаются по одной на ряд, растягивая блок втрое. */
  .facts--work {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }
  .facts--account { grid-template-columns: minmax(0, 1fr); }

  .cards.partner-deals tbody tr,
  .cards.partner-ledger tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 3px 12px;
    padding: 11px 15px;
  }
  .cards.partner-deals tbody th,
  .cards.partner-deals tbody td,
  .cards.partner-ledger tbody th,
  .cards.partner-ledger tbody td {
    display: block;
    padding: 0;
    font-size: 13px;
  }
  .cards.partner-deals tbody th[scope="row"],
  .cards.partner-ledger tbody th[scope="row"] {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 14.5px;
  }
  .cards.partner-deals tbody tr.is-empty,
  .cards.partner-ledger tbody tr.is-empty { display: block; padding: 16px 15px; }

  .cards.partner-deals td.d-comm {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    text-align: right;
    font-size: 19px;
    font-weight: 660;
    letter-spacing: -.02em;
  }
  .cards.partner-deals td.d-status { grid-column: 1; grid-row: 2; }
  .cards.partner-deals td.d-id { grid-column: 1; grid-row: 3; color: var(--muted-strong); }
  .cards.partner-deals td.d-phone { grid-column: 2; grid-row: 3; text-align: right; }
  .cards.partner-deals td.d-price { grid-column: 1; grid-row: 4; font-weight: 400; }
  .cards.partner-deals td.d-charge { grid-column: 2; grid-row: 4; text-align: right; }

  .cards.partner-ledger td.l-amount {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    font-size: 19px;
    font-weight: 660;
    letter-spacing: -.02em;
  }
  .cards.partner-ledger td.l-type { grid-column: 1 / -1; grid-row: 2; }
  .cards.partner-ledger td.l-link { grid-column: 1; grid-row: 3; }
  .cards.partner-ledger td.l-after {
    grid-column: 2;
    grid-row: 3;
    text-align: right;
    font-size: 13.5px;
  }
  .cards.partner-ledger td.l-comment { grid-column: 1 / -1; grid-row: 4; }

  /* Микроподписи включаются только здесь: на широком экране значение
     подписано заголовком колонки, и вторая подпись была бы дублем. */
  .d-comm__cap {
    display: block;
    margin-bottom: -2px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .d-price__cap,
  .l-after__cap {
    display: inline;
    color: var(--muted);
    font-weight: 400;
  }

  /* Помесячный ритм: месяц и число заявок в одну строку — вторая строка
     ради двух слов не нужна. */
  .months { padding: 4px 15px 8px; }
  .months__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 12px;
    padding: 11px 0;
  }
  .months__when { grid-column: 1; }
  .months__deals { grid-column: 2; text-align: right; align-self: baseline; margin: 0; }
  .months__line { grid-column: 1 / -1; }

  .sum-line { padding: 12px 15px 8px; }
  .sum-line__foot { padding: 2px 15px 14px; }
  .sum-line__row--result .sum-line__num { font-size: 21px; }
}

@media (max-width: 760px) {
  /* Прочерк в карточке — шум: в таблице он держит колонку, здесь держать
     нечего. Правило повторено для собственных таблиц кабинета: их явная
     раскладка ячеек равна по весу общему .cards td.blank и, стоя ниже по
     файлу, перебивала его. */
  .cards.partner-deals tbody td.blank,
  .cards.partner-ledger tbody td.blank { display: none; }

  .cur-cap { display: inline; color: var(--muted); font-weight: 600; }
  .cards.partner-deals td.d-price .cur-cap { font-weight: 400; }
}

@media (max-width: 760px) {
  /* Отсутствие суммы — не сумма: набранное размером комиссии «не
     отмечена» кричало громче любого числа в списке. */
  .cards.partner-deals td.d-comm .dim,
  .cards.partner-ledger td.l-amount .dim {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
  }
  .cards.partner-deals td.d-price .dim { font-size: 12.5px; }
}

@media (max-width: 760px) {
  /* Текст для чата операторов: на телефоне кнопка копирования —
     основное действие блока, поэтому во всю ширину и в палец высотой.
     Само поле короче: на маленьком экране двадцать строк монолита
     выталкивают таблицу за пределы видимости. */
  .opnote__body { padding: 12px 14px; }
  .opnote__actions { margin-bottom: 12px; }
  .opnote__copy { width: 100%; min-height: 44px; justify-content: center; }
  .opnote__text { min-height: 168px; font-size: 12px; }
}

@media (max-width: 760px) {
  /* Доступы с телефона — основной сценарий раздела: логин и пароль
     копируют, стоя у чужого компьютера. Отсюда две вещи сразу.

     Первая — цели в палец: кнопки действий 44px, «править» и «удалить»
     тоже. На «Скопировать пароль» промахиваться нельзя, следующая
     попытка стоит ещё одного запроса к серверу.

     Вторая — название занимает целую строку, а логин с кнопками уходит
     под него. Иначе на 375px название пришлось бы обрезать до десятка
     букв, а различать записи надо именно по нему: «Директ основной» и
     «Директ Екатеринбург» стоят рядом. */
  .vault-line {
    --rail-slot: 40px;
    --rail-h: 44px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 2px 10px 4px;
  }
  .vault-line__fold { grid-column: 1 / -1; grid-row: 1; }
  .vault-line__login { grid-column: 1; grid-row: 2; max-width: none; }
  .vault-line__rail { grid-column: 2; grid-row: 2; }
  .vault-line__out { grid-row: 3; }

  /* Название стоит своей строкой и высоту кнопок не наследует: цель в
     палец здесь набирается шириной, а не высотой — полоса во весь экран
     на 30px, и промахнуться по ней мимо соседней строки нельзя (между
     двумя названиями всегда лежит строка логина). Кнопки, «править» и
     «удалить» — те самые 44px, там цель мелкая и промах дорогой. */
  .vault-line__head { min-height: 30px; font-size: 14px; }
  .vault-line__login { margin-left: 12px; font-size: 13px; }
  .vault-line__more { padding-left: 14px; }

  /* Запись без логина (чат, ссылка на сервис) второй строки не просит:
     кнопки встают справа от названия, и такая запись занимает вдвое
     меньше — иначе четыре чата подряд съедали бы экран пустотой. */
  .vault-line--flat .vault-line__rail { grid-row: 1; align-self: start; }
  .vault-line--flat .vault-line__head {
    min-height: var(--rail-h);
    padding-right: calc(var(--rail-reserve) + 12px);
  }

  .vault-value { font-size: 14px; padding: 8px 11px; }

  /* «править» и «удалить» разносим шире: соседние ссылки в 12px на
     телефоне нажимаются одна вместо другой, а удаление необратимо. */
  .vault-line__edit { gap: 8px 22px; flex-wrap: wrap; }
  .vault-line__edit a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
  }

  .vault-find input[type="search"] { flex: 1 1 auto; }
  .vault-find button { flex: none; min-height: 48px; }
  .vault-foot { max-width: none; }

  /* Типы полей, которых не было в кабинете до этого раздела: поиск и
     адрес. Общее правило форм (выше по файлу) перечисляет типы поимённо
     и этих двух не знает — без них iOS зумит страницу на фокусе, ровно
     та беда, ради которой там стоит 16px. Значения те же, что у
     остальных полей: одно поведение на всю форму. */
  input[type="search"],
  input[type="url"] {
    max-width: none;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 12px;
  }
}

@media (max-width: 760px) {
  /* Сетка колонок — только для десктопной таблицы. На телефоне строка
     становится карточкой (display:block), и колонок нет: оставленный
     colgroup порождал бы пустую анонимную табличную обёртку. */
  .cards colgroup { display: none; }
  .ledger { table-layout: auto; }
  .ledger tbody td,
  .ledger tbody th,
  .ledger tbody td.comment,
  .ledger tbody td.why-cell {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  /* Приписка «· плательщик» в карточке идёт своей строкой: в столбце
     она экономит место, а на 375px в строку с именем бригады не лезет. */
  .ledger__aside { display: block; }
  .ledger__aside::before { content: none; }
  /* Боковой вылет области нажатия — только для десктопа: в карточке
     кнопки стоят вплотную, и запас по горизонтали перехватывал бы
     нажатие у соседа. Вертикальный запас задан ниже по файлу. */
  .ledger td.row-actions .btn-link::after,
  .ledger td.row-actions .row-more > summary::after { inset: -6px 0; }
}

/* Москва, строка начисления с правкой базы (01.08.2026). В карточке
   телефона ячейка — флекс-строка «подпись → значение», поэтому
   зачёркнутый факт, база, ярлык «не считается» и раскрытие причины
   вставали В ОДНУ строку и наезжали друг на друга. Кладём их этажами,
   как на десктопе: значение остаётся рядом с подписью, уточнения — под
   ним по правому краю. */
@media (max-width: 760px) {
  .cards.accruals tbody td[data-label="Оборот"] { flex-wrap: wrap; }
  .cards.accruals tbody td[data-label="Оборот"] > .sub-line,
  .cards.accruals tbody td[data-label="Оборот"] > .why { flex: 0 0 100%; }

  /* Ярлык «не считается» на своей строке занимает её целиком — заливка
     во всю ширину карточки читается как плашка-предупреждение, которой
     он не является. В карточке он остаётся словами у правого края:
     ровно так же, как «не считается» в денежной строке над ним. */
  .cards.accruals tbody td[data-label="Оборот"] > .tag.sub-line {
    width: auto;
    margin: 3px 0 0;
    padding: 0;
    background: none;
    color: var(--off-fg);
    text-align: right;
  }
}

@media (max-width: 760px) {
  /* Цель нажатия карточки — 44px, как во всём кабинете. «Подробности»,
     «ещё» и правка сделки были ужаты до 34px: попасть большим пальцем
     можно было только с прицелом. Площадь набирается НЕВИДИМЫМ запасом,
     а не высотой кнопки: карточка сделки держится в 107px и шести штуках
     на экран, и рост кнопки съел бы одну из них. Запас только по
     вертикали — по горизонтали кнопки стоят вплотную, и боковой вылет
     перехватывал бы нажатие у соседа. */
  .cards.deals tbody td.deal-fold summary,
  .cards.deals tbody td.row-actions .btn-link,
  .cards.cf-feed tbody td.row-actions .btn-link,
  .row-fold > summary,
  .row-more > summary { position: relative; }
  .cards.deals tbody td.deal-fold summary::after,
  .cards.deals tbody td.row-actions .btn-link::after,
  .cards.cf-feed tbody td.row-actions .btn-link::after,
  .row-fold > summary::after,
  .row-more > summary::after {
    content: "";
    position: absolute;
    inset: -6px 0;
    min-height: 44px;
  }
  .row-fold > summary { display: inline-flex; align-items: center; min-height: 32px; }
}

@media (max-width: 760px) {
  /* «Было → стало» в карточке: три атома, каждый целиком. Без этого
     «не отмечена» рвалось между словами, а «5 000» — между разрядами,
     и значение читалось как три разных числа. */
  .cards.corrections-feed tbody td.num > span,
  .cards.corrections-feed tbody td.num > b { white-space: nowrap; }
}