/* ═══════════════════════════════════════════════════════════════════
   РИТМ · таблица стилей нового интерфейса
   Бренд-бук «Редакция и учёт», решения владельца 24.08.2026:
     решения/2026-08-24-знак-это-имя.md
     решения/2026-08-24-стиль-редакция-и-учёт.md
   Канон и мерки: материалы/канвас/, материалы/РИТМ_БРЕНДБУК_24.08.html

   Файл собран с нуля. Старая таблица (css/ritm.css, 3 100 строк) не
   подключается: владелец 24.08.2026 — «старое удаляем, мы строим с нуля
   весь интерфейс как согласовали».
   ═══════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;
  /* материал */
  --лён:#E5E5DF; --лист:#FBFBF9; --лист-2:#F1F1EC;
  --чернила:#131715; --текст-2:#5E665F;
  --контур:#7F857A;            /* K 3,00 — границы интерактива */
  --волос:#DCDDD6;             /* K 1,08 — только декор */
  /* латунь: «здесь нужно ваше слово» */
  --латунь:#A98A54; --латунь-эл:#8F7241; --латунь-текст:#7A6133;
  /* состояние */
  --шалфей:#3F5F4C; --кирпич:#7B3327;
  /* гарнитуры */
  --серив:'Newsreader',Georgia,'Times New Roman',serif;
  --гротеск:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --моно:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --метка:'Jost','Century Gothic',sans-serif;
  /* движение: одна кривая на продукт */
  --мяг:cubic-bezier(.16,1,.3,1);
  --д-появление:900ms; --д-число:1200ms; --д-линия:2000ms;
  --д-переход:700ms; --д-ховер:450ms;
}
/* Зеркальная тёмная тема. ⭐ 25.08.2026: три токена не проходили на приподнятой
   поверхности (--лист-2) — контур 2,83 при норме 3,0 для элемента, шалфей 4,30 и
   кирпич 4,15 при норме 4,5 для текста. Значения подобраны расчётом до порога,
   а не на глаз: контур 3,00, шалфей 4,54, кирпич 4,61. */
:root[data-тема="стекло"]{
  --лён:#0D1310; --лист:#141C18; --лист-2:#1A241F;
  --чернила:#EAEBE6; --текст-2:#8E968F;
  --контур:#636E66; --волос:#26302B;
  --латунь:#A98A54; --латунь-эл:#C9AE7E; --латунь-текст:#C9AE7E;
  --шалфей:#70907D; --кирпич:#BF776B;
}

/* ⚠️ 29.08.2026, найдено диагностикой бэк-офиса и подтверждено на продукте.
   Смена темы меняет переменные, а свойства с `transition:color` доигрывают
   переход из СТАРОГО значения — и залипают в нём: пункт меню оставался в цвете
   светлой темы на тёмном фоне, контраст 1,04 при норме 4,5, текст практически
   не виден. Замер после перезагрузки этого не показывал: там перехода нет.

   Лечится не отменой переходов, а их отключением на момент переключения:
   класс держится один кадр, дальше движение работает как обычно. */
html.смена-темы *,
html.смена-темы *::before,
html.смена-темы *::after{
  transition:none !important;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--лён);color:var(--чернила);
  font:400 14px/1.6 var(--гротеск);-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
  overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  text-align:inherit}
/* ⭐ 25.08.2026. Видимого фокуса не было ни у одной кнопки: единственное
   правило focus в файле стояло на поле ввода. На чернильной кнопке «Передать»
   тёмное кольцо браузера по умолчанию не видно вовсе — с клавиатуры нельзя
   было понять, где ты. Латунь здесь уместна: фокус это и есть «ход ваш». */
:where(button,a,[tabindex],input,textarea,select):focus-visible{
  outline:2px solid var(--латунь-эл);outline-offset:2px}
.кн.главная:focus-visible{outline-color:var(--латунь);outline-offset:3px}
/* Латунь не цвет ссылки: она означает «здесь нужно ваше слово». */
a{color:var(--чернила);text-decoration:none}

/* ── знак: имя, набранное засечкой ────────────────────────────────── */
.знак{font-family:var(--серив);font-weight:400;letter-spacing:.16em;
  padding-left:.16em;line-height:1;color:var(--чернила)}
.знак.крупно{font-size:44px;letter-spacing:.18em;padding-left:.18em}
.знак.лист{font-size:20px}
.знак.шапка{font-size:14px}
/* ⭐ 25.08.2026. Была латунь #A98A54 как текст: контраст 2,57 при норме 4,5,
   и это же противоречит смыслу цвета — под знаком слово владельца не нужно. */
.знак-под{font-family:var(--моно);font-size:9.5px;letter-spacing:.2em;color:var(--текст-2)}
/* Заведение, в котором человек сейчас (слово владельца 03.10.2026) */
.знак-заведение{margin-top:16px;font-size:14px;font-weight:600;color:var(--чернила);line-height:1.3;overflow-wrap:anywhere}
.live-заведение{font-weight:600;color:var(--чернила);margin-right:6px}
@media (min-width:900px){.live-заведение{display:none}}

/* ── такт: пять узлов цикла ───────────────────────────────────────── */
.такт{position:relative;height:13px;width:100%}
.такт::before{content:'';position:absolute;top:6px;left:0;right:0;height:1px;
  background:var(--контур)}
/* Имена классов — те же, что рисует js/takt.js: компонент один на оба
   интерфейса. Своя копия разошлась бы с ним при первой же правке. */
.такт-узел{position:absolute;top:2.5px;width:8px;height:8px;
  background:var(--лист);border:1px solid var(--контур);display:block;
  transition:all .6s var(--мяг)}
.такт-узел.пройден{background:var(--шалфей);border-color:var(--шалфей)}
/* Узел такта на светлом — латунь-эл (K 3,57): у заливки #A98A54 контраст 2,57,
   ниже порога 3,0 для нетекстового элемента. Размер 12 px по макету. */
.такт-узел.ваш{top:0;width:12px;height:12px;background:var(--латунь-эл);border-color:var(--латунь-эл)}
.такт-узел.ваш::after{content:'';position:absolute;inset:-7px;
  border:1px solid var(--латунь);opacity:.4;animation:ореол 3400ms var(--мяг) infinite}
@keyframes ореол{0%{transform:scale(.72);opacity:.5}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.такт-подписи{display:flex;justify-content:space-between;margin-top:16px}
.такт-подписи span{font-family:var(--метка);font-weight:300;font-size:7.5px;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}

/* ── типографика ──────────────────────────────────────────────────── */
.формулировка{font-family:var(--серив);font-weight:400;font-size:27px;line-height:1.22;
  letter-spacing:-.3px;text-wrap:balance}
.формулировка.мелко{font-size:19px;line-height:1.28}
.пояснение{font-size:12.5px;line-height:1.65;color:var(--текст-2)}
.пояснение b{color:var(--чернила);font-weight:600}
.метка{font-family:var(--метка);font-weight:300;font-size:8.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--текст-2)}
.адрес{font-family:var(--моно);font-size:9px;letter-spacing:.1em;color:var(--латунь-текст);white-space:nowrap}
.число{font-weight:600;font-size:50px;line-height:1;letter-spacing:-2.2px}
.число sup{font-weight:400;font-size:14px;vertical-align:top;position:relative;
  top:8px;left:4px;color:var(--текст-2);letter-spacing:0}
