/* tokens.css — токены дизайнера: docs/design/etap-1a-ekrany.md, Приложение А (перенесено дословно, T16).
   Бренд бизнеса позже переопределит значения, имена остаются. Правка — только через дизайнера. */
/* Контраст посчитан по формуле WCAG 2.2 (относительная яркость sRGB). Фоны: light bg #F4F4F5, surface #FFFFFF; dark bg #18181B, s1 #27272A, s2 #2E2E33 */
:root {
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-h1: 600 24px/30px var(--font-family);      /* заголовок экрана, крупные числа */
  --font-title: 600 20px/26px var(--font-family);   /* заголовок блока, название в шапке */
  --font-body: 400 16px/24px var(--font-family);    /* основной, текст поста */
  --font-button: 600 16px/24px var(--font-family);
  --font-caption: 400 14px/20px var(--font-family); /* подписи, подсказки, чипы (600) */
  --font-small: 400 12px/16px var(--font-family);   /* только подписи нижнего меню и значок «Скоро» */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 8px; --radius-md: 12px; --radius-pill: 999px;
  --size-target: 48px; --size-header: 56px; --size-header-desktop: 64px; --size-tabbar: 64px;
  --size-actionbar: 80px; --size-sidebar: 240px; --width-text: 640px; --width-content: 976px;
  --focus-width: 2px; --focus-offset: 2px;

  /* Светлая тема */
  --color-bg: #F4F4F5;
  --color-surface-1: #FFFFFF;            /* карточки, шапка, панели */
  --color-surface-2: #FFFFFF;            /* шторки, диалоги — с --shadow-raised */
  --color-text-primary: #18181B;         /* 17.72:1 на #FFF · 16.12:1 на bg */
  --color-text-secondary: #52525B;       /* 7.73:1 на #FFF · 7.03:1 на bg */
  --color-border: #71717A;               /* рамки полей и чипов: 4.83:1 на #FFF · 4.40:1 на bg (≥3:1) */
  --color-divider: #E4E4E7;              /* декоративный, норма не применяется */
  --color-primary: #1D4ED8;              /* кнопка/ссылка/статус revise: 6.70:1 на #FFF · 6.10:1 на bg */
  --color-primary-hover: #1E40AF;        /* белый на нём 8.72:1 */
  --color-on-primary: #FFFFFF;           /* 6.70:1 на primary */
  --color-success: #15803D;              /* текст/иконка: 5.02:1 на #FFF · 4.56:1 на bg */
  --color-warning: #B45309;              /* иконка/рамка/текст draft: 5.02:1 на #FFF · 4.57:1 на bg · 4.51:1 на warning-surface */
  --color-warning-surface: #FEF3C7;      /* фон плашки паузы; text-primary на нём 15.91:1 */
  --color-danger: #B91C1C;               /* 6.47:1 на #FFF · 5.89:1 на bg */
  --color-on-danger: #FFFFFF;            /* 6.47:1 */
  --color-focus: #1D4ED8;                /* 6.70:1 на #FFF · 6.10:1 на bg */
  --color-disabled-bg: #E4E4E7;
  --color-disabled-text: #52525B;        /* 6.09:1 (неактивные — исключение 1.4.3, но держим ≥4.5) */
  --color-test-bg: #18181B; --color-test-text: #FFFFFF;   /* чип «Тест» 17.72:1 */
  --color-scrim: rgba(24, 24, 27, 0.6);
  --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #18181B;
    --color-surface-1: #27272A;
    --color-surface-2: #2E2E33;          /* светлее к верху; тени не используем */
    --color-text-primary: #F4F4F5;       /* 16.12:1 bg · 13.55:1 s1 · 12.29:1 s2 */
    --color-text-secondary: #A1A1AA;     /* 6.91:1 bg · 5.81:1 s1 · 5.27:1 s2 */
    --color-border: #8B8B94;             /* 5.25:1 bg · 4.41:1 s1 · 4.00:1 s2 */
    --color-divider: #3F3F46;            /* декоративный */
    --color-primary: #8AB4F8;            /* приглушённый: 8.41:1 bg · 7.07:1 s1 · 6.41:1 s2 */
    --color-primary-hover: #AECBFA;      /* #18181B на нём 10.73:1 */
    --color-on-primary: #18181B;         /* 8.41:1 */
    --color-success: #81C995;            /* 9.05:1 bg · 7.60:1 s1 · 6.90:1 s2 */
    --color-warning: #FDD663;            /* 12.63:1 bg · 10.62:1 s1 · 9.09:1 на warning-surface */
    --color-warning-surface: #3D3112;    /* text-primary на нём 11.60:1 */
    --color-danger: #F28B82;             /* 7.42:1 bg · 6.23:1 s1 · 5.65:1 s2 */
    --color-on-danger: #18181B;          /* 7.42:1 */
    --color-focus: #8AB4F8;              /* 8.41:1 bg · 7.07:1 s1 */
    --color-disabled-bg: #3F3F46;
    --color-disabled-text: #A1A1AA;      /* 4.08:1 — исключение 1.4.3 для неактивных; подсказка рядом — secondary на s1 5.81:1 */
    --color-test-bg: #F4F4F5; --color-test-text: #18181B;   /* 16.12:1 */
    --color-scrim: rgba(0, 0, 0, 0.6);
    --shadow-raised: none;
  }
}

