/*
 * Общие стили кабинета «Елен и Море».
 *
 * Мобильный вид первичен: правила по умолчанию рассчитаны на узкий экран телефона,
 * а всё, что относится к широкому экрану, лежит внутри `@media (min-width: 720px)`.
 * Своей системы вёрстки (сетки, колонок, брейкпоинтов на любой вкус) здесь нет —
 * это простые стили под конкретные экраны кабинета, не библиотека компонентов.
 *
 * Ширины намеренно не задаются в пикселях больше ширины маленького телефона (кроме этого
 * самого брейкпоинта в @media): контейнеры растут в `rem` и `%`, картинки и таблицы скроллятся
 * внутри своего блока, а не толкают всю страницу вбок. За это отвечает тест
 * tests/core/test_layout_mobile.py.
 *
 * Точки перелома: 720 px — телефон / широкий экран; 1200 px — просторная раскладка.
 * Узкие диапазоны заканчиваются на 719.98 и 1199.98 px соответственно.
 *
 * D12: палитра варианта Б «Светлый берег», общая оболочка и компоненты.
 */

/* --- Токены ------------------------------------------------------------ */

:root {
  --form-width: 38rem;
  color-scheme: light;
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font);
  --color-bg: #fbf7f0;
  --color-surface: #fff;
  --color-field: #fcfaf6;
  --color-text: #14232b;
  --color-muted: #58656d;
  --color-border: #e7e1d6;
  --color-border-strong: #8f8778;
  --color-primary: #08707f;
  --color-primary-text: #fff;
  --color-on-cta: var(--color-primary-text);
  --color-success: #176b49;
  --color-success-bg: #dff4ea;
  --color-wait: #7a5600;
  --color-wait-bg: #fdf2d6;
  --color-late: #b3283a;
  --color-late-bg: #fce6e9;
  --color-warning: #9a4a14;
  --color-warning-bg: #feeadb;
  --color-danger: #b3283a;
  --color-danger-bg: #fce6e9;
  --color-neutral: #58656d;
  --color-neutral-bg: #f0ebe3;
  --color-info: #2861ad;
  --color-info-bg: #e5effc;
  --color-active: #07606d;
  --color-active-bg: #e2f4f2;
  --color-hover: #eef8f7;
  --color-drop: #9fd6d1;
  --color-drop-bg: #f2faf9;
  --color-wave: #d9f1ee;
  --color-clear: transparent;
  --cta: var(--color-primary);
  --shadow-cta: 0 4px 12px rgba(8, 112, 127, .22);
  --shadow-card: 0 1px 2px rgba(20, 35, 43, .04), 0 4px 16px rgba(20, 35, 43, .05);
  --shadow-popup: 0 8px 24px rgba(20, 35, 43, .14);
  --shadow-danger-active: inset 0 0 0 1px var(--color-danger);
  --radius: .625rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --radius-round: 50%;
  --space-heading: 0.6em;
  --space-negative-card: calc(-1 * var(--space-md));
  --space-negative-card-x: calc(-1 * var(--space-lg));
  --gap: var(--space-sm);
  --touch: 2.75rem;
  --sidebar-width: 16rem;
  --sidebar-compact-width: 4rem;
  --finance-summary-width: 38rem;
  --bottom-height: 5rem;
  --space-none: 0;
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 2.5rem;
  --text-table: 0.875rem;
  --text-footnote: 0.75rem;
  --space-button-x: 1.125rem;
  --space-cell-x: 0.375rem;
  --space-button-compact-x: 0.625rem;
  --pill-gap: var(--space-xs);
  --pill-control-height: 1.875rem;
  --pill-label-height: 1.5rem;
  --pill-touch-inset: calc((var(--touch) - var(--pill-control-height)) / -2);
  --counter-size: var(--pill-label-height);
  --line-body: 1.45;
  --line-label: 1.25;
  --line-table: 1.4;
  --text-caption: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-body: 1rem;
  --text-lg: 1.125rem;
  --text-h3: 1.0625rem;
  --text-h2: 1.25rem;
  --text-title: 1.75rem;
  --text-value: 1.75rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heading: 700;
  --weight-brand: 700;
  --tracking-caps: .12em;
  --progress-height: .75rem;
  --progress-height-table: .5rem;
  --heading-weight: var(--weight-heading);
  --heading-track: -.015em;
}

/* Golos Text (SIL OFL 1.1, лицензия — fonts/OFL.txt): вариативный, веса 400–900. */
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/GolosText-cyrillic.2b8fbbb33a14.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/GolosText-latin.f57df9832ab8.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Сброс и база -------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: var(--space-none);
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden; /* подстраховка: сама точка перелома — ниже, overflow-wrap */
  /* Название отеля, адрес, почта туриста, номер брони, ссылка на памятку приходят из CRM
     без единого пробела. `overflow-x: hidden` выше только прячет результат — обрезает
     видимую прокрутку, а причина в том, что у неразрывного текста нет точки переноса,
     и его контейнер (особенно flex-элемент — у него по умолчанию `min-width: auto`,
     он не сжимается меньше содержимого) раздвигает layout вбок. `anywhere` — это перенос
     как последняя мера, только когда естественных пробелов нет: обычный текст переносится
     как обычно. */
  overflow-wrap: anywhere;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Подпись, которую слышит экранный диктор, но не видит глаз: у кнопки-иконки. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

h1,
h2,
h3 {
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-track);
  font-family: var(--font-heading);
  line-height: 1.25;
  margin: var(--space-none) var(--space-none) var(--space-heading);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
}

/* Один вид фокуса с клавиатуры на всё, что нажимают. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.muted {
  color: var(--color-muted);
}

/* --- Каркас страницы ------------------------------------------------------ */

/* Оболочка: панель телефона, меню без JavaScript, боковая колонка от 720px. */
.page-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  z-index: 10;
}
.page-header__bar {
  display: flex;
  padding: var(--space-md);
  align-items: center;
}
.page-header__brand {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  font-weight: var(--weight-brand);
  font-size: var(--text-lg);
  color: var(--color-primary);
  text-decoration: none;
}
.ui-icon {
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
}
.page-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6rem;
  color: var(--color-wave);
  z-index: -1;
  pointer-events: none;
}
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.main-nav {
  display: none;
  background: var(--color-surface);
}
.nav-toggle:checked ~ .main-nav {
  display: flex;
}
.nav-toggle:focus-visible ~ .bottom-nav .nav-toggle-label {
  outline: 2px solid var(--color-primary);
}
.main-nav__list, .nav-group__list {
  list-style: none;
  margin: var(--space-none);
  padding: var(--space-none);
}
.nav-group {
  margin-bottom: var(--space-md);
}
.nav-group__title {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-muted);
  padding: var(--space-xs) var(--space-sm);
}
.main-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  min-height: var(--touch);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
}
.main-nav__link:hover {
  background: var(--color-hover);
}
.main-nav__link.is-active {
  background: var(--color-active-bg);
  color: var(--color-active);
  font-weight: var(--weight-semibold);
}
.nav-footer {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-xs);
}
.nav-footer--account-only .main-nav__account {
  border-top: 0;
}
.main-nav__account {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
  gap: var(--space-2xs);
}
.main-nav__whoami {
  font-weight: var(--weight-semibold);
  padding: var(--space-none) var(--space-sm);
}
.main-nav__account .muted {
  font-size: var(--text-sm);
  padding: var(--space-none) var(--space-sm);
}
.main-nav__account .ui-icon { display: none; }
.main-nav__logout {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  min-height: var(--touch);
  color: var(--color-text);
  text-align: left;
  border-radius: var(--radius);
}
.main-nav__logout:hover {
  background: var(--color-hover);
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--bottom-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 20;
}
.bottom-nav__link, .nav-toggle-label {
  flex: 1 1 0;
  min-width: min-content;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  text-align: center;
  font-size: var(--text-caption);
  text-decoration: none;
  color: var(--color-muted);
  cursor: pointer;
}
/* Подпись пункта остаётся целым словом и на пяти пунктах шириной 320 px;
   пункту с длинной подписью достаётся больше места. */
.bottom-nav__link span, .nav-toggle-label span { white-space: nowrap; }
.bottom-nav__link--booking { flex-grow: 1.7; }
.bottom-nav__link.is-active, .nav-toggle-label.is-active {
  color: var(--color-active);
  font-weight: var(--weight-bold);
}
@media (max-width: 719.98px) {
 .main-nav {
   position: fixed;
   inset: 0 0 calc(var(--bottom-height) + env(safe-area-inset-bottom));
   z-index: 15;
   overflow-y: auto;
   padding: var(--space-md);
   flex-direction: column;
 }
}
@media (min-width: 720px) {
 .page-header {
   position: fixed;
   inset: 0 auto 0 0;
   width: var(--sidebar-width);
   display: flex;
   flex-direction: column;
 }
 .page-header__bar {
   padding: var(--space-xl) var(--space-md);
 }
 .main-nav {
   display: flex;
   flex: 1;
   min-height: 0;
   flex-direction: column;
   padding: var(--space-none) var(--space-sm) var(--space-md);
   overflow: hidden;
 }
 .bottom-nav {
   display: none;
 }
 .nav-toggle {
   display: none;
 }
 .main-nav__list {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
 }
 .main-nav__link {
   min-height: 2.25rem;
   padding: var(--space-xs) var(--space-xs);
   font-size: var(--text-md);
 }
 .nav-group {
   margin-bottom: var(--space-xs);
 }
 .nav-footer {
   flex-shrink: 0;
 }

}

.container {
  container: screen / inline-size;
  width: 100%;
  max-width: 87.5rem; /* 1400px */
  margin: var(--space-none) auto;
  padding: var(--space-md);
  padding-bottom: calc(var(--bottom-height) + var(--space-md) + env(safe-area-inset-bottom));
  position: relative;
  isolation: isolate;
}

@media (min-width: 720px) {
  .container {
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
    padding: var(--space-3xl) var(--space-2xl);
  }
}

.page-title {
  font-family: var(--font-heading);
  font-size: var(--text-title);
  margin-bottom: var(--space-lg);
}

/* Заголовок экрана + кнопка действия рядом (например, «Финансовые исключения» + «Завести
   исключение», exceptions_/list.html). Класс был в разметке и раньше, но не был объявлен
   здесь ни разу — без правила заголовок и кнопка просто падали друг под друга. */
.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-bottom: var(--space-lg);
}

.page-header-row .page-title {
  margin-bottom: var(--space-none);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Для экранов с несколькими независимыми разделами подряд (аналитика и подобное):
   между разделами нужен зазор побольше, чем между полем и его подсказкой внутри одного
   блока. Сам .stack используется и для мелких, плотных группировок — раздельный класс,
   чтобы не раздвигать их тоже. */
.stack-lg {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Широкий `.container` (1400px) хорош для таблиц и плиток — и совершенно не годится для
   сплошного текста: строка в 1400px не читается. `.prose` ограничивает именно текстовый
   блок (статья базы знаний, пояснение), а не всю страницу — соседняя таблица или плитки
   в том же контейнере по-прежнему занимают всю ширину. Так решён вопрос из задачи F18:
   «текст узкий, таблицы и плитки — во всю ширину» — это свойство блока, а не экрана. */
.prose {
  max-width: 42rem;
  line-height: 1.6;
}

.prose :first-child {
  margin-top: var(--space-none);
}

/* --- Выбор, что завести: обращение или заявку ------------------------------*/

.create-choice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.create-choice__label {
  font-weight: var(--weight-semibold);
}

.create-choice__hint {
  margin: var(--space-xs) var(--space-none) var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-md);
}

/* --- Сообщения (успех/ошибка) -------------------------------------------- */

.messages {
  list-style: none;
  margin: var(--space-none) var(--space-none) var(--space-md);
  padding: var(--space-none);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.message {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--color-clear);
}

.message--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.message--error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.message--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.message--info,
.message--debug {
  background: var(--color-info-bg);
  color: var(--color-info);
}

/* --- Формы ----------------------------------------------------------------*/

.form-error-summary {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}

.form-error-summary__text {
  margin: var(--space-none) var(--space-none) var(--space-2xs);
  font-weight: var(--weight-semibold);
}

.form-error-summary__list {
  margin: var(--space-none);
  padding-left: var(--space-md);
}

.field {
  margin: var(--space-none) var(--space-none) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.field__label {
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
}

/* Флажок и радио-кнопка сюда не попадают (см. ниже) — им нужен свой маленький размер,
   а не растянутое на всю ширину поле ввода. */
.field__widget input:not([type="checkbox"]):not([type="radio"]),
.field__widget select,
.field__widget textarea,
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  max-width: 26rem; /* короткий логин или телеграм не должны тянуться на весь контейнер */
  min-height: var(--touch);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}

/* Числовое поле (например, номер менеджера U-ON) — короткий ввод, короткое поле. */
.field__widget input[type="number"],
.field input[type="number"] {
  max-width: 8rem;
}

.field textarea {
  min-height: 6rem;
  max-height: 70vh;
  field-sizing: content; /* поле растёт вместе с текстом, а не занимает пол-экрана пустым */
  max-width: none; /* многострочный текст — как и раньше, во всю ширину поля */
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.field.field-error input:not([type="checkbox"]):not([type="radio"]),
.field.field-error select,
.field.field-error textarea {
  border-color: var(--color-danger);
}

/* --- Одиночный флажок (BooleanField) --------------------------------------*/

/* Подпись — не отдельным блоком над полем (как у текстовых полей), а частью того же
   `<label>`, что и сам флажок: весь ряд кликабелен, и связь подписи с флажком видна
   глазами, а не только через `for`/`id`. Замечание владелицы: «Работает в кабинете»
   стояло НАД флажком, сам флажок — растянутый на всю ширину и от этого гигантский. */
.field--checkbox {
  flex-direction: column;
}

.field__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--touch);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  cursor: pointer;
}

.field__checkbox input[type="checkbox"] {
  flex: none;
  margin: var(--space-none);
}

/* --- Флажок/радио в поле, размер и касание -------------------------------*/

.field input[type="checkbox"],
.field input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin: var(--space-none);
}

/* --- Группа флажков/радио (роли и подобное) -------------------------------*/

/* Django уже кладёт подпись каждого варианта внутрь `<label>` вместе с его флажком —
   здесь только не дать общему правилу выше растянуть сам флажок на всю ширину строки
   (тогда подпись перескакивала бы на следующую строку и читалась как подпись к СЛЕДУЮЩЕМУ
   варианту, а не к своему — ровно то, что было на экране правки учётки). */
.field__widget--choices label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--touch);
  padding: var(--space-2xs) var(--space-none);
  cursor: pointer;
  font-weight: var(--weight-regular);
}

.field-required .field__label::after {
  content: " *";
  color: var(--color-danger);
}

/* Необязательное поле (задача D9): форма включает пометку сама — `optional_css_class`
   в `core.forms.HumanErrorsMixin`. Слово, а не значок: форму учёток заполняет
   владелица агентства, и «можно пропустить» должно читаться без расшифровки. */
.field-optional .field__label::after {
  content: " — необязательно";
  color: var(--color-muted);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
}

/* --- Флажок роли с пояснением (accounts/widgets/role_option.html, D9) -------*/

/* Пояснение в несколько строк: флажок держится у названия роли, а не по центру блока. */
.field__widget--choices label.role-option {
  align-items: flex-start;
  padding: var(--space-xs) var(--space-none);
}

.role-option input[type="checkbox"] {
  margin-top: var(--space-3xs);
}

.role-option__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

.role-option__name {
  font-weight: var(--weight-semibold);
}

.role-option__who,
.role-option__opens {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.field-error-text {
  color: var(--color-danger);
  font-size: var(--text-md);
}

.field-help {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.form-errors {
  color: var(--color-danger);
  padding-left: var(--space-md);
}

/* Ряд кнопок-действий страницы. Отступ снизу — не украшение: за таким рядом часто идёт
   следующий блок (заголовок таблицы «История ведомостей» на «Вознаграждениях»), и без
   него кнопки упирались в него вплотную — жалоба владельца агентства, задача D5. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-lg);
}

/* --- Кнопки ---------------------------------------------------------------*/
/* btn — обычная, светлая; btn--cta — единственное главное действие экрана, одна яркая заливка;
   btn--secondary — второстепенная, btn--danger — опасная. Добавляются к btn. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.5rem;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--color-drop);
  font-size: var(--text-md);
  background: var(--color-active-bg);
  color: var(--color-active);
  font-family: inherit;
  line-height: 1.2;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: filter 0.15s ease;
}

.btn:hover {
  filter: brightness(0.94);
}

.btn:active {
  filter: brightness(0.88);
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: none;
}

.btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-primary-text);
  box-shadow: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: none;
}

/* --- Статусная плашка ------------------------------------------------------*/

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--counter-size);
  line-height: var(--line-label);
  vertical-align: baseline;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  background: var(--color-neutral-bg);
  color: var(--color-neutral);
}

.status-badge--neutral {
  background: var(--color-neutral-bg);
  color: var(--color-neutral);
}

.status-badge--info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.status-badge--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.status-badge--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* --- Карточки (список заявок, оплат и прочего) ----------------------------*/