.число.средне{font-size:34px;letter-spacing:-1.4px}

/* ── плашка «ваша норма» ──────────────────────────────────────────── */
/* ⭐ 26.08.2026, контур ВИД: полупрозрачная латунь ложилась на грунт --лён,
   и мелкий текст давал контраст 4,27–4,32 против нормы 4,5. Под текстом —
   непрозрачный лист, латунь остаётся рамке: она и означает «нужно слово». */
/* ⭐ 28.09.2026: время данных раздела — всегда, мелкой меткой (цель АД-3). */
.данные-на{font-family:var(--метка);font-weight:300;font-size:8.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--текст-2);margin:0 0 8px}
.ваша-норма{background:var(--лист);border-left:1px solid var(--латунь-эл);
  padding:16px}
.ваша-норма .з{font-family:var(--метка);font-weight:300;font-size:8.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--латунь-текст)}
.ваша-норма .т{font-size:11.5px;line-height:1.62;margin-top:8px}
/* Подпись под ответом Alex: правило было только у .строка .а. */
.ваша-норма .а{font-family:var(--метка);font-weight:300;font-size:8.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--текст-2);margin-top:8px}
/* 13.10.2026, И-02: карточка операции под ответом Ai Alex — «Сделать: …? Нет / Да». */
.оп-карточка{margin-top:12px;padding-top:12px;border-top:1px solid var(--латунь-эл)}
.оп-карточка .кнопки{display:flex;gap:8px;margin-top:12px}
.нет-числа{border-left:1px solid var(--кирпич);background:var(--лист);padding:16px}
.нет-числа .з{font-family:var(--метка);font-weight:300;font-size:8.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--кирпич)}
.нет-числа .т{font-size:11.5px;line-height:1.62;margin-top:8px}

/* ⭐ 25.08.2026. Подача ответа Alex. Шапка — работа кода: печатается сразу и
   целиком, потому что за эти числа отвечает расчёт. Дальше набирается текст,
   в конце проступают границы вывода и подпись. Приём взят у прототипа
   партнёров (uklad.ai), где шапку тоже печатает код первой строкой. */
.ваша-норма .ш,.нет-числа .ш{font-family:var(--моно);font-size:10px;
  line-height:1.5;margin-top:12px;color:var(--текст-2);
  border-bottom:1px solid var(--волос);padding-bottom:8px}
.ваша-норма .ш b,.нет-числа .ш b{font-weight:400;color:var(--чернила)}
.т.набор::after{content:'';display:inline-block;width:1px;height:.95em;
  background:var(--латунь);margin-left:3px;vertical-align:-1px;
  animation:курсор 1000ms steps(2,end) infinite}
@keyframes курсор{0%,49%{opacity:1}50%,100%{opacity:0}}
.тихо{opacity:0}
.гр,.а{transition:opacity 700ms var(--мяг)}
.гр{margin-top:16px;border-top:1px solid var(--волос);padding-top:12px}
.гр .гз{font-family:var(--метка);font-weight:300;font-size:8.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--текст-2)}
.гр .гп{font-size:10.5px;line-height:1.55;color:var(--текст-2);margin-top:6px;
  padding-left:12px;position:relative}
.гр .гп::before{content:'·';position:absolute;left:0;color:var(--латунь)}
/* Кнопка платного вызова: тихая, потому что расход начинается словом
   владельца, а не тем, что кнопка бросается в глаза. */
.кн-тихая{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;background:none;border:none;padding:0 2px;
  font-family:var(--метка);font-weight:300;font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--латунь-текст);cursor:pointer;
  border-bottom:1px solid var(--латунь-эл);transition:color var(--д-ховер) var(--мяг)}
.кн-тихая:hover{color:var(--чернила)}

/* ⭐ 25.08.2026. Переход — это набор текста, а не метка. Бренд-бук: Jost только
   прописными на метках, «в наборе текста не используется». Классом «метка» были
   набраны фразы вида «← к решениям» и целые предложения, вплоть до строки про
   пароль: прописные 8,5 px с трекингом .26 em читаются по буквам, а не словами.
   Переходы теперь гротеском обычным кеглем, и касание не меньше 44. */
.переход{display:inline-flex;align-items:center;min-height:44px;
  font-weight:500;font-size:13px;color:var(--текст-2);text-align:left;
  transition:color var(--д-ховер) var(--мяг)}
.переход:hover{color:var(--чернила)}

/* ── кнопки: главное действие чернильное, латунь на наведении ─────── */
/* ⚠️ 28.08.2026, найдено контуром ИНТЕРФЕЙС на 375 px. У .кн.главная и
   .кн.вторая стоит flex:1.4 / flex:1 — а это ещё и flex-basis:0. В колоночном
   контейнере (.вход — flex-direction:column) основная ось вертикальная, и
   flex-basis:0 перебивает height:56px: кнопка сжималась до высоты текста —
   24 px при норме касания 44. Так выглядели «Показать сейчас» на экране до
   десяти утра и «Запросить снова» на экране без истории — оба раза это
   единственное действие на экране.

   min-height держит норму независимо от того, вдоль какой оси считается
   flex-basis; flex-shrink:0 не даёт сжать кнопку ниже её высоты. */
.кн{height:56px;min-height:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:15px;white-space:nowrap;padding:0 22px;
  transition:background var(--д-ховер) var(--мяг),color var(--д-ховер) var(--мяг),
             border-color var(--д-ховер) var(--мяг)}
