/* Раскладка сайта поверх дизайн-системы: tokens.css → bundle.css → этот файл.
   Только раскладка и текст документов, и только на токенах: своих цветов и отдельных
   правил «для тёмной темы» здесь нет (web/README.md, «Дизайн»; тест test_pages.py). */

/* Компоненты задают display сами — без этого атрибут hidden их не прятал бы,
   и баннер «Нет связи» висел бы на каждой странице. */
[hidden] { display: none !important; }

/* Поля страницы: space-4 на телефоне, space-6 с 600px, space-8 с 960px; колонка
   не шире content-max и стоит по центру. Безопасные зоны телефона (вырез, полоска
   «домой») — не уже поля. */
.app-page {
  --gutter: var(--space-4);
  padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px))
           calc(var(--space-8) + env(safe-area-inset-bottom, 0px))
           max(var(--gutter), env(safe-area-inset-left, 0px));
}
@media (min-width: 600px) { .app-page { --gutter: var(--space-6); } }
@media (min-width: 960px) { .app-page { --gutter: var(--space-8); } }
.app-page > * { max-width: var(--content-max); margin-inline: auto; }

/* Название — шрифтом: Manrope 700, цвет ink (README дизайн-системы, «Логотип»). */
.app-header { display: flex; align-items: center; min-height: var(--tap-min); padding-block: var(--space-3); }
.app-brand { font-weight: 700; color: var(--ink); text-decoration: none; }

.app-offline { position: sticky; top: var(--space-2); z-index: 10; margin-bottom: var(--space-4); }

.app-title { margin: var(--space-2) 0 var(--space-4); overflow-wrap: break-word; }
.app-nav { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }

/* Чипы на телефоне — лента с прокруткой вбок; с 600px переносятся на строки
   (описание Chip дизайн-системы). */
@media (min-width: 600px) { .sio-chips { flex-wrap: wrap; overflow: visible; } }

/* Чип-ссылка. Чип дизайн-системы — кнопка-фильтр, выбранный помечен aria-pressed;
   у ссылки на текущую страницу тот же смысл несёт aria-current="page" — и тот же вид. */
a.sio-chip { text-decoration: none; }
.sio-chip[aria-current="page"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); padding-left: var(--space-3); }
.sio-chip[aria-current="page"] .sio-icon { display: block; }

/* Текст документа (разметка — legal._render): заголовок раздела — heading, абзацы
   и списки — body. Оговорки набраны _курсивом_, а курсива в дизайн-системе нет —
   они второстепенным цветом ink-muted. */
.app-doc { overflow-wrap: break-word; }
.app-doc h2 { margin: var(--space-6) 0 var(--space-2); font: 600 18px/26px var(--font-sans); }
.app-doc h2:first-child { margin-top: 0; }
.app-doc p, .app-doc ul { margin: 0 0 var(--space-3); }
.app-doc ul { padding-left: var(--space-6); }
.app-doc li + li { margin-top: var(--space-1); }
.app-doc strong { font-weight: 600; }
.app-doc em { font-style: normal; color: var(--ink-muted); }

/* Экраны входа и регистрации: группа элементов с одним шагом между ними
   (README дизайн-системы, «Отступы»: внутри группы — space-3…4). */
.app-stack { display: grid; gap: var(--space-4); }
.app-stack--tight { gap: var(--space-3); }
.app-stack > p { margin: 0; }
.app-muted { color: var(--ink-muted); }
.app-eyebrow { margin: var(--space-2) 0 0; }
/* Главная кнопка шага прижата к низу экрана над безопасной зоной (README
   дизайн-системы, «Отступы, размеры, раскладка»). */
.app-dock {
  position: sticky; bottom: 0; z-index: 5; margin-top: var(--space-4);
  padding-block: var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
}
/* Пустое состояние: по центру — исключение из выравнивания влево (README
   дизайн-системы, «Типографика»), отступы space-12. */
.app-empty { display: grid; justify-items: center; gap: var(--space-3); padding-block: var(--space-12); text-align: center; }
.app-empty h2, .app-empty p { margin: 0; }
.app-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand); }
.app-empty__icon .sio-icon { width: 32px; height: 32px; }