/* app.css — каркас и компоненты редактора 2.0, этап 1а (T16). Спецификация: docs/design/etap-1a-ekrany.md §0.
   Mobile-first: база 360 px (на 320 только перестраивается), компьютер — от 64em (1024 px).
   Цвета и размеры — только токены tokens.css. Здесь — несколько производных токенов вёрстки (толщины линий,
   иконки, полосы): их нет в Приложении А, значения — из текста спецификации (полоса плашки 4 px и т. п.). */

:root {
  color-scheme: light dark;
  --line-1: 1px;            /* рамки полей, чипов, разделители */
  --line-2: 2px;            /* рамка ошибки, текущий день, пунктир «Тест» */
  --line-4: 4px;            /* полоса слева у плашки паузы и сводки ошибок */
  --size-icon: 24px;
  --size-icon-sm: 16px;
  --size-row: 56px;         /* строка-ссылка на Главной */
  --size-tab-min: 56px;     /* вкладки постов */
  --size-sheet-chat: 400px; /* панель чата на компьютере */
  --width-vhod: 400px;
  --width-zakaz-form: 560px;
  --shadow-top: 0 -1px 0 var(--color-divider);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--size-header) + var(--space-4));
  scroll-padding-bottom: calc(var(--size-tabbar) + var(--space-8));
}

body {
  margin: 0;
  font: var(--font-body);
  color: var(--color-text-primary);
  background: var(--color-bg);
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, fieldset { margin: 0; }
h1 { font: var(--font-h1); }
h2 { font: var(--font-title); }
h3 { font: var(--font-button); }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }

a { color: var(--color-primary); text-underline-offset: 0.2em; }
a:hover { color: var(--color-primary-hover); }

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}
main:focus, [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

.ic { flex: none; width: var(--size-icon); height: var(--size-icon); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--space-2); top: calc(-1 * var(--size-header) * 2);
  z-index: 30; padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2); color: var(--color-primary);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-raised);
}
.skip:focus { top: var(--space-2); }

[hidden] { display: none !important; }

/* ---------- Шапка ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--color-surface-1);
  border-bottom: var(--line-1) solid var(--color-divider);
}
.topbar__in {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--size-header);
  padding: 0 var(--space-2) 0 var(--space-4);
}
.topbar__title {
  flex: 1; min-width: 0;
  font: var(--font-title);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__back {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--size-target);
  margin-left: calc(-1 * var(--space-2)); padding: 0 var(--space-2);
  font: var(--font-button); color: var(--color-primary); text-decoration: none;
}
.topbar__back span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__pause { flex: none; }
.topbar__chat {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-width: var(--size-target); min-height: var(--size-target);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font: var(--font-button); color: var(--color-primary); text-decoration: none;
}

/* ---------- Раскладка ---------- */
.shell__main { min-width: 0; }
.main {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4);
  max-width: var(--width-content);
}
.main--narrow { max-width: calc(var(--width-text) + 2 * var(--space-4)); }
.sidebar { display: none; }
.page--tabbar { padding-bottom: calc(var(--size-tabbar) + env(safe-area-inset-bottom, 0px)); }

/* ---------- Плашка паузы, флеш, уведомления ---------- */
.pause-banner {
  display: flex; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-warning-surface);
  border-left: var(--line-4) solid var(--color-warning);
}
.pause-banner__ic { color: var(--color-warning); }
.pause-banner__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pause-banner__text { font: var(--font-button); }
.pause-banner__since { font: var(--font-caption); }

.flash {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin: var(--space-4) var(--space-4) 0;
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  background: var(--color-surface-1);
  border: var(--line-1) solid var(--color-border);
  border-radius: var(--radius-md);
}
.flash__ic { color: var(--color-primary); margin-top: 0; }
.flash__text { flex: 1; min-width: 0; padding-top: 0; }
.flash__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--size-target); height: var(--size-target); margin: calc(-1 * var(--space-3)) 0;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary);
  cursor: pointer;
}