.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  list-style: none;
  margin: var(--space-none);
  padding: var(--space-none);
}

/* Списки заявок/оплат/обращений — самое частое место в кабинете, где виден тот же эффект,
   что и на прежней главной: одна узкая колонка карточек, растянутая на весь широкий
   контейнер. На телефоне список остаётся строго одной колонкой (правило выше, `flex`) —
   здесь только то, что происходит, когда колонок физически помещается несколько. */
@container screen (width >= 40rem) {
  .card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    align-items: start;
  }
}

.card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-md) var(--space-lg);
  text-decoration: none;
  color: inherit;
}

.card__reason {
  margin: var(--space-negative-card) var(--space-negative-card-x) var(--space-sm);
  padding: var(--space-xs) var(--space-lg);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
  /* ПЕРЕНОС ОБЯЗАТЕЛЕН, боевой дефект на настоящих данных. У плашки статуса стоит
     `white-space: nowrap` — она не сжимается никогда; у заголовка ниже `min-width: 0` —
     он сжимается до нуля. Пока статусы короткие («заявка»), это незаметно. На боевой
     CRM статус бывает длинным («Заявка закрыта (оплачена полностью)»), плашка забирает
     всю строку, заголовку остаётся ширина в одну букву — и имя клиента печатается
     стоймя, по букве на строку. Перенос отправляет плашку на вторую строку, и заголовку
     достаётся вся ширина карточки. */
  flex-wrap: wrap;
}

.card__title {
  font-weight: var(--weight-bold);
  color: var(--color-text);
  min-width: 0; /* флекс-элемент card__header: без этого длинное название отеля/заявки
                   из CRM не сжимается и раздвигает карточку вбок, overflow-wrap не спасает
                   его в одиночку — у флекс-элементов своя, отдельная логика минимума */
  /* Заголовок забирает свободное место и при переносе занимает строку целиком.
     Вместе с `flex-wrap` выше это и значит «сначала помести имя, плашку подвинь». */
  flex: 1 1 auto;
}

.card__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-none);
  font-size: var(--text-md);
}

.card__row dt {
  flex-shrink: 0;
  overflow-wrap: normal;
  color: var(--color-muted);
  font-weight: var(--weight-regular);
  min-width: 0;
}

.card__row dd {
  margin: var(--space-none);
  text-align: right;
  font-weight: var(--weight-semibold);
  min-width: 0;
}

.card__body {
  margin: var(--space-none);
}

.card__amount {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  font-size: var(--text-body);
}

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.card__actions .btn {
  font-size: var(--text-sm);
  padding: var(--space-2xs) var(--space-sm);
}

/* Решётка плиток. У эталона показатели стоят столбиком, потому что его карточка узкая —
   две на всю ширину отчёта (`#summaryWrap`, 1675–1677). У нас под сводку уходит вся
   главная колонка, и столбик из семи показателей растянул бы её на экран с лишним при
   пустом месте справа. Приём тот же, каким эталон делит свою дневную карточку
   (`.grid.two`, 2423–2427): сколько столбцов поместится, столько и будет, на телефоне —
   один.

   Имя по содержимому, а не по месту: та же решётка стоит и внутри карточки сводки,
   и сама по себе на главной и в ведомости.

   Наименьшая ширина плитки — переменная, а не второй класс-близнец. В сводке подпись
   короткая («Полностью оплачены»), и 170px дают внутри карточки две колонки. На главной
   подпись — предложение целиком («Заявки без определённого ответственного»), и в 170px
   она рвётся на пять строк; там же и места больше, поэтому `--roomy` поднимает минимум
   до 220px. Это настройка одной решётки, а не вторая система плиток. */
.summary-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--summary-item-min, 170px), 1fr));
  gap: var(--space-xs);
  /* align-items не задан намеренно — см. комментарий у .summary-grid: плитки одного ряда
     тянутся до общей высоты, и ряд перестаёт быть рваным.

     Растягивать сами ряды на всю высоту карточки (`flex: 1` плюс `grid-auto-rows: 1fr`)
     пробовали и отказались: в короткой карточке плитки раздувались втрое, число
     оказывалось в верхнем углу пустого прямоугольника — хуже, чем пустое место внизу.
     Плитка высотой по своему содержимому, свободное место — под ними. */
}

.summary-items--roomy {
  --summary-item-min: 13.75rem; /* 220px — подпись в предложение, а не в два слова */
}

.summary-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm);
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  min-width: 0;
}

/* Плитка-ссылка: на главной каждая плитка ведёт в свой раздел. Подчёркивание и синий
   цвет ссылки здесь не нужны — вся плитка и так читается как кнопка; наводка меняет
   рамку, как и у прежних крупных плиток. */
a.summary-item {
  text-decoration: none;
  color: inherit;
}

a.summary-item:hover {
  border-color: var(--color-primary);
}

/* Плитка с текстом длиннее одного числа (например, несколько валют сразу) — занимает
   весь ряд решётки, а не сжимается наравне с остальными. */
.summary-item--wide {
  grid-column: 1 / -1;
}

/* Кегли плитки — по общей шкале D12: подпись 11px, значение 18px, мелкий текст
   под числом 11px с межстрочным 1.25. Плитка одна на весь кабинет; отдельная
   система размеров ради аналитики не заводится. */
.summary-item__title {
  display: block;
  font-size: var(--text-caption);
  color: var(--color-muted);
  line-height: 1.3;
}

.summary-item__value {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-top: var(--space-2xs);
  line-height: 1.2;
  min-width: 0;
}

.summary-item__sub {
  display: block;
  font-size: var(--text-caption);
  color: var(--color-muted);
  line-height: 1.4;
  margin-top: var(--space-3xs);
}

/* Несколько валют в одном значении (reward_totals) — каждая своей строкой, а не
   слипшейся строкой чисел вперемешку. Отличается от `__aside` ниже: там валюта —
   мелкая приписка к главной сумме, здесь суммы равноправны. */
.summary-item__value-line {
  display: block;
}

.summary-item__value-line:not(:first-child) {
  margin-top: var(--space-3xs);
}

.progress__label, .table-cell__period-end { display: none; }

/* --- Таблица с мобильным видом карточками ---------------------------------*/

/* Обёртка измеряет область таблицы; прокрутки по горизонтали у неё нет. */
.table-scroll { width: 100%; min-width: 0; container: table / inline-size; }
.table-cards { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-size: var(--text-md); line-height: var(--line-table); }
.table-cards caption { overflow-wrap: normal; text-align: left; font-weight: var(--weight-bold); padding: var(--space-sm) var(--space-lg); }
.table-cards th, .table-cards td { padding: var(--space-sm); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: baseline; overflow-wrap: normal; }
.table-cards th:first-child, .table-cards td:first-child { padding-left: var(--space-lg); }
.table-cards th:last-child, .table-cards td:last-child { padding-right: var(--space-lg); }
.table-cards tbody tr:last-child td { border-bottom: 0; }
.table-cards tbody tr:hover { background: var(--color-hover); }
.table-cards thead th { color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.table-cards a { text-decoration: none; font-weight: var(--weight-medium); }
.table-cards a:hover { text-decoration: underline; }
.table-cards .cell-text, .table-cards__wrap { overflow-wrap: normal; }
.table-cell__value { min-width: 0; }
.table-cell--money, .dense-table__number, .payroll-money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-cards .btn, .dense-table .btn{ flex: none; white-space: nowrap; }

:is(.table-cards, .dense-table) { --table-mode: native; }

/* Порог меняет только режим. Вся раскладка строк описана один раз ниже.
   compact: 24rem; regular: 32rem; medium: 40rem; wide: 52rem; extra: 66rem. */
@container table (width < 24rem) {
  :is(.table-cards, .dense-table) { --table-mode: folded; display: block; position: relative; overflow-x: auto; }
}
@container table (width < 32rem) {
  .table-scroll:not(.table-scroll--compact) > :is(.table-cards, .dense-table),
  :not(.table-scroll) > .table-cards { --table-mode: folded; display: block; position: relative; overflow-x: auto; }
}
@container table (width < 40rem) {
  .table-scroll--medium > :is(.table-cards, .dense-table) { --table-mode: folded; display: block; position: relative; overflow-x: auto; }
}
@container table (width < 52rem) {
  .table-scroll--wide > :is(.table-cards, .dense-table) { --table-mode: folded; display: block; position: relative; overflow-x: auto; }
}
@container table (width < 66rem) {
  .table-scroll--extra > :is(.table-cards, .dense-table) { --table-mode: folded; display: block; position: relative; overflow-x: auto; }
}
/* Единственный источник раскладки карточек. app.js получает отсюда те же правила
   для [data-folded] в браузерах без style queries; пороги остаются в size queries. */
:where(.table-cards, .dense-table) {
  @container style(--table-mode: folded) {
  thead, colgroup { display: none; }
  caption, tbody { display: block; }
  tbody > tr:not(.dense-table__detail) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
  }
  tbody > tr:not(.dense-table__detail) > td {
    display: inline;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: var(--text-sm);
    text-align: left;
    white-space: normal;
    order: 2;
  }
  tbody > tr:not(.dense-table__detail)::before {
    content: "";
    flex-basis: 100%;
    order: 1;
  }
  tbody > tr:not(.dense-table__detail) > td:first-child {
    flex: 1 1 35%;
    padding: 0;
    order: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
  }
  /* Отступы узких нативных колонок не добавляются между значениями сноски. */
  .tourist-table &.table-cards > tbody > tr > td { padding: 0; }
  &.dense-table--records > tbody > tr > td:first-child { flex-basis: auto; }
  td::before { content: none; }
  td.table-cell--labelled::before {
    content: attr(data-label) ": ";
    color: var(--color-muted);
    font-weight: var(--weight-regular);
  }
  .table-cell__value { display: inline; }
  .progress__label, .table-cell__period-end { display: inline; }
  tbody > tr > td.table-cell--folded-hidden { display: none; }
  td.table-cell--labelled[data-compact-label]::before { content: attr(data-compact-label) ": "; }
  tbody > tr > td:is(.table-cell--money, .table-cell--number) {
    order: 0;
    font-weight: var(--weight-bold);
    white-space: nowrap;
    text-align: right;
  }
  tbody > tr > td.table-cell--money ~ td:is(.table-cell--money, .table-cell--number) { margin-left: var(--space-sm); }
  tbody > tr > td.table-cell--state {
    order: 0;
    margin-left: auto;
    align-self: flex-start;
  }
  tbody > tr:has(.table-cell--money) > td.table-cell--state { order: 2; }
  tbody > tr > td.table-cell--actions, .table-cell--actions .table-cell__value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
  }
  tbody > tr > td.table-cell--actions { flex-basis: 100%; }
  .table-cell--actions .stack {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
  }
  td .btn, td .status-badge { width: fit-content; justify-self: start; }
  .dense-table__detail:not([hidden]), .dense-table__detail > td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  &.work-table .reminder-delegated__mobile-title { display: block; }
  &.work-table .reminder-delegated__desktop-title { display: none; }
  &.work-table > tbody > .dense-table__row > td:nth-child(2) { flex: 1 1 35%; }
  &.work-table > tbody > .dense-table__row > td:last-child { flex: 0 0 auto; }
  &.work-table > tbody > .dense-table__row { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); }
  &.work-table > tbody > .dense-table__row > td.work-table__due { order: 0; margin-left: auto; }
  .tourist-table & > tbody > tr { position: relative; }
  .tourist-table & > tbody > tr > td:first-child { font-size: var(--text-table); }
  .tourist-table & > tbody > tr > td:first-child .table-cell__value { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); }
  .tourist-table & .tourist-card-status { display: inline-flex; }
  .tourist-table & .tourist-price { display: inline-flex; align-items: baseline; gap: var(--space-xs); white-space: nowrap; }
  .tourist-table & .tourist-price .progress { display: inline-flex; }
  .tourist-table & .tourist-name::after { content: ""; position: absolute; inset: 0; }
  }
}

@container table (width < 40rem) {
  :is(.table-cards, .dense-table) { border: 0; background: none; }
  :is(.table-cards, .dense-table) > tbody > tr:not(.dense-table__detail) {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
  }
}

/* Пометки под значением ячейки. */
.cell-marks {
  display: block;
  max-width: 18rem;
  margin-top: var(--space-2xs);
}

/* --- Пустое состояние -------------------------------------------------------*/

.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  color: var(--color-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.empty-state__message {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: var(--space-none) var(--space-none) var(--space-2xs);
}

.empty-state__hint {
  margin: var(--space-none);
}

/* --- Состояние загрузки ------------------------------------------------------*/

.loading-state {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  color: var(--color-muted);
}

.loading-state__spinner {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-round);
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: loading-spin 0.8s linear infinite;
  flex: none;
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Итоги по валютам -------------------------------------------------------*/

.totals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin: var(--space-xs) var(--space-none) var(--space-md);
}

.totals__item {
  font-weight: var(--weight-bold);
  min-width: 0;
}

/* --- Подтверждение действия --------------------------------------------------*/

.confirm-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
}

.confirm-box--danger {
  border-color: var(--color-danger);
}

.confirm-box__details {
  margin: var(--space-sm) var(--space-none);
  padding-left: var(--space-md);
}

/* --- Раскрываемый блок: нативный <details>, JS не нужен -----------------------*/