.app-footer {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  margin-top: var(--space-8); padding-top: var(--space-4);
  border-top: 1px solid var(--line); color: var(--ink-muted);
}
.app-footer:empty { display: none; }

/* Запись (этап 2, шаг 2; `templates/book.html`). На большом экране выбор слева,
   календарь и время справа — функции те же, что в боте, вид удобнее. Дни и время —
   ссылки (`app/book.py`), поэтому выбранное отмечено aria-current и выглядит так же,
   как aria-pressed у кнопок дизайн-системы. */
.app-page--wide > * { max-width: 1040px; }
.app-book { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 960px) { .app-book { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.app-book__h { margin: var(--space-2) 0 0; }
a.sio-day, a.sio-slot { text-decoration: none; }
a.sio-slot { display: grid; place-items: center; }
.sio-day[aria-current="date"], .sio-slot[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.sio-day.is-off { color: var(--ink-disabled); font-weight: 400; cursor: default; }

/* «Мои записи» (этап 2, шаг 3). Статус записи в списке — значком под строками, а не
   справа: справа он сжимал текст записи в узкую колонку. Длинное название организации
   в выборе истории переносится, а не вылезает за экран. */
.app-list-badge { display: block; margin-top: var(--space-2); }
.app-orgs .sio-chip { white-space: normal; max-width: 100%; text-align: left; }

/* Уведомления на главной (этап 2, шаг 4): значок вида — над заголовком, ответы — под текстом. */
.app-note__head { margin-bottom: var(--space-2); }
.app-note__actions { margin-top: var(--space-3); }

/* Чат записи (этап 2, шаг 5). В дизайн-системе сообщений нет — простой блок на её токенах:
   чужое слева на поверхности, своё справа на мягком фирменном; текст хранит переносы строк
   и не вылезает за экран длинным словом. */
.app-chat { display: grid; gap: var(--space-3); }
.app-msg { max-width: 86%; justify-self: start; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.app-msg--mine { justify-self: end; background: var(--brand-soft); border-color: transparent; }
.app-msg__meta { display: block; margin-bottom: 2px; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.app-msg__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.app-msg__status { display: block; margin-top: 2px; text-align: right; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.app-chat__links { display: flex; justify-content: space-between; gap: var(--space-4); margin: 0; }

/* Предложение включить push (этап 2, шаг 6б): баннер дизайн-системы под кнопкой
   «Записаться» — с воздухом от неё; шаги для iPhone — нумерованный список внутри него. */
.app-push { margin-block: var(--space-4) var(--space-2); }
.app-stack > .app-push { margin-block: 0; }      /* в профиле расстояния держит сам столбец */
.app-push__steps { padding-left: 20px; display: grid; gap: 4px; }

/* Навигация (этап 3, шаг 1): страница оставляет ей место — снизу на телефоне, слева
   на компьютере, где она встаёт колонкой шириной 96px (bundle.css, .sio-nav--rail). */
.app-page--nav { padding-bottom: calc(var(--nav-h) + var(--space-8) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 960px) {
  .app-page--nav {
    padding-left: calc(96px + var(--gutter));
    padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  }
}
/* Пять вкладок (у сотрудника — с «Работой», с 15.10.2026): на телефоне на подпись приходится
   пятая часть ширины, и «Уведомления» переносилась по слогам. Подпись — одной строкой,
   при пяти вкладках — чуть мельче. */
.sio-nav__item { white-space: nowrap; overflow: hidden; }
.sio-nav:has(> .sio-nav__item:nth-child(5)) .sio-nav__item { font-size: 0.6875rem; letter-spacing: -0.01em; }
/* Абзац внутри карточки — без своих полей: поля даёт карточка. */
.app-flat { margin: 0; }
/* «Данные сохранены» в профиле — с воздухом до карточки под ним. */
.app-saved { margin-bottom: var(--space-4); }
/* Перечень «что произойдёт» на экране подтверждения и «что произошло» на итоге
   (confirm.html, revoked.html): поля — как у списков в документах. */
.app-points { margin: 0; padding-left: var(--space-6); }
.app-points li + li { margin-top: var(--space-1); }
/* Бонусная программа (refer.html): QR-код по центру карточки, ссылка под ним. Код всегда
   чёрный на белом — сканеру нужен контраст, а не цвета темы. */
.app-refer { display: grid; gap: var(--space-3); }
.app-qr { display: block; width: min(100%, 240px); height: auto; margin-inline: auto; border-radius: var(--radius-md); }
.app-refer__link { overflow-wrap: anywhere; text-align: center; font-weight: 600; user-select: all; }
/* Заявка в разделе «Работа» (work_org.html): строки записи вплотную, кнопки — с отступом
   от текста; форма «Принять» встаёт в ряд кнопок как кнопка. */
.app-request .sio-actions { margin-top: var(--space-3); }
.app-request .sio-actions form { display: contents; }
/* Календарь записей организации (work_cal.html; этап 4, шаг 2а). Отметка дня — точка под
   числом: есть записи, ждут ответа (жёлтая), отмена клиента (красная); выходной — серое число.
   У выбранного дня точка светлая — иначе её не видно на заливке. Подпись отметки для
   экранного диктора лежит в ссылке дня и скрыта с глаз (`app-sr`). */
.app-day--has::after, .app-day--ask::after, .app-day--off::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--brand);
}
.app-day--ask::after { background: var(--warning); }
.app-day--off::after { background: var(--danger); }
.app-day--rest { color: var(--ink-disabled); font-weight: 400; }
.sio-day[aria-current="date"]::after { background: var(--on-brand); }
.app-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.app-legend__dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--brand); vertical-align: middle; }
.app-legend__dot--ask { background: var(--warning); }
.app-legend__dot--off { background: var(--danger); }
/* Запись в списке дня: время слева столбцом, справа — услуга, клиент и значок статуса. */
.app-rec { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-3); align-items: start; }
.app-rec__time { font: 600 16px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
/* Заметки организации в карточке записи — с переносами строк, как их вводили. */
.app-pre { white-space: pre-line; overflow-wrap: anywhere; }
/* Текст согласия в форме нового клиента (work_client_new.html): мельче основного, в рамке,
   с прокруткой — форма под ним должна оставаться на виду. */
.app-consent { max-height: 280px; overflow-y: auto; font: 400 14px/20px var(--font-sans); }
.app-consent h2 { margin: 0 0 var(--space-2); font: 600 16px/24px var(--font-sans); }
.app-consent p { margin: 0 0 var(--space-2); }
.app-consent p:last-child { margin-bottom: 0; }
.app-error { color: var(--danger); }
/* Кнопка-форма внутри карточки (запрос номера в work_client.html): с отступом от текста. */
.app-form-inline { margin-top: var(--space-3); }

/* Вкладка «Уведомления» (`templates/inbox.html`): строка — ссылка на запись и под ней
   когда пришло и корзина. Отдельно от `sio-list`: в строке списка нет места для формы. */
.app-inbox__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.app-inbox__top > * { white-space: nowrap; }
.app-inbox { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.app-inbox__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg, 16px);
  padding: var(--space-3) var(--space-3) var(--space-1); }
.app-inbox__link { display: flex; gap: var(--space-3); align-items: center; color: inherit; text-decoration: none; }
.app-inbox__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.app-inbox__title { font-weight: 600; }
.app-inbox__sub { color: var(--ink-muted); font-size: 0.875rem; overflow-wrap: anywhere; }
.app-inbox__icon { flex: none; align-self: flex-start; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand); }
.app-inbox__icon--cancelled { color: var(--danger); }
.app-inbox__foot { display: flex; align-items: center; gap: var(--space-2); padding-left: 48px; }
.app-inbox__foot form { margin: 0 0 0 auto; }
.app-inbox__got { font-size: 0.75rem; color: var(--ink-muted); white-space: nowrap; }
.app-inbox__del { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--ink-muted); cursor: pointer; }
.app-inbox__del:hover, .app-inbox__del:focus-visible { background: var(--brand-soft); color: var(--ink); }
.app-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-inbox__sections { margin: 0; }
.app-inbox__item--msg { display: grid; gap: var(--space-2); padding-bottom: var(--space-1); }
.app-inbox__who, .app-inbox__text { margin: 0; }
.app-inbox__text { overflow-wrap: anywhere; }
.app-inbox__foot--msg { padding-left: 0; }