.кн.главная{background:var(--чернила);color:var(--лён);flex:1.4}
.кн.главная:hover{background:var(--латунь);color:#131715}
.кн.вторая{border:1px solid var(--контур);flex:1;font-weight:500;font-size:14px}
.кн.вторая:hover{border-color:var(--чернила)}
/* ⚠️ 06.09.2026. `height:44px` встречался инлайном двадцать раз — и проверка
   повторов честно сказала: это уже не раскладка отдельного блока, а общее
   правило, и его надо свести в класс, а не считать. Правило одно: кнопка
   ВНУТРИ СТРОКИ ниже обычной, но не ниже цели нажатия в 44 px. */
.кн.в-строке{height:44px}
.кн.отказ{border:1px solid var(--контур);width:56px;color:var(--текст-2);font-size:18px;padding:0}
.кн.отказ:hover{border-color:var(--кирпич);color:var(--кирпич)}
/* ⭐ 25.08.2026, найдено контуром ИНТЕРФЕЙС. Ряд из трёх кнопок по 130 px не
   помещался в телефон: третья («две недели») уходила за край, и выбрать её было
   нельзя — доставалась только боковой прокруткой, а та конфликтует со свайпом
   между циклами. Ряд переносится. */
.кн-ряд{display:flex;gap:12px;flex-wrap:wrap}
/* ⭐ 25.08.2026. Выбранное в списке помечалось чернильной заливкой (класс
   «главная») — тем же способом, что главное действие: срок и причина выглядели
   как кнопка «Передать». В макете выбор — латунный контур и вес 600: два
   признака, а не один цвет, и различимо в серой шкале. */
/* Кегль как у второй кнопки: иначе при переключении срока ряд подрагивает. */
.кн.выбран{border:1px solid var(--латунь-эл);background:var(--лист);
  color:var(--чернила);font-weight:600;font-size:14px}
.кн.выбран:hover{border-color:var(--латунь-эл)}
/* Строка-выбор в анкете и списках: тот же язык, что у кнопок. */
.строка.выбран .т{font-weight:600}
/* Отступ выбранной строки ставится инлайном там, где он нужен: инлайн всегда
   сильнее класса, и правило здесь молча не срабатывало. */
.строка.выбран{border-left:1px solid var(--латунь-эл)}

/* Строка задачи: название, цена, кнопка. На широком — в один ряд, на телефоне
   в столбик: иначе название сжимается в колонку 200 px и рвётся посреди слов. */
.строка.задача .хвост{display:flex;align-items:center;gap:16px}
@media (max-width:640px){
  .строка.задача{flex-direction:column;align-items:stretch;gap:12px}
  .строка.задача .хвост{justify-content:space-between}
  .строка.задача .с{text-align:left}
}

/* ⚠️ 28.08.2026, Э2 из бэклога. Правило «волосяная линия сверху» стояло
   инлайном в 21 месте js/ritm2.js: правка толщины или цвета делалась бы в
   двадцати одном, и одно место отстало бы. Один класс — одно правило. */
.волос-верх{border-top:1px solid var(--волос)}

/* Ряд вкладок: полосу прокрутки не показываем — она тут шум, а прокрутка
   работает пальцем и колесом. */
.вкладки{scrollbar-width:none;-ms-overflow-style:none;
  /* ⚠️ 28.08.2026, Э1 из бэклога. Пять вкладок на 375 px не вмещались, и «Чек»
     достаётся боковой прокруткой — а она уводила свайп между циклами: палец по
     ряду вкладок докручивал до края и дальше тянул всю полосу экранов
     (scroll chaining). overscroll-behavior-x:contain — принятый приём именно
     против этого (CSS Overscroll Behavior, W3C); touch-action:pan-x отдаёт ряду
     только горизонталь, вертикальная прокрутка страницы остаётся страницей. */
  overscroll-behavior-x:contain;touch-action:pan-x}
.вкладки::-webkit-scrollbar{display:none}
/* Ряд задан gap и размером в классе, а не инлайном: правка вида делается в
   одном месте. На узком экране пять подписей укладываются без прокрутки —
   прокрутка остаётся страховкой, а не способом добраться до «Чека». */
.вкладки{gap:16px}
.вкладки>button{min-height:44px;padding:0 2px;font-size:13px;
  white-space:nowrap;flex:0 0 auto}
@media (max-width:420px){
  .вкладки{gap:12px}
  .вкладки>button{font-size:12.5px;padding:0 1px}
}
@media (max-width:360px){
  .вкладки{gap:8px}
  .вкладки>button{font-size:12px}
}

/* Отклик: одна строка над нижней навигацией. Появляется и уходит сам, ничего
   не перекрывает и не требует нажатия. Скругления нет — канон. */
/* ⭐ 26.08.2026, контур ВИД: отклик стоял на высоте навигации и плашки прогона,
   но НЕ учитывал служебную полосу («Справка · Тема · Выйти», z-index 79) — и
   накрывал её на 45 из 61 px. Считаем и её высоту: --h-служ ставит скрипт. */
.отклик{position:fixed;left:22px;right:22px;z-index:90;
  bottom:calc(var(--h-низ,80px) + var(--h-прогон,0px) + var(--h-служ,0px) + 16px);
  background:var(--чернила);color:var(--лён);
  padding:16px;font-size:13px;line-height:1.5;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity var(--д-ховер) var(--мяг),transform var(--д-ховер) var(--мяг)}
.отклик.виден{opacity:1;transform:none}
@media (min-width:900px){
  .отклик{left:auto;right:32px;bottom:calc(var(--h-прогон,0px) + 32px);max-width:420px}
}

/* ── строки списка ────────────────────────────────────────────────── */
.строка{display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;padding:16px 0;border-bottom:1px solid var(--волос)}
.строка:first-child{border-top:1px solid var(--волос)}
.строка .т{font-weight:600;font-size:13.5px;line-height:1.34}
/* ⭐ 26.08.2026, контур ВИД. Классом «а» набраны не метки, а целые пояснения:
   «выбран рамкой полномочий по цене решения», «начислено по часам · без налогов
   и страховых», «модель отвечает по просьбе, через релей вне облака учёта» —
   около пятидесяти мест. Jost прописными с трекингом .2em читается по буквам,
   а не словами; бренд-бук отводит ему только короткие метки. Ставим набор. */
.строка .а{font-family:var(--гротеск);font-weight:400;font-size:11px;letter-spacing:0;
  text-transform:none;color:var(--текст-2);margin-top:6px;line-height:1.5}
.строка .с{font-weight:600;font-size:14px;white-space:nowrap;text-align:right}
.строка .с i{display:block;font-family:var(--метка);font-weight:300;font-style:normal;
  font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--текст-2);margin-top:6px}

/* ── появление ────────────────────────────────────────────────────── */
@keyframes приход{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.вход{animation:приход var(--д-появление) var(--мяг) both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    animation-iteration-count:1!important}
}

/* ═══ КАРКАС ═══════════════════════════════════════════════════════
   Телефон: три полосы во всю ширину, свайп делает браузер через
   scroll-snap. Планшет и веб: меню слева, полоса одна и во всю ширину.
   Владелец работает с планшета, но 99 % пользователей — с телефона. */
.оболочка{display:flex;min-height:100dvh}

/* меню слева — от 900 px */
.меню{display:none;flex:0 0 232px;border-right:1px solid var(--волос);
  padding:32px 16px;flex-direction:column;gap:8px;background:var(--лист)}
.меню .верх{padding:0 10px 26px}
/* Меню — кнопки: см. index.html. Селектор держит оба на время перехода. */
.меню a,.меню>button{display:flex;align-items:center;gap:12px;height:48px;padding:0 12px;
  font-weight:500;font-size:14px;color:var(--текст-2);
  transition:background var(--д-ховер) var(--мяг),color var(--д-ховер) var(--мяг)}
.меню a:hover,.меню>button:hover{color:var(--чернила)}
/* Активный раздел: вес и латунная черта слева. Заливка --лист-2 была цветом
   вне тринадцати токенов палитры. */
.меню a.тут,.меню>button.тут{color:var(--чернила);font-weight:600;
  box-shadow:inset 2px 0 0 var(--латунь-эл)}
/* ⭐ 02.10.2026, слово владельца: «без скрола слева навигация умещалась —
   пустоту убери между разделами и системными кнопками». Было margin-top:auto:
   меню тянулось на всю высоту длинной страницы, и «Выйти» уезжало за экран. */
.меню .низ{margin-top:16px;display:flex;flex-direction:column;gap:2px;
  padding-top:12px;border-top:1px solid var(--волос)}
/* Касание не меньше 44: было 40. */
.меню .низ button{height:44px;padding:0 12px;text-align:left;font-size:12.5px;color:var(--текст-2)}
.меню .низ button:hover{color:var(--чернила)}
.меню .сборка{font-family:var(--моно);font-size:9px;letter-spacing:.1em;
  color:var(--текст-2);padding:16px 12px 0}