/* Дополнительные общие компоненты D12. */
.btn--cta {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--color-on-cta);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-cta);
}
.form-groups {
  display: grid;
  gap: var(--space-xl);
}
.form-group {
  min-width: 0;
  border: 0;
  padding: var(--space-none);
  margin: var(--space-none);
}
.form-group legend {
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-md);
}
.form-group__fields {
  display: grid;
  gap: var(--gap);
}
.field-span {
  grid-column: 1 / -1;
}
.file-picker {
  position: relative;
  border: 2px dashed var(--color-drop);
  border-radius: var(--radius);
  background: var(--color-drop-bg);
  padding: var(--space-md);
}
.file-picker.is-dragging {
  border-color: var(--color-primary);
}
.file-picker__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}
.file-picker__meta {
  overflow-wrap: anywhere;
  display: block;
  color: var(--color-muted);
  margin-top: var(--space-xs);
}
.file-picker.is-enhanced input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.message {
  display: flex;
  align-items: start;
  gap: var(--space-sm);
}
.message__text {
  flex: 1;
  min-width: 0;
}
.message__close {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  min-height: var(--touch);
  min-width: var(--touch);
}
.progress {
  min-width: 5rem;
  width: 100%;
}
.progress progress {
  width: 100%;
  appearance: none;
  display: block;
  height: var(--progress-height);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-bg);
  accent-color: var(--tone-color, var(--color-primary));
}
.table-cards .progress { --progress-height: var(--progress-height-table); }
.progress progress::-webkit-progress-bar { background: var(--color-neutral-bg); border-radius: var(--radius-pill); }
.progress progress::-webkit-progress-value { background: var(--tone-color, var(--color-primary)); border-radius: var(--radius-pill); }
.progress progress::-moz-progress-bar { background: var(--tone-color, var(--color-primary)); border-radius: var(--radius-pill); }
.progress__text {
  display: block;
  font-size: var(--text-sm);
}
.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.table-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
}
.table-toolbar input {
  min-height: var(--touch);
  max-width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-sm);
  font: inherit;
  background: var(--color-surface);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--line-label);
  min-height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  text-decoration: none;
}
.filter-chip.is-active, .filter-chip[aria-selected="true"] {
  background: var(--color-active-bg);
  border-color: var(--color-primary);
  color: var(--color-active);
  font-weight: var(--weight-semibold);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.action-tile > .muted::before {
  content: "";
  display: inline-block;
  width: var(--space-xs);
  height: var(--space-xs);
  margin-right: var(--space-xs);
  border-radius: var(--radius-round);
  background: var(--tone-color, var(--color-border-strong));
}
.action-tile__value {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-value);
  font-weight: var(--weight-heading);
  margin: var(--space-xs) var(--space-none);
}
form:has(.form-groups) { container: form / inline-size; }
.form-group { container: fields / inline-size; }
.form-groups, .form-group__fields { grid-template-columns: minmax(0, 1fr); overflow-wrap: normal; }
@container form (width >= 44rem) { .form-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container fields (width >= 24rem) { .form-group__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tone--neutral {
  --tone-color: var(--color-neutral);
  --tone-bg: var(--color-neutral-bg);
}
.tone--info {
  --tone-color: var(--color-info);
  --tone-bg: var(--color-info-bg);
}
.tone--success {
  --tone-color: var(--color-success);
  --tone-bg: var(--color-success-bg);
}
.tone--paid {
  --tone-color: var(--color-success);
  --tone-bg: var(--color-success-bg);
}
.status-badge--paid {
  color: var(--color-success);
  background: var(--color-success-bg);
}
.tone--wait {
  --tone-color: var(--color-wait);
  --tone-bg: var(--color-wait-bg);
}
.status-badge--wait {
  color: var(--color-wait);
  background: var(--color-wait-bg);
}
.tone--late {
  --tone-color: var(--color-late);
  --tone-bg: var(--color-late-bg);
}
.status-badge--late {
  color: var(--color-late);
  background: var(--color-late-bg);
}
.tone--warning {
  --tone-color: var(--color-warning);
  --tone-bg: var(--color-warning-bg);
}
.tone--danger {
  --tone-color: var(--color-danger);
  --tone-bg: var(--color-danger-bg);
}
.tone--error {
  --tone-color: var(--color-danger);
  --tone-bg: var(--color-danger-bg);
}
.status-badge--error {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

/* D18: явные модификаторы, не меняющие прежние кнопки и таблицы. */
.btn.btn--large, .btn.btn--regular, .btn.btn--compact { white-space: nowrap; }
.btn.btn--large { font-size: var(--text-body); padding: var(--space-xs) var(--space-button-x); min-height: var(--touch); }
.btn.btn--regular { font-size: var(--text-sm); padding: var(--space-xs) var(--space-sm); min-height: 2.25rem; }
.btn.btn--compact { font-size: var(--text-sm); padding: var(--space-2xs) var(--space-button-compact-x); min-height: 1.875rem; }
.btn .ui-icon { width: 1.125rem; height: 1.125rem; }
/* Кнопка-иконка: действие названо в title и aria-label, на экране — только знак. */
.btn.btn--icon { padding: var(--space-none); width: 2.25rem; min-height: 2.25rem; }
.btn.btn--quiet { color: var(--color-primary); background: var(--color-clear); box-shadow: none; border-color: var(--color-clear); }
.ui-footnote { font-weight: var(--weight-regular); font-size: var(--text-footnote); color: var(--color-muted); margin: var(--space-xs) 0; }
/* Одинаковая геометрия счётчика, включая прежние варианты внутри чипов. */
.ui-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: var(--counter-size);
  min-height: var(--counter-size);
  padding: var(--space-2xs) var(--space-cell-x);
  margin: var(--space-none);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  line-height: var(--line-label);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.ui-counter { background: var(--tone-bg, var(--color-warning-bg)); color: var(--tone-color, var(--color-warning)); }
.dense-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-table); line-height: var(--line-table); table-layout: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.dense-table .dense-table { background: var(--color-clear); border: 0; border-radius: 0; }
.dense-table th, .dense-table td { padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--color-border); vertical-align: baseline; overflow-wrap: normal; }
.dense-table th:first-child, .dense-table td:first-child { padding-left: var(--space-lg); }
.dense-table th:last-child, .dense-table td:last-child { padding-right: var(--space-lg); }
.dense-table > tbody > tr:last-child > td { border-bottom: 0; }
.dense-table a { text-decoration: none; font-weight: var(--weight-medium); }
.dense-table a:hover { text-decoration: underline; }
.dense-table th { text-align: left; color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); hyphens: none; background: var(--color-field); }
.dense-table .dense-table__number { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dense-table th:first-child { width: auto; }
.dense-table__toggle { color: var(--color-primary); text-decoration: none; }


.dense-table__row[data-expand-row] { cursor: pointer; }
.dense-table__row:hover { background: var(--color-hover); }
.dense-table__detail > td { background: var(--color-field); padding: var(--space-md); }
.dense-table__detail[hidden] { display: none; }
.dense-table__warning { background: var(--color-clear); }
.dense-table__warning .dense-table__toggle { color: var(--color-warning); font-weight: var(--weight-semibold); }
.dense-table--records { table-layout: auto; line-height: var(--line-table); }
.dense-table--records caption { text-align: left; padding-bottom: var(--space-xs); }
.dense-table--records th:first-child { width: auto; }
.dense-table--records .dense-table__row td { overflow-wrap: normal; word-break: normal; hyphens: none; }
.dense-table--records thead th { overflow-wrap: normal; white-space: nowrap; }
.dense-table--records .dense-table__row td:not(:nth-child(3)), .dense-table--records .dense-table__toggle { white-space: nowrap; }
.record-reference, .record-date, .record-bonus, .record-percent, .record-notes { width: 1%; }
.record-client { width: auto; }
.record-price, .record-profit, .record-salary { width: 12%; }
.record-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs) var(--space-md); margin: 0; font-size: var(--text-table); }
.record-facts dt { color: var(--color-muted); font-size: var(--text-caption); }
.record-facts dd { margin: 0; overflow-wrap: normal; }
.record-facts dd[data-date] { white-space: nowrap; }
.record-reasons p { margin: 0 0 var(--space-xs); }
.ui-rate[data-rate-error] { scroll-margin: var(--space-md) 0; }




.record-actions { display: inline-block; vertical-align: baseline; }
.record-actions .ui-copy-menu .btn { display: block; width: 100%; max-width: 100%; white-space: normal; text-align: left; justify-content: flex-start; }
.ui-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin: var(--space-xs) 0; }
.ui-month { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.ui-month select { flex: 1 1 10rem; padding: var(--space-xs); border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); font: inherit; min-width: 0; }
.ui-rate { border-bottom: 1px solid var(--color-border); padding: var(--space-xs) 0; font-size: var(--text-table); }
.ui-rate label { display: block; margin-bottom: var(--space-2xs); }
.ui-rate__controls { display: flex; align-items: center; gap: var(--space-2xs); }
.ui-rate input { min-width: 0; width: calc(8ch + var(--space-xs) * 2); max-width: 100%; padding: var(--space-cell-x) var(--space-xs); font-size: var(--text-md); border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); }
@supports (field-sizing: content) {
  .ui-rate input { width: auto; field-sizing: content; }
}
.ui-rate__value { display: inline-flex; align-items: center; gap: var(--space-2xs); cursor: pointer; color: var(--color-primary); background: var(--color-field); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3xs) var(--space-xs); }
.ui-rate__error { display: block; font-size: var(--text-sm); color: var(--color-danger); }
@media (max-width: 719.98px) {
  .dense-table__toggle:not(.ui-state__button), .ui-rate__value { min-height: var(--touch); }
  .ui-rate input, .ui-month select { min-height: var(--touch); }
}
@container table (width < 40rem) {
  .record-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ui-callout { background: var(--color-warning-bg); color: var(--color-warning); border-radius: var(--radius); padding: var(--space-sm) var(--space-lg); font-size: var(--text-table); line-height: var(--line-table); }

/* D19: месячные итоги и компактная проверка, образцы на /ui/. */
.ui-month-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-md); margin: var(--space-none) 0 var(--space-md); padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.ui-month-totals > div { min-width: 0; }
.ui-month-totals span, .ui-month-totals strong, .ui-month-totals small { display: block; }
.ui-month-totals span, .ui-month-totals small { color: var(--color-muted); }
.ui-month-totals small { font-size: var(--text-footnote); }
.ui-month-totals strong { font-size: var(--text-lg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-month-totals__note { grid-column: 1 / -1; margin: 0; }
.ui-month-review { margin: var(--space-sm) 0; }
.ui-month-review form { display: inline-block; margin: var(--space-xs) 0; }


/* D19, круг 2: проверка на телефоне — данные сверху, причина и действие снизу. */
@container table (width < 40rem) {
  .ui-month-review .dense-table__row { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-month-review .dense-table__row td { overflow-wrap: normal; word-break: normal; }
  .ui-month-review .dense-table__row td::before { display: none; }
  .ui-month-review td a { white-space: nowrap; }
  .ui-month-review .dense-table__row td:first-child { grid-column: 1; display: flex; align-items: center; gap: var(--space-xs); }
  .ui-month-review .dense-table__row td:first-child a { white-space: nowrap; flex-shrink: 0; }
  .ui-month-review .dense-table__row td:first-child span { min-width: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
  .ui-month-review .dense-table__row td:nth-child(2) { display: none; }
  .ui-month-review .dense-table__row td:nth-child(3) { grid-column: 2; grid-row: 1; white-space: nowrap; }
  .ui-month-review .dense-table__row td:last-child { grid-column: 1 / -1; display: block; overflow-wrap: normal; }
}

/* D20: образец очереди /ui/, размеры и раскрытие из плотной таблицы D18. */
.work-table details > summary { cursor: pointer; }

.work-table .btn { white-space: normal; max-width: 100%; }
.work-table .dense-table__row > td:last-child { max-width: 100%; }

.work-toolbar { display: flex; align-items: end; margin-top: var(--space-md); }
.work-toolbar label { display: block; flex: 1; min-width: 0; }
.work-toolbar input[type="search"] { width: 100%; }
.work-toolbar .field__widget { display: block; }
/* ELM-43: подсказка о коротком запросе стоит в ряду формы под полем, её строка занята всегда:
   текст появляется и пропадает, а таблица не сдвигается. */
.live-hint { flex-basis: 100%; height: var(--space-md); margin: calc(-1 * var(--space-2xs)) var(--space-none) var(--space-none); }
.work-toolbar:has(.live-hint) { margin-bottom: var(--space-xs); }
/* Строка состояния, пока запрос не идёт: невидима, но место держит. */
.live-status--held { visibility: hidden; }
/* На широком экране сортируют заголовки таблицы; выбор сортировки нужен только на телефоне. */
@container screen (width >= 40rem) { .work-toolbar label:has(select[name="sort"]) { display: none; } }
@container screen (width < 40rem) {
  .work-toolbar label:has(select) { flex-basis: 100%; }
}
.work-table .work-table__due { white-space: nowrap; }
.work-table .work-table__view-only { white-space: nowrap; }
.work-table .dense-table__warning { background: var(--color-clear); }
.work-table .dense-table__warning .work-table__due { color: var(--color-late); font-weight: var(--weight-semibold); }
.work-table summary { font-weight: var(--weight-medium); }

/* Круг 3: колонка «Что сделать» — действие простым текстом, пояснение серой строкой под ним. */
.work-table__what { margin: var(--space-none); font-weight: var(--weight-semibold); color: var(--color-text); }
.work-table td .ui-footnote { margin: var(--space-2xs) var(--space-none) var(--space-none); }
/* Строка мелких ссылок: статус, CRM, памятки, второй срок, «Обновить из CRM» — через « · ».
   Ссылка не рвётся посередине; разделитель стоит в конце строки, а не в начале следующей. */
.work-table__links > * { white-space: nowrap; }
.work-table__links > *:not(:last-child)::after { content: " · "; color: var(--color-muted); text-decoration: none; display: inline-block; white-space: pre; }
.work-table__links form { display: inline; margin: var(--space-none); }
.work-table__linkbutton { font: inherit; font-weight: var(--weight-medium); color: var(--color-primary); background: none; border: 0; padding: var(--space-none); cursor: pointer; text-decoration: none; }
.work-table__linkbutton:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.work-table__check { margin-top: var(--space-2xs); }
.work-table__check form { margin-top: var(--space-xs); }

/* Одна рамка на группу: таблица строк внутри группы без своей рамки и без карточек на телефоне. */
.ui-expand__body:has(> .expand-content--rows), .people-quiet > .ui-expand__body { padding: var(--space-none); }
.expand-content--rows .work-table, .people-quiet .people-table { border: 0; border-radius: 0; background: none; }
.ui-expand.people-quiet { margin-top: var(--space-xs); }
.expand-content--rows > .btn { margin: var(--space-md) var(--space-lg); }
@container table (width < 40rem) {
  .expand-content--rows .work-table > tbody > tr:not(.dense-table__detail) { background: none; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; margin-bottom: var(--space-none); }
}

/* Круг 3: одна строка человека и кнопка по её содержимому, без обрезания. */
.work-heading { margin-bottom: var(--space-sm); }


@container table (width < 40rem) {
  /* «Команда» на телефоне — одна карточка со строками, а не отдельная карточка на человека. */
  .people-table { --people-columns: minmax(0, 1fr) 58px 6rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .people-table > tbody > tr.dense-table__row:not(.dense-table__detail) { background: none; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; margin-bottom: var(--space-none); padding: var(--space-2xs) var(--space-md); }
  .people-table > tbody > tr.dense-table__row:not(.dense-table__detail):last-child { border-bottom: 0; }
  .people-table .dense-table__row { grid-template-columns: var(--people-columns); column-gap: var(--space-none); align-items: center; }
  .people-table .dense-table__row td:first-child { grid-column: 1; }
  .people-table .dense-table__row td[data-label]::before { display: none; }
  .people-table thead { display: block; width: 100%; }
  .people-table thead tr { display: grid; grid-template-columns: var(--people-columns); }
  .people-table th:first-child { width: auto; }
  .people-table th { width: auto; font-size: var(--text-caption); padding: var(--space-2xs) var(--space-cell-x); }
  /* На главной ячейки без своих рамок, а шапка с теми же полями по краям и колонками, что у строк. */
  .home-team .people-table td { border: 0; padding: var(--space-2xs) var(--space-none); }
  .home-team .people-table thead tr { padding-inline: var(--space-md); }
  .home-team .people-table th { padding-inline: var(--space-none); }
}



/* D21: общий поиск и плотный список туристов, образцы — /ui/. */
.search-picker { position: relative; min-width: 0; }
.search-picker label { display: block; }
.search-picker__options { position: absolute; z-index: 20; top: 100%; left: 0; width: min(30rem, 85vw); max-height: 21.25rem; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-popup); }
.search-picker__options a { display: block; padding: var(--space-xs) var(--space-sm); font-size: var(--text-table); text-decoration: none; color: var(--color-text); }
.search-picker__options a[aria-selected=true], .search-picker__options a:hover { background: var(--color-hover); }
.search-picker__options small { display: block; color: var(--color-muted); }
.search-picker__message { font-size: var(--text-footnote); color: var(--color-muted); }
.tourists-heading { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-sm); }
.tourists-heading .page-title, .tourists-heading p { margin: 0; }
.tourists-controls, .tourists-segment, .tourists-filters { display: flex; gap: var(--space-xs); flex-wrap: wrap; align-items: center; margin: var(--space-xs) 0; }
.tourists-filters { align-items: end; }
.tourists-filters label { font-size: var(--text-sm); }
.tourists-filters input, .tourists-filters select { min-height: 2.25rem; padding: var(--space-cell-x) var(--space-xs); font-size: var(--text-table); border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); }
.tourists-filters .search-picker { flex: 1 1 240px; }
.tourists-filters input { width: 100%; }
.tourists-filters select { display: block; max-width: 230px; }
.tourists-totals { font-size: var(--text-sm); margin: var(--space-sm) 0 var(--space-xs); }
.tourist-table .table-cards { font-size: var(--text-table); }
.tourist-table .table-cards td, .tourist-table .table-cards th { padding: var(--space-xs); }
.tourist-table small { display: block; font-size: var(--text-footnote); color: var(--color-muted); }
.tourists-pagination { display: flex; gap: var(--space-cell-x); margin-top: var(--space-sm); }
.tourists-pagination a, .tourists-pagination span { padding: var(--space-2xs) var(--space-xs); }
.tourists-pagination [aria-current] { background: var(--color-active-bg); color: var(--color-active); border-radius: var(--radius); }
@container screen (width < 40rem) {
  .tourists-heading { align-items: start; flex-direction: column; }
  .tourists-filters label { flex: 1 1 120px; min-width: 0; }
  .tourists-filters select { width: 100%; max-width: 100%; }

}
/* На телефоне каждое поле отбора на всю строку: значение списка не обрезается. */
@container screen (width < 26rem) {
  .tourists-filters label { flex-basis: 100%; }
}

/* Таблица «Туристов»: ширину колонок задаёт содержимое. Короткие значения (даты, суммы,
   стадия) не переносятся; запись, статус и ответственный переносятся по словам. */
.tourist-table .tourist-meta { display: none; color: var(--color-muted); font-weight: var(--weight-regular); }
@container table (width >= 40rem) {
  .tourist-table .table-cards :is(th, td):first-child { padding-left: var(--space-lg); }
  .tourist-table .table-cards :is(th, td):last-child { padding-right: var(--space-lg); }
  .tourist-table .table-cards th { white-space: nowrap; }
  .tourist-table .table-cards th abbr { font-size: var(--text-footnote); }
  .tourist-table .table-cards td { vertical-align: baseline; }
  .tourist-table td[data-label="Стадия"], .tourist-table td[data-label="Начало"],
  .tourist-table td[data-label="Конец"], .tourist-table td[data-label="Сумма"],
  .tourist-table td[data-label="Обновлена"] { white-space: nowrap; }
  .tourist-table :is(th, td)[data-label="Статус"] { width: auto; min-width: 13em; }
  .tourist-table .table-cards .status-badge { white-space: nowrap; }
  .tourist-table :is(th, td)[data-label="Сумма"] { text-align: right; font-variant-numeric: tabular-nums; }
  .tourist-table td.table-cell--money .request-balance { align-items: flex-end; }
}
/* Средняя ширина: стадия и ответственный уходят мелкой строкой под запись, «Обновлена» —
   только в порядке сортировки; иначе девять колонок не помещаются без разрывов слов. */
@container table (40rem <= width < 60rem) {
  .tourist-table [data-label="Стадия"], .tourist-table [data-label="Ответственный"],
  .tourist-table [data-label="Обновлена"] { display: none; }
  .tourist-table .tourist-meta { display: block; }
  .tourist-table .table-cards :is(th, td)[data-label="Статус"] { padding-right: var(--space-lg); }
}


/* Видимый отклик до загрузки следующей страницы, включая медленную сеть. */
.bottom-nav__link:active { background: var(--color-surface); transform: translateY(1px); }
.page-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 1000; overflow: hidden; background: var(--color-border); }
.page-progress::after { content: ""; display: block; width: 40%; height: 100%; background: var(--color-primary); animation: page-loading 1s ease-in-out infinite; }
@keyframes page-loading { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) { .page-progress::after { animation: none; width: 100%; } }

/* Меню копирования плавает поверх таблицы, не меняя высоту строки. */
.ui-copy-trigger svg { width: 18px; height: 18px; }
.ui-copy-menu { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-xs); }
.ui-copy-group.is-enhanced .ui-copy-menu { position: fixed; z-index: 1000; width: max-content; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; box-shadow: var(--shadow-popup); }
.ui-copy-menu a { display: block; padding: var(--space-xs) var(--space-sm); overflow-wrap: anywhere; border-radius: var(--radius); text-decoration: none; color: var(--color-text); }
.ui-copy-menu a:hover { background: var(--color-hover); }
.ui-copy-menu a:focus { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.ui-copy-menu[hidden] { display: none; }
.ui-month-review > details { margin: var(--space-sm) 0; }
.ui-month-review summary { overflow-wrap: anywhere; }
.ui-month-review { scroll-margin-top: var(--space-md); }

/* Список «строка — действие»: человек или запись слева, короткая кнопка справа. */
.action-list { list-style: none; margin: var(--space-none); padding: var(--space-none); }
.action-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); padding: var(--space-xs) var(--space-none); border-top: 1px solid var(--color-border); color: var(--color-text); }
.action-list li > span { min-width: 0; }
.home-money { margin-bottom: var(--space-md); }

