/*
 * Дизайн-токены студии МедиаЦЕХа. Задача 07, часть Д1.
 *
 * ЕДИНСТВЕННОЕ место, где в стилях студии стоят значения: цвета,
 * шрифты, размеры, отступы, скругления, тени, шаг сетки. Во всех
 * остальных файлах стилей — только `var(--…)`. Это проверяется
 * тестом (`tests/test_studio_screens.py`): найденный в другом файле
 * цвет или размер в пикселях — красный тест, а не замечание
 * на проверке.
 *
 * Зачем так строго: брендбука ЦЕХ ещё нет (план, раздел 6б). Когда
 * он придёт, меняется этот файл — и, если понадобится, общие детали
 * в `components.css`. Экраны не трогаются вовсе.
 *
 * Что уже не заглушка: оранжевый, чёрный текст, белый фон, скругления
 * и сетка с крестиками — они взяты с принятого макета стартовой
 * (`docs/maket_startovaya/maket_vhod.png`). Остальное — нейтральные
 * значения-заглушки.
 *
 * Шрифты — системные. До брендбука ни одного файла шрифта в бакете
 * нет, и ни одного обращения к чужому серверу за шрифтами тоже
 * (раздел 12: сторонних серверов нет вообще).
 */

:root {
  /* --- Цвет ------------------------------------------------- */

  /* С макета. */
  --color-accent: #f24405;
  --color-accent-strong: #d63a03;
  --color-ink: #12100f;
  --color-surface: #ffffff;
  --color-page: #fbfaf9;

  /* Нейтральные заглушки. */
  --color-ink-soft: #57524e;
  --color-ink-faint: #8a837d;
  --color-line: #e2ded9;
  --color-line-strong: #c9c3bc;
  --color-on-accent: #ffffff;

  /* Сообщения. Цвет всегда идёт вместе со знаком — пометка
   * состояния одним цветом не делается (часть Д1). */
  --color-danger: #b3261e;
  --color-danger-surface: #fdecea;
  --color-success: #1d6b3f;
  --color-success-surface: #e9f5ee;
  --color-info: #2a4b8d;
  --color-info-surface: #eaf0fb;
  --color-muted-surface: #f1efec;
  /* Задача 11: «Доработка» у автора (Г7) и пометка блока
     с замечанием (В4) — тёплый, но не тревожный. */
  --color-attention: #8a4b00;
  --color-attention-surface: #fdf1e2;
  /* Задача 11а, Б1: значок у статуса. Яркий оранжевый (ваш ход) —
     акцент; светло-оранжевый — в работе не у вас (11и, Б: любой знак,
     не только бывшие часы); зелёный — **только** «Вышел»; серый —
     «Закрыт». */
  --color-mark-wait: #c2410c;
  --color-mark-wait-surface: #fce6dc;
  --color-mark-done: #1e7f45;
  --color-mark-done-surface: #e3f1e7;

  /* Задача 11б, Д1: сигнальные цвета **только окна проверки** перед
     действием. Красный — «Нужно исправить», жёлтый — «Обратите
     внимание», зелёный — «Всё заполнено», тот же, что у «Вышел». */
  --color-check-blocking: var(--color-danger);
  --color-check-blocking-surface: var(--color-danger-surface);
  --color-check-warning: #a15c00;
  --color-check-warning-surface: #fff3e0;
  --color-check-ready: var(--color-mark-done);
  --color-check-ready-surface: var(--color-mark-done-surface);

  /* Задача 11б, А9: нажимаемое выглядит нажимаемым — при наведении
     чуть темнее фон и лёгкая тень (одна переменная), при нажатии —
     лёгкое «вдавливание». */
  --shadow-press: 0 0.0625rem 0.25rem rgba(18, 16, 15, 0.16);
  --press-shift: 0.0625rem;
  --color-hover-surface: #e9e6e2;

  /* Затемнение под окном поверх экрана (окно отправки, окно
     подтверждения — задача 09). */
  --color-scrim: rgba(18, 16, 15, 0.45);

  /* «Где я работаю» — режим фокуса (четвёртая правка от 02.10,
     пункт 2, вместо тёплой заливки третьей правки). Стол
     конструктора — почти белый, материал на нём — белый лист
     с мягкой тенью по краю. Выбранный блок или шапка — белый с мягкой
     тенью, остальное приглушено (`--focus-dim`), наведение
     возвращает яркость. Оранжевый — только у второстепенных кнопок
     («Готово», «+», меню блоков, пункт 5 третьей правки): лёгкий
     фон, при наведении чуть сильнее. */
  --color-desk: #f8f7f5;
  --color-sheet: #ffffff;
  --shadow-sheet: 0 0.125rem 1.5rem rgba(18, 16, 15, 0.07);
  --shadow-block-focus: 0 0.25rem 1.25rem rgba(18, 16, 15, 0.1);
  --focus-dim: 0.45;
  --focus-inset: var(--space-4);
  --color-accent-faint: rgba(242, 68, 5, 0.08);
  --color-accent-faint-hover: rgba(242, 68, 5, 0.15);

  /* Кнопки-значки для мыши: панель текста, панель блока, верхняя
     панель конструктора (решение Product Owner от 30.09, пункт 3:
     28–32 пикселя). */
  --tool-size: 1.875rem;
  --tool-icon-size: 1.125rem;

  /* Высота верхней панели конструктора: под неё прилипает панель
     текста, чтобы они не наезжали друг на друга. */
  --topbar-height: 3rem;

  /* Видимый фокус: по нему человек понимает, где он на клавиатуре.
     Задача 11в, Д1: одна наша рамка у всех полей и кнопок — тонкая
     тёмно-серая, без синей рамки браузера. */
  --color-focus: #57524e;
  --focus-ring-width: 0.0625rem;

  /* Задача 11в, Б7: подсказка при наведении — одного вида везде:
     тёплый тёмно-серый фон (не чёрный), текст около 12, малое
     скругление, лёгкая тень, появляется через полсекунды. */
  --color-tip: #3d3835;
  --color-on-tip: #ffffff;
  --tip-delay: 0.5s;
  --shadow-tip: 0 0.125rem 0.5rem rgba(18, 16, 15, 0.18);
  --tip-max-width: 20rem;

  /* Задача 11г, В: кнопки панели блока — светло-серый фон при
     наведении, без наведения — без фона; при нажатии тот же фон чуть
     темнее (`--press-darken`). Одна переменная на оба состояния. */
  --color-block-tool-hover: #efedea;
  --press-darken: 0.94;
  /* Задача 11г, Г1: поле замечания, пока пишешь, — белое с тонкой
     серой рамкой; «Сохранить» в нём — тёмная. */
  --color-remark-field-line: var(--color-line-strong);
  --color-remark-save: var(--color-ink);
  --color-on-remark-save: var(--color-surface);

  /* --- Шрифт ------------------------------------------------ */

  --font-text:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-display: var(--font-text);
  --font-mono:
    ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono",
    monospace;

  --size-display: 2.5rem;
  --size-title: 1.75rem;
  --size-subtitle: 1.25rem;
  --size-text: 1rem;
  --size-small: 0.875rem;
  --size-tiny: 0.75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-tight: 1.1;
  --leading-text: 1.55;

  --tracking-wide: 0.18em;
  --tracking-tight: -0.01em;
  --tracking-tighter: -0.02em;
  --tracking-display: -0.03em;

  /* --- Отступы ---------------------------------------------- */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- Размеры ---------------------------------------------- */

  --radius-small: 0.5rem;
  --radius: 0.75rem;
  --radius-large: 1rem;
  --radius-round: 62.5rem;

  --line-width: 0.0625rem;
  --focus-width: 0.1875rem;
  --focus-offset: 0.125rem;

  /* Палец на телефоне: наименьшая высота нажимаемого. */
  --tap-size: 2.75rem;

  --measure: 34rem;

  /* Колонка материала: лента блоков в конструкторе, «Просмотр»,
   * отрисовка (решение Product Owner от 02.10, пункт 6). 740 пикселей
   * при обычном размере шрифта. **Допущение:** 720–760. Карточка
   * и формы — своей ширины (`--measure`), не шире колонки. Широкие
   * виды фото (задача 10) будут считаться от этой же переменной. */
  --column-width: 46.25rem;

  /* Блок конструктора (пункт 1 от 02.10): от пунктирной линии над
   * блоком и под ним до содержимого — около двух строк текста,
   * сверху и снизу поровну. Одна переменная на оба края. */
  --block-rail-space: calc(var(--size-text) * var(--leading-text) * 2);

  /* Текст материала: отступ между абзацами — и после списка такой
   * же (пункт 3 от 02.10); высота пустого абзаца — одна строка
   * (пункт 4). */
  --paragraph-gap: var(--space-3);
  --paragraph-empty-height: calc(var(--size-text) * var(--leading-text));

  /* Стили абзаца (пункт 5 от 02.10). Сейчас нейтрально: «Крупный» —
   * заметно крупнее и свободнее, «Пояснение» — мельче и плотнее.
   * Окончательные значения задаст оформление. */
  --size-paragraph-large: 1.25rem;
  --leading-paragraph-large: 1.6;
  --gap-paragraph-large: var(--space-4);
  --size-paragraph-note: 0.875rem;
  --leading-paragraph-note: 1.4;
  /* Наименьшая осмысленная ширина колонки внутри строки: заголовок
   * в реестре, строка состояния. Меньше неё блок переносится
   * на свою строку целиком — это и держит раскладку от 360
   * пикселей. */
  --measure-short: 16rem;

  /* Таблица реестра «Мои материалы» (дополнение к задаче 09, 02.10):
   * уже этой ширины она не сжимается, а прокручивается вбок внутри
   * своей обёртки. Шесть колонок, у реестра редактора (задача 11) —
   * восемь; тогда значение поднимется. */
  --table-min-width: 48rem;
  /* Реестр редакции (задача 11, Г2) — девять колонок. С задачи 11а
   * колонок шесть, и реестр редакции берёт `--table-min-width`: на
   * ширине 1280 прокрутки вбок нет. Значение осталось для `wide`. */
  --table-min-width-wide: 72rem;
  /* Окно фильтра в заголовке колонки (задача 11а, А3). Допущение. */
  --filter-width: 15rem;
  /* Поле поиска над реестром (задача 11а, А1). Задача 11в, Б4:
     не шире 320 и высотой около 36; поле и кнопка в окне фильтра —
     около 32. */
  --registry-search-width: 20rem;
  --field-compact-height: 2.25rem;
  --field-small-height: 2rem;
  /* Квадрат «+» над реестром (11в, Б5) — как значки статусов. */
  --create-size: var(--mark-size);
  /* Окно проверки (11в, Ж1): около 560 и середина не выше окна. */
  --check-sheet-max-height: 85vh;
  /* Подпись «Организация · Рубрика» под заголовком (11в, Б1) — 12–13. */
  --size-registry-sub: 0.8125rem;
  --filter-list-height: 16rem;
  /* Значок у статуса (задача 11а, Б1): квадрат и знак. Задача 11б, А7:
     знак около 20 в квадрате 32–36 — 34 и 20. Допущение. */
  --mark-size: 2.125rem;
  --mark-icon-size: 1.25rem;
  /* Кружок с числом новых на вкладке «Редакция» (11б, А2). */
  --tab-badge-size: 1.375rem;
  /* Полоса у номера строки «новый, можно взять» (11б, А3). */
  --row-new-bar: 0.1875rem;
  /* Окно проверки перед действием (11б, Д). Допущение. */
  --check-sheet-width: 35rem;
  /* Задача 11г, Ж: полоса раздела слева, кнопки 34, галочка обычного
     размера, комментарий растёт не выше пяти строк. */
  --check-stripe-width: 0.1875rem;
  --check-button-height: 2.125rem;
  --check-box-size: 1.125rem;
  --check-comment-max-height: calc(var(--size-text) * var(--leading-text) * 5);
  /* Задача 11г, А: «Для кого» в карточке — две колонки. */
  --card-columns: 2;

  /* Задача 11д, Б: окно проверки — точно по `maket_11g_okno.png`
     (числа задачи в rem: 1 px = 0.0625rem). Окно 500, поля 20/22/18,
     скругление 14; разделы — 16 друг от друга и от карточки. */
  --check-width: 31.25rem;
  --check-pad-top: 1.25rem;
  --check-pad-side: 1.375rem;
  --check-pad-bottom: 1.125rem;
  --check-radius: 0.875rem;
  --check-gap: 1rem;
  /* Разделы: заголовок 13/600, черта 3, отступ текста 12, пункты 14,
     ссылки 13 с чертой; «Всё заполнено» — 13.5 зелёным. */
  --check-title-size: 0.8125rem;
  --check-indent: 0.75rem;
  --check-item-size: 0.875rem;
  --check-link-size: 0.8125rem;
  --check-ready-size: 0.84375rem;
  --color-check-red-title: #b42318;
  --color-check-red-line: #d92d20;
  --color-check-yellow-title: #8a6a00;
  --color-check-yellow-line: #e0a800;
  --color-check-green: #1e7f45;
  --color-check-link-line: #b5b0a8;
  /* Карточка: фон, скругление 10, поля 10/12; заголовок 12/600/.04em;
     «изменить» 13; строки — колонка подписей 80, промежутки 6/10,
     подписи 12.5. */
  --color-check-card: #f7f5f2;
  --check-card-radius: 0.625rem;
  --check-card-pad-block: 0.625rem;
  --check-card-pad-inline: 0.75rem;
  --check-card-title-size: 0.75rem;
  --check-card-tracking: 0.04em;
  --color-check-card-title: #6b6b6b;
  --color-check-card-change: #1a1a1a;
  --check-card-label-width: 5rem;
  --check-card-row-gap: 0.375rem;
  --check-card-column-gap: 0.625rem;
  --check-card-label-size: 0.78125rem;
  /* Метки: высота 22, шрифт 12, поля 0 8, скругление 6, промежуток 6. */
  --check-tag-height: 1.375rem;
  --check-tag-size: 0.75rem;
  --check-tag-pad: 0.5rem;
  --check-tag-radius: 0.375rem;
  --check-tag-gap: 0.375rem;
  --color-check-tag-line: #eceae6;
  --color-check-tag-ink: #3a3a3a;
  /* Галочка 18, рамка 1.5, скругление 4, включённая — оранжевая;
     текст 14, межстрочный 1.45; «подробнее» 12.5. Знак внутри — две
     черты белым (размеры знака — от квадрата). */
  --check-box: 1.125rem;
  --check-box-line: 0.09375rem;
  --check-box-radius: 0.25rem;
  --color-check-box-line: #b5b0a8;
  --color-check-box-on: #e63900;
  --check-mark-width: 0.3125rem;
  --check-mark-height: 0.5625rem;
  --check-mark-line: 0.125rem;
  --check-text-size: 0.875rem;
  --check-text-leading: 1.45;
  --check-more-size: 0.78125rem;
  /* Комментарий: высота 36, рамка, скругление 8, поля по бокам 10, 13.5. */
  --check-comment-height: 2.25rem;
  --check-comment-radius: 0.5rem;
  --check-comment-pad: 0.625rem;
  --check-comment-size: 0.84375rem;
  --color-check-comment-line: #dad7d2;
  /* Кнопки: 34, поля 0 14, скругление 9, 14; сверху 18, между 8.
     Главная — оранжевая, белый текст; недоступная — серая. */
  --check-button: 2.125rem;
  --check-button-pad: 0.875rem;
  --check-button-radius: 0.5625rem;
  --check-button-size: 0.875rem;
  --check-buttons-top: 1.125rem;
  --check-buttons-gap: 0.5rem;
  --color-check-main: #e63900;
  --color-check-off: #f3f1ee;
  --color-check-off-ink: #b5b0a8;
  --color-check-off-line: #eceae6;
  --weight-semibold: 600;

  /* Задача 11д, В, Ж, З, А: мелкие серые подписи — поля карточки
     (12), счётчики над реестрами (13), автор в шапке материала,
     «Добавьте первый блок» (13). */
  --color-label: #8a857e;
  --size-label: 0.75rem;
  --size-count: 0.8125rem;
  /* Колонка «место» в сводке замечаний: «Общее», «Блок 01». */
  --remark-place-width: 5.5rem;
  /* Окно замечания и причины: поле в несколько строк. */
  --remark-field-height: 7rem;

  /* Кружок с инициалами на вкладке «Об авторе» (фото — задача 10). */
  --avatar-size: 3.5rem;
  --page-width: 75rem;
  --page-gutter: var(--space-4);

  /* Снимки (задача 10б). Нейтрально, до оформления по наборам:
   * «широкое» — шире колонки, «вертикальное» — уже; в ряд — не уже
   * этой ширины на снимок; фото героя; показ кадров обложки
   * и отметка точки фокуса в студии. */
  --photo-wide-width: 68.75rem;
  --photo-vertical-width: 30rem;
  --photo-row-min: 10rem;
  --hero-photo-width: 12rem;
  --crop-preview-width: 8rem;
  --focus-mark-size: 1.25rem;

  /* Удобство правки (задача 10в). Одиночный снимок в правке — не выше
   * половины окна (Б6); «+» на линии блока — кружок не меньше 32
   * точек (Б5); плитка сетки снимков «в ряд» и «слайдер» — не уже
   * этой ширины: в колонке 740 их пять в ряд, на телефоне — две (Б10). */
  --edit-picture-height: 50vh;
  --tile-min: 8.5rem;

  /* Режим правки как в GetCourse (задача 10г, А3): «+» посередине
   * пунктира — крупный чёрный круг с белым крестом. **Допущение:**
   * диаметр около 40 точек (2.5rem); при наведении — чуть крупнее
   * и с тенью. */
  --rail-plus-size: 2.5rem;
  --rail-plus-hover-scale: 1.08;

  /* Прокручиваемый блок с полным текстом документа. */
  --document-height: 14rem;

  /* Поле набора «Текста» в правке: не меньше четырёх строк, дальше
   * растёт с текстом (третья правка от 02.10, пункт 3). */
  --editor-min-height: calc(var(--size-text) * var(--leading-text) * 4);

  /* Панель справа поверх экрана — карточка и чек-лист конструктора
   * (третья правка от 02.10, пункт 1): ширина как у карточки. */
  --drawer-width: var(--measure);

  /* Белый лист материала в конструкторе: поля от края листа
   * до колонки (пункт 9). */
  --sheet-padding: var(--space-6);

  /* Ширина кнопки «Войти» на большом экране (с макета): своя
   * ширина, не на всю колонку. На телефоне кнопка во всю ширину. */
  --action-width: 20rem;

  /* Первый экран на большом экране (с макета): текстовая колонка
   * слева на белом, иллюстрация — вся правая часть окна.
   *
   * `--hero-art-fade` — какая доля ширины иллюстрации растворяется
   * в белом слева. Подпись заходит на эту полосу, поэтому полоса
   * широкая: текст должен лежать на белом, а не на фотографии. */
  --hero-height: 44rem;
  --hero-text-width: 34rem;
  --hero-art-width: 62%;
  --hero-art-fade: 24%;

  --shadow-soft: 0 0.0625rem 0.125rem rgba(18, 16, 15, 0.08);
  --shadow-lifted: 0 0.5rem 1.5rem rgba(18, 16, 15, 0.1);

  /* --- Сетка с крестиками (стартовая) ------------------------ */

  /* Сама сетка — отдельные файлы SVG
   * (`images/setka.svg`, `images/setka-krestiki.svg`),
   * нарисованные по образцу
   * `docs/maket_startovaya/setka_fragment.png`.
   *
   * **Цвета линий и крестиков лежат в самих файлах**: внешний SVG
   * не видит переменных страницы. Когда придёт брендбук, их меняют
   * там — это единственное исключение из правила «все значения
   * здесь», и оно записано, чтобы о нём не забыли.
   *
   * Отсюда — только расположение слоя. Верхняя часть стоит левее
   * иллюстрации и выше заголовка: линии дотягиваются до её
   * растворённого края и там же гаснут, на фотографию не заходя. */
  --marks-top-left: 30%;
  --marks-top: var(--space-6);
  --marks-inset: var(--space-5);

  /* --- Переписка по замечаниям (задача 11е, Б; макеты 11е) --- */

  /* Подложка переписки у места, рамка сводки, черта ответов. */
  --thread-surface: #F7F6F4;
  --thread-frame: #ECEAE6;
  --thread-reply-line: #E2DFDA;
  /* Стороны: кружок-инициалы и имя (Б3). */
  --thread-editorial: #E8833A;
  --thread-editorial-name: #D9701F;
  --thread-author: #4E7FA8;
  --thread-author-name: #3F6F98;
  /* Время мелко серым — 11 px (Б3); «новое» — оранжевым (Б1). */
  --thread-time: #B0AAA2;
  --thread-time-size: 0.6875rem;
  --thread-new: #E8661A;
  --thread-muted: #8A857E;
  /* Закрытая — бледная (Б1, Б5). */
  --thread-closed-opacity: 0.55;
  /* Метка «не отправлено» и метка «N не отправлено» в шапке (Б4, Б6). */
  --thread-tag-surface: #EFEDEA;
  --thread-tag-ink: #7A746D;
  --thread-unsent-surface: #FDEBD9;
  --thread-unsent-ink: #C2410C;
  /* Размеры: кружок, отступ ответов, поля подложки, скругления. */
  --thread-avatar-size: 2rem;
  --thread-avatar-text: 0.75rem;
  --thread-reply-indent: 2.75rem;
  --thread-padding: 0.75rem 1.25rem;
  --thread-radius: 0.75rem;
  --thread-field-height: 2.75rem;
  --thread-gap: 0.625rem;
  --thread-size: 0.9375rem;
  --thread-small: 0.8125rem;

  /* Карточка у редакции (Г): кружок автора, пилюли, линия «Хода работы». */
  --card-author-avatar: 3rem;
  --card-author-avatar-text: 1.125rem;
  --pill-height: 2.25rem;
  --pill-line: #DAD7D2;
  --work-dot: 0.625rem;
  --work-dot-top: 0.4em;
  --label-spacing: 0.08em;
  --work-line: #E2DFDA;
  --work-tag-surface: #FDEBD9;
  --work-tag-ink: #C2410C;

  /* --- Задача 11ж ------------------------------------------- */

  /* А3: роль после имени — мелко серым. */
  --thread-role: #A39D95;
  /* Г3: длинное сообщение свёрнуто после четырёх строк. */
  --thread-fold-lines: 4;
  /* Г2: подсказка длины под полем. */
  --thread-note: #8A857E;

  /* Д: «Об авторе» (`maket_11zh_profil.png`). */
  --profile-surface: #F7F6F4;
  --profile-radius: 0.625rem;
  --profile-padding: 1.5rem;
  --profile-avatar: 4.5rem;
  --profile-avatar-text: 1.375rem;
  --profile-label-width: 13rem;
  --profile-input-width: 24rem;
  --profile-line: #ECEAE6;
  --profile-note: #ABA59C;
  --segmented-line: #D6D2CC;
  --segmented-on: #1A1918;
  --segmented-on-ink: #FFFFFF;

  /* --- Задача 11з ------------------------------------------- */

  /* Д3: третья сторона — редактор региона (кружок / имя). Задача 11и, Г:
     сливовый вместо фиолетового; имена переменных прежние. */
  --thread-region-editor: #A0528F;
  --thread-region-editor-name: #8A3F7B;

  /* Г1–Г2: второстепенные кнопки шапки — серые, как «← Редакция»;
   * «Отклонить» — белая, тёмно-оранжевый текст (как знак «Ждём»),
   * бледно-оранжевая рамка, отодвинута на 6 px. */
  --button-secondary-surface: #F1EFEC;
  --button-secondary-line: #DAD7D2;
  --button-secondary-ink: #3A3733;
  --button-reject-ink: #C2410C;
  --button-reject-line: #F0C7B4;
  --button-reject-gap: 6px;
  /* Г3: главная кнопка в «Просмотре» — той же высоты, что в шапке. */
  --topbar-button-height: 34px;

  /* А: «Удалить» — единственная красная кнопка студии; плашка
   * «Служебное», полоса удалённого, жёлтая черта предупреждения. */
  --button-delete: #B42318;
  --button-delete-strong: #912018;
  --service-plate-surface: #F1EFEC;
  --service-plate-ink: #8A857E;
  --deleted-strip-surface: #F1EFEC;
  --deleted-row-opacity: 0.6;
  --warning-line: #E8B931;
  --warning-line-width: 3px;

  /* В1: колонка «Редакция» — вторая строка мелко серым. */
  --registry-region-caption: #8A857E;

  /* Д4: «Добавить» в поле ответа держит свою ширину. */
  --thread-add-width: 5rem;

  /* Е1: экран «Доступа к работе в студии сейчас нет». */
  --no-access-width: 34rem;
  --no-access-plate: #F7F6F4;
  --no-access-plate-padding: 1rem 1.25rem;
  --no-access-label: #8A857E;

  /* Е6: глаз в поле пароля. */
  --password-eye-size: 2.25rem;

  /* З: «Страница не загрузилась — обновите её». */
  --load-failed-surface: #FDECEA;
  --load-failed-ink: #B3261E;

  /* --- Задача 12а, Ж: закрепление на витрине (макет 12а) ------ */

  /* Плашка «Закреплён до …» — оранжевый «ваш ход», как сейчас;
   * «Закрепить ▾» — тихо серым пунктиром. */
  --pin-ink: var(--color-accent);
  --pin-surface: var(--color-mark-wait-surface);
  --pin-quiet-ink: #8A857E;
  --pin-quiet-line: #C9C4BD;
  --pin-icon-size: 0.95rem;
  --pin-menu-width: 12rem;
  --pin-menu-surface: var(--color-surface);
  --pin-menu-shadow: 0 6px 24px rgba(31, 27, 22, 0.14);
  --pin-menu-hover: var(--color-accent-faint);
  --pin-row-line: #E9E6E2;
  --pin-hint-ink: #8A857E;
  --pin-option-chosen: var(--color-accent-faint);
  --pin-line-width: 1px;
  --pin-arrow-size: 0.75em;
  --pin-small-size: 0.85em;

  /* --- Задача 13а: «Участники», «Редакторы», регистрация ------ */

  /* В2: переключатель внутри вкладки — серая подложка, выбранный белый
   * с лёгкой тенью и жирной подписью, остальные серым. */
  --switcher-surface: #EFEDEA;
  --switcher-line: #E2DFDA;
  --switcher-on: #FFFFFF;
  --switcher-ink: #8A857E;
  --switcher-on-ink: #12100F;
  --switcher-radius: 0.625rem;
  --switcher-item-radius: 0.5rem;
  --switcher-pad: 0.25rem;
  --switcher-item-pad: 0.5rem 1rem;
  --switcher-shadow: 0 1px 3px rgba(18, 16, 15, 0.14);

  /* В3: чипы голосов — выбранный тёмной рамкой и жирной подписью,
   * остальные бледной рамкой и серым текстом; ни оранжевого, ни заливки. */
  --voice-chip-line: #DAD7D2;
  --voice-chip-on-line: #12100F;
  --voice-chip-ink: #8A857E;
  --voice-chip-on-ink: #12100F;
  --voice-chip-height: 2.125rem;
  --voice-chip-pad: 0 0.875rem;
  --voice-chip-line-width: 1px;
  --voice-chip-on-line-width: 1.5px;

  /* В5: «Все субъекты РФ ▾» и прочие выпадающие списки. */
  --dropdown-width: 17rem;
  --dropdown-list-height: 18rem;
  --dropdown-line: #DAD7D2;
  --dropdown-hover: #F7F6F4;
  --dropdown-on: #F1EFEC;

  /* В5: строка «кто там есть». */
  --people-summary-surface: #F7F6F4;
  --people-summary-pad: 0.625rem 1rem;

  /* Е2–Е3: кандидат — оранжевая полоса и имя; окошко под строкой. */
  --people-confirm-width: 22rem;
  --people-confirm-pad: 1.25rem;
  --people-muted-ink: #ABA59C;
  --people-plus-ink: #8A857E;

  /* Г2, Д: состояние ссылки — «включена» зелёная, «выключена» серая. */
  --link-state-on: #1E7F45;
  --link-state-on-surface: #E3F1E7;
  --link-state-off: #8A857E;
  --link-state-off-surface: #F1EFEC;
  --link-state-pad: 0.125rem 0.5rem;
  --link-address-font: var(--font-mono);

  /* Е6, Г4: карточки панелью справа. */
  --people-card-plate: #F7F6F4;
  --people-card-label: #8A857E;
  --people-card-avatar: 3rem;
  --people-card-avatar-surface: #2A4B8D;
  --people-card-avatar-ink: #FFFFFF;
  --people-card-key-width: 7rem;

  /* «Создать», «Сменить», «Скопировать» — тёмные кнопки окон (макеты 13а). */
  --button-dark: #1A1918;
  --button-dark-ink: #FFFFFF;
  --button-dark-strong: #000000;

  /* Ж: метки субъектов, «Без редактора», «ждёт принятия». */
  --region-tag-line: #E2DFDA;
  --region-tag-pad: 0.125rem 0.5rem;
  --region-tag-number: #8A857E;
  --region-tag-foreign: #ABA59C;
  --without-editor-surface: #F1EFEC;
  --without-editor-line: #E2DFDA;
  --without-editor-pad: 0.625rem 1rem;
  --editor-name-ink: #8A3F7B;
  --editor-pending-surface: #F1EFEC;
  --editor-pending-ink: #8A857E;

  /* Д7: строка кандидата — бледно-оранжевая плашка. */
  --candidate-surface: #FDF1EA;
  --candidate-line: #F6D3C2;
  --candidate-pad: 0.875rem 1.25rem;
  --candidate-ink: #57524E;

  /* Д3: регистрация — плашка организации и сетка полей в две колонки. */
  --join-plate-surface: #F7F6F4;
  --join-plate-pad: 1rem 1.25rem;
  --join-label: #8A857E;
  --join-grid-columns: 1fr;

  /* --- Движение --------------------------------------------- */

  --motion-fast: 120ms;
}

/*
 * Большой экран. Значения — тоже здесь: «все размеры в одном файле»
 * означает и те, что меняются с шириной. В остальных файлах стилей
 * `@media` только перекладывает блоки, но значений не задаёт.
 *
 * Порог 48rem — примерно 768 пикселей при обычном размере шрифта:
 * планшет поперёк и всё, что шире.
 */
@media (min-width: 48rem) {
  :root {
    --page-gutter: var(--space-6);
    --size-display: 4rem;
    --size-title: 2.25rem;
    --document-height: 18rem;
    /* Задача 13а, Д3: поля регистрации — в две колонки. */
    --join-grid-columns: 1fr 1fr;
  }
}