/* полосы */
.полосы{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.полосы::-webkit-scrollbar{display:none}
.полоса{flex:0 0 100%;scroll-snap-align:start;min-width:0;
  display:flex;flex-direction:column;padding:0 22px;overflow-y:auto}

/* шапка полосы */
.шапка{display:flex;justify-content:space-between;align-items:center;
  padding:32px 0 16px;flex:0 0 auto}
.шапка .кто{display:flex;flex-direction:column;gap:8px}
.шапка h1,.шапка .глава{font-family:var(--серив);font-weight:400;font-size:23px;
  letter-spacing:-.2px;margin:0}
.шапка .live{display:flex;align-items:center;gap:8px;font-family:var(--моно);
  font-size:9px;letter-spacing:.12em;color:var(--текст-2)}
.шапка .live i{width:6px;height:6px;background:var(--шалфей);display:block}
.шапка .live i.молчит{background:var(--кирпич)}

.тело{flex:1 1 auto;display:flex;flex-direction:column;gap:32px;padding-bottom:32px}
.тело.середина{justify-content:center}

/* нижние метки — только на телефоне */
/* Панель навигации закреплена к окну, а не к полосе: sticky внутри
   скроллящейся полосы уезжал под плашку прогона. */
.низ-метки{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  justify-content:space-around;padding:16px 22px;
  border-top:1px solid var(--волос);background:var(--лён)}
/* Касание: было 9 px текста без высоты — живая область около 14 px. Норма 44. */
.низ-метки button{min-height:44px;padding:0 8px;font-family:var(--метка);
  font-weight:300;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--текст-2)}
.низ-метки button.тут{color:var(--чернила);font-weight:500;
  box-shadow:inset 0 2px 0 var(--латунь-эл)}

@media (min-width:900px){
  /* Меню закреплено к окну и не длиннее него: прокручивается страница, а не навигация. */
  .меню{display:flex;position:sticky;top:0;align-self:flex-start;height:100dvh;overflow-y:auto}
  .низ-метки{display:none}
  .полосы{overflow:hidden;scroll-snap-type:none}
  .полоса{flex:0 0 100%;padding:0 32px}
  .полоса.скрыта{display:none}
  /* Строка текста держится около 65 знаков, поэтому колонка решения узкая:
     на всю ширину монитора формулировка читается как заголовок газеты.
     Кнопки не растягиваются вместе с экраном — 56 px высотой и по содержимому. */
  .тело{max-width:680px;width:100%}
  .шапка{max-width:680px;width:100%}
  .кн-ряд{max-width:520px}
  .кн.главная{flex:0 0 auto;min-width:180px}
  .кн.вторая{flex:0 0 auto;min-width:170px}
}
/* Подпись под знаком в меню — одной строкой: перенос делает из неё две
   разные надписи. Кегль меньше, разрядка та же. */
.меню .знак-под{font-size:8px;letter-spacing:.16em;white-space:nowrap}

/* ── экран входа ──────────────────────────────────────────────────── */
.вход-слой{position:fixed;inset:0;z-index:100;background:var(--лён);
  display:flex;align-items:center;justify-content:center;padding:22px}
.вход-окно{width:100%;max-width:340px;display:flex;flex-direction:column;gap:48px}
.поле{width:100%;height:56px;padding:0 16px;background:var(--лист);
  border:1px solid var(--контур);border-radius:0;font:400 16px var(--гротеск);
  color:var(--чернила);outline:none}
.поле:focus{border-color:var(--чернила);outline:1px solid var(--чернила);outline-offset:-2px}
.в-ошибка{min-height:15px;font-size:12px;color:var(--кирпич)}

/* Поле для строки исполнения: textarea той же геометрии, что поля входа. */
textarea.поле{font-family:var(--гротеск);font-size:14px}

/* ⭐ 05.09.2026. Выпадающий список той же геометрии: на экране «Команда»
   роль и ресторан выбираются, а не набираются. Без этого правила select
   рисуется системным виджетом и выпадает из ряда полей по высоте и шрифту. */
select.поле{appearance:none;-webkit-appearance:none;cursor:pointer;
  /* Отступ справа — по шкале канона (8·12·16·22·32·48): за 32 px помещается
     галочка, и текст в неё не упирается. */
  padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,var(--чернила) 50%),
                   linear-gradient(135deg,var(--чернила) 50%,transparent 50%);
  background-position:calc(100% - 21px) 26px,calc(100% - 16px) 26px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* Плашка прогона: владелец обязан видеть, что смотрит механику, а не боевые
   данные. Латунь здесь не про «нужно ваше слово», а про предупреждение —
   единственное исключение, и оно подписано словами. */
/* ⚠️ 24.08.2026, найдено на телефоне. Плашка стояла внизу поверх нижних меток
   и полностью перекрывала навигацию между тремя циклами: свайп работал, а
   метки были не видны и не нажимались. Метки поднимаются на высоту плашки. */
body.с-прогоном .низ-метки{bottom:var(--h-прогон,64px)}
@media (max-width:899px){.низ-метки{display:flex}}
/* ⭐ 25.08.2026. Кнопки «Тема» и «Выйти» живут только в боковом меню, а оно
   показывается от 900 px: с планшета в портрете и с телефона выйти из платформы
   было нельзя вовсе. Ставим их в подвал нижней навигации. */
.низ-служебное{display:none}
@media (max-width:899px){
  /* ⭐ 25.08.2026, поправлено в тот же день. Блок стоит после fixed-навигации, а
     сам оставался в потоке — и всплывал справа посередине экрана. Прижимаем его
     к тому же низу, ставим НАД навигацией и учитываем плашку прогона. */
  .низ-служебное{display:flex;gap:16px;justify-content:center;
    position:fixed;left:0;right:0;z-index:79;
    bottom:calc(var(--h-низ,80px) + var(--h-прогон,0px));
    padding:8px 22px;background:var(--лён);
    border-top:1px solid var(--волос)}
  .низ-служебное button{min-height:44px;min-width:44px;padding:0 12px;
    font-family:var(--метка);font-weight:300;
    font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--текст-2)}
}
/* ⭐ 25.08.2026. Высота плашки прогона входила в отступ дважды — и у полосы, и
   у тела: на телефоне выходило около 219 px мёртвого низа при экране 812, и на
   коротких экранах кнопки висели в воздухе. Считает только тело. */
body.с-прогоном .полоса{padding-bottom:0}
/* ⭐ 11.10.26, У-113: полоса промо (js/auth.js, промоПлашка) — тем же видом. */
#прогон-плашка,#перечит-плашка,#промо-плашка{position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:12px 20px;
  /* ⚠️ 27.08.2026. Фон стоял литералом rgba(169,138,84,.14) — это латунь,
     но числом: в тёмной теме токен --латунь другой, а фон оставался
     светлым. Считаем от токена, как остальные поверхности. */
  background:color-mix(in srgb,var(--латунь) 14%,transparent);
  border-top:1px solid var(--латунь-эл);backdrop-filter:blur(6px)}
#прогон-плашка span,#перечит-плашка span,#промо-плашка span{font-family:var(--моно);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--латунь-текст)}
/* Касание не меньше 44: было 34, на телефоне 30. */
#прогон-плашка button{height:44px;padding:0 16px;border:1px solid var(--латунь-эл);
  font-family:var(--гротеск);font-size:12px;font-weight:500;color:var(--чернила);
  transition:background var(--д-ховер) var(--мяг)}