/* --- Ритм страницы: заголовки разделов, отступы между блоками, формы-панели --- */

/* Заголовок раздела внутри экрана не спорит с заголовком самого экрана. */
h2.page-title { font-size: var(--text-h2); margin: var(--space-xl) var(--space-none) var(--space-sm); }
.container > .card, .container > .table-scroll, .container > .dense-table, .container > .confirm-box { margin-bottom: var(--space-md); }
.container > .status-badge { margin-bottom: var(--space-sm); }
.card .card { box-shadow: none; }

/* Форма экрана — белая панель читаемой ширины; поля внутри неё одной ширины. */
.container > form[novalidate] { max-width: var(--form-width); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-lg); margin-bottom: var(--space-md); }
.container > form[novalidate] .form-actions { margin-bottom: var(--space-none); }
.container > form[novalidate] .field input:not([type="checkbox"]):not([type="radio"]):not([type="number"]), .container > form[novalidate] .field select { max-width: none; }
.container > form[novalidate]:has(.form-groups) { max-width: none; }
/* Сводка ошибок шириной с узкую форму; у широкой формы она во всю ширину. */
.container > .form-error-summary:has(+ form[novalidate]) { max-width: var(--form-width); }
.container:has(> form[novalidate] .form-groups) > .form-error-summary { max-width: none; }

/* Раскрытие: свой указатель вместо потерянного системного. */




/* Пояснение внутри поля формы — лёгкая ссылка, а не панель во всю ширину. */



/* Текст статьи: таблица и цитата из разметки markdown. */
.prose table { border-collapse: collapse; margin: var(--space-md) var(--space-none); }
.prose th, .prose td { padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-none); border-bottom: 1px solid var(--color-border); text-align: left; }
.prose th { color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.prose blockquote { margin: var(--space-md) var(--space-none); padding: var(--space-sm) var(--space-md); background: var(--color-field); border-radius: var(--radius); }
.prose blockquote > :last-child { margin-bottom: var(--space-none); }

/* Карточка-досье на широком экране: подпись и значение рядом, а не по разным краям. */
@container screen (width >= 40rem) {
  .container > .card > .card__row, .container > .card > dl > .card__row, .reminder-block .card__row { justify-content: flex-start; }
  .container > .card > .card__row dt, .container > .card > dl > .card__row dt, .reminder-block .card__row dt { width: 14rem; }
  .container > .card > .card__row dd, .container > .card > dl > .card__row dd, .reminder-block .card__row dd { text-align: left; }
}

/* --- Экраны: вход, сегменты отбора, длинные списки в предупреждении --- */

/* Вход: без боковой колонки, форма по центру. */
.login-screen > form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-lg); margin-bottom: var(--space-md); }
.login-screen > form .form-actions { margin-bottom: var(--space-none); }
.login-screen .field input { max-width: none; }
@media (min-width: 720px) {
  body:has(.login-screen) .page-header { position: static; width: auto; display: block; }
  body:has(.login-screen) .page-header__bar { padding: var(--space-md) var(--space-2xl); }
  body:has(.login-screen) .main-nav { display: none; }
  body:has(.login-screen) .container { width: 100%; max-width: 28rem; margin: var(--space-none) auto; }
}

/* Сегменты отбора: один вид для «Все / Обращения / Заявки» и «Мои / Все». */
.tourists-segment { padding: var(--space-3xs); gap: var(--space-3xs); background: var(--color-neutral-bg); border-radius: var(--radius); }
.tourists-segment > span { padding: var(--space-none) var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.tourists-segment .btn { border-color: var(--color-clear); }
.tourists-segment .btn--quiet { color: var(--color-muted); }
.tourists-segment .btn--secondary { box-shadow: var(--shadow-card); }

/* Длинный перечень внутри предупреждения прокручивается сам, а не уводит таблицу за два экрана. */
.message .action-list { max-height: 16rem; overflow-y: auto; }

/* Подпись плотной таблицы записей на телефоне — с полями, как строки под ней. */
@container table (width < 40rem) {
  .dense-table--records caption { padding: var(--space-sm) var(--space-sm) var(--space-none); }
}
body:has(.login-screen) .page-wave { display: none; }
@media (min-width: 720px) {
  body:has(.login-screen) .container { padding-top: var(--space-3xl); }
}
/* Блок внутри формы-панели — вложенный, без собственной тени. */
.container > form[novalidate] > .card { box-shadow: none; background: var(--color-field); margin-bottom: var(--space-md); }
.container > .message { margin-bottom: var(--space-sm); }
/* Кнопка в ячейке таблицы — компактная. */
.table-cards td .btn, .dense-table td .btn { font-size: var(--text-sm); padding: var(--space-2xs) var(--space-button-compact-x); min-height: 1.875rem; }
@media (max-width: 719.98px) {
  .table-cards td .btn, .dense-table td .btn { min-height: var(--touch); }
}

/* Свободный текст в таблице «по ширине»: колонка не сжимается уже читаемой ширины. */

/* Запись ведомости на телефоне: числа под подписями, по левому краю. */
@container table (width < 40rem) {
  .dense-table--records .dense-table__number { text-align: left; }
}

/* Общий полный разбор денег в карточке и проверке месяца. */
.ui-request-finances { min-width: 0; overflow-wrap: normal; }
.ui-request-finances p, .ui-review-explanation > p { margin: var(--space-sm) 0; }
.ui-request-finances dd { font-variant-numeric: tabular-nums; }
.ui-month-review .ui-review-explanation { white-space: normal; min-width: 0; }
.ui-request-finances .card__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); }
.ui-request-finances .card__row dd { white-space: nowrap; }
@container table (width >= 40rem) {
  #month-review-checks th:last-child { width: 50%; }
}

#dossier-payments > .ui-request-finances { max-width: var(--finance-summary-width); }

/* Три итога: одинаковые строки на телефоне, три колонки на широком экране. */
.summary-items--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.people-table th { hyphens: none; overflow-wrap: normal; }
.tourist-table abbr { text-decoration: none; }

@container screen (width < 40rem) {
  .page-header-row { flex-direction: column; align-items: flex-start; }
}

/* Состояния карточки поиска или предупреждения — один компонент. */
.card--selected { border-color: var(--color-primary); }
.card--warning { border-color: var(--color-warning); }

/* Зависимые поля сохраняют стандартный hidden поверх раскладки компонента. */
.field[hidden] { display: none; }

/* Таблица оплат дня. Раскладку выбирает ширина области под таблицу, а не окна: при открытом
   меню область уже окна, и таблица на 7 колонок помещается только от 69rem. Уже — строка
   складывается в карточку из трёх рядов; вбок таблица не прокручивается никогда. */

.payment-day__title { font-size: var(--text-lg); margin: var(--space-md) 0 var(--space-xs); font-variant-numeric: tabular-nums; }





.payment-day-table__money strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.payment-day-table__money .ui-footnote { white-space: nowrap; font-variant-numeric: tabular-nums; }
.payment-day-table__none { color: var(--color-muted); }


@container (width >= 69rem) {



  .payment-day-table--personal { --payment-author-track: 0rem; }





  .payment-day-table__request { grid-column: 2; white-space: nowrap; }

  .payment-day-table__where { grid-column: 4; }
  .payment-day-table__author { grid-column: 5; }
  .payment-day-table--no-receipt .payment-day-table__author { grid-column: 5 / 7; }
  .payment-day-table--personal.payment-day-table--no-receipt .payment-day-table__where { grid-column: 4 / 7; }
  .payment-day-table__receipt { grid-column: 6; }




}

@container (width < 69rem) {





  .payment-day-table__tourist { grid-column: 1; grid-row: 1; overflow-wrap: normal; }

  .payment-day-table__request, .payment-day-table__where, .payment-day-table__author { grid-column: 1; color: var(--color-muted); font-size: var(--text-sm); }
  .payment-day-table__request { grid-row: 2; }
  .payment-day-table__where { grid-row: 3; }
  .payment-day-table__author { grid-row: 4; }
  .payment-day-table__where .ui-footnote { display: inline; }



   .status-badge)) { display: none; }
  .payment-day-table__state::before { grid-column: 1; grid-row: 1; }
  .payment-day-table__state > :is(.status-badge, .payment-day-table__none) { grid-column: 2; grid-row: 1; justify-self: start; }

}

/* Верх страницы оплат: месяц, отбор и итог одной строкой, на телефоне — друг под другом. */
.payments-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-xs); }
.payments-bar .ui-month { margin: 0; }
.payments-bar .ui-month select { flex: 0 0 auto; width: auto; min-width: 12rem; }
.payments-bar .table-toolbar { margin: 0; }
.payments-bar__total { margin: 0 0 0 auto; font-variant-numeric: tabular-nums; }
@media (max-width: 719.98px) {
  .payments-bar__total { margin-left: 0; width: 100%; }
}

@media (max-width: 719.98px) {
  .btn, .btn.btn--regular, .btn.btn--compact { min-height: var(--touch); }
  .btn.btn--icon { width: var(--touch); }
}


.payment-day-table__tourist, .payment-day-table__author, .table-cell__value { overflow-wrap: normal; }
.payments-bar__total strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.card__row dd { overflow-wrap: normal; }
.card__row dd a { overflow-wrap: anywhere; }

/* Прямые включения также измеряют область, а не окно. */
:not(table):not(tbody):not(tr):not(.table-scroll):has(> .table-cards) { container: table / inline-size; }

/* Раскрытая проверка — широкая таблица с объяснением под основными полями. */
@container table (width < 66rem) {
  .ui-month-review .dense-table { --table-mode: folded; display: block; position: relative; overflow-x: auto; }
  .ui-month-review .dense-table__row > td:last-child { flex-basis: 100%; }
}
@container table (width < 40rem) {
  .people-table > tbody > .dense-table__row { display: grid; grid-template-columns: var(--people-columns); }
  .people-table > tbody > .dense-table__row::before { content: none; }
  .people-table > tbody > .dense-table__row > td { font-size: var(--text-table); }
  .people-table > tbody > .dense-table__row > td::after { content: none; }
}

@container table (width < 52rem) {
  .dense-table--records > tbody > .dense-table__row {
    padding-top: var(--space-2xs);
    padding-bottom: var(--space-2xs);
    gap: var(--space-3xs) var(--space-xs);
  }
}

@container table (width < 40rem) {
  .table-scroll > .work-table > tbody > .dense-table__row {
    padding: var(--space-2xs) var(--space-sm);
    margin-bottom: var(--space-2xs);
  }
}

/* Меню всей страницы зависит от окна; содержимое экранов — от своей области. */
@media (720px <= width <= 1024px) {
  :root { --sidebar-width: var(--sidebar-compact-width); }
  .page-header__bar { padding: var(--space-md) var(--space-xs); }
  .page-header__brand { font-size: 0; justify-content: center; }
  .main-nav { padding: var(--space-none) var(--space-xs) var(--space-xs); overflow: visible; }
  .main-nav__list { overflow-x: visible; overflow-y: auto; scrollbar-width: none; }
  .main-nav__account .ui-icon { display: block; }
  .main-nav__logout { display: flex; align-items: center; gap: var(--space-sm); }
  .nav-group__title, .main-nav__whoami, .main-nav__account > .muted { display: none; }
  .main-nav__link, .main-nav__logout { position: relative; justify-content: center; padding: var(--space-xs); min-height: var(--touch); width: 100%; }
  .nav-label { position: fixed; left: var(--sidebar-compact-width); z-index: 100; width: max-content; max-width: calc(100vw - var(--sidebar-compact-width) - var(--space-md)); padding: var(--space-xs) var(--space-sm); background: var(--color-text); color: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-popup); opacity: 0; visibility: hidden; pointer-events: none; font-size: var(--text-sm); }
  :is(.main-nav__link, .main-nav__logout):is(:hover, :focus-visible) .nav-label { opacity: 1; visibility: visible; }
}
/* Широкое меню: один общий скролл; служебный низ мелким текстом, не пунктами разделов. */
@media (min-width: 1025px) {
  .main-nav { overflow-y: auto; scrollbar-width: thin; }
  .main-nav__list { flex: none; overflow: visible; }
  .page-header__bar { padding: var(--space-md) var(--space-md) var(--space-sm); }
  .main-nav__list .main-nav__link { min-height: 2rem; padding-block: var(--space-2xs); gap: var(--space-xs); }
  .main-nav__list .ui-icon { width: 1.125rem; height: 1.125rem; }
  .nav-group { margin-bottom: var(--space-2xs); }
  .nav-group__title { margin: 0; padding: var(--space-xs) var(--space-xs) var(--space-3xs); line-height: 1.2; }
  .nav-footer { margin-top: auto; padding-top: var(--space-xs); }
  .nav-footer > .main-nav__link { min-height: 1.75rem; padding: var(--space-3xs) var(--space-xs); gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
  .nav-footer > .main-nav__link .ui-icon { width: 1rem; height: 1rem; }
  .main-nav__account { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--space-3xs) var(--space-xs); margin-top: var(--space-xs); padding: var(--space-xs) var(--space-xs) 0; }
  .main-nav__whoami { padding: 0; font-size: var(--text-sm); }
  .main-nav__account > .muted { padding: 0; font-size: var(--text-footnote); }
  .main-nav__account > :is(.main-nav__link, form) { flex-basis: auto; }
  .main-nav__account > .main-nav__link, .main-nav__logout { min-height: 1.75rem; padding: 0; font-size: var(--text-sm); color: var(--color-muted); text-decoration: underline; text-underline-offset: 0.2em; }
  .main-nav__account > .main-nav__link:hover, .main-nav__logout:hover { background: none; color: var(--color-text); }
  .main-nav__account > .main-nav__link { order: 2; }
  .main-nav__account > form { order: 3; }
  .main-nav__account::after { content: ""; flex-basis: 100%; order: 1; }
}
.work-table th a { color: inherit; }
.people-table th:not(:first-child), .people-table td:not(:first-child) { text-align: right; width: 6rem; font-variant-numeric: tabular-nums; }
.people-table__overdue { color: var(--color-warning); font-weight: var(--weight-semibold); }
.home-team .people-table__overdue { color: var(--color-late); }
/* Раскрытые «без просрочки» — те же колонки чисел, что у основной таблицы «Команды»: ширина не зависит от подписи шапки. */
@container table (width >= 40rem) {
  .home-team .people-table th:not(:first-child), .home-team .people-table td:not(:first-child) { width: 7rem; }
}
.people-table tr { position: relative; }
.people-table__person::after { content: ""; position: absolute; inset: 0; }
.people-table td a { position: relative; }
.people-table td:first-child a { position: static; }
.table-cards .table-cell__value > .cell-marks { display: block; }
.table-cell__login { white-space: nowrap; }
@media (max-width: 719.98px) {
  .people-table tbody tr { min-height: var(--touch); }
  .tourists-filters input, .tourists-filters select { min-height: var(--touch); }
  .tourists-controls > a, .tourists-filters > a, .tourists-totals > a { display: inline-flex; align-items: center; min-height: var(--touch); }
}
.prose { container: prose / inline-size; }
.prose table { width: 100%; overflow-wrap: normal; word-break: normal; }
@container prose (width < 40rem) {
  .prose table, .prose tbody, .prose tr { display: block; }
  .prose thead { display: none; }
  .prose tr { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border); }
  .prose td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-xs); border: 0; padding: var(--space-2xs) 0; }
  .prose td::before { content: attr(data-label); color: var(--color-muted); font-size: var(--text-sm); }
}
@container table (width < 40rem) {
  .people-table th:not(:first-child), .people-table td:not(:first-child) { width: auto; min-width: 0; }
}