.notice {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
}
.notice .ic { width: var(--size-icon); height: var(--size-icon); }
.notice--warning { background: var(--color-warning-surface); border-left: var(--line-4) solid var(--color-warning); }
.notice--warning .ic { color: var(--color-warning); }

/* ---------- Карточки, строки ---------- */
.card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-1);
  border-radius: var(--radius-md);
}
.card__title { font: var(--font-title); }
.card__sub { font: var(--font-button); }
.card__foot { display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-target); }
.card--test { border: var(--line-2) dashed var(--color-warning); }
.lead { color: var(--color-text-secondary); }
.caption { font: var(--font-caption); color: var(--color-text-secondary); }
.empty { color: var(--color-text-secondary); }
.pre { white-space: pre-line; }
.divider { width: 100%; margin: var(--space-1) 0; border: 0; border-top: var(--line-1) solid var(--color-divider); }
.link { display: inline-flex; align-items: center; min-height: var(--size-target); }

.rows { display: flex; flex-direction: column; }
.rows > li + li { border-top: var(--line-1) solid var(--color-divider); }
.row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  min-height: var(--size-row);
  padding: var(--space-2) 0;
  color: var(--color-text-primary); text-decoration: none;
}
.row:hover { color: var(--color-text-primary); }
.row:hover .row__text { text-decoration: underline; }
.row__text { flex: 1 1 12em; min-width: 0; }
.row__text--clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.row__dot { color: var(--color-danger); width: var(--size-icon-sm); height: var(--size-icon-sm); }
.row__chev { color: var(--color-text-secondary); margin-left: auto; }

/* ---------- Чипы ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  max-width: 100%;
  padding: 0 var(--space-2);
  border: var(--line-1) solid currentColor; border-radius: var(--radius-pill);
  font: var(--font-caption); font-weight: 600;
  vertical-align: middle;
}
.chip .ic { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.chip--warning { color: var(--color-warning); }
.chip--primary { color: var(--color-primary); }
.chip--success { color: var(--color-success); }
.chip--danger { color: var(--color-danger); }
.chip--secondary { color: var(--color-text-secondary); }
.chip--soon { font: var(--font-small); font-weight: 600; color: var(--color-text-secondary); padding: 0 var(--space-2); }
.chip--test { font: var(--font-small); font-weight: 600; background: var(--color-test-bg); color: var(--color-test-text); border-color: var(--color-test-bg); }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--size-target);
  padding: var(--space-3) var(--space-4);
  border: var(--line-1) solid transparent; border-radius: var(--radius-sm);
  font: var(--font-button); text-align: center; text-decoration: none;
  cursor: pointer;
}
.btn .ic { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.btn--block { width: 100%; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn--secondary { background: var(--color-surface-1); color: var(--color-primary); border-color: var(--color-border); }
.btn--secondary:hover { color: var(--color-primary-hover); border-color: var(--color-primary); }
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover {
  background: var(--color-disabled-bg); color: var(--color-disabled-text); border-color: var(--color-disabled-bg);
  cursor: not-allowed;
}
.btn[aria-busy="true"] { cursor: progress; }
form > .btn, .card > form { align-self: flex-start; }
.card > form { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }

.hint { font: var(--font-caption); color: var(--color-text-secondary); }
.hint--lock { display: flex; gap: var(--space-1); align-items: flex-start; }
.hint--lock .ic { width: var(--size-icon-sm); height: var(--size-icon-sm); margin-top: var(--space-1); }

/* ---------- Формы ---------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field > label, .field__label { font: var(--font-button); }
input[type="text"], input[type="password"], input[type="number"], textarea {
  width: 100%; min-height: var(--size-target);
  padding: var(--space-3);
  border: var(--line-1) solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface-1); color: var(--color-text-primary);
  font: var(--font-body);
}
textarea { min-height: calc(var(--size-target) * 2.5); resize: vertical; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
[aria-invalid="true"] { border-color: var(--color-danger); box-shadow: inset 0 0 0 var(--line-1) var(--color-danger); }
.field-error { display: flex; gap: var(--space-1); align-items: flex-start; color: var(--color-danger); font: var(--font-button); }
.field-error .ic { width: var(--size-icon-sm); height: var(--size-icon-sm); margin-top: var(--space-1); }
.counter { font: var(--font-caption); color: var(--color-text-secondary); text-align: right; }
.counter--over { color: var(--color-danger); font-weight: 600; }

.check, .radio { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-target); }
.check input, .radio input { flex: none; width: var(--size-icon); height: var(--size-icon); margin: 0; accent-color: var(--color-primary); }
.check label, .radio label { flex: 1; padding: var(--space-3) 0; cursor: pointer; }
.radios { display: flex; flex-direction: column; }

.err-summary {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface-1);
  border: var(--line-2) solid var(--color-danger); border-left-width: var(--line-4);
  border-radius: var(--radius-md);
}
.err-summary__title { display: flex; gap: var(--space-2); align-items: center; color: var(--color-danger); }
.err-summary__list { display: flex; flex-direction: column; gap: var(--space-1); }
.err-summary__list a { color: var(--color-danger); font-weight: 600; display: inline-flex; min-height: var(--size-target); align-items: center; }
.err-list { padding-left: var(--space-6); list-style: disc; }

/* ---------- Нижнее меню (360) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--color-surface-1);
  box-shadow: var(--shadow-top);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar__list { display: grid; grid-template-columns: repeat(4, 1fr); }
.tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: var(--size-tabbar); padding: var(--space-1);
  font: var(--font-small); color: var(--color-text-secondary); text-decoration: none; text-align: center;
}
.tab .ic { padding: 0; border-radius: var(--radius-pill); }
.tab:hover { color: var(--color-text-primary); }
.tab.is-current { color: var(--color-primary); font-weight: 600; }
.tab.is-current .ic { background: color-mix(in srgb, var(--color-primary) 18%, transparent); box-sizing: content-box; padding: 0 var(--space-3); }
.tab__soon {
  position: absolute; top: var(--space-1); left: calc(50% + var(--space-2));
  padding: 0 var(--space-1);
  border: var(--line-1) solid var(--color-text-secondary); border-radius: var(--radius-pill);
  background: var(--color-surface-1); color: var(--color-text-secondary);
  font: var(--font-small); font-weight: 600;
}

/* ---------- Подвал: «Чат» и «Все разделы» ---------- */
.footer { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); max-width: var(--width-content); }
.chat form { display: flex; flex-direction: column; gap: var(--space-3); }
.menu-list { display: flex; flex-direction: column; }
.menu-item {
  display: grid; grid-template-columns: var(--size-icon) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  width: 100%; min-height: var(--size-target);
  padding: var(--space-2) var(--space-2);
  border: 0; border-radius: var(--radius-sm); background: transparent;
  font: var(--font-body); color: var(--color-text-primary); text-decoration: none; text-align: left;
  cursor: pointer;
}
.menu-item .ic { color: var(--color-text-secondary); }
.menu-item:hover { color: var(--color-text-primary); background: var(--color-bg); }
.menu-item.is-current { color: var(--color-primary); font-weight: 600; }
.menu-item.is-current .ic { color: var(--color-primary); }
.menu-item__label { overflow-wrap: normal; }
.menu-item--logout { margin-top: var(--space-2); }
.vse-razdely__logout { border-top: var(--line-1) solid var(--color-divider); }