#прогон-плашка button:hover{background:var(--латунь)}
/* ⚠️ 27.08.2026. На ноутбуке в прогоне нижние 37 px главного ряда «✕ · Ai Alex ·
   Да» уходили под латунную плашку прогона, а подпись «адресат» скрывалась
   целиком — и доскроллить было нельзя: body.с-прогоном .полоса{padding-bottom:0}
   гасит этот отступ по специфичности, а .тело держит только свои 32 px и высоту
   плашки не учитывает. Владелец не мог нажать то, за чем пришёл.
   Запас считаем у ТЕЛА и от живой высоты плашки, как это уже делает
   телефонная ветка ниже. */
@media (min-width:900px){
  .полоса{padding-bottom:48px}
  .тело{padding-bottom:calc(var(--h-прогон,0px) + 48px)}
}

/* ⚠️ 24.08.2026. Пустое состояние центрировалось по всей высоте полосы, и на
   большом экране заголовок уезжал к середине, оставляя сверху пустое поле в
   пол-экрана — владелец увидел это как поломку. Контент держим у верха, с
   воздухом, но без провала. */
.тело.середина{justify-content:flex-start;padding-top:8vh;max-width:640px}
.тело.середина .формулировка{font-size:clamp(24px,3.4vw,34px)}

/* ⚠️ 24.08.2026, найдено на телефоне 375×812. Нижние метки — sticky, и контент
   прокручивался ПОД ними: кнопки «Решаю» и подпись адресата оказывались
   перекрыты навигацией. Телу нужен отступ на высоту меток, а с плашкой
   прогона — и на неё. На широком экране меток нет, отступ не нужен. */
/* ⭐ 25.08.2026. Высота меток была вписана числом 72. Как только касание
   выросло до нормы 44, панель стала 77 px, и кнопки «Решаю» опять ушли под
   неё — на 15 px. Копия размера всегда отстанет от размера: высоту меряет
   скрипт и кладёт в --h-низ, здесь только запас на случай, если он не успел. */
@media (max-width:899px){
  /* ⚠️ 27.08.2026. Запас стоял числом 60, а служебная полоса «Справка ·
     Настройки · Тема · Выйти» занимает 61 px — последний элемент раздела был
     перекрыт ею на 1 px, воздуха не оставалось вовсе. Копия размера отстаёт от
     размера: считаем от живой высоты, как это уже делает .отклик. */
  .тело{padding-bottom:calc(var(--h-низ,80px) + var(--h-прогон,0px)
                            + var(--h-служ,0px) + 16px)}
  .низ-метки{padding:16px 0}
}

/* Плашка прогона на телефоне занимала 93 px — почти строку контента.
   Кнопка и текст в одну строку, кегль меньше. */
@media (max-width:899px){
  #прогон-плашка,#перечит-плашка,#промо-плашка{padding:8px 14px;gap:12px}
  #прогон-плашка span,#перечит-плашка span,#промо-плашка span{font-size:8.5px;letter-spacing:.08em}
  /* На телефоне тем более 44: промах по «начать заново» стоит прогона. */
  #прогон-плашка button{height:44px;padding:0 12px;font-size:11.5px}
}

/* ── РЕЖИМ СЪЁМКИ · html.съёмка ──────────────────────────────────────
   ⭐ 25.08.2026. Кадры для презентации снимаются с прода в режиме прогона, и в
   них не должно быть обвязки: полосы «прогон механики», служебных кнопок и
   отступа под них. Экран остаётся тем же, лишнее просто не рисуется. */
html.съёмка #прогон-плашка{display:none !important}
html.съёмка .низ-служебное{display:none !important}
html.съёмка body.с-прогоном .низ-метки{bottom:0}
html.съёмка .тело{padding-bottom:calc(var(--h-низ,80px) + 16px)}

/* ── ТИТУЛ И ФИНАЛ КАДРА ─────────────────────────────────────────────
   ⭐ 25.08.2026, слово владельца: «1 слайд это логотип и лозунг, в конце релиз
   01.09.26». Знак — имя, набранное засечкой с разрядкой (решение 24.08:
   иконки у продукта нет). Латунь здесь не работает: она означает «нужно ваше
   слово», а титул слова не просит. */
#кадр-лист{position:fixed;inset:0;z-index:200;background:var(--лён);
  display:flex;align-items:center;justify-content:center;padding:64px}
.кадр-центр{max-width:36ch;text-align:center}
/* ⭐ Знак не переносится: разрядка .30em при узкой колонке ломала «Р И Т М» на
   две строки, и имя читалось как «РИТ / М». Отступ справа равен разрядке —
   иначе последняя буква стоит вплотную к краю оптически. */
.кадр-знак{font-family:var(--серив);font-weight:500;font-size:52px;
  letter-spacing:.30em;color:var(--чернила);line-height:1;
  white-space:nowrap;padding-left:.30em}
.кадр-знак.малый{font-size:34px}
.кадр-лозунг{margin-top:16px;font-family:var(--метка);font-weight:300;
  font-size:10px;letter-spacing:.32em;text-transform:lowercase;color:var(--текст-2)}
.кадр-линия{width:64px;height:1px;background:var(--латунь-эл);margin:32px auto}
.кадр-мысль{font-family:var(--серив);font-weight:400;font-size:19px;
  line-height:1.55;color:var(--чернила)}
.кадр-дата{font-family:var(--гротеск);font-weight:600;font-size:26px;
  letter-spacing:.02em;color:var(--чернила);font-variant-numeric:tabular-nums}
.кадр-дата + .кадр-мысль{margin-top:22px;font-size:14px;color:var(--текст-2)}

/* Кадр-акцент: одно слово крупно. Кегль такой, чтобы читалось со слайда 10×10
   см в зале, а не с монитора в упор. */
.кадр-акцент{font-family:var(--серив);font-weight:500;font-size:76px;
  line-height:1.05;color:var(--чернила);letter-spacing:-.01em}

/* ⭐ 25.08.2026, слово владельца: «крупнее, очень мелко». Кадры снимаются с
   узкой раскладки и вписываются в квадрат 10×10 см — интерфейс на слайде
   получался меньше, чем на телефоне в руке. Увеличиваем содержимое в режиме
   съёмки: пропорции и канон не меняются, меняется только кегль на кадре. */
html.съёмка body{zoom:1.34}

/* ── справка и обучение при первом запуске ────────────────────────── */
/* ⭐ 26.08.2026. Слово владельца: обучение при первом запуске и справка.
   Один материал, две подачи: тур из пяти карточек при первом входе и та же
   справка из меню в любой момент. */
/* ⚠️ 27.08.2026. Подложка была задана литералом rgba(19,23,21,.62) — это
   чернила СВЕТЛОЙ темы. Поверх тёмного грунта затемнение не работало, и
   окно справки и настроек почти не отделялось от страницы. Считаем от
   грунта темы: в каждой теме затемнение получается своё. */
.спр-слой{position:fixed;inset:0;z-index:120;
  background:color-mix(in srgb,var(--лён) 62%,transparent);
  display:none;align-items:center;justify-content:center;padding:22px}
.спр-окно{background:var(--лист);width:100%;max-width:680px;max-height:86vh;
  display:flex;flex-direction:column;border-left:1px solid var(--латунь-эл)}