/* Сумма и доля оплаты — одно значение; статус относится к названию туриста. */
.tourist-price { display: contents; }
.tourist-card-status { display: inline-flex; }
.table-cell--number { font-variant-numeric: tabular-nums; }
.markdown-example { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Волна 3: закрытые состояния не занимают отдельную полосу узкой карточки. */

@container (width < 69rem) {


}
.article-layout { container: article / inline-size; display: grid; gap: var(--space-lg); }
.article-contents { min-width: 0; }
.article-contents ul { padding-left: var(--space-lg); }
.article-contents li { margin-block: var(--space-xs); }
.prose :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: var(--space-xl); }
@container screen (width > 64rem) {
  .article-layout { grid-template-columns: minmax(0, 42rem) minmax(0, 1fr); }
  .article-layout > .prose { grid-column: 1; grid-row: 1; }
  .article-contents { grid-column: 2; grid-row: 1; }
}

@container table (width < 40rem) {
  .mapping-table tbody tr { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); padding: var(--space-xs); }
  .mapping-table td { display: block; padding: 0; font-size: var(--text-table); }
  .mapping-table td::before { content: none; }
  .mapping-table td:first-child { font-weight: var(--weight-semibold); }
}

/* Та же компактная сноска, что у средней карточки, на телефоне. */
@container (width < 40rem) {

  .payment-day-table__tourist { flex: 1 1 45%; order: 0; }


  .payment-day-table__request, .payment-day-table__where, .payment-day-table__author { order: 2; }



}

/* Компактный отбор держит кнопку рядом с полем, строки причин — без маркеров. */
.work-toolbar--compact label { flex: 0 1 auto; }
.problem-list li { display: grid; justify-content: start; gap: var(--space-xs); }
.problem-list .btn { justify-self: start; }

/* Дела: по макету 23.10, явные переходы и компактный выбранный отбор. */
.action-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.action-link { display: flex; align-items: center; gap: var(--space-md); color: var(--color-text); text-decoration: none; padding: var(--space-sm) var(--space-md); min-width: 0; }
.action-link:hover { background: var(--color-hover); }
.action-link__value { font-size: var(--text-h2); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.action-link__hint, .action-link__next { display: block; font-size: var(--text-sm); }
.action-link__next { color: var(--color-primary); margin-top: var(--space-2xs); }
.action-link__hint { color: var(--color-warning); }
@container screen (width >= 40rem) { .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container table (width >= 40rem) {
  .work-table { table-layout: auto; width: 100%; }
  .work-table th:nth-child(3), .work-table th:nth-child(4) { width: 1%; }
}
.person-fields-title { margin-top: var(--space-xl); }
.work-toolbar--compact select { font-size: var(--text-md); font-weight: var(--weight-regular); }
.operator-label-short { display: none; }
@container screen (width < 40rem) { .operator-label-full { display: none; } .operator-label-short { display: inline; } }
@container (width < 69rem) {


}
.article-contents--wide { display: none; }
@container screen (width > 64rem) { .article-contents--wide { display: block; } .article-contents--compact { display: none; } }

.problem-list p { margin: var(--space-none); }

/* Крошка — общий путь к разделу, без отдельного оформления на каждом экране. */
.breadcrumb { margin-bottom: var(--space-sm); font-size: var(--text-sm); }
.breadcrumb a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--touch); }
.breadcrumb__sep { margin-inline: var(--space-xs); color: var(--color-muted); }
.breadcrumb__here { color: var(--color-muted); }
.ui-callout--neutral { background: var(--color-neutral-bg); color: var(--color-text); }
.ui-callout--success { background: var(--color-success-bg); color: var(--color-success); }
.ui-callout--info { background: var(--color-info-bg); color: var(--color-info); }
.ui-callout--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.ui-callout--error { background: var(--color-danger-bg); color: var(--color-danger); }
/* Составные ячейки и имена с переносом; однострочные суммы сохраняют интервал. */
.dense-table--records .dense-table__row td:nth-child(3),
.table-cards td:has(p, dl, br), .dense-table td:has(p, dl, br){ line-height: 1.4; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); }

/* Выбор поставщиков использует общие поля, кнопки и ритм кабинета. */
.supplier-picker__selected, .supplier-picker__results { list-style: none; padding: var(--space-none); }
.supplier-picker__selected li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.supplier-picker__selected span { min-width: 0; }
.supplier-picker__results label { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--touch); }
.supplier-picker__results input { flex-shrink: 0; }
.nav-group--untitled { border-top: 1px solid var(--color-border); padding-top: var(--space-sm); }
@media (max-width: 719.98px) {
  .main-nav .nav-mobile-primary { display: none; }
}

/* Текст сообщения целиком копируется, на узкой области переносится без прокрутки. */
.copy-block { padding-block: var(--space-md); }
.copy-block__text { white-space: pre-wrap; overflow-wrap: break-word; font: inherit; margin: var(--space-none); }
.copy-block textarea { width: 100%; max-width: 100%; font: inherit; }

/* Без JavaScript сообщение остаётся читаемым текстом, без неработающей кнопки. */
html:not(.copy-enabled) :is([data-copy-message], [data-copy-text]) { display: none; }
.copy-block [data-copy-message] { min-height: var(--touch); }

/* Общие визуальные свойства полей; в модулях остаётся раскладка. */
.accounts-form input[type="radio"], .accounts-form input[type="checkbox"] { accent-color: var(--color-primary); }
.kb-search input { font-size: var(--text-body); font-weight: var(--weight-regular); }

/* Композиция существующих вторичной и опасной кнопок. */
.btn--secondary.btn--danger { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger); }
.field input[type="checkbox"], .field input[type="radio"] { accent-color: var(--color-primary); }
.copy-block__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.copy-block__header :is(h1, h2, h3, h4, h5, h6, p) { margin: var(--space-none); }

/* Вкладки разделов: прямой край и нижняя линия отличают навигацию от отборов. */
.ui-tabs { border-bottom: 1px solid var(--color-border); gap: var(--space-none); }
.ui-tabs__link { display: inline-flex; align-items: center; white-space: nowrap; min-height: var(--touch); padding: var(--space-xs) var(--space-md); border-bottom: 2px solid var(--color-clear); text-decoration: none; color: var(--color-muted); font-weight: var(--weight-medium); }
.ui-tabs__link:hover, .ui-tabs__link:focus-visible { color: var(--color-primary); background: var(--color-hover); }
.ui-tabs__link[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Пояснение не оставляет последнее слово отдельной строкой. */
.ui-callout { text-wrap: pretty; }

/* Суммы и действия сохраняют общую геометрию в нативной строке и карточке. */
.table-cards :is(.table-cell--money, .dense-table__number) { text-align: right; }
.table-cell--actions .table-cell__value, .table-cell--actions .stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
}
.table-cards td .btn, .dense-table td .btn{
  line-height: var(--line-label);
  vertical-align: baseline;
}
 .muted), .muted), .ui-callout :is(small, .muted) { font-weight: var(--weight-regular); }

/* Локальное прежнее центрирование замечаний не смещает первую строку общей таблицы. */
.dense-table.dense-table--records > tbody > tr > td { vertical-align: baseline; }
.dense-table.dense-table--records > tbody > tr > td > .dense-table__toggle { align-items: baseline; }

@container (width < 40rem) {

}

/* Проверки оплат: содержание определяет ширину колонок, действия идут в ряд. */
.payment-checks-help { margin: var(--space-none) 0 var(--space-md); }
.payment-checks-help > summary { cursor: pointer; }
.payment-checks-help > summary > span { color: var(--color-primary); }
.payment-checks-help__body { padding-top: var(--space-xs); }
.payment-checks-help__body p { margin: var(--space-none) 0 var(--space-xs); }
@container (width >= 69rem) {
  .payment-day-table--checks {
    display: grid;
    grid-template-columns: minmax(7.5rem, 1fr) 4rem max-content 7.25rem var(--payment-author-track, 9rem) max-content max-content;
    column-gap: var(--space-2xs);
  }
  .payment-day-table--checks :is(thead, tbody) { display: contents; }
  .payment-day-table--checks tr { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .payment-day-table--checks :is(th, td) { padding-inline: var(--space-cell-x); }
  .payment-day-table--checks .payment-day-table__receipt { padding-inline: var(--space-2xs); }
  .payment-day-table--checks .payment-day-table__operator { padding-left: var(--space-2xs); }

  .payment-day-table--checks.payment-day-table--no-receipt .payment-day-table__author { grid-column: 5; }
  .payment-day-table--checks.payment-day-table--no-receipt .payment-day-table__operator { grid-column: 6 / 8; }
  .payment-day-table--checks.payment-day-table--personal.payment-day-table--no-receipt .payment-day-table__where { grid-column: 4; }
}

/* Все дни разделяют дорожки: закрытые проверки не меняют ширины соседних колонок. */

.payment-days--personal { --payment-author-track: 0rem; }
@container screen (width >= 69rem) {




}

/* Поля обеих проверок используют ту же колонку значений, что и остальные факты. */
.payment-checks .card__row dd { font-weight: var(--weight-regular); }
.payment-checks .btn { white-space: nowrap; }
.payment-checks .payment-check { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.payment-checks .payment-check > dd { display: contents; }
.payment-check > dd > .status-badge { justify-self: end; }
 .payment-check__undo, .ui-footnote) { grid-column: 1 / -1; }

.payment-check__undo { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.payment-check__undo .btn { justify-content: flex-start; }
@container screen (width >= 40rem) {
  .payment-checks .payment-check { grid-template-columns: 14rem minmax(0, 1fr); }
  .payment-checks .payment-check > dd { display: block; text-align: left; }
}
@container screen (width < 40rem) {


}

/* Выбор для массовой отметки не сдвигает имя туриста на отдельную строку. */
.payment-day-table--checks .payment-day-table__tourist > label { display: inline-flex; margin-right: var(--space-2xs); }
@container (width < 69rem) {
  .payment-day-table--checks .payment-day-table__tourist > label { min-width: var(--touch); min-height: var(--touch); align-items: center; justify-content: center; }
}

/* Число не меняет левую границу подписей соседних плиток дел. */
.action-link__value { min-inline-size: 3ch; }

/* Сумма срочной доплаты; слово «Долг» сохраняет обычный вид во всём списке. */
.card__amount--warning { color: var(--color-warning); }

/* Обычное слово расчёта и жирная сумма сохраняют разный вес и в карточке строки. */
.client-balance { font-weight: var(--weight-regular); }

/* Показатели месяца: общая сводка с одним раскрытием формул. */
.ui-metrics { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-md); container: metrics / inline-size; }
.ui-metrics__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
.ui-metric { min-width: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.ui-metric__label { font-size: var(--text-table); color: var(--color-muted); }
.ui-metric__value { font-size: var(--text-lg); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: var(--line-table); }
.ui-metric--primary .ui-metric__value { font-size: var(--text-title); }
.ui-metric__comparison { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.ui-metric__comparison .ui-icon { flex: none; }
.ui-metrics__help { border-top: 1px solid var(--color-border); margin-top: var(--space-lg); padding-top: var(--space-xs); font-size: var(--text-table); }
.ui-metrics__help summary { cursor: pointer; min-height: var(--touch); align-content: center; }
.ui-metrics__help dl { display: grid; gap: var(--space-md); }
.ui-metrics__help dt { font-weight: var(--weight-bold); }
.ui-metrics__help dd { margin: var(--space-2xs) 0 0; max-width: 70ch; }
@container metrics (width >= 48rem) {
  .ui-metrics__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ui-metric { grid-column: span 2; }
}
@container metrics (width < 32rem) {
  .ui-metrics__grid { grid-template-columns: minmax(0, 1fr); }
}
/* Расчёт сотрудника: без JS варианты копирования остаются ровной группой ссылок. */
.ui-copy-group--wrap:not(.is-enhanced) > .ui-copy-menu { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ui-copy-group--wrap:not(.is-enhanced) > .ui-copy-menu a { overflow-wrap: normal; }
/* Сравнение равных отрезков: главные суммы и второстепенные показатели не смешиваются. */
.ui-metrics--comparison .ui-metrics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-metrics--comparison .ui-metric { grid-column: auto; }
.ui-metrics--comparison .ui-metrics__grid--primary { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-xl); }
.ui-metrics--comparison .ui-metric__comparison { font-size: var(--text-table); color: var(--color-text); }
.ui-metrics--comparison .ui-metric__comparison--up { color: var(--color-success); }
@container metrics (width >= 36rem) {
  .ui-metrics--comparison .ui-metrics__grid--secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* На самых узких экранах подпись периода не помещается в половину ширины. */
@container metrics (width < 19rem) {
  .ui-metrics--comparison .ui-metrics__grid--secondary { grid-template-columns: minmax(0, 1fr); }
}
/* Словесная причина живёт в пометке, числовые колонки остаются узкими. */
.table-scroll--readable > .dense-table--records .record-notes { width: 24%; }
.table-scroll--readable > .dense-table--records .dense-table__row td:last-child,
.table-scroll--readable > .dense-table--records .dense-table__toggle { white-space: normal; }
.table-scroll--readable > .dense-table--records .dense-table__row td:last-child { min-width: 0; }


/* Стрелка относится к первой строке сравнения; длинная подпись переносится рядом с ней. */
.ui-metrics--comparison .ui-metric__comparison { flex-wrap: nowrap; align-items: baseline; }
.ui-metrics--comparison .ui-metric__comparison .ui-icon { align-self: flex-start; }
@container table (width >= 40rem) {
  .table-scroll--readable > .dense-table--records .dense-table__row td { height: calc(var(--touch) + var(--space-sm)); }
}

/* Длинные суммы получают целую строку до безопасной ширины трёх колонок. */
@container metrics (width >= 48rem) {
  .ui-metrics--comparison .ui-metrics__grid--primary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container metrics (width < 32rem) {
  .ui-metrics--comparison .ui-metrics__grid--secondary > .ui-metric:first-child { grid-column: 1 / -1; }
}
.ui-metric__period { white-space: nowrap; }
.table-scroll--readable > .dense-table--records .record-facts { margin-top: var(--space-sm); }

/* Одна колонка для формы и пояснений перед ней. */
.form-width { max-width: var(--form-width); }


/* Компактная свёртка сохраняет полную область касания в плотных формах. */




/* Скрытие запасной кнопки включается только после инициализации поиска. */
[data-live-form] button[hidden] { display: none; }
.payments-month__controls > [data-live-results] { display: contents; }

/* Ошибка динамического поиска использует общий цвет ошибки формы. */
.ui-footnote.form-error { color: var(--color-danger); }

/* Связанные итоги месяца: вычитание читается слева направо и в узкой карточке. */
.card:has(> .ui-formula) { container: card / inline-size; }
.ui-formula { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-sm) var(--space-lg); }
.ui-formula__item { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.ui-formula__label { font-size: var(--text-sm); color: var(--color-muted); }
.ui-formula__value { font-size: var(--text-h2); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-formula__operator { font-size: var(--text-h2); color: var(--color-muted); }
.ui-formula__facts { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); border-top: 1px solid var(--color-border); margin-top: var(--space-md); padding-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.ui-formula__facts a { margin-left: auto; }
@container card (width < 40rem) {
  .ui-formula { flex-direction: column; align-items: stretch; gap: var(--space-xs); }
  .ui-formula__operator { display: none; }
  .ui-formula__item { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-xs); }
  .ui-formula__value { font-size: var(--text-lg); }
  .ui-formula__item:nth-of-type(2) .ui-formula__label::before { content: "− "; }
  .ui-formula__item:nth-of-type(3) { border-top: 1px solid var(--color-border); padding-top: var(--space-xs); }
}
/* Компактная строка сохраняет общие роли таблицы и раскладку карточки. */
@container table (width >= 66rem) {
  .dense-table.ui-table--compact > tbody > tr > td { padding-block: var(--space-xs); vertical-align: middle; }
}
.client-balance__amount { font-size: inherit; font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; white-space: nowrap; }
.client-balance__amount--warning { color: var(--color-warning); }

/* Ссылки таблицы остаются текстовыми, но в узкой области имеют область касания. */
@container table (width < 40rem) {
  .ui-table--touch-links td a, .dense-table--records td a { display: inline-flex; align-items: center; min-height: var(--touch); }
}

/* Ссылка плашки — самостоятельная цель касания на телефоне. */
@media (max-width: 719.98px) {
  .ui-formula__facts a { display: inline-flex; align-items: center; min-height: var(--touch); }
  .ui-callout a:not(.btn) { padding-block: var(--space-md); }
}
.ui-callout:has(> .btn) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
.ui-callout > .btn { flex-shrink: 0; }

/* Общая панель выбранных строк, поверх длинного списка, ниже полей формы. */
.ui-selection-bar { position: sticky; bottom: var(--space-md); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-popup); }
@media (max-width: 719.98px) {
  .ui-selection-bar { bottom: calc(var(--bottom-height) + var(--space-xs)); }
}
/* В карточке первая ячейка уже обёрнута внутренним отступом строки. */
@container table (width < 40rem) {
  .table-scroll > .operator-rate-pages > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-sm); }
  .table-scroll > .operator-rate-pages > tbody > tr > td { padding: 0; }
  .table-scroll > .operator-rate-pages > tbody > tr > td::before { display: none; }
  .table-scroll > .operator-rate-pages > tbody > tr > td:first-child { grid-column: 1; grid-row: 1; }
  .table-scroll > .operator-rate-pages > tbody > tr > td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .table-scroll > .operator-rate-pages > tbody > tr > td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .table-scroll > .operator-rate-pages > tbody > tr > td:nth-child(n+4) { grid-column: 1 / -1; }
  .table-scroll > .operator-rate-pages > tbody > tr > td.operator-rate-pages__empty { display: none; }
  .table-scroll > .operator-rate-pages > tbody > tr > td:nth-child(4)::before { display: inline; content: attr(data-label) ": "; color: var(--color-muted); }

}
.operator-rate-pages .ui-icon { width: 1em; height: 1em; vertical-align: baseline; }
.operator-rate-pages .ui-footnote { display: block; }
[data-auto-rate][hidden], [data-auto-rate] [hidden] { display: none; }
.operator-auto-rate { display: block; margin-top: var(--space-xs); min-width: 0; }
.operator-auto-rate__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.operator-auto-rate__main strong { font-size: var(--text-body); }
.operator-auto-rate > .field-help { display: block; }

/* Флажок массового выбора: видимый контроль и доступная цель касания. */
.payment-day-table--checks .payment-day-table__tourist > label input { width: var(--space-lg); height: var(--space-lg); }

/* Спокойный показ текущей ставки; раскрытие и фокус остаются доступными. */
.ui-rate__value--quiet { color: var(--color-text); text-decoration: none; }

/* Действия строки не рвутся; ссылки-имена доступны на телефоне. */
.work-table .btn { white-space: nowrap; }
@container table (width < 40rem) {
  .work-table td:first-child a { display: inline-flex; align-items: center; min-height: var(--touch); }
}

/* ELM-4. Общие раскрытия, подсказки и действия состояния. */
/* ===== 2. Предлагаемые общие детали ===================================== */

/* --- п. 1. Раскрывающийся блок: нативный <details>, свой вид ------------- */
.ui-expand { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin: var(--space-md) 0; }
.ui-expand > summary { list-style: none; display: flex; align-items: center; gap: var(--space-sm); min-height: var(--touch); padding: var(--space-xs) var(--space-lg); cursor: pointer; font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--line-label); border-radius: var(--radius-lg); }
.ui-expand > summary::-webkit-details-marker { display: none; }
.ui-expand > summary:hover { background: var(--color-hover); }
.ui-expand > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ui-expand__icon { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-round); background: var(--color-active-bg); color: var(--color-active); transition: transform .15s ease; }
.ui-expand__icon svg { width: 1rem; height: 1rem; }
.ui-expand[open] > summary > .ui-expand__icon { transform: rotate(90deg); }
.ui-expand__title { flex: 0 1 auto; min-width: 0; }
.ui-expand > summary { flex-wrap: wrap; row-gap: 0; }
.ui-expand__meta { flex: 1 1 9rem; margin-left: auto; padding-left: var(--space-sm); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-muted); text-align: right; }
.ui-expand[open] > summary { border-bottom: 1px solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.ui-expand__body { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.ui-expand__body > :first-child { margin-top: 0; }
.ui-expand__body > :last-child { margin-bottom: 0; }
/* Вложенный в карточку или в другой блок — без тени, на фоне поля. */
.card .ui-expand, .ui-expand .ui-expand { box-shadow: none; background: var(--color-field); margin: var(--space-sm) 0 0; border-radius: var(--radius); }
.card .ui-expand > summary, .ui-expand .ui-expand > summary { padding-inline: var(--space-md); border-radius: var(--radius); }
.card .ui-expand[open] > summary, .ui-expand .ui-expand[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }
.card .ui-expand .ui-expand__body, .ui-expand .ui-expand .ui-expand__body { padding: var(--space-sm) var(--space-md) var(--space-md); }
@media (prefers-reduced-motion: reduce) { .ui-expand__icon { transition: none; } }


/* Вариант B: строка-переключатель внутри текста, ячейки, сноски — без рамки. */
.ui-expand--inline { background: var(--color-clear); border: 0; box-shadow: none; margin: var(--space-2xs) 0; border-radius: 0; }
.ui-expand--inline > summary { display: inline-flex; min-height: 1.875rem; padding: 0 var(--space-2xs) 0 0; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-primary); border-radius: var(--radius); }
.ui-expand--inline > summary:hover { background: var(--color-clear); text-decoration: underline; text-underline-offset: 3px; }
.ui-expand--inline[open] > summary { border: 0; border-radius: var(--radius); }
.ui-expand--inline .ui-expand__icon { width: 1rem; height: 1rem; background: var(--color-clear); color: currentColor; }
.ui-expand--inline .ui-expand__meta { flex: none; margin-left: 0; padding-left: 0; }
.ui-expand--inline > .ui-expand__body { margin: var(--space-2xs) 0 var(--space-xs) var(--space-xs); padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md); border-left: 1px solid var(--color-drop); font-size: var(--text-table); }
.card .ui-expand--inline, .ui-expand .ui-expand--inline { background: var(--color-clear); margin: var(--space-2xs) 0; }
.card .ui-expand--inline > summary, .ui-expand .ui-expand--inline > summary { padding-inline: 0 var(--space-2xs); }
.card .ui-expand--inline > .ui-expand__body, .ui-expand .ui-expand--inline > .ui-expand__body { padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md); }