/* ---------- Шторки (только с JS: <dialog>, app.js) ---------- */
.sheet {
  position: fixed; inset: auto 0 0 0;
  width: 100%; max-width: none; max-height: 85vh; margin: 0;
  padding: var(--space-4); overflow: auto;
  border: 0; border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-surface-2); color: var(--color-text-primary);
  box-shadow: var(--shadow-raised);
}
.sheet::backdrop { background: var(--color-scrim); }
.sheet__close { display: flex; justify-content: flex-end; margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0; }
.sheet__close button {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--size-target); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: transparent;
  font: var(--font-button); color: var(--color-primary); cursor: pointer;
}
.sheet .card { padding: 0; background: transparent; }

/* ---------- Вход ---------- */
.main--vhod { max-width: calc(var(--width-vhod) + 2 * var(--space-4)); margin: 0 auto; padding-top: var(--space-12); }
.vhod__sub { color: var(--color-text-secondary); }
.vhod__brand { font: var(--font-caption); color: var(--color-text-secondary); text-align: center; }

/* ---------- Главная ---------- */
.home { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.home__free { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-1); }
.home__num { font: var(--font-h1); }
.state { display: flex; align-items: center; gap: var(--space-2); font: var(--font-button); }
.state--success { color: var(--color-success); }
.state--warning { color: var(--color-warning); }
.systems li { display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-target); padding: var(--space-1) 0; }
.systems li > span:not(.chip) { flex: 0 1 auto; min-width: 0; }
.systems__ic { color: var(--color-text-secondary); }

/* ---------- Посты (заготовка) ---------- */
.tabs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.tabs__tab {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--size-tab-min); height: 100%; padding: var(--space-2) var(--space-3);
  border: var(--line-1) solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface-1); color: var(--color-text-primary); text-decoration: none;
  font: var(--font-caption); font-weight: 600;
}
.tabs__tab.is-current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.empty-card { align-items: flex-start; }