.спр-окно.обуч{max-width:600px}
.спр-шапка{display:flex;align-items:center;justify-content:space-between;
  padding:22px 32px 16px;border-bottom:1px solid var(--волос)}
.спр-титул{font-family:var(--серив);font-size:22px;font-weight:400;letter-spacing:-.2px}
.спр-закрыть{background:none;border:none;font-size:26px;line-height:1;color:var(--текст-2);
  cursor:pointer;padding:0;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center}
.спр-закрыть:hover{color:var(--чернила)}
/* ⭐ 30.08.2026. Поиск и адресность справки. Поле не прячем: справку открывают
   за ответом, а не почитать, и первое действие человека — набрать слово. */
/* ⭐ 30.08.2026. Отметка о задачах на навигации: сколько ждёт этого человека.
   Латунь здесь не «нужно ваше слово», а «вас касается» — тот же смысл обращения
   к человеку, что у латунной метки главы справки.

   Углы прямые: скруглений в каноне нет вовсе, и метка не исключение — круглый
   значок уведомления это чужой язык, из мессенджеров. */
.метка-числом{display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;margin-left:6px;padding:0 4px;
  background:var(--латунь);color:var(--лист);
  font:500 10px/1 var(--гротеск);vertical-align:middle}
/* ⭐ 31.08.2026. Отметка об отказе источника: знак «!» на разделе. Кирпичный,
   а не латунный — это не «нужно ваше слово», а «числам рядом верить нельзя».
   Углы прямые, как у отметки задач: скруглений в каноне нет. */
.метка-беды{display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;margin-left:6px;padding:0 4px;
  background:var(--кирпич);color:var(--лист);
  font:600 10px/1 var(--гротеск);vertical-align:middle}
.спр-поиск-строка{padding:0 32px 4px;display:flex;flex-direction:column;gap:6px}
.спр-поиск-строка .поле{width:100%}
.спр-счёт{font-family:var(--метка);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--текст-2);min-height:12px}
/* Глава про раздел, откуда пришли: латунь означает «здесь про вас», а не
   «нужно ваше слово» — поэтому не заливка, а тонкая метка сверху. */
.спр-адрес{font-family:var(--метка);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--латунь-текст);margin-bottom:8px}
.спр-своя{border-left:2px solid var(--латунь);padding-left:16px;margin-left:-16px}
.спр-пусто{font-size:14px;line-height:1.6;color:var(--текст-2);max-width:52ch}
.спр-тело{overflow-y:auto;padding:8px 32px 28px}
.спр-глава{padding:22px 0;border-bottom:1px solid var(--волос)}
.спр-глава:last-child{border-bottom:none}
.спр-метка{font-family:var(--метка);font-weight:300;font-size:8.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--латунь-текст)}
.спр-заг{font-family:var(--серив);font-size:24px;font-weight:400;line-height:1.2;
  margin-top:12px;letter-spacing:-.2px}
.спр-текст{font-size:12.5px;line-height:1.62;color:var(--текст-2);margin-top:12px}
.спр-ряды{margin-top:16px;border-top:1px solid var(--волос)}
.спр-ряд{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--волос)}
.спр-имя{flex:0 0 132px;font-size:11.5px;font-weight:500}
.спр-что{flex:1;font-size:11.5px;line-height:1.55;color:var(--текст-2)}
.спр-низ{margin-top:16px;font-family:var(--моно);font-size:10px;line-height:1.6;
  color:var(--текст-2)}
.обуч-низ{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 32px 22px;border-top:1px solid var(--волос)}
.обуч-точки{display:flex;gap:8px}
.обуч-точка{width:6px;height:6px;background:var(--контур);display:inline-block}
.обуч-точка.тут{background:var(--латунь)}
.обуч-кнопки{display:flex;align-items:center;gap:16px}
.обуч-кнопки .кн-тихая{margin-top:0}

/* ── вход через число ─────────────────────────────────────────────── */
/* ⭐ 26.08.2026, решение владельца: вход в готовый код — «в само число».
   Число остаётся числом: подчёркивания и рамки нет, но курсор и фокус говорят,
   что здесь есть что открыть. Латунная черта снизу появляется при наведении —
   это тот же знак «здесь есть ваше слово», что и везде. */
.ч-вход{cursor:pointer;position:relative}
.ч-вход::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--латунь);opacity:0;transition:opacity var(--д-ховер) var(--мяг)}
.ч-вход:hover::after{opacity:.55}
.ч-вход:focus-visible{outline:2px solid var(--латунь-эл);outline-offset:4px}
.база-выбор{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.база-к{font-family:var(--метка);font-weight:300;font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--текст-2);cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;padding:0 12px;
  border:1px solid var(--волос)}
.база-к.on{color:var(--чернила);border-color:var(--латунь-эл)}

/* ⭐ 26.08.2026. Эхо периода. Говорит рядом с числом, за какой период источник
   ответил на самом деле. Кирпичом — когда периоды разные (числу верить
   нельзя), спокойным серым — когда период тот же, но с пробелами в днях. */
.эхо-нет,.эхо-уже{display:block;margin-top:6px;font-family:var(--моно);
  font-size:9.5px;line-height:1.5;letter-spacing:.02em}
.эхо-нет{color:var(--кирпич)}
.эхо-уже{color:var(--текст-2)}

/* ⭐ 26.08.2026. Вес находки. Четыре ступени, и «не проверили» стоит выше
   «в норме» намеренно: молчание проверки читается как её прохождение.
   Цветом отмечена только тревога — остальное набрано спокойно, иначе
   подсветка перестаёт значить что-либо. */
.вес{font-family:var(--метка);font-weight:300;font-size:8.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--текст-2);display:flex;gap:12px;align-items:baseline;
  flex-wrap:wrap}
.вес-1{color:var(--кирпич)}
.вес .вп{font-family:var(--гротеск);font-weight:400;font-size:10.5px;letter-spacing:0;
  text-transform:none;color:var(--текст-2)}

/* Обрезка списка: спокойным серым — это не тревога, а честность о полноте. */
.обрезано{display:block;margin-top:8px;font-family:var(--моно);font-size:9.5px;
  line-height:1.5;color:var(--текст-2)}

/* ⭐ 26.08.2026. Уточнения к ответу Alex. Разговор идёт кодом и не стоит
   денег, поэтому кнопки спокойные: латунь здесь значила бы «нужно ваше
   слово», а тут слова не нужно — это просто следующий вопрос.
   Отступы по шкале проекта: 8·12·16·22·32·48. */
.уточнения{margin-top:22px;display:flex;flex-direction:column;gap:8px;
  align-items:flex-start}
.уточнения .уз{font-family:var(--метка);font-weight:300;font-size:8.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--текст-2);
  margin-bottom:8px}
/* ⭐ 09.09.2026. Строка «сказать Alex» — приём обращений на улучшение.
   Требование владельца 08.09.2026. Тон тихий, как у кнопки модели: это не
   призыв жаловаться, а возможность сказать, если есть что. Латунь по канону
   значит «нужно ваше слово» — здесь слово как раз даёт человек. */
.обр-строка{margin-top:22px;padding-top:16px;border-top:1px solid var(--волос)}
.обр-строка .уз{font-family:var(--метка);font-weight:300;font-size:8.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--текст-2);
  margin-bottom:8px}