@media (max-width: 719.98px) {
  .ui-expand > summary { padding-inline: var(--space-md); }
  .ui-expand__body { padding: var(--space-sm) var(--space-md) var(--space-md); } .ui-expand--inline > summary { min-height: var(--touch); }
}

/* --- п. 3. Метка-кнопка: состояние и меню действий одним элементом ------- */
.ui-state { position: relative; display: inline-flex; vertical-align: baseline; }
.ui-state__button { font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; gap: var(--space-2xs); padding-right: var(--space-xs); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); min-height: 1.875rem; }
.ui-state__button:hover { filter: brightness(.96); border-color: currentColor; }
.ui-state__button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ui-state__button svg { width: .875rem; height: .875rem; flex: none; }
.ui-state__button[aria-expanded="true"] { border-color: currentColor; }
.ui-state__button[aria-expanded="true"] svg { transform: rotate(180deg); }
.ui-state.is-enhanced .ui-copy-menu { position: fixed; z-index: 20; top: calc(100% + var(--space-2xs)); left: 0; min-width: 12rem; width: max-content; max-width: min(20rem, calc(100vw - 2rem)); box-shadow: var(--shadow-popup); }
.ui-state--end .ui-copy-menu { left: auto; right: 0; }
.ui-copy-menu__item { display: flex; align-items: center; width: 100%; min-height: 2.25rem; padding: var(--space-xs) var(--space-sm); border: 0; border-radius: var(--radius); background: var(--color-clear); color: var(--color-text); font: inherit; font-size: var(--text-table); text-align: left; cursor: pointer; }
.ui-copy-menu__item:hover { background: var(--color-hover); }
.ui-copy-menu__note { display: block; padding: var(--space-2xs) var(--space-sm) var(--space-xs); font-size: var(--text-footnote); color: var(--color-muted); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-2xs); }
@media (max-width: 719.98px) {

  .ui-copy-menu__item { min-height: var(--touch); }
}

/* --- Подсказка: подробность по наведению, фокусу и касанию -------------- */
.ui-hint { position: relative; display: inline-flex; align-items: baseline; }
.ui-hint__trigger { font: inherit; color: inherit; background: var(--color-clear); border: 0; padding: 0; cursor: help; text-decoration: underline dotted var(--color-border-strong); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ui-hint__trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--space-2xs); }
.ui-hint.is-enhanced .ui-hint__bubble { position: fixed; z-index: 30; top: calc(100% + var(--space-xs)); left: 0; width: max-content; max-width: min(19rem, calc(100vw - 2rem)); padding: var(--space-xs) var(--space-sm); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-popup); font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--line-table); text-align: left; white-space: normal; text-wrap: pretty; }
.ui-hint__bubble b { font-weight: var(--weight-semibold); }
.ui-hint__bubble[hidden] { display: none; }
.ui-hint__icon { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: var(--radius-round); color: var(--color-muted); text-decoration: none; }
.ui-hint__icon svg { width: 1rem; height: 1rem; }
@media (max-width: 719.98px) {
  .ui-hint__trigger { min-height: var(--touch); display: inline-flex; align-items: center; }
  .ui-hint__icon { width: var(--touch); height: var(--touch); margin: calc(-1 * var(--space-sm)) calc(-1 * var(--space-sm)); }
}

/* Небольшая нейтральная пометка «Обращение» / «сохранена кабинетом». */
.ui-tag { display: inline-flex; align-items: center; padding: 0 var(--space-xs); border-radius: var(--radius-pill); border: 1px solid var(--color-border); font-size: var(--text-footnote); font-weight: var(--weight-semibold); color: var(--color-muted); line-height: 1.5; white-space: nowrap; vertical-align: .1em; }

/* --- п. 7. Цифры: один вес ---------------------------------------------- */
.num-key { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }


.ui-hint:not(.is-enhanced) { display: inline; }
.ui-hint:not(.is-enhanced) .ui-hint__bubble { margin-left: var(--space-xs); font-size: var(--text-footnote); font-weight: var(--weight-regular); white-space: normal; }
.ui-state:not(.is-enhanced) { display: inline-flex; flex-wrap: wrap; gap: var(--space-xs); }
.ui-state:not(.is-enhanced) .ui-copy-menu { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ui-state:not(.is-enhanced) .ui-copy-menu form { display: contents; }
.ui-state.is-enhanced > .ui-state__fallback { display: none; }
.ui-hint__currency { font-size: var(--text-caption); color: var(--color-muted); margin-left: var(--space-2xs); }

/* Плотная оплата: время, заказчик, сумма и две метки без дублей. */
.payment-days { display: block; container-type: inline-size; }
.payment-day { display: block; container-type: inline-size; }
.payment-day__heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-xs); margin: var(--space-lg) 0 var(--space-xs); }
.payment-day__heading h2, .payment-day__heading p { margin: 0; }
.payment-day__heading h2 { font-size: var(--text-h3); }
.payment-day__heading p { color: var(--color-muted); font-size: var(--text-table); }
.payment-day-table { display: table; width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); font-size: var(--text-table); }
.payment-day-table thead { display: table-header-group; }
.payment-day-table tbody { display: table-row-group; }
.payment-day-table tr { display: table-row; }
.payment-day-table :is(th,td) { display: table-cell; padding: var(--space-sm) var(--space-xs); border: 0; border-bottom: 1px solid var(--color-border); vertical-align: middle; text-align: left; min-width: 0; }
.payment-day-table th { color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); background: var(--color-field); white-space: nowrap; }
.payment-day-table :is(th,td):first-child { padding-left: var(--space-lg); }
.payment-day-table :is(th,td):last-child { padding-right: var(--space-lg); }
.payment-day-table tr:last-child td { border-bottom: 0; }
.payment-day-table .payment-day-table__money { text-align: right; white-space: nowrap; }
.payment-day-table__time { color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.payment-day-table__request { display: inline; white-space: nowrap; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.payment-day-table a { text-decoration: none; font-weight: var(--weight-medium); }
.payment-day-table__meta { display: none; }
.payment-day-table__state { white-space: nowrap; }
.payment-day-table__state::before { content: none; }
.payment-day-table__tourist .ui-hint { font-size: var(--text-sm); color: var(--color-muted); }
.payment-day-table td.payment-day-table__state { display: table-cell; }
.payment-day-table td.payment-day-table__where { display: table-cell; }
@container (width < 64rem) {
  .payment-day-table, .payment-day-table tbody { display: block; }
  .payment-day-table thead { display: none; }
  .payment-day-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-xs); padding: var(--space-xs) var(--space-md) var(--space-sm); border-bottom: 1px solid var(--color-border); margin: 0; background: var(--color-clear); border-radius: 0; }
  .payment-day-table tr:last-child { border-bottom: 0; }
  .payment-day-table :is(td,td:first-child,td:last-child) { display: block; padding: 0; border: 0; width: auto; }
  .payment-day-table .payment-day-table__tourist { flex: 1 1 0; order: 0; }
  .payment-day-table td.payment-day-table__money { flex: 0 0 auto; margin-left: auto; order: 0; }
  .payment-day-table .payment-day-table__tourist > a { display: inline-flex; align-items: center; min-height: var(--touch); }
  .payment-day-table .payment-day-table__request, .payment-day-table td.payment-day-table__time, .payment-day-table td.payment-day-table__where, .payment-day-table td.payment-day-table__author { display: none; }
  .payment-day-table__meta { display: block; color: var(--color-muted); font-size: var(--text-sm); }
  .payment-day-table tr::before { content: none; }
  .payment-day-table tr::after { content: ''; flex-basis: 100%; order: 1; }
  .payment-day-table td.payment-day-table__state { display: block; flex: 0 1 auto; order: 2; margin: 0; padding: 0; border: 0; }
  .payment-day-table td.payment-day-table__state::before { content: none; }
  .payment-day-table .payment-day-table__state:not(:has(.ui-state,.status-badge)) { display: none; }
}
.home-money .summary-item { text-align: left; align-items: flex-start; gap: var(--space-xs); }
.home-money__link { margin-top: var(--space-xs); padding-top: 0; }
.home-money .summary-item__title { display: flex; align-items: center; gap: var(--space-xs); }
.record-facts { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.record-facts div { display: flex; gap: var(--space-xs); }
.record-facts dd { margin: 0; }
.record-actions .form-actions { display: flex; flex-wrap: wrap; }
.dense-table__toggle { display: inline-flex; align-items: center; }
.dense-table .table-cell--money, .table-cards .table-cell--money { font-weight: var(--weight-semibold); }
.tourist-price { font-weight: var(--weight-regular); }
.tourist-table .tourist-card-status { display: inline-flex; }
.tourist-table .tourist-name { margin-right: var(--space-xs); }
.article-layout{ margin-block: var(--space-xl); }
@media (max-width: 719.98px), (pointer: coarse) {
  .ui-copy-menu__item, .ui-hint__trigger { min-height: var(--touch); }
}

[data-row-action-trigger][hidden] { display: none; }
.row-actions__trigger { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.row-actions__trigger svg { width: .875rem; height: .875rem; flex: none; }
.row-actions__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.ui-state.is-enhanced .ui-copy-menu { z-index: 1000; right: auto; }
.home-money .summary-item { min-height: 0; }
.home-money .summary-item__title .ui-hint { font-size: var(--text-sm); }
.home-money .summary-item__title { gap: var(--space-2xs); }
.home-money .summary-item__value { font-size: var(--text-h2); }
.home-money__link { margin-top: var(--space-xs); }
.payroll-inline-check { display: inline-flex; align-items: center; min-height: var(--touch); }
/* Дни разделяют колонки, поэтому суммы и состояния не прыгают между датами. */
.payment-day-table th.payment-day-table__time { white-space: nowrap; }
@container screen (width >= 64rem) {
  .payment-days--no-destination { --payment-destination-track: 0rem; }
  .payment-days { display: grid; grid-template-columns: 4rem minmax(10rem, 1fr) max-content var(--payment-destination-track, 6.5rem) var(--payment-author-track, 10rem) max-content max-content; gap: 0 var(--space-2xs); }
  .payment-days > .payment-day { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; container-type: normal; }
  .payment-day__heading { grid-column: 1 / -1; }
  .payment-days > .empty-state { grid-column: 1 / -1; }
  .payment-days .payment-day-table { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
  .payment-day-table :is(thead,tbody) { display: contents; }
  .payment-day-table tr { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
  .payment-day-table :is(th,td) { display: block; }
  .payment-day-table .payment-day-table__time { grid-column: 1; }
  .payment-day-table .payment-day-table__tourist { grid-column: 2; }
  .payment-day-table .payment-day-table__money { grid-column: 3; }
  .payment-day-table .payment-day-table__where { grid-column: 4; }
  .payment-day-table .payment-day-table__author { grid-column: 5; }
  .payment-day-table .payment-day-table__receipt { grid-column: 6; }
  .payment-day-table td.payment-day-table__state { display: block; }
  .payment-day-table td.payment-day-table__where { display: block; }
  .payment-day-table .payment-day-table__operator { grid-column: 7; }
  .payment-day-table--no-receipt .payment-day-table__operator { grid-column: 6 / 8; }
}

.payment-day-table :is(th,td) { overflow-wrap: normal; word-break: normal; }
.ui-hint:not(.is-enhanced) { white-space: normal; }
.ui-state:not(.is-enhanced), .ui-state:not(.is-enhanced) .ui-copy-menu { max-width: 100%; white-space: normal; }
.ui-state:not(.is-enhanced) .ui-copy-menu__item { white-space: normal; }
.payment-day-table td.payment-day-table__money:has(.ui-hint:not(.is-enhanced)) { flex: 1 1 100%; white-space: normal; }
.tourist-table td[data-label="Поездка"] { white-space: nowrap; }

/* ELM-4, круг 2: строки пояснений остаются строками во вложенных ячейках. */
.ui-expand--inline > summary { display: inline-flex; flex-wrap: nowrap; align-items: center; }
.ui-expand--inline > summary > .ui-expand__icon { align-self: center; margin-top: 0; }
.ui-expand--inline .ui-expand__title { flex: 1 1 auto; }
.ui-rate-editor .ui-expand--inline { margin: 0; }
.ui-hint.is-enhanced .ui-hint__bubble { overflow-y: auto; }
.home-money .summary-item { align-self: start; }
.home-money .summary-item__title { min-height: var(--space-xl); align-items: center; }
.home-money__link { display: inline-flex; align-items: center; margin-top: var(--space-xs); padding-top: 0; font-size: var(--text-sm); text-decoration: none; }
.home-money__link:hover { text-decoration: underline; }
.ui-formula__value { font-weight: var(--weight-semibold); }
.dense-table__toggle::after { content: none; }
.dense-table__toggle.ui-state__button { text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; }
.record-toggle--quiet { border-color: var(--color-clear); }
.record-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.record-options h3 { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin: 0 0 var(--space-sm); }
.record-options .record-actions { margin-block: var(--space-sm); }
.record-facts { font-size: var(--text-table); }
.record-facts dt, .record-facts dd { font-size: inherit; }
.payment-day-table thead tr { background: var(--color-field); }
.payment-day-table th { background: var(--color-clear); }
@container screen (width >= 60rem) {
  .record-detail-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container (width < 64rem) {
  .payment-day-table td.payment-day-table__state { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2xs); }
  .payment-state-caption.sr-only:not(.payment-state-caption--hidden) { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; font-size: var(--text-sm); color: var(--color-muted); }
}
@media (max-width: 719.98px) {
  .work-table td .ui-expand__body a { display: inline-flex; align-items: center; min-height: var(--touch); }
}



@media (max-width: 719.98px) {
  .ui-hint__trigger, .ui-expand--inline > summary { min-width: var(--touch); }
  .ui-hint__icon { margin: 0; }
}

.payment-day-table__where { white-space: nowrap; }

/* ELM-4б: подробности слева, причина и единый ряд действий справа. */
.record-detail-layout .record-facts { display: block; padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.record-detail-layout .record-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-sm); padding-block: var(--space-2xs); border-bottom: 1px solid var(--color-border); }
.record-detail-layout .record-facts > div:last-child { border-bottom: 0; }
.record-detail-layout .record-facts > div[hidden] { display: none; }
.record-detail-layout .record-facts dt { color: var(--color-muted); }
.record-detail-layout .record-facts dd { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.fact--warning { color: var(--color-warning); }
.fact--success { color: var(--color-success); }
.record-detail-title { color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); margin: 0 0 var(--space-xs); }
.record-detail-body { min-width: 0; }
.record-options { margin-top: var(--space-xl); }
.record-options-row, .record-options-row .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.record-options-row .record-actions { margin: 0; display: contents; }
.record-options-row form, .record-options-row .form-actions { margin: 0; }
.record-detail-layout .record-facts { align-self: start; }
@container screen (width >= 60rem) {
  .record-detail-layout { grid-template-columns: minmax(15rem, .45fr) minmax(0, 1fr); }
  .record-options-row, .record-options-row .form-actions { flex-wrap: nowrap; }
}
@media (max-width: 719.98px) {
  .record-options-row, .record-options-row .form-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .record-options-row .btn { width: 100%; min-height: var(--touch); }
}
.table-group-heading th { color: var(--color-text); font-weight: var(--weight-semibold); background: var(--color-field); padding: var(--space-sm) var(--space-lg); text-align: left; }
:where(.table-cards) {
  @container style(--table-mode: folded) {
    & .table-group-heading { display: block; }
    & .table-group-heading th { display: block; }
  }
}

/* ELM-4б, круг 2: состояние навигации одинаково для ARIA-вкладок и ссылок. */
.filter-chip[aria-current="page"] { color: var(--color-primary); background: var(--color-active-bg); border-color: var(--color-primary); }
.ui-tabs__link[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.table-group-heading__line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.table-group-heading .ui-footnote { margin-bottom: 0; }
.reconciliation-intro { max-width: 65ch; }
@container table (width >= 52rem) {
  .dense-table--records .dense-table__row td[data-label="Клиент"] { white-space: nowrap; }
}
@container table (width < 40rem) {
  .table-scroll--readable > .dense-table--records > tbody > tr.dense-table__row { padding-block: var(--space-2xs); }
  .tourist-table .table-cards > tbody > tr.table-group-heading { display: block; padding: var(--space-sm) 0; margin: 0; border: 0; border-radius: 0; background: var(--color-clear); }
  .tourist-table .table-group-heading th { padding: var(--space-xs) 0; background: var(--color-clear); }
  .table-group-heading__line { flex-wrap: wrap; }
}

/* Группы таблицы: заметная граница перед каждым разделом. */
.table-record-group + .table-record-group > .table-group-heading > th { border-top: 2px solid var(--color-border-strong); }
.table-group-heading th { font-size: var(--text-md); }
.reconciliation-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); margin-block: var(--space-md); }
.reconciliation-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

/* Сегменты календарного периода и порядок таблицы без JavaScript. */
.ui-segment { display: inline-flex; padding: var(--space-3xs); gap: var(--space-3xs); background: var(--color-neutral-bg); border-radius: var(--radius); border: 0; margin: 0; }
.ui-segment .ui-tabs__link { min-height: calc(var(--touch) - 2 * var(--space-3xs)); position: relative; padding: var(--space-2xs) var(--space-sm); border: 0; border-radius: var(--radius); font-size: var(--text-table); color: var(--color-muted); white-space: nowrap; }
.ui-segment .ui-tabs__link[aria-current="page"] { background: var(--color-surface); color: var(--color-text); font-weight: var(--weight-semibold); box-shadow: var(--shadow-card); }
@container screen (width < 40rem) {
  .ui-segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ui-segment .ui-tabs__link { justify-content: center; padding-inline: var(--space-3xs); }
}
.table-sort-mobile { display: none; flex-wrap: wrap; align-items: end; gap: var(--space-xs); margin: var(--space-xs) 0 var(--space-md); }
.table-sort-mobile label { display: grid; gap: var(--space-3xs); flex: 0 1 20rem; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-muted); }
.table-sort-mobile .btn { min-height: var(--touch); }
.table-sort-mobile select { min-height: var(--touch); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-field); font: inherit; color: var(--color-text); }
@container table (width < 58rem) { .table-sort-mobile--rating { display: flex; } }
@container table (width < 66rem) { .table-sort-mobile--extra { display: flex; } }

