:root {
  --brand-red: #dd1f2b;
  --brand-coral: #f06f5a;
}

.brand-mark {
  width: 42px;
  height: 42px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.18), rgba(255,255,255,.03) 48%, rgba(0,0,0,.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 28px rgba(221,31,43,.24);
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.login-brand .brand-mark { width: 52px; height: 52px; }
.login-help { margin-top: 22px; padding: 17px 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(4,12,24,.34); }
.login-help strong { display: block; color: #dce9f6; font-size: 11px; }
.login-help p { margin: 5px 0 13px; color: #879bb0; font-size: 11px; line-height: 1.55; }
.login-help p:last-child { margin-bottom: 0; }
.alert.warning { border: 1px solid rgba(233,162,59,.45); color: #9a6308; background: #fff6df; }
.decision-comment { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.decision-comment strong { font-size: 11px; }
.decision-comment p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; }
.pagination span { color: var(--muted); font-size: 12px; }

@media (max-width: 640px) {
  .sidebar { flex-wrap: wrap; gap: 8px; }
  .sidebar .brand { flex: 1; }
  .sidebar .brand small { display: none; }
  /* Было `grid-template-columns: repeat(4, 1fr)` при пяти пунктах меню:
     пятый уезжал на вторую строку, а содержимое пунктов не сжималось и
     обрезалось по правому краю — до «Управления» и «Безопасности» было не
     добраться (находка И2 сквозной приёмки 03.09.2026). Теперь ряд один,
     прокручивается пальцем, и ни один пункт не теряется. */
  .nav { order: 3; display: flex; width: 100%; margin: 4px 0 0; gap: 6px;
         overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item, .nav-item.active { display: flex; flex: 0 0 auto; justify-content: center;
                                min-height: 42px; padding: 8px 12px; font-size: 11px;
                                white-space: nowrap; }
  .nav-item > span { font-size: 17px; }
  .sidebar-user { display: flex; margin: 0; padding: 0; border: 0; }
  .sidebar-user .avatar, .sidebar-user > span:nth-child(2) { display: none; }
  .sidebar-user form { display: block; }
}

/* Расчёт: редактируемые строки и пояснение к оплачиваемому количеству */
.adjusted { display: block; margin-top: 4px; color: #97630d; font-size: 10px; }
.qty-form { display: flex; align-items: center; gap: 6px; }
.qty-form input { width: 92px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdff; color: var(--text); font: inherit; font-size: 13px; }
.qty-form input:focus, .qty-form button:focus-visible { border-color: #5ecde3; box-shadow: 0 0 0 3px rgba(25, 199, 229, .28); outline: none; }
.icon-button.danger { color: #b0475a; }
.icon-button.danger:hover { color: #e05263; }
.status-locked { border-color: #67d6b1 !important; color: #147859 !important; background: #e8fbf4 !important; }
.status-superseded { border-color: #b8c8c1 !important; color: #547067 !important; background: #eff5f2 !important; }

/* Видимый фокус для клавиатуры: раньше его не было ни у одного элемента */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #1295b2;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Экран визита: на телефоне задание должно быть выше формы отчёта.
   Измерено до правки: адрес находился на 978px при высоте экрана 899px. */
@media (max-width: 760px) {
  /* Порядок блоков — под то, зачем экран открывают.

     Задание («куда ехать, во сколько, к кому») поднято наверх намеренно: это
     первое, что смотрит исполнитель. Но вместе с ним наверх уезжал и блок
     «Отметить несостоявшимся», лежащий в том же `aside`, — и форма отчёта
     оказывалась третьей. Замер 13.09.2026 на 375 px: Задание 286, блок срыва
     697, форма отчёта 1164 при высоте экрана 812. Чтобы начать писать отчёт,
     исполнитель прокручивал полтора экрана мимо предложения признать выезд
     несостоявшимся.

     Основной сценарий не должен стоять за редким. `display: contents` убирает
     `aside` из раскладки, не трогая разметку: его дети становятся прямыми
     элементами колонки, и порядок задаётся каждому отдельно.

     Итог: Задание → Отчёт → Фотографии → Отметить несостоявшимся. */
  .visit-detail { display: flex; flex-direction: column; }
  .visit-detail > aside { display: contents; }
  .visit-detail > aside > .facts { order: -1; }
  .visit-detail > aside > .side-action { order: 1; }
}
.alert.info { border: 1px solid #97ddec; color: #0b6d84; background: #eefbff; }
.status-failed { border-color: #efc778 !important; color: #97630d !important; background: #fff6df !important; }

/* Почему следующий шаг недоступен: раньше объяснение существовало в коде,
   но было недостижимо через интерфейс — форма молча прятала такие переходы. */
.blockers { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.blockers strong { display: block; margin-bottom: 8px; color: #97630d; font-size: 11px; }
.blockers ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.blockers b { color: #4f6072; }

/* Назначение ответственного прямо в карточке заявки */
.assign-form { display: grid; gap: 8px; margin-top: 4px; }
.assign-form select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fbfdff; color: var(--text); font: inherit; font-size: 13px; }
.assign-form .button { min-height: 34px; font-size: 12px; }

/* ───────────────────────────── полевой режим исполнителя ───────────────────
   A1 и A2 из `todo/UI_PROPOSALS_2026-09-13_RU.md`.

   Экран наряда — единственный, которым пользуются не за столом: в перчатках,
   при плохом свете, одной рукой, стоя. Обзоры полевых систем называют это
   главным отличием пригодного приложения от непригодного, и разница не в
   красоте, а в том, попадёт человек по кнопке с первого раза или с третьего.

   Что делаем:

   * главное действие прижато к низу экрана и занимает всю ширину — палец
     достаёт его не целясь, и оно не уезжает при прокрутке;
   * высота не меньше 56 px: это принятый минимум для пальца, а не для курсора;
   * редкое действие («выезд не состоится») свёрнуто — см. `<details>`
     в разметке.

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

     Первая попытка была на `position: sticky` — и не сработала: блок лежит
     внутри шапки страницы, а `sticky` прилипает к границе **своего**
     контейнера, а не окна. Кнопка честно оставалась в шапке и уезжала вверх
     при первой же прокрутке. `fixed` привязывает к окну, а не к родителю;
     платой идёт отступ снизу у содержимого, чтобы полоса ничего не закрывала. */
  .primary-action {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #f3f7fb00, #f3f7fbf2 22%, #f3f7fb 45%);
  }
  /* Форма — обёртка кнопки, и растянуть надо обе: иначе кнопка меряет ширину
     по тексту и получается «Выехал» шириной в треть экрана. */
  .primary-action form { display: block; width: 100%; }
  /* Содержимое не должно уходить под полосу: последний блок иначе
     недосягаем — а это либо фотографии, либо кнопка отправки отчёта. */
  .main { padding-bottom: 104px; }
  /* Полосы нет — нет и отступа: пустая страница с дырой внизу выглядит
     сломанной. `:has` поддерживается всеми браузерами, где работает `fixed`
     с безопасной зоной. */
  body:not(:has(.primary-action .button)) .main { padding-bottom: 42px; }
  /* 56 px — не «покрупнее», а минимум, ниже которого промахи становятся
     заметными. Ширина во весь экран снимает вопрос прицеливания вовсе. */
  .primary-action .button {
    width: 100%;
    min-height: 56px;
    font-size: 16px;
    border-radius: 14px;
  }

  /* Свёрнутое редкое действие. Заголовок остаётся видимым — человек знает, что
     возможность есть, но она не занимает пол-экрана. */
  .side-action > summary {
    cursor: pointer;
    list-style: none;
    padding: 2px 0;
  }
  .side-action > summary::-webkit-details-marker { display: none; }
  .side-action > summary h3 { margin: 4px 0 0; }
  /* Стрелка вместо стандартного треугольника: он выглядит по-разному в разных
     браузерах и в двух из трёх — как дефект вёрстки. */
  .side-action > summary::after {
    content: "▾";
    float: right;
    margin-top: -18px;
    color: var(--muted);
    font-size: 15px;
  }
  .side-action[open] > summary::after { content: "▴"; }
}

/* C1 — на телефоне сначала сумма, потом из чего она сложилась.

   Заказчик открывает КП, чтобы ответить на один вопрос: сколько. До 15.09.2026
   он получал сперва состав работ, а итог — экраном ниже: читал позиции, не зная
   суммы, и только потом узнавал её. Порядок «сколько → из чего» отвечает на
   главное сразу, а разбор остаётся для тех, кому он нужен.

   На широком экране ничего не меняется: там итог и так видно справа, рядом с
   составом, и переставлять его значило бы сломать работающее. */
@media (max-width: 760px) {
  .detail-grid:has(.total-card) { display: flex; flex-direction: column; }
  .detail-grid:has(.total-card) > aside { display: contents; }
  .detail-grid:has(.total-card) > aside > .total-card { order: -1; }
}