.обр-поле-ряд{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.обр-поле{flex:1 1 240px;min-height:44px;background:none;
  border:1px solid var(--волос);padding:8px 14px;
  font-family:var(--гротеск);font-size:14px;color:var(--чернила);
  transition:border-color var(--д-ховер) var(--мяг)}
.обр-поле:focus{outline:none;border-color:var(--латунь-эл)}
.обр-поле-ряд .кн-тихая{margin-top:0}
.обр-ответ{margin-top:12px;font-family:var(--гротеск);font-size:13px;
  line-height:1.5;color:var(--текст-2)}
.обр-ответ.обр-добро{color:var(--шалфей)}
.обр-ответ.обр-беда{color:var(--кирпич)}
.обр-мои{margin-top:16px}
.обр-мои .уз{font-family:var(--метка);font-weight:300;font-size:8.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--текст-2);
  margin-bottom:8px}
.обр-моё{font-family:var(--гротеск);font-size:13px;line-height:1.6;
  color:var(--чернила);padding:6px 0;border-top:1px solid var(--волос)}
.обр-моё:first-of-type{border-top:none}
.обр-вид{font-family:var(--метка);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--латунь-текст);margin-right:6px}
.обр-слово{color:var(--текст-2);font-size:12.5px;margin-top:2px}
.обр-моё .обр-добро{color:var(--шалфей)}
.обр-моё .обр-тихо{color:var(--текст-2)}

.кн-уточнение{min-height:44px;display:inline-flex;align-items:center;
  text-align:left;background:none;border:1px solid var(--волос);padding:8px 16px;
  font:400 11.5px/1.5 var(--гротеск);color:var(--чернила);cursor:pointer;
  transition:border-color var(--д-ховер) var(--мяг),color var(--д-ховер) var(--мяг)}
.кн-уточнение:hover{border-color:var(--контур)}
.уточнение-ответ{margin-top:22px;border-left:1px solid var(--волос);padding-left:16px}
.уточнение-ответ .ув{font-family:var(--гротеск);font-weight:600;font-size:11.5px;
  line-height:1.5;color:var(--текст-2)}
.уточнение-ответ .уо{font-size:11.5px;line-height:1.62;margin-top:8px}

/* ⭐ 26.08.2026. Контекст решения: как оно собрано. Закрыто по умолчанию —
   владельцу нужно решение, разбор нужен, когда он сомневается.
   Отступы по шкале проекта: 8·12·16·22·32·48. */
.контекст{margin-top:22px;border-top:1px solid var(--волос);padding-top:16px}
.контекст summary{min-height:44px;display:flex;align-items:center;cursor:pointer;
  font-family:var(--метка);font-weight:300;font-size:8.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--латунь-текст);list-style:none}
.контекст summary::-webkit-details-marker{display:none}
.контекст summary::after{content:'+';margin-left:12px;font-family:var(--моно);
  font-size:12px;letter-spacing:0}
.контекст[open] summary::after{content:'−'}
.контекст summary:hover{color:var(--чернила)}
.контекст .кк{margin-top:8px}
.контекст .кс{display:flex;gap:16px;padding:8px 0;border-bottom:1px solid var(--волос);
  align-items:baseline;flex-wrap:wrap}
.контекст .кс:last-child{border-bottom:none}
/* ⭐ 27.08.2026. Строка, которая ведёт в настройки. Латунь — знак «нужно ваше
   слово» по канону: число можно задать. Не кнопка и не подсветка: строка
   остаётся строкой, меняется только курсор и цвет подписи при наведении. */
.контекст .кс-настр{cursor:pointer}
.контекст .кс-настр .кн-п{color:var(--латунь)}
.контекст .кс-настр:hover .кн-з{color:var(--латунь)}
.контекст .кн-и{flex:0 0 160px;font-family:var(--метка);font-weight:300;font-size:8.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--текст-2)}
.контекст .кн-з{flex:1;min-width:200px;font-size:11.5px;line-height:1.5}
.контекст .кн-п{display:block;margin-top:8px;font-size:10.5px;color:var(--текст-2)}

/* Оговорка о доверии к сумме в шапке ответа Alex: мельче основного текста. */
.ваша-норма .ш .ш-мелко,.нет-числа .ш .ш-мелко{font-size:9px;color:var(--текст-2)}

/* Выручка рядом с прибылью: справка, а не главное число — потому мельче. */
.выручка-рядом{font-family:var(--моно);font-size:10px;color:var(--текст-2)}

/* ⭐ 26.08.2026. Шаги задачи у исполнителя: название — направление, шаги —
   работа. Набраны мельче задачи и с отступом, чтобы очередь читалась списком,
   а шаги — когда до них дошли. Отступы по шкале 8·12·16·22·32·48. */
.шаги{display:flex;flex-direction:column;gap:8px;padding:12px 0 16px 22px;
  border-bottom:1px solid var(--волос)}
.шг{font-size:11.5px;line-height:1.55;color:var(--текст-2)}
.шг .шм{display:block;font-family:var(--метка);font-weight:300;font-size:8.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--латунь-текст);
  margin-bottom:4px}

/* Цена результата у действия: она есть у каждого — либо числом, либо честным
   «цены нет». Набрана моно, чтобы суммы стояли в столбик. */
.цр{font-family:var(--моно);font-size:9.5px;color:var(--текст-2)}

/* Метка поля входа. Видимая подпись вместо одного placeholder: подсказка,
   исчезающая при вводе, пропадает ровно тогда, когда человек ошибся и ищет,
   что не так. */
.в-метка{font:400 12px/1.4 var(--гротеск); color:var(--текст-2); margin:6px 0 -2px}

/* ── вопрос платформы владельцу ─────────────────────────────────────────
   Он стоит над решениями и должен отличаться от них: решение платформа
   предлагает, вопрос — задаёт. Отличие даёт латунь: тот же знак «нужно ваше
   слово», что и везде в продукте. */