/* Одинаковый смысл сортировки на всех таблицах кабинета. */
th[aria-sort], th[aria-sort] a { color: var(--color-muted); }
th[aria-sort]:not([aria-sort="none"]), th[aria-sort]:not([aria-sort="none"]) a { color: var(--color-active); }

/* Имя и доля выбранного показателя от лидера. */
.rank-name { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: var(--space-xs); align-items: baseline; min-width: 14rem; }
.rank-name__place { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); color: var(--color-muted); text-align: right; }
.rank-name__place.is-top { color: var(--color-text); font-weight: var(--weight-bold); }
.rank-name__who { font-weight: var(--weight-semibold); color: var(--color-text); }
.rank-name .ui-tag { margin-left: var(--space-2xs); }
.rank-bar { grid-column: 2; display: block; height: var(--space-2xs); margin-top: var(--space-3xs); border-radius: var(--radius-pill); background: var(--color-neutral-bg); overflow: hidden; max-width: 16rem; }
.rank-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--color-drop); }
.rank-name__place.is-top ~ .rank-bar > span { background: var(--color-primary); }

@media (max-width: 719.98px) {
  .ui-segment .ui-tabs__link::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: var(--touch); transform: translateY(-50%); }
}

/* Два размера пилюль во всём кабинете: действие 30 px, статичная метка 24 px. */
.filter-chip, .ui-state__button, .dense-table__toggle.ui-state__button {
  position: relative;
  box-sizing: border-box;
  min-height: var(--pill-control-height);
  padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--line-label);
  gap: var(--space-xs);
}
.status-badge:not(.ui-state__button), .ui-tag, .ui-counter {
  box-sizing: border-box;
  min-height: var(--pill-label-height);
  padding: 0 var(--space-xs);
  border-radius: var(--radius-pill);
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  line-height: var(--line-label);
}
.ui-counter { min-width: var(--pill-label-height); }
.filter-chip > small { font-size: var(--text-footnote); font-weight: var(--weight-regular); white-space: nowrap; }
.ui-tag--warning { color: var(--color-warning); background: var(--color-warning-bg); border-color: var(--color-warning-bg); }
a.ui-tag { position: relative; text-decoration: none; }
.ui-table--touch-links td a.ui-tag { min-height: var(--pill-label-height); padding: 0 var(--space-xs); }
:is(.ui-actions, .tourists-segment, .tourists-controls):has(> .filter-chip),
.ui-actions:has(> :is(.ui-state, .status-badge, .ui-tag)), .pill-row {
  gap: var(--pill-gap);
  margin-block: var(--space-md);
}
.pill-group { display: flex; flex-direction: column; gap: var(--pill-gap); margin-block: var(--space-md); }
.pill-group > :is(.ui-actions, .pill-row, .request-chips) { margin-block: 0; }
.ui-copy-menu :is([data-status-step], [data-status-forward], [data-status-back])[hidden] { display: none; }
.ui-copy-menu__item--back { color: var(--color-primary); font-weight: var(--weight-semibold); border-bottom: 1px solid var(--color-border); border-radius: var(--radius) var(--radius) 0 0; margin-bottom: var(--space-2xs); }
.ui-copy-menu__item--back::before { content: "‹"; margin-right: var(--space-xs); font-size: var(--text-lg); line-height: 1; }
.contact-copy { display: grid; grid-template-columns: max-content minmax(min-content, 1fr) max-content; align-items: center; gap: var(--space-2xs) var(--space-xs); }
.contact-copy__kind { color: var(--color-muted); font-size: var(--text-footnote); }
.contact-copy__value { min-width: 0; overflow-wrap: anywhere; }
.contact-copy__value a[href^="tel:"] { white-space: nowrap; }
.contact-copy :is([data-copy-status], [data-copy-fallback]) { grid-column: 1 / -1; }
.contact-copy [data-copy-status]:empty { display: none; }
@media (max-width: 719.98px), (pointer: coarse) {
  .filter-chip::before, .ui-state__button::before, a.ui-tag::before {
    /* Псевдоэлемент отсчитывается от внутренней границы рамки 1px: добавляем её, чтобы касание было ровно --touch. */
    content: ""; position: absolute; inset: calc(var(--pill-touch-inset) - 1px) 0;
  }
  a.ui-tag::before { inset-block: calc((var(--touch) - var(--pill-label-height)) / -2); }
}
@media (max-width: 719.98px) {
  .ui-state.is-enhanced:has(> [data-row-action-menu]:not([hidden])) { display: flex; flex-wrap: wrap; align-items: center; width: 100%; }
  .ui-state.is-enhanced .ui-copy-menu { position: static; flex-basis: 100%; width: 100%; min-width: 0; max-width: none; margin-top: var(--space-xs); box-shadow: none; border: 1px solid var(--color-border-strong); }
}

/* Компактная шапка — общий элемент рабочих экранов; сегмент описан выше. */
.screen-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-lg); margin-bottom: var(--space-sm); }
.screen-head .page-title { margin: 0; }
.screen-head .ui-footnote { margin-bottom: 0; }
.ui-copy-menu a.ui-copy-menu__item { font-weight: var(--weight-regular); }
.ui-state:not(.is-enhanced) { flex-direction: column; align-items: flex-start; gap: var(--space-xs); max-width: 100%; }
.ui-state:not(.is-enhanced) > .ui-copy-menu { min-width: 16rem; max-width: 100%; }
.status-badge:not(.ui-state__button) { padding-block: var(--space-3xs); }
.status-badge--error { white-space: nowrap; }
@media (max-width: 719.98px), (pointer: coarse) {
  :root { --pill-gap: var(--space-sm); }
}
@media (max-width: 719.98px) {
  .ui-segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .screen-head { align-items: stretch; }
  .ui-state .ui-copy-menu { scroll-margin-bottom: calc(var(--bottom-height) + var(--space-md)); }
  .ui-copy-menu__item { scroll-margin-bottom: calc(var(--bottom-height) + var(--space-md)); }
}

/* Общая панель подробностей: вариант Б, список получает оставшуюся ширину. */
:root {
  --side-panel-width: min(40rem, 44vw);
  --pdf-preview-height: calc(100dvh - 12rem);
  --pdf-preview-min-height: 28rem;
  --pdf-viewer-gutter: 1.25rem;
}
.side-panel, .pdf-wide { display: none; }
@media (min-width: 1280px) {
  .side-panel:not([hidden]) { display: flex; flex-direction: column; position: fixed; inset: 0 0 0 auto; z-index: 900; width: var(--side-panel-width); background: var(--color-surface); border-left: 1px solid var(--color-border); }
  body.panel-open > .container { width: calc(100% - var(--sidebar-width) - var(--side-panel-width)); }
  .side-panel__bar { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
  .side-panel__close { margin-left: auto; flex-shrink: 0; }
  .side-panel__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-md) var(--space-lg) var(--space-xl); container: screen / inline-size; }
  .side-panel__body:focus-visible { outline: 2px solid var(--color-primary); outline-offset: calc(-1 * var(--space-3xs)); }
  .side-panel__body .page-title { font-size: var(--text-h2); }
  .side-panel__body .dossier-tabs.ui-tabs { flex-wrap: wrap; }
  .side-panel__body .dossier-tabs .ui-tabs__link { flex: none; }
  .side-panel__status { color: var(--color-muted); padding-block: var(--space-sm); }
  .side-panel__status[role="alert"] { color: var(--color-danger); }
  .side-panel__body > [data-panel-actions] { margin-top: var(--space-md); }
  .side-panel__body > [data-panel-actions] p { margin: 0 0 var(--space-2xs); }
  .is-panel-current, :is(.table-cards, .dense-table) > tbody > tr.is-panel-current, .payment-day-table tr.is-panel-current { background: var(--color-active-bg); }
  .pdf-narrow { display: none; }
  .pdf-wide { display: block; }
  .pdf-wide.btn { display: inline-flex; }
  /* Просмотр Google Drive рисует страницу не шире ~800 px и тёмные поля по бокам; рамка той же ширины обрезает поля. */
  .pdf-frame { max-width: 50rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-neutral-bg); }
  .pdf-preview { display: block; width: calc(100% + 2 * var(--pdf-viewer-gutter)); margin-inline: calc(-1 * var(--pdf-viewer-gutter)); height: var(--pdf-preview-height); min-height: var(--pdf-preview-min-height); border: 0; }
  /* В панели действия статьи — один плотный ряд, а не крупные кнопки в два яруса. */
  .side-panel__body .form-actions { gap: var(--space-2xs); margin: var(--space-2xs) 0; }
  .side-panel__body .card__header { margin-bottom: 0; }
  .side-panel__body .pdf-frame { margin-top: var(--space-sm); }
  .side-panel__body .form-actions .btn { min-height: 2.25rem; padding: var(--space-3xs) var(--space-sm); font-size: var(--text-sm); }
}

/* Личные дела: плотные строки с действиями, на телефоне срок остаётся рядом с кнопками. */
.my-tasks { margin: var(--space-md) 0 var(--space-xl); }
.my-tasks__heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.my-tasks__heading h2 { margin: 0; }
.my-tasks__list { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0 var(--space-lg); }
.my-tasks__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); }
.my-tasks__row:last-child { border-bottom: 0; }
.my-tasks__body { flex: 1 1 24rem; min-width: 0; }
.my-tasks__controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); }
.my-tasks__due { font-size: var(--text-sm); white-space: nowrap; }
.my-tasks__due--late { color: var(--color-late); font-weight: var(--weight-semibold); }
.my-tasks__more { margin-top: var(--space-sm); }
@media (max-width: 720px) {
  .my-tasks__body { flex-basis: 100%; }
  .my-tasks__controls .btn, .my-tasks__controls .ui-state__button, .my-tasks__controls .ui-state__fallback { min-height: var(--touch); }
  .my-tasks__list { padding-inline: var(--space-xs); }
  .my-tasks__controls { flex-wrap: nowrap; width: 100%; }
  .my-tasks__due { flex: 1 1 0; min-width: 0; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; }
  .my-tasks__due span { white-space: nowrap; }
}