/* ---------- «Скоро» ---------- */
.soon { display: flex; flex-direction: column; gap: var(--space-3); }
.soon__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------- Заказ ---------- */
.zakaz { display: flex; flex-direction: column; gap: var(--space-4); }
.stepper { display: grid; grid-template-columns: var(--size-target) minmax(0, 1fr) var(--size-target); gap: var(--space-2); }
.stepper:not(:has(.stepper__btn:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
.stepper__btn { padding: 0; }
.stepper__btn .ic { width: var(--size-icon); height: var(--size-icon); }
.stepper input { text-align: center; font: var(--font-title); }
.srok { display: flex; flex-direction: column; gap: var(--space-2); }
.parts { display: flex; flex-direction: column; gap: var(--space-1); }
.parts__n { font-weight: 600; }
.zakaz__when > .btn { align-self: flex-start; }
.actionbar {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; flex-direction: column; gap: var(--space-2);
  min-height: var(--size-actionbar);
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-4);
  background: var(--color-surface-1);
  box-shadow: var(--shadow-top);
}

/* ---------- Заявка ---------- */
.part-list { display: flex; flex-direction: column; gap: var(--space-4); }
.part { gap: var(--space-2); }
.part__title { font: var(--font-button); }
.part__srok { font: var(--font-title); }
.part__note { color: var(--color-danger); }

/* ---------- Низкое окно: 200 % масштаба, горизонтальный телефон (дизайн §0) ---------- */
@media (max-height: 479px) {
  .topbar, .actionbar { position: static; }
  .tabbar { position: static; }
  .page--tabbar { padding-bottom: 0; }
  html { scroll-padding: 0; }
}

/* ---------- Компьютер (дизайн «На 1280») ---------- */
@media (min-width: 64em) {
  html { scroll-padding-top: calc(var(--size-header-desktop) + var(--space-4)); scroll-padding-bottom: var(--space-4); }
  .topbar__in { min-height: var(--size-header-desktop); padding: 0 var(--space-6); }
  .shell {
    display: grid; grid-template-columns: var(--size-sidebar) minmax(0, 1fr);
    /* фон колонки меню на всю высоту страницы, даже когда сама колонка короче */
    background: linear-gradient(to right, var(--color-surface-1) calc(var(--size-sidebar) - var(--line-1)),
      var(--color-divider) calc(var(--size-sidebar) - var(--line-1)) var(--size-sidebar), transparent var(--size-sidebar));
  }
  .sidebar {
    position: sticky; top: var(--size-header-desktop);
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4);
    height: calc(100vh - var(--size-header-desktop)); overflow: auto;
    padding: var(--space-4) var(--space-3);
  }
  .sidebar .menu-item { gap: var(--space-2); }
  .sidebar__logout { border-top: var(--line-1) solid var(--color-divider); padding-top: var(--space-2); }
  .main, .footer { padding: var(--space-8); }
  .main { padding-bottom: var(--space-4); }
  .footer { padding-top: 0; }
  .flash { margin: var(--space-8) var(--space-8) 0; max-width: var(--width-content); }
  .tabbar, .vse-razdely { display: none; }
  .page--tabbar { padding-bottom: 0; }
  .chat { max-width: var(--width-text); }

  .main--vhod { padding-top: calc(var(--space-12) * 2); }

  .home { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .home > * { grid-column: span 12; }
  .home__action { grid-column: span 8; }
  .home__posts { grid-column: span 4; }
  .home--no-action .home__posts { grid-column: span 6; }
  .home__work, .home__agent, .home__test { grid-column: span 6; }

  .tabs__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .posty__order { width: auto; align-self: flex-start; }
  .main--wide > p:has(.posty__order) { display: flex; }

  .zakaz {
    display: grid; grid-template-columns: minmax(0, var(--width-zakaz-form)) minmax(0, 1fr);
    column-gap: var(--space-8); row-gap: var(--space-4); align-items: start;
    grid-template-areas: "count when" "comment when" "comment submit";
    grid-template-rows: auto auto 1fr;
  }
  .zakaz__count { grid-area: count; }
  .zakaz__comment { grid-area: comment; }
  .zakaz__when { grid-area: when; }
  .zakaz__submit { grid-area: submit; position: static; margin: 0; padding: 0; min-height: 0; background: none; box-shadow: none; }

  .sheet--chat {
    inset: 0 0 0 auto; width: var(--size-sheet-chat); max-height: none; height: 100%;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}