.вопросы{display:flex; flex-direction:column; gap:16px; padding:32px 0 8px}
.вопрос-карта{
  display:flex; flex-direction:column; gap:12px;
  padding:22px; background:var(--лист);
  /* Скруглений в каноне нет: прямой угол — часть характера продукта.
     Отступы по шкале 8·12·16·22·32·48, иначе блок выпадает из ритма. */
  border:1px solid var(--волос); border-left:2px solid var(--латунь);
  max-width:640px;
}
.вопрос-исходы{display:flex; flex-direction:column; gap:8px}
.вопрос-исходы .метка{display:block; margin-bottom:2px}
.вопрос-исходы > div{font:400 13px/1.5 var(--гротеск); color:var(--текст-2)}
.вопрос-форма{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.вопрос-форма .кн{align-self:flex-start}

/* ── обсуждение внутри задачи ───────────────────────────────────────────
   Разговор идёт рядом с задачей и отличается от неё: задача — строка списка,
   обсуждение — вложенный блок. Отступ слева показывает вложенность без рамки:
   рамка здесь спорила бы с рамкой самой строки. Отступы по шкале. */
.ветка-место{padding:0 0 16px}
.ветка{display:flex; flex-direction:column; gap:12px; padding:16px 0 16px 22px;
  border-left:1px solid var(--волос)}
.ветка-запись{display:flex; flex-direction:column; gap:4px}
.ветка-кто{font:400 12px/1.4 var(--гротеск); color:var(--текст-2)}
.ветка-текст{font:400 14px/1.5 var(--гротеск); color:var(--чернила); max-width:56ch}
/* Слово агента отличается от слова человека: он участник, а не голос платформы. */
.ветка-агент .ветка-текст{color:var(--текст-2)}
.ветка-агент{border-left:2px solid var(--шалфей); padding-left:12px; margin-left:-14px}
.ветка-форма{display:flex; flex-direction:column; gap:8px; margin-top:4px; max-width:480px}
.ветка-форма .кн{align-self:flex-start}
.ждёт{color:var(--латунь-текст)}

/* ── цель месяца · первое решение ───────────────────────────────────────
   Вид тот же, что у карточки решения: человек учится продукту на одном
   движении, а не на экскурсии. Латунь слева — знак «нужно ваше слово». */
.цель-место{padding:32px 0 0}
.цель-карта{display:flex; flex-direction:column; gap:12px; padding:22px;
  background:var(--лист); border:1px solid var(--волос);
  border-left:2px solid var(--латунь); max-width:640px}
.цель-карта .число{font:300 48px/1 var(--серив); color:var(--чернила)}
.цель-карта.нет-данных{border-left-color:var(--контур)}
.цель-форма{display:flex; flex-direction:column; gap:8px; margin-top:8px; max-width:420px}
.цель-форма .кн{align-self:flex-start}

/* ── рабочий календарь команды ──────────────────────────────────────────
   Отвечает на «кто сегодня в заведении» — вопрос, на который выработка в
   человеко-часах не отвечает. Строки те же, что у задач: одна вёрстка на
   похожие списки. */
.календарь-смен{display:flex; flex-direction:column; margin-top:22px}
.календарь-смен .метка{margin-bottom:8px}

/* ── ваши числа · то, чего нет в системе учёта ─────────────────────────── */
.ваши-числа{display:flex; flex-direction:column; gap:12px; margin-top:32px}
.лм-форма{display:flex; flex-direction:column; gap:8px; margin-top:12px; max-width:420px}
.лм-форма .кн{align-self:flex-start}
.лм-личное{display:flex; align-items:center; gap:8px; min-height:44px;
  font:400 13px/1.4 var(--гротеск); color:var(--текст-2); cursor:pointer}

/* ── поиск по продукту · Cmd/Ctrl+K ─────────────────────────────────────
   Три пункта меню — и потому нужен прямой вход: на вопрос «где прайм-кост»
   владелец иначе угадывает раздел. Окно поверх экрана, фон приглушает то, что
   под ним, но не прячет: видно, откуда пришёл. */
.поиск-окно{position:fixed; inset:0; z-index:900; display:none;
  align-items:flex-start; justify-content:center}
.поиск-фон{position:absolute; inset:0; background:var(--чернила); opacity:.32}
.поиск-карта{position:relative; margin-top:12vh; width:min(620px,92vw);
  background:var(--лист); border:1px solid var(--волос);
  display:flex; flex-direction:column; gap:8px; padding:22px}
.поиск-поле{width:100%; min-height:48px; padding:12px 16px;
  background:none; border:1px solid var(--волос); color:var(--чернила);
  font:400 16px/1.4 var(--гротеск); outline:none}
.поиск-поле:focus{border-color:var(--чернила)}
.поиск-итог{display:flex; flex-direction:column; max-height:48vh; overflow:auto}
.поиск-стр{display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  min-height:44px; padding:8px 0; border-top:1px solid var(--волос);
  background:none; text-align:left; cursor:pointer; color:var(--чернила);
  font:400 14px/1.4 var(--гротеск)}
.поиск-стр:hover{background:var(--лён)}
.поиск-стр:focus-visible{outline:2px solid var(--контур); outline-offset:-2px}
.поиск-вид{color:var(--текст-2); font-size:12px}
.поиск-низ{color:var(--текст-2); font:400 12px/1.4 var(--гротеск)}

/* Кнопка «моё решение» в шапке раздела · 04.09.2026. Стоит отдельной строкой
   под заголовком: она не относится ни к одной карточке, это вход владельца в
   свою собственную запись. Пустое место не занимает высоты — при отсутствии
   функции блок остаётся пустым. */
.моё-решение-место{display:flex;justify-content:flex-start;margin:0 0 4px}
.моё-решение-место:empty{display:none}

/* Выбор ресторана прямо в строке списка команды: тот же размер, что подпись
   рядом, — иначе строка расползается по высоте от одного виджета. */
select.доступ-рест{font:400 12px var(--гротеск);color:var(--текст-2);
  background:transparent;border:none;border-bottom:1px solid var(--контур);
  padding:0 0 2px;cursor:pointer;max-width:220px}
select.доступ-рест:disabled{opacity:.5;cursor:default}

/* ⭐ 06.10.2026 · карточка «за 5 секунд» (js/kartochka5.js) */
.к5{display:flex;flex-direction:column;gap:16px}
.к5-картинка{width:100%;max-width:340px;height:auto;display:block}
.к5-ед{font-size:12px;color:var(--тихо,#5E6660);margin-top:-8px}
.к5-нет{max-width:340px;height:64px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:var(--тихо,#5E6660);background:repeating-linear-gradient(135deg,transparent 0 6px,var(--волос,#D6D6CE) 6px 7px)}
.к5-обычно{font-size:14px;color:var(--тихо,#5E6660);margin-top:6px;font-variant-numeric:tabular-nums}
.к5-почему{margin-top:12px}
.к5-кому{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:8px;font-size:14px}
.к5-роль{font-size:11px;letter-spacing:.2em;text-transform:uppercase;border:1px solid currentColor;padding:4px 8px}
.к5-подробнее>summary{cursor:pointer;font-size:13px;color:var(--тихо,#5E6660)}
.к5-подробнее[open]>summary{margin-bottom:16px}
.к5-срок{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--тихо,#5E6660)}
.к5-просрочка{color:var(--кирпич,#7B3327)}
.к5-глагол{margin-top:6px}

/* ⭐ 11.10.2026, У-127. Окно старого слоя (strMdl → #rdr-modal) рисуется слоем нового
   фронта; внутри — разметка прежних модулей: строки .sec-mini, пояснения .mut, кнопки
   .ask и .btnl. Стили только внутри этого окна, по канону: прямые углы, латунь — «ваше
   слово», чернила — главное действие. */
#rdr-modal.спр-слой .sec-mini{display:flex;gap:12px;align-items:baseline;padding:8px 0;
  border-bottom:1px solid var(--волос);font-size:14px}
#rdr-modal.спр-слой .sec-mini .num{font-variant-numeric:tabular-nums;text-align:right}
#rdr-modal.спр-слой .mut{color:var(--текст-2)}
#rdr-modal.спр-слой .ask,#rdr-modal.спр-слой .btnl{min-height:44px;padding:0 16px;
  font:500 14px var(--гротеск);cursor:pointer;border-radius:0}
#rdr-modal.спр-слой .ask{background:var(--чернила);color:var(--лён);border:none}
#rdr-modal.спр-слой .ask:hover{background:var(--латунь);color:#131715}
#rdr-modal.спр-слой .btnl{background:none;color:var(--чернила);border:1px solid var(--контур)}
#rdr-modal.спр-слой .btnl:hover{border-color:var(--чернила)}