/* Сводка денег на главной — единая поверхность с компактными показателями. */
.home-money .summary-items { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-sm); }
.home-money .summary-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-2xs) var(--space-sm); border: 0; background: var(--color-clear); }
.home-money .summary-item__title { min-height: 0; }
/* На компьютере подпись, сумма и пометка со ссылкой идут столбиком у левого края колонки: число читается вместе с подписью, без пустой полосы между ними. */
@media (min-width: 721px) {
  .home-money .summary-item { grid-template-columns: auto auto; justify-content: start; row-gap: var(--space-3xs); }
  .home-money .summary-item__title { grid-column: 1 / -1; padding-block: 0; min-height: var(--touch); }
  .home-money .summary-item__value { grid-column: 1 / -1; }
  .home-money .summary-item .home-money__link { justify-self: start; }
}
.home-money .summary-item__value { margin: 0; }
.home-money .summary-item .ui-footnote { grid-column: 1; margin: 0; }
.home-money__link { grid-column: 2; justify-self: end; margin: 0; }
@media (max-width: 720px) {
  .home-money .summary-items { gap: var(--space-none); }
  .home-money .summary-item { padding: var(--space-xs) var(--space-none); row-gap: var(--space-none); }
  /* Подпись и сумма — одна строка, пометка и ссылка — вторая. Зона нажатия ссылки и подсказки — ::after, а не высота строки. */
  .home-money__link, .home-money .ui-hint__trigger { position: relative; }
  .home-money__link::after { content: ""; position: absolute; inset: calc((var(--touch) - 100%) / -2) calc(-1 * var(--space-sm)); }
  .home-money .ui-hint__trigger { min-width: 0; min-height: 0; }
  .home-money .ui-hint__icon { width: var(--space-lg); height: var(--space-lg); }
  .home-money .ui-hint__trigger::after { content: ""; position: absolute; inset: calc((var(--touch) - 100%) / -2); }
}

@media (max-width: 24rem) {
  .my-tasks__controls { flex-wrap: wrap; }
  .my-tasks__due { flex-basis: 100%; }
}

/* Быстрое создание дела и компактный выбор получателя. */
.quick-task { margin: var(--space-sm) 0 var(--space-md); }
.quick-task__row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: var(--space-xs); margin: 0; }
.quick-task__row input { flex: 1 1 12rem; min-width: 0; max-width: none; }
.quick-task__row .btn { flex: none; white-space: nowrap; }
/* Когда подсказка «Что нужно сделать?» не помещается рядом с кнопкой, кнопка уходит на свою строку. */
@container screen (width < 18.75rem) { .quick-task__row .btn { flex: 1 1 100%; } }
.quick-task__more { margin-top: var(--space-xs); }
.segmented-choice { padding: 0; border: 0; margin: 0; }
.segmented-choice__options { display: flex; gap: var(--space-xs); }
.segmented-choice__options label { cursor: pointer; }
.segmented-choice__options input { position: absolute; opacity: 0; }
.segmented-choice__options span { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius); }
.segmented-choice__options input:checked + span { background: var(--color-active-bg); color: var(--color-primary); }
.segmented-choice__options input:focus-visible + span { outline: 2px solid var(--color-primary); }

.task-navigation__link { display: inline-flex; align-items: center; min-height: var(--touch); }
.task-notice { scroll-margin-top: var(--space-md); margin-bottom: var(--space-sm); }
.task-notice__link { display: inline-block; margin-top: var(--space-xs); }
.task-notice__link[hidden] { display: none; }
@media (max-width: 719.98px) {
  .reminder-block .card__row { display: block; }
  .reminder-block .card__row dd { text-align: left; }
  .reminder-block .ui-actions { flex-wrap: wrap; }
  .my-tasks__controls:has(.ui-state.is-enhanced > [data-row-action-menu]:not([hidden])) { flex-wrap: wrap; }

}

.reminder-delegated__mobile-title { display: none; }

/* ELM-18: главная по ролям, плотный вид. Телефон первичен; широкий экран — после 720px. */
.screen-heading.home-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.home-head .page-title { margin: var(--space-none); }
.home-head__date { display: none; margin: var(--space-2xs) var(--space-none) var(--space-none); color: var(--color-muted); font-size: var(--text-table); }
.home-head .btn--cta { flex: none; }
.home-block { margin-top: var(--space-md); }
/* «Команда» — на всю ширину, как блок работы; под своей работой владельца тише неё (--secondary), без неё главный блок (ELM-23). */
.home-team { margin-top: var(--space-lg); }
.home-block > h2, .home-team > h2 { margin: var(--space-none) var(--space-none) var(--space-xs); font-size: var(--text-h3); }
.home-team--secondary > h2 { color: var(--color-muted); }
.work-list, .queue-list { margin: var(--space-none); padding: var(--space-none) var(--space-sm); list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.home-checks { margin-top: var(--space-md); }
.work-empty { margin: var(--space-none); padding: var(--space-sm) var(--space-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-muted); }
.work-group__title { margin: var(--space-none); padding: var(--space-sm) var(--space-none) var(--space-none); font-size: var(--text-table); font-weight: var(--weight-bold); color: var(--color-muted); }
.work-group--late .work-group__title { color: var(--color-late); }
.work-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-none) var(--space-sm); padding: var(--space-xs) var(--space-none); border-top: 1px solid var(--color-border); }
.work-group__title + .work-item { border-top: 0; }
.work-item__body { min-width: 0; }
.work-item__what { font-size: var(--text-table); font-weight: var(--weight-bold); line-height: 1.3; }
.work-item__who { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--color-muted); font-size: var(--text-footnote); line-height: 1.35; overflow-wrap: anywhere; }
.work-item__who a { color: var(--color-primary); }
.work-item__due { font-variant-numeric: tabular-nums; white-space: nowrap; }
.work-item > .work-item__due { display: none; }
.work-item--late .work-item__due { color: var(--color-late); font-weight: var(--weight-bold); }
.work-item .btn { white-space: nowrap; min-height: var(--touch); padding-inline: var(--space-sm); }
@media (max-width: 22.5rem) {
  .work-item .btn { white-space: normal; max-width: 7.5rem; text-align: center; line-height: 1.2; }
  .home-head > div { flex: none; }
  .home-head .btn--cta { white-space: normal; text-align: center; line-height: 1.2; }
}
.work-item__btn-short { display: none; }
@media (max-width: 720px) {
  .work-item__btn-full { display: none; }
  .work-item__btn-short { display: inline; }
}
.work-group__more { display: flex; align-items: center; min-height: var(--touch); border-top: 1px solid var(--color-border); font-size: var(--text-table); font-weight: var(--weight-semibold); }
.queue-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2xs) var(--space-sm); padding: var(--space-xs) var(--space-none); border-top: 1px solid var(--color-border); }
.queue-row:first-child { border-top: 0; }
.queue-row__title { font-size: var(--text-table); line-height: 1.3; }
.queue-row__phrase { margin: var(--space-none); color: var(--color-muted); font-size: var(--text-footnote); line-height: 1.35; }
.queue-row__count { min-width: 2rem; text-align: right; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.queue-row--empty .queue-row__count { grid-column: 2 / -1; font-weight: var(--weight-regular); color: var(--color-muted); }
.queue-row .btn { white-space: nowrap; min-height: var(--touch); padding-inline: var(--space-sm); }
.home-links { display: flex; flex-wrap: wrap; gap: var(--space-none) var(--space-xl); margin-top: var(--space-xs); font-size: var(--text-table); }
.home-links a { display: inline-flex; align-items: center; min-height: var(--touch); }
/* Меню дел: без JS это ряд действий; с JS — всплывающее, без изменения сетки. */
.reminder-actions:not(.is-enhanced) { display: contents; }
.reminder-actions:not(.is-enhanced) .ui-state__fallback { display: none; }
.reminder-actions:not(.is-enhanced) > .ui-copy-menu { display: flex; flex-wrap: wrap; min-width: 0; padding: 0; border: 0; gap: var(--space-xs); }
.reminder-actions .ui-copy-menu .btn { width: auto; }
.reminder-actions:not(.is-enhanced) > .ui-copy-menu a { color: var(--color-primary); text-decoration: underline; }
@media (max-width: 720px) {
  .my-tasks__row:has(.reminder-actions:not(.is-enhanced)) { grid-template-columns: minmax(0, 1fr); }
  .my-tasks__row:has(.reminder-actions:not(.is-enhanced)) .my-tasks__controls { flex-wrap: wrap; justify-content: flex-start; }
  .my-tasks__controls:has(.reminder-actions.is-enhanced > [data-row-action-menu]:not([hidden])) { flex-wrap: nowrap; }
  .my-tasks__controls .reminder-actions.is-enhanced { display: inline-flex; width: auto; flex: none; }
  .my-tasks__controls .reminder-actions.is-enhanced > .ui-copy-menu { position: fixed; width: max-content; min-width: 0; max-width: calc(100vw - var(--space-xl)); margin: 0; box-shadow: var(--shadow-popup); }
}
.my-tasks__due-inline { display: none; }
@media (max-width: 720px) {
  .home-head .btn--cta { padding-inline: var(--space-sm); font-size: var(--text-table); box-shadow: none; }
  .my-tasks { margin: var(--space-sm) var(--space-none) var(--space-md); }
  .my-tasks__heading { gap: var(--space-none) var(--space-xs); margin-bottom: var(--space-none); }
  .my-tasks__heading .task-navigation__link { font-size: var(--text-table); }
  .my-tasks__heading h2 { font-size: var(--text-h3); }
  .my-tasks__heading .ui-actions { display: contents; }
  .my-tasks__heading .task-navigation__link:first-child { margin-left: auto; }
  .my-tasks .quick-task { margin-top: var(--space-none); }
  .my-tasks .quick-task__more { margin-top: var(--space-xs); min-height: var(--touch); }
  .my-tasks .quick-task { margin-bottom: var(--space-xs); }
  .my-tasks .quick-task__row input { min-height: var(--touch); }
  .my-tasks__list { padding-inline: var(--space-sm); }
  .my-tasks__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-none) var(--space-sm); padding: var(--space-2xs) var(--space-none); }
  .my-tasks__body { flex-basis: auto; }
  .my-tasks__body strong { font-size: var(--text-table); line-height: 1.3; }
  .my-tasks__body .ui-footnote { margin: var(--space-none); }
  .my-tasks__controls { width: auto; justify-content: flex-end; gap: var(--space-none); }
  .my-tasks__controls .my-tasks__due { display: none; }
  .my-tasks__controls .btn { padding-inline: var(--space-sm); }
  .my-tasks__controls .row-actions__trigger { font-size: 0; min-width: var(--touch); justify-content: center; padding-inline: var(--space-none); }
  .my-tasks__controls .row-actions__trigger svg { width: 1.125rem; height: 1.125rem; }
  .my-tasks__controls { gap: var(--space-xs); }
  .my-tasks__due-inline { display: inline; }
}
@media (min-width: 721px) {
  .home-head__date { display: block; }
  .home-block > h2 { font-size: var(--text-h2); }
  .work-list, .queue-list { padding-inline: var(--space-lg); }
  /* Общая сетка строк главной: срок и кнопка — колонками одной ширины во всех блоках, кнопки одной ширины. */
  .work-list, .queue-list { --home-due-col: 4.5rem; --home-action-col: 11rem; }
  .work-item { grid-template-columns: minmax(0, 1fr) var(--home-due-col) var(--home-action-col); gap: var(--space-none) var(--space-md); padding: var(--space-sm) var(--space-none); }
  .work-item > .btn, .queue-row > .btn { justify-self: stretch; justify-content: center; }
  .work-item > .work-item__due { display: block; text-align: right; font-size: var(--text-table); color: var(--color-muted); }
  .work-item--late > .work-item__due { color: var(--color-late); }
  .work-item__due--inline { display: none; }
  .work-item .btn, .queue-row .btn { min-height: 1.875rem; padding-inline: var(--space-button-compact-x); }
  .queue-row { grid-template-columns: minmax(0, 1fr) var(--home-due-col) var(--home-action-col); padding: var(--space-sm) var(--space-none); gap: var(--space-2xs) var(--space-md); }
}
@media (min-width: 721px) and (pointer: coarse) {
  .work-item .btn, .queue-row .btn { min-height: var(--touch); }
}

/* Метка сохранённой заявки: дата целиком, высота определяется содержимым. */
.crm-missing-label { display: block; font-size: var(--text-footnote); color: var(--color-muted); }
.crm-missing-label__date { white-space: nowrap; }

/* Неполный итог — предупреждение; раскрытие сохраняет штатные фокус и касание. */
.ui-expand--warning { background: var(--color-warning-bg); border: 0; box-shadow: none; }
.ui-expand--warning > summary { color: var(--color-warning); flex-wrap: nowrap; align-items: flex-start; }
.ui-expand--warning > summary:hover { background: var(--color-warning-bg); }
.ui-expand--warning .ui-expand__icon { color: var(--color-warning); background: var(--color-warning-bg); }

/* Выбранные документы читаются по одному, итог — отдельной строкой. */
.file-picker__item, .file-picker__count { display: block; }
.file-picker__count { margin-top: var(--space-xs); font-weight: var(--weight-semibold); }

/* Подсказки заполнения формы: список лежит поверх полей, под полем стоит пояснение или состояние. */
.search-picker__input { position: relative; }
/* Список всегда лежит поверх полей под своим; --picker-room (search.js) — видимая высота под полем. */
.search-picker--fill { --picker-room: 21.25rem; }
/* Пояснение и строка состояния делят одну ячейку: текст меняется, а поля ниже не сдвигаются. */
.search-picker__note { display: grid; }
.search-picker__note > * { grid-area: 1 / 1; }
.search-picker__hint[data-quiet] { visibility: hidden; }
.search-picker--fill .search-picker__options { width: 100%; max-height: min(21.25rem, var(--picker-room)); overscroll-behavior: contain; }
.search-picker--fill [role=option] { min-height: var(--touch); white-space: normal; }
.search-picker__options .ui-footnote { margin: 0; padding: var(--space-xs) var(--space-sm); }

/* Текущий вариант: фон системы и контрастная рамка видны без наведения мыши. */
.search-picker__options a[aria-selected=true] { background: var(--color-active-bg); outline: 2px solid var(--color-primary); outline-offset: -2px; }
.search-picker__limit { position: sticky; top: 0; margin: 0; padding: var(--space-xs) var(--space-sm); font-size: var(--text-footnote); color: var(--color-muted); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
[data-phone-notice] .ui-callout { margin-top: var(--space-xs); }

/* Компактные категории сохраняют признак просрочки и выбранное состояние. */
.filter-chip--danger, .filter-chip--danger[aria-current="page"] { color: var(--color-danger); background: var(--color-danger-bg); border-color: var(--color-danger); }
.filter-chip--danger.is-active { box-shadow: var(--shadow-danger-active); }
.home-filter__summary { display: block; margin-bottom: var(--space-sm); }

/* Метки остаются в одном экземпляре; на телефоне виды дел раскрываются по запросу. */
.filter-chip--danger.is-active, .filter-chip--danger.is-active[aria-current="page"] { background: var(--color-danger); color: var(--color-primary-text); }
.home-filter__summary { color: var(--color-text); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.home-kinds__desktop-title { display: none; }
.home-kinds__title { min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-kinds__overdue { color: var(--color-danger); font-size: var(--text-footnote); white-space: nowrap; }
.home-kinds > summary { flex-wrap: nowrap; gap: var(--space-2xs); padding-inline: var(--space-xs); font-size: var(--text-sm); }
.home-kinds > summary > .ui-expand__icon { width: var(--space-md); height: var(--space-md); }
.home-kinds__body .pill-row { margin: var(--space-none); }
@media (max-width: 719.98px) {
  .home-kinds:not([open]) + .home-kinds__body { display: none; }
  .home-kinds[open] { margin-bottom: var(--space-none); }
  .home-kinds__body { background: var(--color-surface); border-radius: var(--radius); }
}
@media (min-width: 720px) {
  .home-kinds__desktop-title { display: block; }
  .home-kinds { display: none; }
  .home-kinds__body { padding: var(--space-none); }
}
.home-kinds__body .filter-chip [data-live-count] { flex: none; }
.home-kinds__body .filter-chip .ui-counter { white-space: nowrap; }
/* Пояснение нарушенной связи — отдельная полная строка, не колонка имени. */
.payment-day-table tr.payment-day-table__has-notice > td { border-bottom: 0; }
.payment-day-table tr.payment-day-table__notice > td { grid-column: 2 / -1; white-space: normal; padding-top: 0; }
.payment-day-table tr.payment-day-table__notice > td.payment-day-table__notice-gap { grid-column: 1; }
.payment-day-table__notice .ui-callout { margin: 0; }
.payment-day-table__notice .ui-footnote { margin: 0; }
.payment-day-table__notice .ui-footnote + .ui-callout { margin-top: var(--space-xs); }
.payment-day-table td.payment-day-table__money--excluded .num-key { color: var(--color-muted); font-weight: var(--weight-regular); }
@container (width < 64rem) {
  .payment-day-table tr.payment-day-table__has-notice { border-bottom: 0; }
  .payment-day-table tr.payment-day-table__notice { padding-top: 0; }
  .payment-day-table tr.payment-day-table__notice > td { flex: 1 1 100%; }
  .payment-day-table tr.payment-day-table__notice > td.payment-day-table__notice-gap { display: none; }
  .payment-day-table tr.payment-day-table__has-notice td.payment-day-table__money { flex: 0 0 auto; }
}

.payment-day-table td.payment-day-table__notice-meta { display: none; }
@container (width < 64rem) {
  .payment-day-table td.payment-day-table__notice-meta { display: block; flex: 1 1 100%; order: 1; color: var(--color-muted); font-size: var(--text-sm); }
}