/* Inter — самостоятельный хостинг, только кириллица и латиница.
   Макет 26.08 просит Inter, но подключения в нём не было: на своей машине
   он подхватывался системным, а на чужой молча падал в запасной шрифт. */
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("fonts/Inter-cyrillic-italic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("fonts/Inter-latin-italic.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/Inter-cyrillic-normal.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/Inter-latin-normal.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Manrope — заголовки, интерфейс и все числа. Тот же приём, что с Inter:
   свой хостинг, только кириллица и латиница, вариативный 400–800.
   39 КБ на два файла. Внешних запросов у витрины по-прежнему ноль —
   это условие переезда в РФ, а не украшение. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("fonts/Manrope-cyrillic-normal.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("fonts/Manrope-latin-normal.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* IBM Plex Mono — служебный слой: каналы, время, надстрочники, названия
   колонок, подпись RTM (канон, решение пользователя 02.09).
   Тот же приём, что у Inter и Manrope: свой хостинг, только кириллица
   и латиница, `font-display:swap`. Два начертания вместо вариативного —
   у Plex Mono вариативной версии нет.
   📌 Цена замерена, а не оценена: 4 файла, 46,4 КБ суммарно. Довод против
   Plex от 01.09 («третий файл шрифта — это вес, который должен доехать при
   переезде в РФ») остаётся верным по форме, но в этих числах он весит меньше,
   чем отличимость служебного слоя от системного моноширинного.
   ⚠️ `unicode-range` совпадает с диапазонами Inter — иначе браузер тянул бы
   латинский файл ради кириллической строки. */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/PlexMono-cyrillic-400.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/PlexMono-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/PlexMono-cyrillic-500.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/PlexMono-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* RTM — витрина. Визуальный язык: visual-concept-2026-08-31.md,
   направление «Инструмент и витрина», принято 31.08.
   Ноль внешних зависимостей: оба шрифта лежат рядом. */

:root{
  /* ── Тёмные поверхности ─────────────────────────────────────────────
     Шапка верстака, мачта клиента, подвал, первичное действие. */
  --ink:#0B0C0D; --ink-2:#16181C; --ink-3:#23262B;
  --on-ink:#F2F3F5; --on-ink-2:#8E949E;   /* 17,63 и 6,41 на --ink */

  /* ── Текст, три ступени ─────────────────────────────────────────────
     🔴 Урок, оплаченный дважды. Сначала --fg-3 стоял #74746A: на белом
     он проходил AA (4,72), а на утопленном 4,21 и на холсте 4,02 при
     норме 4,5 — и ровно им были набраны панель квот и строка комментария
     куратора. Затем в макете 31.08 стоял холодный #858B95, и он валит
     AA уже на ВСЕХ пяти поверхностях (3,00–3,43).
     #666C75 — холодный и проходит везде: белая 5,29 · bg-1 5,11 ·
     утопленная 4,98 · холст 4,85 · коралловая мягкая 4,63.
     Менять этот токен только с пересчётом по всем пяти фонам. */
  --fg-1:#14161A; --fg-2:#565C66; --fg-3:#666C75;
  /* Ф2-18: цвет погашенного действия. Погашенная кнопка обязана сообщать,
     какое действие закрыто, — ради этого отличия от пустого места она
     и возвращена. Норма AA 4,5 к disabled-контролам не применяется, но свой
     порог мы держим: не ниже 3,0.
     🔴 Порог был объявлен «3,05» и посчитан ТОЛЬКО НА БЕЛОМ, а кнопка живёт
     и на утопленных поверхностях: там прежний `#8E949E` давал 2,95 и 2,87,
     то есть нарушал собственное обещание (нашёл design-review 02.09).
     Соседний комментарий к `--fg-3` формулирует правило прямо — «менять только
     с пересчётом по всем фонам», — а к соседнему токену оно применено не было.
     ⇒ Пересчитано по всем трём: 3,47 · 3,35 · 3,27. */
  --fg-dis:#848A94;

  /* ── Светлые поверхности ────────────────────────────────────────────
     ⚠️ Бежевого больше нет, и это решение, а не потеря. #F5EFE6 и любой
     тёплый холст читаются как дефолт ИИ-дизайна (пользователь, 31.08).
     Нейтраль холодная, всё тепло на экране отдано кораллу. */
  --bg-0:#FFFFFF; --bg-1:#FAFBFC; --bg-sunk:#F7F8FA;
  --canvas:#F4F5F7;
  --rule:#E4E6EA; --rule-strong:#CFD3DA;

  /* ── Акцент и семантика ─────────────────────────────────────────────
     Коралл — единственный акцент клиентской поверхности; как текст
     только --coral-text (#EA4949 на белом = 3,79, ниже AA).
     Синий — ровно одна работа: чекбокс «идёт клиенту» на верстаке. */
  --coral:#EA4949; --coral-text:#C03333; --coral-soft:#FDECEC;
  --blue:#2B5BFF;

  /* ── Форма ──────────────────────────────────────────────────────── */
  --r-card:14px; --r-ctl:10px; --r-chip:7px;
  --sh-1:0 1px 2px rgba(11,12,13,.05);
  --sh-2:0 1px 3px rgba(11,12,13,.06), 0 14px 34px -22px rgba(11,12,13,.28);

  /* ── Шрифт ──────────────────────────────────────────────────────────
     Inter несёт всё написанное человеком: плотную кириллицу он держит
     лучше геометрического гротеска. Manrope несёт заголовки, интерфейс
     и все числа. Разделение не косметическое: читатель видит, где
     измеренное, а где сказанное. */
  --font:"Inter", ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-d:"Manrope", "Inter", ui-sans-serif, -apple-system, "Segoe UI", Arial, sans-serif;
  /* Моноширинный — решение пользователя 02.09: IBM Plex Mono. Несёт каналы,
     время, надстрочники, названия колонок и подпись RTM.
     ⏳ ФАЙЛОВ ШРИФТА ЕЩЁ НЕТ в `fonts/`: пока их не подключат, стек падает
     на системный, и роль исполняется, но характера Plex у неё нет.
     Расхождение канона и поверхности здесь С ДАТОЙ и названо вслух — это
     не то же самое, что молчаливое расхождение, которое аудит 31.08 нашёл
     и гейт 01.09 засчитал как Major. */
  --font-m:"IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --proto-h:40px;
  /* Ширина колонки действий: замер самого широкого набора (283 px) + запас. */
  --acts-w:300px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--canvas);color:var(--fg-1);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.45;
  min-height:100vh;min-height:100dvh}
button,input,select,textarea{font-family:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* На тёмной шапке кольцо фокуса цвета --ink лежало на фоне --ink: контраст
   1,0 — то есть его не существовало. Клавиатурная навигация по верхнему
   меню была слепой. */
.top :focus-visible{outline-color:var(--on-ink)}

/* ==========================================================================
   1. Служебная оболочка прототипа — намеренно не похожа на продукт:
   плоская серая полоса и родные контролы браузера.
   ========================================================================== */
.proto[hidden]{display:none}
.proto{position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;padding:7px 16px;background:#DCDCD5;
  border-bottom:1px dashed #A9A9A0;color:#3A3A34;font-size:12px}
.proto-mark{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#5A5A52;white-space:nowrap}
.proto-mark::before{content:"";width:7px;height:7px;border:1.5px dashed #7A7A70;border-radius:50%}
.proto label{display:flex;align-items:center;gap:6px;white-space:nowrap}
.proto select{font-size:12px;padding:2px 4px;max-width:230px}
.proto .spacer{margin-left:auto}
.proto .reset{background:none;border:1px solid #A9A9A0;border-radius:4px;
  font-size:12px;padding:2px 8px;color:#3A3A34;cursor:pointer}
.proto .fake{color:#6A6A60}
@media (max-width:720px){.proto .fake{display:none}}
@media (max-width:640px){.proto{gap:10px;padding:6px 12px}.proto select{max-width:150px}}
/* Служебный режим «десктоп» на узком стекле: документ не ломается,
   а панорамируется — sticky остаётся на скролле документа, а не в overflow. */
@media (max-width:1000px){body.internal.w-desktop{min-width:1180px}}

/* ==========================================================================
   2. Пояснения — по тумблеру. По умолчанию экран чистый.
   ========================================================================== */
.note{display:none}
body.notes .note{display:block;font-size:12px;line-height:1.55;color:#5F5F56;
  background:var(--canvas);border-left:2px solid #C3C3B9;
  margin:0;padding:12px 0 20px 14px;max-width:900px}
body.notes .note b{color:#43433C}
body.notes .note code{font-size:11px;background:#E2E2DB;padding:1px 4px;border-radius:3px}
body.notes .note + .note{padding-top:0}
.note-wrap{padding:0 24px}
.note-in{padding:16px 20px 24px}

/* ==========================================================================
   3. Внутренние экраны — десктоп, плотно (база 14px)
   ========================================================================== */
/* ══ ВЕРХНЯЯ ПОЛОСА ══════════════════════════════════════════════════════════
   Ф2-4 (02.09). Переработана целиком. Пять признаков, из которых складывалось
   «начало 2000-х», и что сделано с каждым:

   · сплошная чёрная полоса в край без глубины  → полоса осталась тёмной
     (это канон, «инструмент» против «витрины»), но получила нижнюю границу
     и лёгкую тень при прокрутке: она больше не приклеена к листу встык;
   · навигация голыми ссылками, различаемыми только цветом → у активного
     раздела появилась поверхность-пилюля, а не только вес;
   · «знак + RTM словами» капсом с трекингом → знак компактный, RTM набран
     моноширинным через разделитель, как требует канон;
   · действия аккаунта открытым текстом в углу → одно управление с меню;
   · всё в один ряд равным весом → три яруса.
   ═══════════════════════════════════════════════════════════════════════════ */
.top{height:60px;background:var(--ink);color:var(--on-ink);display:flex;align-items:center;
  gap:20px;padding:0 20px;position:sticky;top:var(--proto-h);z-index:30;
  border-bottom:1px solid rgba(247,247,243,.10)}
body.scrolled .top{box-shadow:0 1px 0 rgba(11,12,13,.06),0 8px 24px rgba(11,12,13,.10)}

/* Замок бренда: знак Affect ведущий, RTM — моноширинная подпись через
   разделитель (канон 31.08). */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:none}
/* 🔴 Знак был 57×22 при `viewBox="0 0 1024 396"`, где сама краска занимает
   y 73,8..323,5 — то есть ~19% бокса пустое поле, и РЕАЛЬНАЯ высота знака
   была 13,9 px. В эти 13,9 px укладывался весь замок ВМЕСТЕ С ДЕСКРИПТОРОМ:
   на подпись оставались единицы пикселей, и она превращалась в серую кашу.
   ⇒ отдельный ассет с обрезанным viewBox: только начертание (y 73,8..239,0),
   без дескриптора и без пустых полей. Теперь заданный размер — это размер
   знака, а не бокса вокруг него. */
.brand i.logo{display:block;width:96px;height:19px;flex:none;
  background:url(brand/affect-wordmark-white.svg) left center/contain no-repeat}
.brand.dark i.logo{background-image:url(brand/affect-wordmark.svg);width:132px;height:26px}
/* На светлой карточке разделитель и подпись берут токены светлой поверхности:
   тот же класс ошибки, что ловили с кольцом фокуса и с `--fg-3` в шапке —
   цвет для одного фона, применённый к противоположному. */
.brand.dark .sep{background:var(--rule-strong);height:20px}
.brand.dark .pname{color:var(--fg-2);font-size:15px}
.brand .sep{width:1px;height:16px;background:rgba(247,247,243,.22);flex:none}
.brand .pname{font-family:var(--font-m);font-size:13px;font-weight:500;letter-spacing:.10em;
  color:var(--on-ink)}
@media (hover:hover){.brand:hover .pname{color:#fff}}

/* Первый ярус — ежедневная работа. Активный раздел несёт поверхность,
   а не только цвет: по одному весу шрифта его приходилось искать. */
/* 🔴 Было `flex:1`: полоса разделов растягивалась на всю свободную ширину
   и уносила бургер к правому краю, вплотную к учётной записи. Бургер там
   читается как часть аккаунта, хотя это ВТОРОЙ ЯРУС ТОЙ ЖЕ НАВИГАЦИИ —
   он и заменил собой пункт «Ещё», стоявший в этом ряду слева (Р3-4).
   Замечание пользователя 03.09. Теперь ряд занимает свою ширину, зазор
   отдан учётной записи, и оба яруса навигации стоят рядом слева. */
nav{display:flex;align-items:center;gap:4px;flex:0 1 auto;min-width:0}
nav a{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;
  border-radius:var(--r-ctl);font-size:14px;color:rgba(247,247,243,.62);
  text-decoration:none;white-space:nowrap}
@media (hover:hover){nav a:hover{color:var(--on-ink);background:rgba(255,255,255,.06)}}
nav a.on{color:var(--ink);background:var(--on-ink);font-weight:600}
nav a.on .chip{background:rgba(11,12,13,.10);color:rgba(11,12,13,.55)}
.chip{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--r-chip);padding:2px 5px;background:rgba(255,255,255,.10);
  color:rgba(247,247,243,.62)}

/* Второй ярус — бургер и выезжающая панель (Р3-4). Служебное
   и администрирование живут в другом слое, а не соседним пунктом в ряду. */
.burger{flex:none;width:36px;height:36px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;border-radius:var(--r-ctl);background:none;border:0;cursor:pointer;
  margin-left:4px}
.burger i{display:block;width:16px;height:1.5px;border-radius:1px;background:rgba(247,247,243,.72)}
@media (hover:hover){.burger:hover{background:rgba(255,255,255,.08)}.burger:hover i{background:var(--on-ink)}}
.burger.open,.burger.on{background:rgba(255,255,255,.12)}
.burger.open i,.burger.on i{background:var(--on-ink)}
/* Активный раздел внутри панели помечен точкой на бургере: иначе, пока панель
   закрыта, «где я» не читается вовсе. */
.burger.on{position:relative}
.burger.on::after{content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;
  border-radius:50%;background:var(--coral)}

.drawer-veil{position:fixed;inset:0;z-index:60;background:rgba(11,12,13,.32)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:61;width:320px;max-width:86vw;
  background:var(--bg-0);border-left:1px solid var(--rule);padding:16px 14px;
  box-shadow:-16px 0 40px rgba(11,12,13,.16);overflow-y:auto;
  animation:drawer-in .18s cubic-bezier(.2,.7,.3,1)}
@keyframes drawer-in{from{transform:translateX(16px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.drawer{animation:none}}
.drawer-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.drawer-h p{margin:0;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3)}
.drawer-x{width:32px;height:32px;flex:none;border:0;background:none;cursor:pointer;
  font-size:20px;line-height:1;color:var(--fg-3);border-radius:var(--r-ctl)}
@media (hover:hover){.drawer-x:hover{background:var(--bg-sunk);color:var(--fg-1)}}
.drawer a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;border-radius:var(--r-ctl);font-size:15px;color:var(--fg-1);text-decoration:none}
@media (hover:hover){.drawer a:hover{background:var(--bg-sunk)}}
.drawer a.on{background:var(--bg-sunk);font-weight:600}
.drawer .chip{background:var(--bg-sunk);color:var(--fg-3);border:1px solid var(--rule);flex:none}
.drawer a.on .chip{background:var(--bg-0)}
.drawer-sep{margin:16px 0 6px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}

/* Учётная запись. Одно управление вместо четырёх текстовых объектов
   в углу; редкие действия — под ним. */
.acct-wrap{position:relative;display:inline-flex;flex:none;margin-left:auto}
.acct-btn{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 10px 0 6px;
  border-radius:999px;background:rgba(255,255,255,.07);border:0;cursor:pointer;
  font-family:inherit;font-size:13px;color:rgba(247,247,243,.78);max-width:230px}
.acct-btn.ro{cursor:default}
@media (hover:hover){.acct-btn:not(.ro):hover{background:rgba(255,255,255,.13);color:var(--on-ink)}}
.acct-btn.open{background:rgba(255,255,255,.15);color:var(--on-ink)}
/* Инициал — 12 px, то есть НЕ крупный текст по WCAG, и порог для него 4,5.
   Белый на `--coral` даёт 3,79 и не проходит; на `--coral-text` — 5,58.
   Акцент палитры от этого не тускнеет: кружок остаётся коралловым,
   просто той его ступенью, которая держит текст. */
.acct-btn .ava{width:24px;height:24px;flex:none;border-radius:50%;background:var(--coral-text);
  color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* Имя своё, а не общее: `.who` принадлежит светлой клиентской полосе. */
.acct-btn .acct-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
.acct-btn .chev{border-top-color:currentColor}
.menu.at-acct{position:absolute;top:42px;right:0;width:230px}
.menu.at-acct a{display:block;padding:8px 10px;border-radius:var(--r-ctl);font-size:14px;
  color:var(--fg-1);text-decoration:none}
@media (hover:hover){.menu.at-acct a:hover{background:var(--bg-sunk)}}
.menu.at-acct .danger{color:var(--coral-text)}

.sel-dark{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:150px;
  font-size:14px;font-weight:500;color:var(--on-ink);background:rgba(255,255,255,.09);border:0;
  border-radius:var(--r-ctl);height:34px;padding:0 12px;cursor:pointer}
.sel-dark .chev{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid rgba(247,247,243,.55);flex:none}
/* `.nocontext` удалён вместе с плашкой «Вне контекста клиента» (Р3-9). */

/* Р3-9: переключатель уровня курации. Сегмент, а не две вкладки — уровни
   взаимоисключающие и их всего два, а сегмент показывает оба варианта сразу
   и не требует догадываться, что есть второй. */
.lvl{display:flex;align-items:center;gap:12px;min-width:0}
.lvl-lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);white-space:nowrap}
.seg{display:inline-flex;padding:2px;background:var(--bg-sunk);border:1px solid var(--rule);
  border-radius:var(--r-ctl);flex:none}
.seg a{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;
  border-radius:calc(var(--r-ctl) - 2px);font-size:13px;color:var(--fg-2);text-decoration:none;
  white-space:nowrap}
@media (hover:hover){.seg a:not(.on):hover{color:var(--fg-1)}}
.seg a.on{background:var(--bg-0);color:var(--fg-1);font-weight:600;
  box-shadow:0 1px 2px rgba(11,12,13,.06)}
.lvl-note{font-size:13px;color:var(--fg-3);white-space:nowrap}

/* ══ СЛУЖЕБНЫЙ СЛОЙ — МОНОШИРИННЫЙ ══════════════════════════════════════════
   Канон отдаёт моноширинному пять ролей: каналы · время · надстрочники ·
   названия колонок · подпись RTM. До 02.09 он нёс две из пяти — подпись
   и названия колонок, — то есть файл шрифта покупал бы подпись в углу.

   Здесь роль отдаётся целиком, и ОДНИМ правилом, а не тридцатью: надстрочники
   это один вид объекта — мелкая капсовая подпись, называющая служебное поле, —
   и разъезжаться они не должны. Тот же довод, что у форматтера квоты:
   не «поправить каждое место», а убрать возможность разойтись.

   ⚠️ Трекинг сбавлен с .06–.08em до .03em: моноширинный уже широк по природе,
   и прежняя разрядка на нём рассыпает слово.
   ⚠️ Начертания текста (заголовки, темы, пояснения) НЕ трогаются: моноширинный
   здесь — признак служебного, и если им набрать всё, признак исчезнет. */
.colhead, .colhead .num, .colhead .acts-head,
aside h3, .kicker, .sec-lbl, .rail-lbl, .rail-box h4, .lvl-lbl, .sel-lbl,
.menu .mh, .drawer-h p, .drawer-sep, .divider .n, .cutline .n, .dnote-h,
.srcbox-h, .src-lbl, .srcbox-r .lead-t, .qrow .gen, .menu .mtag,
.chip, .chip-l, .state-chip, .tbl th, .rest-head .eb, .mstats .k{
  font-family:var(--font-m);letter-spacing:.03em}

/* Каналы — идентификаторы, а не текст: моноширинный отличает их от того,
   что написано человеком, ровно как в комментариях самого куратора.

   🔴 Второй прогон design-review: роль была отдана ТОЛЬКО НА ВНУТРЕННЕЙ
   поверхности, а на клиентской канал шёл тремя гарнитурами — моноширинный
   на верстаке, Inter в клиентской ленте (`.chan`, `.m2`), Manrope на
   «Разметке», где колонка «Главный пост» получила класс `.num`.
   Три гарнитуры на один объект — это не разнообразие, а отсутствие правила.
   ⚠️ И слой, которому отдана отличимость, оказался слабее всего ровно там,
   где смотрит клиент. */
.src-a, .w120, .item .chan, .src .m2{font-family:var(--font-m)}
/* `.num` красит Manrope все числа — но колонка «Главный пост» это НЕ число,
   она попала в класс ради выравнивания. Гарнитуру возвращаем предмету. */
.colhead .w120, .row .w120{font-family:var(--font-m);font-weight:400}
/* Время и просмотры у источника — вторая канонная роль. */
.srcbox-r .v{font-family:var(--font-m)}
/* ⚠️ Имя канала приходит из контракта без ограничения длины: Telegram режет
   username на 32 знака, но это ЧУЖОЕ ограничение, а форма `primary_channel`
   у нас не зафиксирована. Неразрывное имя в 40+ знаков увело бы документ
   вбок на 375. Держимся своим правилом, а не чужим. */
/* 🟠 design-review, третий прогон: перенос я дал КАНАЛАМ и не дал ЗАГОЛОВКАМ.
   Хештег в 46 знаков раздвигал документ 375 → 631 в ленте и 375 → 888
   на карточке темы — а карточка это первый экран для приходящих из Telegram.
   Заголовок приходит из модели и длину не обещает никак; URL безопасен
   (браузер его переносит), хештег и слипшееся слово — нет.
   ⚠️ Правило теперь на ВСЕХ узлах, куда приходит текст извне, а не на тех,
   где переполнение уже поймали. */
/* ⚠️ Перечислять узлы поимённо — тот же способ промахнуться, каким я уже
   промахнулся дважды за день (релевантность, «10:00»): заголовок карточки
   темы живёт в `.cwrap > h1` без класса, и в первый список он не попал.
   ⇒ Правило вешается на КОНТЕЙНЕРЫ клиентского и внутреннего текста,
   а не на найденные узлы. Внешний текст приходит из модели и длину
   не обещает никак. */
.item, .cwrap, .chead, .mast, .rest-head, .txt, .card-main, .srcbox{overflow-wrap:anywhere}

/* Надстрочники КЛИЕНТСКОЙ поверхности — тот же служебный слой, что внутри.
   Мачта `/c/issue` набирала «РАЗВЕДКА ПОВЕСТКИ · СРЕДА» гротеском, а подписи
   трёх чисел на 350 px ниже, в том же тёмном поле, — моноширинным: один ярус
   двумя гарнитурами. */
.mast .kick, .hero .lbl, .rest-head .eb{font-family:var(--font-m);letter-spacing:.03em}

.sub{min-height:52px;background:var(--bg-0);border-bottom:1px solid var(--rule);display:flex;
  align-items:center;gap:16px;padding:9px 24px;position:sticky;top:calc(var(--proto-h) + 56px);z-index:25}
.sub .right{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sel{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:230px;height:34px;
  padding:0 12px;background:var(--bg-0);border:1px solid var(--rule-strong);border-radius:var(--r-ctl);
  font-size:14px;font-weight:500;color:var(--fg-1);cursor:pointer}
.sel.open{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.sel .chev{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--fg-3);flex:none}
.sel-lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.date{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.date button{font-size:14px;color:var(--fg-3);background:none;border:0;cursor:pointer;padding:4px 8px}
.date button[disabled]{color:var(--rule-strong);cursor:default}
.status{font-size:13px;color:var(--fg-2);display:flex;align-items:center;gap:8px}
.status i{width:6px;height:6px;border-radius:50%;background:var(--coral);display:block}
.status.done i{background:var(--rule-strong)}
.give{height:34px;padding:0 16px;background:var(--ink);color:var(--on-ink);border:0;
  border-radius:var(--r-ctl);font-size:14px;font-weight:500;cursor:pointer}
.give[disabled]{background:var(--bg-sunk);color:var(--fg-3);cursor:default}
.confirm{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--fg-2)}
.confirm .no{background:none;border:0;color:var(--fg-3);cursor:pointer;
  border-bottom:1px solid var(--rule-strong);padding:0;font-size:13px}

/* Правила `.sub.system` (тёмная полоса режима общей части) удалены 02.09
   вместе с самим классом: полоса режима теперь ОДНА на оба уровня курации,
   и уровень сообщает переключатель, а не смена фона (Р3-9). Смена цвета
   была одним из четырёх признаков, говоривших об уровне одновременно. */

.menu{position:absolute;top:46px;width:288px;max-height:330px;overflow-y:auto;background:var(--bg-0);
  border:1px solid var(--rule-strong);border-radius:var(--r-ctl);box-shadow:0 8px 24px rgba(10,10,10,.10);
  padding:6px;z-index:40}
.menu .mh{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
  padding:8px 10px 6px;margin:0}
.menu button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:36px;
  padding:0 10px;background:none;border:0;border-radius:var(--r-chip);font-size:14px;color:var(--fg-1);
  cursor:pointer;text-align:left}
.menu button.on{background:var(--bg-sunk);font-weight:500}
.menu button.mute{color:var(--fg-3);cursor:default}
.menu button .mnum{font-size:12px;color:var(--fg-3);flex:none;background:none;padding:0;border:0}
.menu .sep{height:1px;background:var(--rule);margin:6px 4px}
.menu.at-prism{left:126px}
.menu-foot{border-top:1px solid var(--rule);margin:6px 4px 2px;padding:8px 6px 2px;
  font-size:12px;line-height:1.45;color:var(--fg-3)}
@media (hover:hover){.menu button:not(.mute):hover{background:var(--bg-sunk)}}
/* Ф2-2а: два уровня в меню призм. Клиент — заголовок группы, призма —
   строка с отступом. Отступ и есть выражение вложенности: рамки и линии
   в выпадающем списке из тринадцати строк только шумят. */
.menu .mh.grp{margin-top:12px;color:var(--fg-1);font-size:11px;letter-spacing:.06em}
.menu .mh.grp:first-of-type{margin-top:0}
/* Корпус — опора группы: он тяжелее по начертанию, призмы под ним с отступом.
   Вложенность выражена отступом и весом, без рамок и линий: в списке
   из тринадцати строк они только шумят. */
.menu button.root{font-weight:600;color:var(--fg-1);margin-top:10px}
.menu button.root:first-child{margin-top:0}
.menu button.sub{padding-left:22px}
.menu .mtag{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);
  border:1px solid var(--rule);border-radius:var(--r-chip);padding:1px 5px;margin-left:6px}

/* 🔴 Ф2-5 (02.09). Ширина выбрасывалась, а текст жался.

   Было: `max-width:1440px`, панель 220 px константой, зазор 24 px константой.
   На широком мониторе документ упирался в 1440, поля по краям росли
   неограниченно (при 1728 — по 144 px с каждой стороны), а внутренний зазор
   оставался 24. Отсюда обе жалобы разом: «места очень много» снаружи
   и «квоты стоят впритирку» внутри — одно следствие одной строки.

   Стало: потолок поднят, зазор и панель растут вместе с ним. Потолок
   не снят совсем — строка темы это не проза, но и не бесконечная полоса:
   за 1680 глаз начинает терять связь заголовка с числами справа. */
.body{display:flex;gap:40px;max-width:1680px;margin:0 auto;padding:24px 32px;align-items:flex-start}
aside{width:240px;flex:none;position:sticky;top:calc(var(--proto-h) + 120px)}
aside h3{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin:0 0 12px}
.qrow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:11px 0;
  border-bottom:1px solid var(--rule);font-size:14px}
.qrow .q{font-family:var(--font-d);font-size:14px;font-weight:600;color:var(--fg-2);
  font-variant-numeric:tabular-nums;flex:none}
/* Ф2-17: «общая» — свойство блока, а не вторая половина дроби. Раньше оно
   стояло в колонке числа («5 · общая») и читалось как знаменатель. */
.qrow .gen{font-style:normal;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--fg-3);border:1px solid var(--rule);border-radius:var(--r-chip);padding:1px 5px;
  margin-left:6px;vertical-align:1px;white-space:nowrap}
.qrow .q.over{color:var(--coral-text);font-weight:600}
.qrow.ro{color:var(--fg-3)}
.aside-note{font-size:12px;line-height:1.5;color:var(--fg-3);margin:20px 0 0;padding-top:16px;
  border-top:1px solid var(--rule)}
main{flex:1;min-width:0}

.block{background:var(--bg-0);border:1px solid var(--rule);border-radius:var(--r-card);margin:0 0 24px;overflow:hidden}
.block.ro{background:var(--bg-1)}
.bhead{display:flex;align-items:center;gap:16px;min-height:48px;padding:10px 16px;background:var(--bg-0);
  border-bottom:1px solid var(--rule);flex-wrap:wrap}
.bhead .n{font-family:var(--font-d);font-size:16px;font-weight:700;letter-spacing:-.012em}
.bhead .cnt{font-size:13px;color:var(--fg-2);font-variant-numeric:tabular-nums}
.bhead .cnt.over{color:var(--coral-text);font-weight:600}
.bhead .acts{margin-left:auto;display:flex;align-items:center;gap:12px}
.ghost{height:30px;padding:0 12px;background:none;border:1px solid var(--rule-strong);border-radius:var(--r-ctl);
  font-size:13px;color:var(--fg-2);cursor:pointer;white-space:nowrap}
.ghost[disabled]{color:var(--fg-3);border-color:var(--rule);cursor:default;display:flex;align-items:center;gap:8px}
.ghost.go{border-color:var(--ink);color:var(--fg-1);font-weight:500}
@media (hover:hover){.ghost:not([disabled]):hover{background:var(--bg-0)}}
.chip-l{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r-chip);
  padding:2px 6px;background:var(--bg-sunk);color:var(--fg-3)}
.blead{font-size:13px;line-height:1.5;color:var(--fg-3);padding:11px 16px 0;margin:0}
.bnote{font-size:12px;color:var(--coral-text);white-space:nowrap}

/* Названия колонок — моноширинным, по канону. Это служебный слой: он
   называет, что за число под ним, и не должен спорить с самим числом. */
/* ⚠️ Зазор здесь обязан совпадать с зазором `.row`: шапка колонок и строки
   данных — одна сетка, собранная двумя правилами. Когда 02.09 строке подняли
   gap до 16, а шапке нет, колонки разъехались на 25–29 px, и это выглядело
   так, будто числа стоят не под своими названиями. */
.colhead{display:flex;align-items:center;gap:16px;padding:9px 16px;border-bottom:1px solid var(--rule);
  font-family:var(--font-m);font-size:12px;font-weight:500;letter-spacing:.02em;
  text-transform:uppercase;color:var(--fg-3)}
.colhead .sp{width:20px;flex:none}.colhead .e{width:24px;flex:none}
.row{display:flex;align-items:flex-start;gap:16px;padding:12px 16px;border-bottom:1px solid var(--rule);min-height:60px}
.row:last-child{border-bottom:0}
.row.thin{min-height:40px;padding:8px 16px}
.row.out,.row.hid{background:var(--bg-sunk)}
.row.hid .t{color:var(--fg-3)}
@media (hover:hover){.row:hover{background:var(--bg-sunk)}.row.out:hover,.row.hid:hover{background:#EAEAE4}}
.cb{width:20px;height:20px;flex:none;margin-top:2px;border:1.5px solid var(--rule-strong);
  border-radius:var(--r-chip);background:var(--bg-0);position:relative;cursor:pointer;padding:0}
.cb.on{background:var(--blue);border-color:var(--blue)}
.cb.on::after,.cb.lock::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border-width:0 2px 2px 0;transform:rotate(45deg);border-style:solid}
.cb.on::after{border-color:#fff}
.cb.lock{background:var(--rule-strong);border-color:var(--rule-strong);cursor:default}
.cb.lock::after{border-color:var(--bg-0)}
.cb[disabled]{background:var(--bg-sunk);border-color:var(--rule);cursor:not-allowed}
.e{width:24px;flex:none;text-align:center;font-size:15px;line-height:1.4;margin-top:1px}
/* 🔴 Мера строки. Ограничение стоит на САМОМ ТЕКСТЕ, а не на ячейке.

   Первая редакция вешала `max-width` на `.txt` — на растущего ребёнка строки.
   Это ломало таблицу: ячейка переставала расти, свободная ширина копилась
   в конце строки, и ВСЕ колонки данных уезжали влево относительно своих
   заголовков — при окне 1728 на 122–151 px. Заголовок «ДЕЙСТВИЯ» вставал
   над пустым местом, а кнопки оказывались левее него: снаружи это читается
   как «кнопок нет».
   ⇒ Ячейка растёт как прежде и держит сетку; переносится только текст. */
.txt{flex:1 1 auto;min-width:0}

/* 🔴 Колонка темы схлопывалась до десяти пикселей, и заголовок выкладывался
   в столбик по букве (найдено на живом 12.09 сразу после выкладки экрана
   курации). Причина не в .txt: `flex:1; min-width:0` тут верны. Причина
   в сумме ФИКСИРОВАННЫХ соседей — чекбокс, эмодзи, два числовых столбца
   и блок действий на 300 px с `flex:none` — при ширине строки 678 px
   не оставляли теме ничего.
   ⚠️ Лечится не «сделать .txt шире», а снятием ложной жёсткости: строке
   разрешено переносить, действиям — ужиматься, а у темы появляется дно,
   ниже которого она не сжимается. Иначе тот же дефект вернётся на любом
   новом столбце в строке. */
.row{flex-wrap:wrap}
.txt{flex:1 1 clamp(220px, 34%, 420px)}
.acts-row{flex:0 1 auto}
@media (min-width:1400px){ .row{flex-wrap:nowrap} }
.txt .t,.txt .d,.txt .cmtline,.txt .srcline{max-width:78ch}
.rowlink{display:block;text-decoration:none;color:inherit;cursor:pointer}
/* Заголовок темы — то, что куратор читает 20–30 раз каждое утро. 14 px для
   этой работы мало: это был кегль подписи, а не кегль чтения. */
.t{font-size:16px;font-weight:500;line-height:1.4;margin:0;color:var(--fg-1)}
.rowlink:hover .t{text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:2px}
.d{font-size:14px;line-height:1.45;color:var(--fg-2);margin:3px 0 0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cmtline{font-size:12px;color:var(--fg-3);margin:4px 0 0}
.state-chip{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r-chip);
  padding:1px 6px;background:var(--bg-0);border:1px solid var(--rule-strong);color:var(--fg-3);margin-left:8px;
  vertical-align:1px;white-space:nowrap}
/* Числа набраны Manrope — по канону «заголовки, интерфейс и все числа».
   12 px делали их самым мелким, что есть на экране, хотя решение куратора
   опирается именно на них. */
.num{flex:none;text-align:right;font-family:var(--font-d);font-size:14px;font-weight:500;
  color:var(--fg-2);font-variant-numeric:tabular-nums;margin-top:3px}
/* ⚠️ Ширины подняты под МОНОШИРИННЫЙ заголовок: «Релевантность» требует
   121 px, «Виральность» 105 — в прежних 96 они обрезались бы. Это второй
   раз, когда заголовки колонок толкают ширину: первый был в раунде 1, когда
   «РЕЛ» и «ВИР» развернули в слова, потому что куратор не понимал, что за
   число видит. Сокращать обратно нельзя — довод тот же. */
.w56{width:56px}.w38{width:38px}.w80{width:88px}.w96{width:124px}.w120{width:120px;text-align:left;color:var(--fg-3)}
.w88{width:88px;text-align:left;color:var(--fg-3)}
/* 🔴 Ф2-7 (02.09). Было `width:170px` при `flex:none`, `white-space:nowrap`
   у кнопок и `justify-content:flex-end`. Три свойства вместе дают наезд:
   содержимое шире бокса не переносится, не сжимает бокс и при выравнивании
   по правому краю вылезает ВЛЕВО — прямо на колонку канала.
   Замер: в общей части «в фон · скрыть · комментарий» ≈161 px при боксе 170 —
   впритык, «слипается»; в призменном «фоновая тема · скрыть · комментарий»
   ≈199 px — переполнение ≈29 px, наезд. И оно росло от состояния: галочки
   в «✓ фоновая тема» и «✓ комментарий» добавляют ширины, то есть строка
   портилась тем сильнее, чем больше с ней работали.
   ⇒ Бокс больше не константа: он занимает столько, сколько нужно кнопкам,
   и не меньше минимума, чтобы колонка не прыгала между строками.
   ⚠️ Подгонять 170 px под самый длинный текст было бы починкой на один раз —
   следующий тег (Ф2-12) сломал бы её снова. */
/* 🔴 Р3-2 (02.09). Колонка действий — ОДНА ширина на шапку и строки.

   Ф2-7 сделал бокс растущим по содержимому и этим вылечил наезд, но сломал
   сетку: у заголовка колонки ширина своя, у каждой строки своя, и числа
   разъезжались со своими названиями на 21 px в блоках 1–2 и на 46 px в «Фоне»
   (у него длиннее кнопка). Снаружи это читается как «кнопок нет»: заголовок
   «ДЕЙСТВИЯ» стоит над пустым местом.

   Ширина считается один раз и живёт в токене. Значение — по замеру самого
   широкого набора на всех экранах и ролях: «фоновая тема · скрыть ·
   ✓ комментарий» = 283 px, плюс запас на будущие теги (Ф2-12а).
   ⚠️ Это `min-width`, а не `width`: если набор однажды перерастёт токен,
   бокс раздвинется и НАЕЗДА НЕ БУДЕТ — разъедется только выравнивание,
   и это заметно глазом, в отличие от текста поверх текста. Отказ мягкий. */
.acts-row{flex:none;display:flex;align-items:center;gap:12px;margin-top:1px;
  min-width:var(--acts-w);justify-content:flex-end}
.colhead .acts-head{flex:none;min-width:var(--acts-w);text-align:right}
.act{font-size:13px;color:var(--fg-3);background:none;border:0;cursor:pointer;padding:0;white-space:nowrap;
  border-bottom:1px solid var(--rule-strong)}
.act:hover:not([disabled]){color:var(--fg-1)}
/* 🔴 Ф2-18: погашенное действие ОСТАЁТСЯ ВИДИМЫМ. Пустой столбец с живым
   заголовком читался как отсутствие функции, и три разные причины —
   не сегодняшний выпуск, состав заперт, нет прав — выглядели одинаково.
   Причина живёт в `title`, поэтому курсор `help`, а не `not-allowed`:
   объяснение здесь есть, и на него стоит навести. */
.act[disabled]{color:var(--fg-dis);border-bottom-color:var(--rule);cursor:help}
.act[disabled].mark.on,.act[disabled].cmt.has{color:var(--fg-3);font-weight:500}

/* Ф2-19 + Ф2-20б: источники под заголовком темы. */
.srcline{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:4px 0 0;font-size:13px}
.src-lbl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);
  border-bottom:1px dotted var(--rule-strong);cursor:help}
.src-a{color:var(--fg-2);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
@media (hover:hover){.src-a:hover{color:var(--fg-1);border-bottom-color:var(--fg-3)}}
.src-a.off{color:var(--fg-3);border-bottom-style:dotted;cursor:default}
.src-more{font-size:12px;color:var(--fg-3);background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.src-more:hover,.src-more.on{color:var(--fg-1)}
.srcbox{padding:2px 16px 12px 68px;border-bottom:1px solid var(--rule);background:var(--bg-sunk)}
.srcbox-h{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-3);margin:10px 0 6px}
.srcbox-r{display:flex;align-items:baseline;gap:10px;padding:4px 0;font-size:13px;
  border-bottom:1px solid var(--rule)}
.srcbox-r:last-of-type{border-bottom:0}
.srcbox-r .v{color:var(--fg-3);font-size:12px;font-variant-numeric:tabular-nums;margin-left:auto;flex:none}
.srcbox-r .lead-t{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);
  border:1px solid var(--rule);border-radius:var(--r-chip);padding:1px 5px;flex:none}
.srcbox-f{font-size:12px;line-height:1.45;color:var(--fg-3);margin:8px 0 0}
.dots{font-size:15px;color:var(--fg-3);background:none;border:0;cursor:pointer;padding:0;width:16px;text-align:right}
/* 🔴 Ф2-10: граница квоты. Не разделитель списков, а СРЕЗ ВЫПУСКА — то, что
   уйдёт клиенту, отделено от того, что останется. Поэтому линия сплошная
   и коралловая (единственный акцент палитры), а не волосяная серая, как
   у обычных разделителей рядом. */
.cutline{display:flex;align-items:center;gap:12px;padding:9px 16px;background:var(--bg-1);
  border-top:2px solid var(--coral);border-bottom:1px solid var(--rule)}
.cutline .n{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--coral-text);white-space:nowrap}
.cutline .l{flex:1;height:1px;background:var(--rule)}
.cutline .h{font-size:12px;color:var(--fg-3);white-space:nowrap}
/* «Не знаем, где срез» — состояние честного незнания, и оно не должно
   выглядеть как срез: ахроматично и пунктиром. */
.cutline.unk{border-top:2px dashed var(--rule-strong);background:var(--bg-sunk)}
.cutline.unk .n{color:var(--fg-3)}
/* Строки ниже черты: в выпуск при нынешних отметках не попадают. Приглушены
   так же, как снятое, но не перечёркнуты — решения по ним не было. */
.row.over .t{color:var(--fg-2)}
.row.over{background:var(--bg-1)}
.qrow .q.unk{color:var(--fg-3);border-bottom:1px dotted var(--rule-strong);cursor:help}

/* Ф2-3а + Ф2-3б: плашка доставки и пояснение под ней. Пояснение раскрывается
   ОТ ПЛАШКИ, а не лежит отдельной карточкой ниже: вопрос «а ушёл ли выпуск»
   возникает у этой надписи, ответ обязан быть там же. */
.dchip-wrap{position:relative;display:inline-flex}
.dchip{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;
  cursor:pointer;font:inherit}
.dchip .chev{border-top-color:var(--fg-3)}
.dchip.open .chev,.dchip:hover .chev{border-top-color:var(--fg-1)}
/* Незнание не красится в цвет состояния: пунктирная точка вместо сплошной. */
.status.unk i{background:none;border:1px dashed var(--fg-3)}
.dnote{position:absolute;top:28px;right:0;z-index:40;width:380px;max-width:calc(100vw - 48px);
  background:var(--bg-0);border:1px solid var(--rule-strong);border-radius:var(--r-card);
  box-shadow:0 12px 32px rgba(11,12,13,.14);padding:14px 16px;text-align:left}
.dnote p{font-size:13px;line-height:1.5;color:var(--fg-2);margin:0 0 10px}
.dnote p:last-child{margin-bottom:0}
.dnote-h{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);margin:0 0 10px}
.dnote .dnote-f{font-size:12px;color:var(--fg-3);border-top:1px solid var(--rule);padding-top:9px}

.divider{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule)}
.divider .n{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.divider .l{flex:1;height:1px;background:var(--rule)}
.chev{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--fg-3)}
.chev.up{transform:rotate(180deg)}
.dropped{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--bg-sunk);
  border-top:1px solid var(--rule);font-size:13px;color:var(--fg-2);cursor:pointer;width:100%;border:0;text-align:left}
.cmtbox{padding:0 16px 14px 68px;border-bottom:1px solid var(--rule)}
.cmtbox textarea{width:100%;font-size:14px;line-height:1.45;color:var(--fg-1);border:1px solid var(--rule-strong);
  border-radius:var(--r-ctl);padding:8px 10px;resize:none;height:52px;background:var(--bg-0)}
.cmtbox .r{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}
.cmtbox .save{height:30px;padding:0 12px;background:var(--ink);color:var(--on-ink);border:0;
  border-radius:var(--r-ctl);font-size:13px;font-weight:500;cursor:pointer}
.cmtbox .hint{font-size:12px;color:var(--fg-3)}
.empty{padding:26px 16px 30px}
.empty .t{font-size:14px;font-weight:500;color:var(--fg-2);margin:0}
.empty .s{font-size:13px;color:var(--fg-3);margin:4px 0 0}

/* внутренняя карточка темы */
.card-wrap{display:flex;gap:32px;max-width:1160px;margin:0 auto;padding:24px;align-items:flex-start}
.card-main{flex:1;min-width:0;max-width:720px}
.card-rail{width:300px;flex:none}
.crumb{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-2);
  text-decoration:none;margin:0 0 20px;background:none;border:0;padding:0;cursor:pointer}
.card-main h1{font-size:24px;line-height:1.25;letter-spacing:-.02em;font-weight:600;margin:0 0 14px}
.card-main .lead{font-size:15px;line-height:1.6;color:var(--fg-2);margin:0}
.kicker{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin:0 0 12px}
.sec-lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin:32px 0 4px}
.rail-box{background:var(--bg-0);border:1px solid var(--rule);border-radius:var(--r-card);padding:16px;margin:0 0 16px}
.rail-box h4{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin:0 0 12px}
.rail-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 0;
  border-bottom:1px solid var(--rule);font-size:13px;color:var(--fg-2)}
.rail-row:last-child{border-bottom:0}
.rail-row b{font-weight:500;color:var(--fg-1);font-variant-numeric:tabular-nums}
.rail-toggle{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;cursor:pointer;
  background:none;border:0;padding:0;color:var(--fg-1)}
.soon-box{background:var(--bg-1);border:1px dashed var(--rule-strong);border-radius:var(--r-card);padding:16px}
.soon-box h4{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-3);margin:0 0 8px}
.soon-box p{margin:0;font-size:13px;line-height:1.5;color:var(--fg-3)}

/* таблицы: доступы, каналы */
.panel{background:var(--bg-0);border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;margin:0 0 24px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);
  text-align:left;padding:12px 16px 8px;border-bottom:1px solid var(--rule);white-space:nowrap}
.tbl td{padding:11px 16px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--fg-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td.k{color:var(--fg-1);font-weight:500}
.tbl td.n{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tbl th.n{text-align:right}
.tbl tr.off td{color:var(--fg-3);background:var(--bg-sunk)}
.tbl .none{color:var(--fg-3)}
@media (hover:hover){.tbl tbody tr:hover td{background:var(--bg-1)}.tbl tr.off:hover td{background:#EAEAE4}}

.figures{display:flex;flex-wrap:wrap;gap:0;background:var(--bg-0);border:1px solid var(--rule);
  border-radius:var(--r-card);overflow:hidden;margin:0 0 24px}
.fig{flex:1;min-width:150px;padding:18px 20px;border-right:1px solid var(--rule)}
.fig:last-child{border-right:0}
.fig b{display:block;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  line-height:1.1;color:var(--fg-1)}
.fig span{display:block;font-size:12px;color:var(--fg-2);margin-top:6px}

.formrow{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--rule);
  background:var(--bg-1);flex-wrap:wrap}
.formrow input[type=text],.formrow select{height:34px;padding:0 10px;font-size:14px;color:var(--fg-1);
  background:var(--bg-0);border:1px solid var(--rule-strong);border-radius:var(--r-ctl)}
.formrow input[type=text]{min-width:200px}
.formrow .primary{height:34px;padding:0 16px;background:var(--ink);color:var(--on-ink);border:0;
  border-radius:var(--r-ctl);font-size:14px;font-weight:500;cursor:pointer}
.formrow .cbs{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--fg-2)}
.formrow label{display:flex;align-items:center;gap:6px}
.h1-page{font-family:var(--font-d);font-size:21px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
.sub-page{font-size:13px;color:var(--fg-2);margin:0 0 20px}
.search{width:100%;height:38px;padding:0 12px;font-size:14px;color:var(--fg-1);background:var(--bg-0);
  border:1px solid var(--rule-strong);border-radius:var(--r-ctl);margin:0 0 16px}
.search::placeholder{color:var(--fg-3)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.fchip{height:28px;padding:0 10px;background:var(--bg-0);border:1px solid var(--rule-strong);
  border-radius:var(--r-chip);font-size:12px;color:var(--fg-2);cursor:pointer}
.fchip.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:500}
.rail-lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
  margin:20px 0 8px}
.rail-lbl:first-child{margin-top:0}
.opt-list{display:flex;flex-direction:column;gap:2px}
.opt-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:32px;
  padding:0 8px;background:none;border:0;border-radius:var(--r-chip);font-size:13px;color:var(--fg-2);
  cursor:pointer;text-align:left}
.opt-btn.on{background:var(--bg-sunk);color:var(--fg-1);font-weight:500}
.opt-btn .c{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums}

/* креативный стол — заглушка */
.stub{max-width:720px;margin:0 auto;padding:64px 24px 96px}
/* Ф2-1: чем пользоваться, пока раздела нет. Заглушка, которая только говорит
   «скоро», отнимает клик и ничего не даёт взамен — поэтому у каждой есть
   строка «что делать сейчас». */
.stub-now{margin:28px 0 0;padding:14px 16px;background:var(--bg-sunk);border-left:3px solid var(--rule-strong);
  border-radius:0 var(--r-ctl) var(--r-ctl) 0;font-size:14px;line-height:1.55;color:var(--fg-2)}
.stub .lbl{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-3);margin:0 0 16px}
.stub h1{font-size:30px;line-height:1.15;letter-spacing:-.02em;font-weight:600;margin:0 0 16px}
.stub p{font-size:16px;line-height:1.6;color:var(--fg-2);margin:0 0 28px;max-width:600px}
.stub ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.stub li{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 0;
  border-bottom:1px solid var(--rule);color:var(--fg-3);font-size:15px;line-height:1.5}
.stub li b{font-weight:500;color:var(--fg-2)}

/* ==========================================================================
   4. Клиентские экраны — мобильный-first, воздух (база 16px)
   ========================================================================== */
.stage{padding:32px 24px 80px;display:flex;justify-content:center}
.phone{width:375px;max-width:100%;background:var(--bg-0);border:1px solid var(--rule-strong);
  border-radius:var(--r-card);overflow:hidden;font-size:16px;line-height:1.55}
@media (max-width:640px){
  .stage{padding:0}
  /* overflow снимается вместе со скруглением: sticky внутри overflow-контейнера
     считается от него, а не от документа — та самая ловушка Safari из спеки */
  .phone{width:100%;border:0;border-radius:0;overflow:visible}
  .cbar{position:sticky;top:var(--proto-h);z-index:20;border-bottom-color:transparent}
  body.scrolled .cbar{border-bottom-color:var(--rule)}
}
.cbar{height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;
  background:var(--bg-0);border-bottom:1px solid var(--rule)}
.who{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--fg-2);background:none;border:0;
  padding:0;cursor:pointer;min-height:44px}
.who .chev{border-top-color:var(--fg-3);border-left-width:4px;border-right-width:4px;border-top-width:5px}
.back{display:flex;align-items:center;font-size:14px;color:var(--fg-2);text-decoration:none;
  min-height:44px;background:none;border:0;padding:0;cursor:pointer}
/* 🔴 Продукт не был назван на поверхности, которую клиент открывает каждый
   день: в шапке стояли имя департамента и «AFFECT», имени RTM не было ни
   в выпуске, ни на карточке. А приходят чаще всего из Telegram сразу
   на карточку — это первый экран. Концепция 31.08 решила «логотип Affect
   ведущий, RTM — моноширинная подпись через разделитель»; здесь это
   решение исполнено. */
.mark{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-3);flex:none}
.mark em{font-family:var(--font-m);font-style:normal;font-size:11px;
  font-weight:500;letter-spacing:.18em;padding-left:7px;margin-left:1px;
  border-left:1px solid var(--rule-strong);color:var(--fg-2)}
/* Подпись Affect на клиентских экранах: сердце вместо абстрактной точки.
   Знак маленький, поэтому берётся отдельный ассет, а не полный логотип. */
.mark i.heart{width:14px;height:12px;border-radius:0;background:url(brand/affect-heart-red.svg) center/contain no-repeat}
.mark i{width:6px;height:6px;border-radius:50%;background:var(--coral);display:block}
.belong{font-size:13px;color:var(--fg-2);flex:none}
.cmenu{margin:0 20px;border:1px solid var(--rule-strong);border-radius:var(--r-ctl);
  box-shadow:0 8px 24px rgba(10,10,10,.10);padding:6px;background:var(--bg-0)}
.cmenu button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;
  padding:0 10px;background:none;border:0;border-radius:var(--r-chip);font-size:16px;color:var(--fg-1);
  cursor:pointer;text-align:left}
.cmenu button.on{background:var(--bg-sunk);font-weight:500}

.chead{padding:28px 20px 24px}
.chead h1{font-family:var(--font-d);font-size:30px;line-height:1.12;letter-spacing:-.03em;font-weight:800;margin:0}
.chead p{margin:6px 0 0;font-size:15px;color:var(--fg-2)}

/* ── Мачта: тёмная панель прибора над лентой выпуска ─────────────────────
   Единственный «впечатляющий» элемент клиентской поверхности, и он собран
   из данных, а не из декора: одна риска — одна тема, высота риски это
   число подхвативших каналов. Тусклые — блоки, где резонанс не считается
   (там метрика другая, и рисовать их той же шкалой значило бы сравнивать
   несравнимое). */
.mast{background:var(--ink);color:var(--on-ink);padding:0 20px 30px}
.mast .kick{display:flex;align-items:center;gap:9px;padding-top:28px;font-size:11px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-2)}
.mast .kick i{width:6px;height:6px;border-radius:50%;background:var(--coral);flex:none}
.mast h1{font-family:var(--font-d);font-size:40px;font-weight:800;letter-spacing:-.042em;
  line-height:1;margin:14px 0 0}
.mast .lede{font-size:16px;line-height:1.5;color:var(--on-ink-2);margin:10px 0 0;max-width:44ch}
.strip{margin-top:26px}
/* ⚠️ Ширина риски ограничена. Плотность выпусков расходится в разы:
   у одной призмы 23 темы, у другой 4. Без потолка четыре темы давали
   четыре плиты во всю ширину — фигура, которая выглядит как диаграмма
   и не сообщает ничего. Риска остаётся риской при любом числе тем. */
.bars{display:flex;align-items:flex-end;gap:3px;height:72px}
.bars i{flex:1 1 0;max-width:16px;min-height:3px;display:block;
  border-radius:2px 2px 0 0;background:var(--ink-3)}
.bars i.lead{background:var(--coral)}
.bars i.dim{height:4px;min-height:4px;flex:0 0 8px;max-width:8px;border-radius:2px;
  background:#2B2F36;align-self:flex-end}
.strip .sc{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:12px 0 0;
  padding-top:11px;border-top:1px solid var(--ink-3);font-size:11px;line-height:1.5;
  letter-spacing:.02em;color:var(--on-ink-2)}
.strip .sc b{color:var(--on-ink);font-weight:500}
/* Показатели переносятся: на 375 три колонки режут «темы в выпуске»
   пополам. Грань — ЛЕВАЯ у всех, кроме первого в строке: правая
   оставляла висячую линию у последнего столбца. */
/* ⚠️ Прямой потомок, не любой вложенный: `.mstats div` цеплял и `.v`, и `.k`
   внутри ячейки — они получали ту же левую грань и тот же отступ, и рядом
   с каждой подписью вырастала лишняя вертикальная линия. */
.mstats{display:grid;grid-template-columns:1fr 1fr;margin-top:22px;border-top:1px solid var(--ink-3)}
.mstats > div{min-width:0;padding:14px 0 14px 14px;border-left:1px solid var(--ink-3)}
.mstats > div:nth-child(odd){padding-left:0;border-left:0}
.mstats > div:nth-child(n+3){border-top:1px solid var(--ink-3)}
.mstats .v{font-family:var(--font-d);font-variant-numeric:tabular-nums;font-size:24px;
  font-weight:800;letter-spacing:-.03em;line-height:1}
.mstats .v.hl{color:var(--coral)}
.mstats .k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-2);margin-top:7px}
.cblock{margin-top:40px}
.cblock:first-of-type{margin-top:0}
.block-bar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 20px;padding:0 0 12px;border-bottom:2px solid var(--ink)}
.block-bar .n{font-family:var(--font-d);font-size:20px;font-weight:700;letter-spacing:-.024em;color:var(--fg-1)}
.block-bar .c{font-size:13px;color:var(--fg-3);font-variant-numeric:tabular-nums;flex:none}
.block-lead{font-size:13px;line-height:1.5;color:var(--fg-2);margin:12px 20px 0}
.clist{padding:0 20px}
.item{display:flex;flex-direction:column;padding:18px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;min-height:56px;cursor:pointer}
.item:last-child{border-bottom:0}
.item .b{flex:1;min-width:0}
.item .t{font-family:var(--font-d);font-size:19px;line-height:1.25;letter-spacing:-.022em;
  font-weight:700;color:var(--fg-1);margin:0}
.item .dd{font-size:16px;line-height:1.5;color:var(--fg-2);margin:7px 0 0}
/* ⚠️ Класс `.chan`, а не `.src`: `.src` уже занят строкой оригинала
   на карточке темы, и она несёт display:flex, min-height и нижнюю
   грань — они протекали в подпись канала внутри строки темы. */
.item .chan{font-size:13px;color:var(--fg-3);margin:8px 0 0}
.item.seen .t{color:var(--fg-2);font-weight:600}

/* Метрика. Единица подписана всегда — в одном выпуске их две («каналов»
   в общих блоках, «просмотров» в призменных), и число без единицы здесь
   врёт молча. Полоска рисуется ТОЛЬКО у каналов и по единой шкале всего
   выпуска: у просмотров шкала другая, общая полоска сравнивала бы
   несравнимое. Нет ни того, ни другого — стоит прочерк. */
.met{display:flex;align-items:center;gap:9px;order:-1;margin:0 0 9px}
.met .v{font-family:var(--font-d);font-variant-numeric:tabular-nums;font-size:15px;
  font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--fg-1)}
.met .u{font-size:13px;color:var(--fg-3);line-height:1}
/* `.met .bar` удалена вместе с полосой резонанса (Р3-7): величина без верхней
   границы не кодируется заполнением. Число несёт себя само. */
.item.lead .met .v{color:var(--coral-text)}

.item.lead .t{font-size:23px;letter-spacing:-.028em;line-height:1.18}
.item.thin{padding:12px 0;min-height:44px}
.item.thin .chan{margin-top:4px}
.item.thin .t{font-family:var(--font);font-size:16px;font-weight:500;line-height:1.4;color:var(--fg-1)}
.item.thin .met{margin-bottom:6px}
.item.thin .met .v{font-size:14px}
@media (hover:hover){.item:hover{background:var(--bg-sunk)}}
.item:active{opacity:.7}
.cempty{padding:24px 20px 28px}
.cempty .t{font-size:16px;font-weight:500;color:var(--fg-2);margin:0}
.cempty .s{font-size:14px;line-height:1.5;color:var(--fg-3);margin:6px 0 0}
/* Дверь в «что не вошло». Раньше это был серый хвост под выпуском, где
   на каждой из шестнадцати строк повторялось «не вошло в выпуск». Это
   одно из двух действий, ради которых клиент вообще открывает сайт,
   поэтому у него теперь свой экран, а здесь — вход в него. */
.door{display:flex;align-items:center;gap:18px;margin:48px 20px 0;padding:22px 24px;
  border-radius:var(--r-card);background:var(--ink);color:var(--on-ink);
  text-decoration:none;box-shadow:var(--sh-2)}
.door .v{font-family:var(--font-d);font-variant-numeric:tabular-nums;font-size:38px;
  font-weight:800;letter-spacing:-.04em;line-height:1;flex:none}
.door .tx b{display:block;font-family:var(--font-d);font-size:16px;font-weight:700;letter-spacing:-.018em}
.door .tx span{display:block;font-size:14px;line-height:1.5;color:var(--on-ink-2);margin-top:4px}
.door .go{margin-left:auto;font-size:20px;color:var(--on-ink-2);flex:none}
@media (hover:hover){.door:hover .go{color:var(--coral)}}

/* Экран «что не вошло» ---------------------------------------------------- */
.rest-head{padding:32px 20px 0}
.rest-head .eb{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.rest-head h1{font-family:var(--font-d);font-size:32px;font-weight:800;letter-spacing:-.034em;
  line-height:1.1;margin:10px 0 0}
.rest-head .why{background:none;border:0;border-radius:0;padding:0;margin:14px 0 0;
  font-size:16px;line-height:1.55;color:var(--fg-2);max-width:56ch}
.rfilters{display:flex;gap:8px;flex-wrap:wrap;padding:22px 20px 0}
/* 44 px — то же правило, что уже применено к подвалу и к «Добавить
   комментарий» на соседних клиентских экранах. Фильтры блоков остались
   на 36: правило применялось к найденным местам, а не ко всем. */
.rf{min-height:44px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid var(--rule-strong);
  background:var(--bg-0);font:inherit;font-size:14px;color:var(--fg-2);cursor:pointer}
.rf.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:500}
@media (hover:hover){.rf:not(.on):hover{border-color:var(--fg-3);color:var(--fg-1)}}
.cfoot{padding:24px 20px 32px;margin-top:40px;border-top:1px solid var(--rule);font-size:13px;
  line-height:1.9;color:var(--fg-3)}
/* Единственные два выхода с самого длинного клиентского экрана: тап-цель
   44 px — правило, а не украшение (design-review 02.09). */
.cfoot a{color:var(--fg-2);display:inline-flex;align-items:center;min-height:44px}

/* клиентская карточка */
.cwrap{padding:24px 20px 40px}
.cwrap h1{font-family:var(--font-d);font-size:32px;line-height:1.12;letter-spacing:-.034em;
  font-weight:800;margin:0 0 14px;color:var(--fg-1)}
.cwrap .lead{font-size:16px;line-height:1.55;color:var(--fg-2);margin:0}
.scale{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);margin:28px 0 0;padding:20px 0;
  display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.scale b{font-family:var(--font-d);font-size:48px;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--fg-1);line-height:.9;letter-spacing:-.042em}
.scale .u{font-size:15px;line-height:1.4;color:var(--fg-2);max-width:22ch;padding-bottom:3px}
/* Место темы среди тех тем блока, у которых резонанс посчитан. Ровно те же
   числа, что стоят в ленте; коралловая риска — эта тема. */
.scale .rank{margin-left:auto;text-align:right}
.scale .rank .rb{display:flex;align-items:flex-end;gap:3px;height:38px;justify-content:flex-end}
.scale .rank .rb i{width:9px;border-radius:2px 2px 0 0;background:var(--rule-strong)}
.scale .rank .rb i.f{background:var(--ink)}
.scale .rank .rb i.c{background:var(--coral)}
.scale .rank .rk{display:block;font-size:11px;color:var(--fg-3);margin-top:8px}
.why{background:var(--bg-sunk);border-left:3px solid var(--coral);border-radius:0 var(--r-card) var(--r-card) 0;
  padding:20px;margin:24px 0 0}
.why .lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);margin:0 0 8px}
.why p{margin:0;font-size:16px;line-height:1.55;color:var(--fg-1)}
.src{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;
  border-bottom:1px solid var(--rule);text-decoration:none;color:var(--fg-1)}
.src:first-of-type{border-top:1px solid var(--rule)}
.src .t2{display:block;font-size:15px;line-height:1.4}
.src .m2{display:block;font-size:13px;color:var(--fg-3);margin-top:2px}
.src .a{font-size:15px;color:var(--fg-2);flex:none}
.signal{margin:36px 0 0;padding-top:28px;border-top:1px solid var(--rule)}
.signal .q{font-size:17px;font-weight:600;margin:0 0 14px;letter-spacing:-.01em}
/* 🔴 Два эмодзи 👍/👎 были всем органом управления самого важного сигнала
   продукта — и выглядели заглушкой. Тот же бинарный выбор, названный
   словами: жест не изменился, регистр стал продуктовым. */
.thumbs{display:flex;gap:10px}
.thumb{flex:1;display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 16px;
  background:var(--bg-0);border:1px solid var(--rule-strong);border-radius:var(--r-ctl);
  font-family:var(--font-d);font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:var(--fg-1);line-height:1.2;text-align:center;cursor:pointer}
.thumb.on{background:var(--coral-soft);border:1.5px solid var(--coral);color:var(--coral-text)}
.thumb.mute{opacity:.5}
@media (hover:hover){.thumb:not(.on):hover{border-color:var(--fg-3)}}
.step2{margin:14px 0 0}
.step2 .q2{font-size:14px;color:var(--fg-2);margin:0 0 10px}
.pills{display:flex;flex-direction:column;gap:8px}
.pill{display:flex;align-items:center;width:100%;min-height:48px;padding:0 16px;background:var(--bg-0);
  border:1px solid var(--rule-strong);border-radius:var(--r-ctl);font-size:15px;font-weight:500;color:var(--fg-1);
  cursor:pointer;text-align:left}
.pill.lead{border:1.5px solid var(--ink);font-weight:600}
.pill.on{background:var(--coral-soft);border:1.5px solid var(--coral);color:var(--coral-text);font-weight:600}
/* Тап-цель 44 px: подвал клиента подняли 02.09, а эту кнопку пропустили —
   она на той же поверхности и того же рода (design-review, второй прогон).
   Подчёркивание оставляем у ТЕКСТА, а не у бокса, иначе линия отъедет
   от слова вниз на высоту цели. */
.cmt-open{margin:16px 0 0;background:none;border:0;padding:0;font-size:14px;color:var(--fg-2);cursor:pointer;
  display:inline-flex;align-items:center;min-height:44px}
.cmt-open>span,.cmt-open{text-decoration:underline;text-decoration-color:var(--rule-strong);
  text-underline-offset:4px;text-decoration-thickness:1px}
.cmt{display:flex;gap:8px;margin:14px 0 0}
.cmt textarea{flex:1;font-size:16px;line-height:1.4;color:var(--fg-1);border:1px solid var(--rule-strong);
  border-radius:var(--r-ctl);padding:11px 12px;resize:none;height:44px;background:var(--bg-0)}
.cmt textarea::placeholder{color:var(--fg-3)}
.cmt button{flex:none;height:44px;padding:0 16px;background:var(--ink);color:var(--on-ink);border:0;
  border-radius:var(--r-ctl);font-size:15px;font-weight:500;cursor:pointer}
.thanks{font-size:13px;color:var(--fg-3);margin:12px 0 0}
.cfoot-row{margin:40px 0 0;padding-top:20px;border-top:1px solid var(--rule);display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.cfoot-row .d2{font-size:13px;color:var(--fg-3);font-variant-numeric:tabular-nums}

/* архив */
.arch-head{padding:24px 20px 0}
.arch-head h1{font-family:var(--font-d);font-size:30px;line-height:1.12;letter-spacing:-.034em;
  font-weight:800;margin:0 0 16px}
.arch-search{width:100%;height:48px;padding:0 14px;font-size:16px;color:var(--fg-1);background:var(--bg-0);
  border:1px solid var(--rule-strong);border-radius:var(--r-ctl)}
.arch-search::placeholder{color:var(--fg-3)}
.month{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
  padding:24px 20px 8px;margin:0}
.aday{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 20px;
  border-bottom:1px solid var(--rule);background:none;border-left:0;border-right:0;border-top:0;width:100%;
  text-align:left;cursor:pointer;color:inherit}
.aday .dl{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em}
.aday .dw{display:block;font-size:13px;color:var(--fg-3);margin-top:2px}
.aday .dc{font-size:14px;color:var(--fg-2);font-variant-numeric:tabular-nums;flex:none}
.aday.none{cursor:default}
.aday.none .dl{color:var(--fg-3);font-weight:500}
.aday.none .dc{color:var(--fg-3)}
@media (hover:hover){.aday:not(.none):hover{background:var(--bg-sunk)}}

/* лицо продукта / как устроен отбор */
.hero{background:var(--ink);color:var(--on-ink);padding:44px 20px 40px}
.hero .lbl{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(247,247,243,.55);margin:0 0 24px}
.hero .lbl i{width:7px;height:7px;border-radius:50%;background:var(--coral);display:block}
.hero h1{font-family:var(--font-d);font-size:34px;line-height:1.08;letter-spacing:-.036em;font-weight:800;margin:0 0 16px}
.hero p{font-size:16px;line-height:1.55;color:var(--on-ink-2);margin:0}
.hero-figs{display:flex;gap:20px;border-top:1px solid var(--ink-3);margin-top:32px}
.hero-figs div{flex:1;min-width:0;padding:20px 0 0}
.hero-figs b{display:block;font-family:var(--font-d);font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.hero-figs span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-2);margin-top:7px;line-height:1.4}
.sect{padding:36px 20px 0}
.sect h2{font-size:20px;line-height:1.3;letter-spacing:-.015em;font-weight:600;margin:0 0 12px}
.sect p{font-size:16px;line-height:1.6;color:var(--fg-2);margin:0 0 16px}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;padding:18px 0 18px 40px;border-bottom:1px solid var(--rule);position:relative}
.steps li:first-child{border-top:1px solid var(--rule)}
.steps li::before{content:counter(s);position:absolute;left:0;top:18px;font-size:13px;font-weight:600;
  color:var(--fg-3);font-variant-numeric:tabular-nums}
.steps b{display:block;font-size:16px;font-weight:600;margin:0 0 4px}
.steps span{display:block;font-size:15px;line-height:1.5;color:var(--fg-2)}
.cta{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0 20px;
  background:var(--ink);color:var(--on-ink);border:0;border-radius:var(--r-ctl);font-size:16px;font-weight:500;
  cursor:pointer;margin:8px 0 0;text-align:left}
.cta.ghost2{background:none;color:var(--fg-1);border:1px solid var(--rule-strong)}
.defs{list-style:none;margin:0;padding:0}
.defs li{padding:16px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.55;color:var(--fg-2)}
.defs li:first-child{border-top:1px solid var(--rule)}
.defs b{display:block;font-size:16px;font-weight:600;color:var(--fg-1);margin:0 0 4px}


/* ==========================================================================
   5. Календарь — выбор даты выпуска (стрелки сняты решением 26.08)
   ========================================================================== */
.datebtn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;
  background:var(--bg-0);border:1px solid var(--rule-strong);border-radius:var(--r-ctl);
  font-size:14px;font-weight:500;color:var(--fg-1);cursor:pointer;font-variant-numeric:tabular-nums}
.datebtn.open{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.datebtn .chev{border-top-color:var(--fg-3)}
.date{position:relative}
.cal{position:absolute;top:42px;right:0;width:288px;background:var(--bg-0);border:1px solid var(--rule-strong);
  border-radius:var(--r-ctl);box-shadow:0 8px 24px rgba(10,10,10,.10);padding:12px;z-index:40;text-align:left}
/* Ф2-13: шапка календаря с листанием. Стрелки — по краям, месяц по центру:
   так пара «‹ Сентябрь 2026 ›» читается как один орган управления. */
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.cal-h{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
  margin:0;flex:1;text-align:center}
.cal-nav{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;color:var(--fg-2);background:none;border:1px solid var(--rule);
  border-radius:var(--r-ctl);cursor:pointer;padding:0}
@media (hover:hover){.cal-nav:not([disabled]):hover{background:var(--bg-sunk);color:var(--fg-1)}}
/* Край окна пилота: кнопка гаснет и называет причину, а не исчезает —
   тот же принцип, что у действий в строке (Ф2-18). */
.cal-nav[disabled]{color:var(--fg-dis);border-color:var(--rule);cursor:help}
.cal-wd,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-wd span{font-size:11px;color:var(--fg-3);text-align:center;padding:0 0 6px;font-weight:400}
.cal-day{display:flex;align-items:center;justify-content:center;height:34px;border:0;background:none;
  border-radius:var(--r-chip);font-size:13px;color:var(--fg-1);font-variant-numeric:tabular-nums;cursor:pointer;padding:0}
.cal-day.out{color:var(--rule-strong);cursor:default}
.cal-day.none{color:var(--fg-3);background:var(--bg-sunk);cursor:default}
.cal-day.on{background:var(--ink);color:var(--on-ink);font-weight:600}
@media (hover:hover){button.cal-day:not(.on):hover{background:var(--bg-sunk)}}
.cal-pad{height:34px}
.cal-foot{font-size:12px;line-height:1.45;color:var(--fg-3);margin:10px 0 0;padding-top:10px;border-top:1px solid var(--rule)}

/* ==========================================================================
   6. Вход — поле логина, а не email
   ========================================================================== */
.login-wrap{display:flex;justify-content:center;padding:64px 24px 96px}
.login-card{width:100%;max-width:380px}
.brand.dark{color:var(--fg-1);margin-bottom:32px}
.login-card h1{font-family:var(--font-d);font-size:30px;line-height:1.12;letter-spacing:-.032em;font-weight:800;margin:0 0 28px}
.login-lbl{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);margin:0 0 6px}
.login-in{width:100%;height:48px;padding:0 14px;font-size:16px;color:var(--fg-1);background:var(--bg-0);
  border:1px solid var(--rule-strong);border-radius:var(--r-ctl);margin:0 0 20px}
.login-in::placeholder{color:var(--fg-3)}
.login-err{font-size:13px;color:var(--coral-text);margin:-14px 0 18px}
.login-go{width:100%;height:48px;background:var(--ink);color:var(--on-ink);border:0;border-radius:var(--r-ctl);
  font-size:16px;font-weight:500;cursor:pointer}
.login-hint{margin:32px 0 0;padding-top:20px;border-top:1px solid var(--rule)}
.login-hint p{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin:0 0 10px}
.login-chip{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;min-height:40px;
  padding:0 12px;margin:0 0 6px;background:var(--bg-1);border:1px solid var(--rule);border-radius:var(--r-ctl);
  font-size:14px;font-family:var(--font-m);color:var(--fg-1);cursor:pointer;text-align:left}
.login-chip span{font-family:var(--font);font-size:12px;color:var(--fg-3);flex:none}
@media (hover:hover){.login-chip:hover{background:var(--bg-sunk)}}
.tbl td.mono{font-family:var(--font-m);font-size:13px}
.formrow input#in-login{font-family:var(--font-m);min-width:150px}

/* ==========================================================================
   7. FAQ — один экран, две плотности
   ========================================================================== */
.faq{margin:24px 0 0}
.faq-item{padding:0 0 28px;border-bottom:1px solid var(--rule);margin:0 0 28px}
.faq-item:last-child{border-bottom:0;margin-bottom:0}
.faq-q{font-family:var(--font-d);font-size:18px;line-height:1.3;letter-spacing:-.02em;font-weight:700;margin:0 0 10px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.faq-a{font-size:16px;line-height:1.6;color:var(--fg-2);margin:0}
.faq .steps,.faq .defs{margin-top:14px}
body.internal .faq-q{font-size:16px}
body.internal .faq-a{font-size:14px;line-height:1.6}
body.internal .faq .steps b,body.internal .faq .defs b{font-size:14px}
body.internal .faq .steps span,body.internal .faq .defs{font-size:14px}
body.internal .faq-item{padding-bottom:20px;margin-bottom:20px}
.faq-in .faq-q{color:var(--fg-1)}

/* ==========================================================================
   8. Клиентская витрина на десктопе — колонка 620, не верстак
   ========================================================================== */
body.surface-client.w-desktop{background:var(--bg-0)}
body.surface-client.w-desktop .stage{display:block;padding:0}
body.surface-client.w-desktop .phone{width:100%;max-width:none;border:0;border-radius:0;overflow:visible}
body.surface-client.w-desktop .phone > *{max-width:620px;margin-left:auto;margin-right:auto}
/* Шапка и лицевая секция идут в край экрана, их содержимое — по той же колонке */
body.surface-client.w-desktop .cbar{max-width:none;position:sticky;top:var(--proto-h);z-index:20;
  padding-left:calc(50% - 290px);padding-right:calc(50% - 290px)}
body.surface-client.w-desktop .hero{max-width:none;
  padding-left:calc(50% - 310px);padding-right:calc(50% - 310px);padding-top:72px;padding-bottom:64px}
body.surface-client.w-desktop .hero h1{font-size:40px;letter-spacing:-.03em}
body.surface-client.w-desktop .chead{padding-top:48px}
body.surface-client.w-desktop .chead h1{font-size:38px;letter-spacing:-.025em}
/* Мачта идёт в край экрана, её содержимое — по той же колонке 620 */
body.surface-client.w-desktop .mast{max-width:none;padding-bottom:38px;
  padding-left:calc(50% - 310px);padding-right:calc(50% - 310px)}
body.surface-client.w-desktop .mast .kick{padding-top:34px}
body.surface-client.w-desktop .mast h1{font-size:56px}
body.surface-client.w-desktop .mast .lede{font-size:17px}
body.surface-client.w-desktop .bars{height:92px}
body.surface-client.w-desktop .mstats{grid-template-columns:repeat(3,1fr)}
body.surface-client.w-desktop .mstats > div{padding:14px 0 0 14px;border-top:0;
  border-left:1px solid var(--ink-3)}
body.surface-client.w-desktop .mstats > div:first-child{padding-left:0;border-left:0}
body.surface-client.w-desktop .mstats .v{font-size:26px}
/* На широком стекле метрика уходит в правую колонку: порядок чтения
   становится «что это → насколько разошлось», как в вёрстке для чтения.
   На узком она остаётся над заголовком — там колонка не выживает. */
body.surface-client.w-desktop .item{display:grid;grid-template-columns:minmax(0,1fr) 118px;
  gap:24px;align-items:start;padding:20px 0}
/* Метрика первая в DOM — так на узком стекле она встаёт над заголовком
   без единой перестановки. В гриде порядок задаётся явно, иначе она
   займёт колонку текста. */
body.surface-client.w-desktop .item .b{order:1}
body.surface-client.w-desktop .met{order:2;flex-direction:column;align-items:flex-end;
  gap:0;margin:0;padding-top:3px}
body.surface-client.w-desktop .met .v{font-size:24px;line-height:1.05}
body.surface-client.w-desktop .met .u{margin-top:4px}
/* Ведущая тема выделена величиной числа, а не длиной полосы. */
body.surface-client.w-desktop .item.lead .met .v{font-size:30px;letter-spacing:-.02em}
body.surface-client.w-desktop .item .t{font-size:19px}
body.surface-client.w-desktop .item.lead .t{font-size:27px}
body.surface-client.w-desktop .item.thin{padding:13px 0}
body.surface-client.w-desktop .item.thin .t{font-size:16.5px}
body.surface-client.w-desktop .item.thin .met{padding-top:1px}
body.surface-client.w-desktop .door{margin-left:auto;margin-right:auto;padding:26px 28px}
body.surface-client.w-desktop .door .v{font-size:44px}
body.surface-client.w-desktop .rest-head{padding-top:44px}
body.surface-client.w-desktop .rest-head h1{font-size:40px}
body.surface-client.w-desktop .cwrap{padding-top:40px;padding-bottom:64px}
body.surface-client.w-desktop .cwrap h1{font-size:32px}
body.surface-client.w-desktop .cblock{margin-top:56px}
body.surface-client.w-desktop .cfoot{padding-bottom:64px}
body.surface-client.w-desktop .cmenu{margin-left:auto;margin-right:auto}

/* Полоса навигации на узком стекле прокручивается по горизонтали, но об этом
   ничто не сообщало: последний пункт обрывался ровно по краю и выглядел как
   конец списка. Срез градиентом — признак того, что справа есть ещё. */
body.w-mobile.internal .top nav{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent 100%)}

/* ==========================================================================
   9. Верстак на узком стекле — плотный, но не таблица
   ========================================================================== */
.rowmeta{display:none}
.statecol{width:96px;flex:none;text-align:right}
body.w-mobile.internal .colhead{display:none}
body.w-mobile.internal .num{display:none}
body.w-mobile.internal .statecol{width:auto;flex:none;order:4;text-align:left}
body.w-mobile.internal .rowmeta{display:block;order:5;flex-basis:calc(100% - 56px);margin:6px 0 0 56px;
  font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums}
body.w-mobile.internal .row{flex-wrap:wrap;padding:12px 16px}
body.w-mobile.internal .cb{order:1}
body.w-mobile.internal .e{order:2}
body.w-mobile.internal .txt{order:3;flex-basis:calc(100% - 68px)}
/* Описание по-прежнему усекается: верстак на узком стекле остаётся плотным.
   Разворачивать его — значит превращать строку в карточку витрины. */
/* ⚠️ `min-width` колонки действий здесь СНИМАЕТСЯ. На узком экране колонок
   нет вовсе — шапка `.colhead` скрыта, — и выравнивать не с чем, а 300 px
   из `--acts-w` не помещались в стекло 375 и давали горизонтальное
   переполнение всей страницы. Токен решает задачу сетки, а сетки тут нет. */
body.w-mobile.internal .acts-row{order:6;flex-basis:calc(100% - 56px);width:auto;min-width:0;
  margin:4px 0 0 56px;justify-content:flex-start;gap:12px 20px;flex-wrap:wrap}
/* Узкое стекло: всё, что набрано `nowrap` ради одной строки на десктопе,
   здесь получает право переноса. Иначе одна неразрывная подпись растягивает
   документ и даёт горизонтальную прокрутку всей странице — а горизонтальная
   прокрутка на телефоне это не «мелкая неаккуратность», а потерянный
   правый край у КАЖДОГО экрана. */
body.w-mobile.internal .lvl{flex-wrap:wrap;gap:8px 12px;flex-basis:100%;min-width:0}
/* Селектор призмы внутри переключателя обязан сжиматься: с `min-width:230px`
   он вылезал за стекло на 3 px и давал горизонтальную прокрутку всей странице. */
body.w-mobile.internal .lvl .sel{flex:1 1 auto;min-width:0}
body.w-mobile.internal .lvl-note,
body.w-mobile.internal .cutline .h{white-space:normal}
body.w-mobile.internal .cutline{flex-wrap:wrap;gap:4px 10px}
body.w-mobile.internal .cutline .l{display:none}
/* Тап-цели: 44 px — правило, а не украшение. Чекбокс сохраняет размер 20 px,
   но получает невидимую область нажатия вокруг себя. */
body.w-mobile.internal .act,body.w-mobile.internal .dots{min-height:44px;display:flex;align-items:center}
body.w-mobile.internal .dots{width:44px;justify-content:flex-end}
body.w-mobile.internal .cb{position:relative}
body.w-mobile.internal .cb::before{content:"";position:absolute;width:44px;height:44px;
  left:50%;top:50%;transform:translate(-50%,-50%)}
body.w-mobile.internal .rowlink{padding:2px 0}
body.w-mobile.internal .top{height:auto;flex-wrap:wrap;padding:10px 16px;gap:10px 16px}
/* На узком экране навигация занимает СВОЮ строку целиком: `width:100%` без
   `flex-basis` не мешал ей делить строку с учётной записью — `flex:1` из
   базового правила разрешал сжатие, и разделы вставали рядом с именем. */
body.w-mobile.internal nav{order:5;flex-basis:100%;flex-grow:0;flex-wrap:nowrap;
  overflow-x:auto;gap:6px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
body.w-mobile.internal nav a,body.w-mobile.internal .more{height:36px}
/* Порядок на узком: знак и учётная запись в одной строке, навигация — своей.
   В бою селектора клиента в полосе нет вовсе, поэтому строк ровно две;
   в демо-ветке селектор уносит третью — это стенд, а не продукт. */
body.w-mobile.internal .acct-wrap{margin-left:auto;order:2}
body.w-mobile.internal .sel-dark{order:3}
body.w-mobile.internal .acct-btn{max-width:150px}
body.w-mobile.internal .menu.at-acct{right:0}
/* Панель на узком экране занимает почти всё стекло: там это основной способ
   добраться до служебных разделов, а не дополнение к полосе. */
body.w-mobile.internal .drawer{width:100%;max-width:100%}
body.w-mobile.internal .sel-dark{min-width:0}
body.w-mobile.internal .sub{position:relative;top:auto;min-height:0;flex-wrap:wrap;padding:12px 16px;gap:10px}
body.w-mobile.internal .sub .right{margin-left:0;width:100%;justify-content:space-between;gap:10px}
body.w-mobile.internal .sel{min-width:0;flex:1}
/* align-items:flex-start из базового правила в колоночном flex сжимает
   детей по ширине до max-content — main уезжал за пределы колонки */
body.w-mobile.internal .body{flex-direction:column;align-items:stretch;padding:16px;gap:16px}
body.w-mobile.internal main{min-width:0;width:100%}
body.w-mobile.internal aside{width:100%;position:static}
body.w-mobile.internal .menu.at-prism{left:16px;right:16px;width:auto;top:100%}
body.w-mobile.internal .cal{right:auto;left:0;width:min(288px,calc(100vw - 48px))}
body.w-mobile.internal .card-wrap{flex-direction:column;padding:16px;gap:20px}
body.w-mobile.internal .card-rail{width:100%}
body.w-mobile.internal .panel{overflow-x:auto}
body.w-mobile.internal .bhead{padding:10px 16px}
body.w-mobile.internal .cmtbox{padding-left:16px}
body.w-mobile.internal .stub{padding:40px 16px 64px}
body.w-mobile.internal .stub h1{font-size:26px}
body.w-mobile.internal main[style]{max-width:none !important}

/* Служебный режим «мобильный» на широком экране: узкая колонка без рамки —
   overflow не вводится, значит sticky продолжает считаться от документа */
@media (min-width:701px){
  body.w-mobile #app{width:375px;margin:0 auto;background:var(--bg-0);
    border-left:1px solid var(--rule-strong);border-right:1px solid var(--rule-strong);min-height:80vh}
  body.w-mobile.surface-client .stage{padding:0}
  body.w-mobile.surface-client .phone{width:100%;border:0;border-radius:0;overflow:visible}
  body.w-mobile .cbar{position:sticky;top:var(--proto-h);z-index:20}
}

/* ==========================================================================
   10. Подтверждение отдачи — единственный барьер перед необратимым действием
   ========================================================================== */
.handoff{position:relative;display:inline-flex}
.give.open{box-shadow:0 0 0 1px var(--ink)}
.conf{position:absolute;top:42px;right:0;width:320px;background:var(--bg-0);
  border:1px solid var(--rule-strong);border-radius:var(--r-ctl);
  box-shadow:0 8px 24px rgba(10,10,10,.10);padding:16px;z-index:45;text-align:left}
.conf.danger{border-color:var(--coral);border-width:1.5px}
.conf-h{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);margin:0 0 6px}
.conf-sum{font-size:14px;font-weight:500;color:var(--fg-1);margin:0 0 16px;
  font-variant-numeric:tabular-nums}
.conf-aud{display:flex;gap:24px;padding:14px 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.conf-aud div{flex:1;min-width:0}
.conf-aud b{display:block;font-size:22px;font-weight:600;line-height:1.1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--fg-1)}
.conf-aud span{display:block;font-size:12px;line-height:1.4;color:var(--fg-2);margin-top:5px}
.conf-state{font-size:13px;line-height:1.5;color:var(--fg-2);margin:14px 0 0}
.conf.danger .conf-state{color:var(--coral-text);font-weight:500}
.conf-acts{display:flex;align-items:center;gap:14px;margin:18px 0 0}
.conf-acts .give{height:38px;padding:0 16px}
.conf-note{font-size:12px;line-height:1.5;color:var(--fg-3);margin:14px 0 0;
  padding-top:12px;border-top:1px solid var(--rule)}
.dots.has{color:var(--fg-1)}
.rail-lock{font-size:12px;line-height:1.5;color:var(--fg-3);margin:12px 0 0;
  padding-top:10px;border-top:1px solid var(--rule)}
.sub .chip-l{flex:none}
/* На узком стекле подтверждение становится листом во всю колонку */
body.w-mobile.internal .handoff{position:static}
body.w-mobile.internal .conf{position:absolute;left:16px;right:16px;width:auto;top:auto;margin-top:8px}
body.w-mobile.internal .conf-acts .give{flex:1}

/* ==========================================================================
   11. Три кнопки отправки, осознанное подтверждение, комментарий к выпуску
   ========================================================================== */
.handoff{gap:10px}
.ghost.send{height:34px;padding:0 14px;font-size:14px;color:var(--fg-1);
  border-color:var(--rule-strong);background:var(--bg-0)}
.ghost.send.open{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.ghost.send[disabled]{color:var(--fg-3);border-color:var(--rule);background:var(--bg-1)}
.give[disabled]{background:var(--bg-sunk);color:var(--fg-3);cursor:not-allowed}
.conf-extra{font-size:12px;line-height:1.5;color:var(--fg-3);margin:10px 0 0}
/* Осознанное подтверждение — только в громком случае, поэтому не приучает
   к автоматизму: оно появляется редко и всегда по делу */
.conf-ack{display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;padding:11px 12px;
  background:var(--coral-soft);border-radius:var(--r-chip);
  font-size:13px;line-height:1.45;color:var(--coral-text);font-weight:500;cursor:pointer}
.conf-ack input{margin:2px 0 0;flex:none;accent-color:var(--coral)}
.conf-alt{display:block;width:100%;margin:10px 0 0;padding:0;background:none;border:0;
  font-size:13px;color:var(--fg-2);text-align:left;cursor:pointer;
  border-bottom:1px solid var(--rule-strong)}
.conf-alt:hover{color:var(--fg-1)}

/* Комментарий к выпуску: левая колонка = про выпуск, строка = про тему */
.icmt{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--rule)}
.icmt h3{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);margin:0 0 6px}
.icmt-hint{font-size:12px;line-height:1.5;color:var(--fg-3);margin:0 0 10px}
.icmt textarea{width:100%;font-size:14px;line-height:1.45;color:var(--fg-1);
  border:1px solid var(--rule-strong);border-radius:var(--r-ctl);padding:8px 10px;
  resize:none;height:88px;background:var(--bg-0)}
.icmt-r{display:flex;align-items:center;gap:12px;margin-top:8px}
.icmt .save{height:30px;padding:0 12px;background:var(--ink);color:var(--on-ink);border:0;
  border-radius:var(--r-ctl);font-size:13px;font-weight:500;cursor:pointer}
.icmt-v{font-size:13px;line-height:1.5;color:var(--fg-1);margin:0 0 8px;
  padding:10px 12px;background:var(--bg-0);border:1px solid var(--rule);border-radius:var(--r-ctl)}
.icmt-add{width:100%;min-height:36px;background:var(--bg-0);border:1px dashed var(--rule-strong);
  border-radius:var(--r-ctl);font-size:13px;color:var(--fg-2);cursor:pointer}
.icmt-add:hover{border-color:var(--fg-3);color:var(--fg-1)}
body.w-mobile.internal .handoff{flex-wrap:wrap;gap:8px}
body.w-mobile.internal .ghost.send,body.w-mobile.internal .handoff .give{flex:1;white-space:nowrap}

/* Ниже 1200 полоса режима поджимается, чтобы не уезжать во вторую строку:
   селектор призмы и промежутки отдают лишнее первыми — они дешевле всего */
@media (max-width:1200px){
  .sub{gap:12px}
  .sub .right{gap:12px}
  .sel{min-width:170px}
}

/* ─────────────────────────────────────────────────────────────────────────
   ADR-016 — пятая секция и объяснимость отбора.
   Ничего нового по цвету: акцент остаётся точечным, объяснение балла
   ахроматично. «Почему тема здесь» не должно выглядеть весомее самой темы.
   ───────────────────────────────────────────────────────────────────────── */

/* Слагаемые балла — вложенная строка, а не отдельный список: они читаются
   как расшифровка числа над ними, поэтому втянуты и приглушены. */
.rail-row.sub{padding:5px 0 5px 12px;border-bottom:0;font-size:13px;color:var(--fg-3)}
.rail-row.sub b{font-weight:500;color:var(--fg-2);font-size:13px}
.rail-row.sub + .rail-row:not(.sub){border-top:1px solid var(--rule);margin-top:4px}

/* Клиентский ответ «почему тема здесь» — та же врезка, что «почему это про вас»,
   но без коралловой опоры: это объяснение отбора, а не адресность темы.
   Две коралловые полосы подряд поспорили бы за одно и то же внимание. */
.why.alt{background:var(--bg-sunk);border-left:3px solid var(--rule-strong)}

/* Второй маршрут темы. Тихая строка, не плашка: дубли между блоками разрешены
   ADR-014, и сообщение здесь — «так и задумано», а не предупреждение. */
.dual-note{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--fg-3)}

/* Заглушка будущей части. Видимо будущее: пунктир вместо сплошной рамки,
   приглушённая шапка. Кликать нечего, и это видно до нажатия. */
.block.soon{border-style:dashed;background:var(--bg-1)}
.block.soon .bhead .n{color:var(--fg-2)}
.block.soon .blead{color:var(--fg-3)}

/* ═════════════════════════════════════════════════════════════════════════
   Мобильный верстак — рабочая поверхность (решение 29.08).
   Панель прохода живёт только на узком стекле: на широком экране куратор
   видит место в списке глазами, а положение органов не имеет значения.
   ═════════════════════════════════════════════════════════════════════════ */
.mbar{display:none}

/* ⚠️ Панель прикреплена к низу стекла и не имеет права расширять документ:
   любая её лишняя тройка пикселей даёт горизонтальную прокрутку ВСЕЙ странице.
   Поэтому подпись положения сжимается и обрезается, а не толкает соседей. */
body.w-mobile.internal .mbar-pos{min-width:0;overflow:hidden}
body.w-mobile.internal .mbar-in{max-width:100%}
body.w-mobile.internal .mbar{
  display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;max-width:100vw;
  background:var(--bg-0);border-top:1px solid var(--rule-strong);
  box-shadow:0 -6px 24px rgba(0,0,0,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
/* Панель перекрывает низ списка — отдаём ей место, иначе последняя строка
   блока недостижима, а именно на ней проход и заканчивается. */
body.w-mobile.internal .note-wrap{padding-bottom:96px}

.mbar-in{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 12px}
.mbar-pos{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.mbar-pos b{font-size:14px;font-weight:600;color:var(--fg-1)}
.mbar-sub{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums}

/* Тап-цели 44px — то же правило, что у чекбокса строки: плотность про объём
   информации, а не про непопадаемые кнопки. */
.mb-nav{width:44px;height:44px;flex:none;border:1px solid var(--rule-strong);border-radius:var(--r-ctl);
  background:var(--bg-0);font-size:20px;line-height:1;color:var(--fg-1);cursor:pointer}
.mb-nav:active{background:var(--bg-sunk)}
.mb-bulk{min-height:44px;flex:none;padding:6px 12px;border:1px solid var(--rule-strong);
  border-radius:var(--r-ctl);background:var(--bg-0);font-size:12px;line-height:1.2;
  color:var(--fg-1);cursor:pointer;font-family:inherit}

/* Режим массового выбора заливает панель — состояние экрана изменилось,
   и обычный тап теперь выбирает, а не открывает. Это должно быть видно
   раньше, чем палец коснётся строки. */
.mbar.bulk{background:var(--fg-1);border-top-color:var(--fg-1)}
.mbar.bulk .mbar-n{flex:1;color:var(--bg-0);font-size:14px;font-weight:600}
.mbar-acts{display:flex;align-items:center;gap:8px}
.mb-act{min-height:44px;padding:6px 12px;border:1px solid rgba(255,255,255,.35);border-radius:var(--r-ctl);
  background:transparent;color:var(--bg-0);font-size:13px;cursor:pointer;font-family:inherit}
.mb-act[disabled]{opacity:.4;cursor:default}
.mb-x{width:44px;height:44px;flex:none;border:0;background:transparent;color:var(--bg-0);
  font-size:16px;cursor:pointer}

/* Чекбокс в режиме выбора — тот же орган, другое значение: заливка коралловая,
   чтобы «выбрано для действия» не читалось как «идёт клиенту». */
.cb.pick.on{background:var(--coral);border-color:var(--coral)}
.cb.pick.on::after{border-color:#fff}

/* Метка «место — фон». Не заливка и не цвет состояния: это суждение о будущем,
   а не состояние темы в выпуске. */
.act.mark.on{color:var(--fg-1);font-weight:500}
.state-chip.bg{background:var(--bg-sunk);color:var(--fg-2);border:1px solid var(--rule-strong)}

/* Д-4-бис: доля попадания. Оба числа рядом и крупно — знаменатель здесь
   не украшение, а условие принятия: «20%» на трёх темах и на тридцати
   это разные факты. Красным не подсвечиваем: 4% сегодня — не сбой прибора,
   а измеренное состояние, и оно про качество предложения. */
.hitrate{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 16px 12px;padding:10px 14px;background:var(--bg-sunk);
  border:1px solid var(--rule);border-radius:var(--r-card)}
.hitrate.ok{background:var(--bg-sunk);border-color:var(--rule-strong)}
.hr-n{font-size:15px;color:var(--fg-2);font-variant-numeric:tabular-nums}
.hr-n b{font-weight:600;color:var(--fg-1)}
.hr-p{font-size:15px;font-weight:600;color:var(--fg-1);font-variant-numeric:tabular-nums}
.hitrate.ok .hr-p{color:var(--coral-text)}
.hr-t{font-size:12px;color:var(--fg-3)}

/* Блок, который собирается, но не доставляется (Д-4). Чип держит рычаг
   видимым: пока он на экране, никто не решит, что блок «просто готов». */
.chip-l.hold{background:var(--bg-sunk);color:var(--fg-2);border:1px solid var(--rule-strong)}

/* Ход конкурента в повестке (Д-5). Метка, а не вычёркивание: тема остаётся,
   решение за куратором. */
.state-chip.rival{background:var(--coral-soft);color:var(--coral-text);border:1px solid var(--coral-soft)}

/* ==========================================================================
   Состояния, которые до 30.08 выглядели одинаково — пустым экраном.
   Полоса называет, ЧТО именно пусто: выпуска нет · показан тестовый прогон ·
   загрузка упала. Без неё куратор не мог отличить «сегодня тихо» от
   «фронт спрашивает не тот прогон».
   ========================================================================== */
.runnote{border-radius:var(--r-card);padding:14px 16px;margin:0 0 20px;
  font-size:13px;line-height:1.5;border:1px solid var(--rule);background:var(--bg-0)}
.runnote b{font-weight:600}
.runnote.warn{background:var(--bg-sunk);border-color:var(--rule-strong);color:var(--fg-1)}
.runnote.bad{background:var(--coral-soft);border-color:#F3CFCF;color:var(--coral-text)}

/* Пояснение под заголовком на служебных экранах (смена пароля, поломка). */
.login-sub{font-size:14px;line-height:1.5;color:var(--fg-2);margin:-18px 0 24px}
/* Второстепенное действие: выход из экрана, который иначе был бы тупиком. */
.login-alt{width:100%;height:44px;margin-top:10px;background:transparent;color:var(--fg-2);
  border:1px solid var(--rule-strong);border-radius:var(--r-ctl);font-size:14px;cursor:pointer}
@media (hover:hover){.login-alt:hover{background:var(--bg-sunk);color:var(--fg-1)}}
/* Текст поломки: моноширинный и переносимый — его копируют и пересылают. */
.fatal-msg{font-family:var(--font-m);font-size:12px;
  line-height:1.5;white-space:pre-wrap;word-break:break-word;background:var(--bg-sunk);
  border:1px solid var(--rule);border-radius:var(--r-ctl);padding:12px;margin:0 0 20px;
  max-height:180px;overflow:auto;color:var(--fg-1)}
/* Прокрутка внутри карточки: при 25 призмах семь видимых читаются как «всё». */
.login-hint.scrolls{position:relative;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent)}
/* Полоса состояния живёт над обеими колонками: на узком экране main идёт
   после панели квот, и предупреждение уезжало ниже полутора экранов. */
.notewrap{max-width:1680px;margin:0 auto;padding:24px 32px 0}
/* Р3-8: «только просмотр». Не тревога и не ошибка — состояние, поэтому
   ахроматично: коралловый в этом продукте означает «требует решения». */
.ro-note{margin:12px 0 0;padding:12px 16px;background:var(--bg-sunk);
  border:1px solid var(--rule);border-left:3px solid var(--rule-strong);
  border-radius:0 var(--r-card) var(--r-card) 0;font-size:14px;line-height:1.55;color:var(--fg-2)}
.ro-note b{color:var(--fg-1)}

/* ── общая часть: решение дня ────────────────────────────────────────────
   Подзаголовок экрана. `.sub-page` — 13px и служебный тон; здесь текст
   объясняет, ЧТО человек сейчас делает, и читается наравне с содержимым.
   Замечание пользователя 03.09: «подписи очень технические, а шрифт мелкий». */
.lead-page{font-size:15px;line-height:1.6;color:var(--fg-2);margin:0 0 20px;max-width:76ch}
/* Состояние «где решение отличается» — предложение, а не число: узкой
   колонки `.statecol` (96px) ему мало, и оно рвалось бы по слогам. */
.block .row .statecol{width:260px;flex:none;text-align:right;font-size:13px;line-height:1.45}
.row.busy{opacity:.55}
.row.busy .cb{border-style:dashed}
/* Спрос кода — не модальное окно, а продолжение строки: решение принимается
   там же, где нажата галочка, и видно, к какой теме оно относится. */
.askrow{margin:0 0 8px 56px;padding:14px 16px;background:var(--bg-sunk);
  border:1px solid var(--rule);border-left:3px solid var(--coral);
  border-radius:0 var(--r-card) var(--r-card) 0}
.ask-h{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--fg-1)}
.ask-b{display:block;width:100%;text-align:left;margin:0 0 6px;padding:9px 12px;
  background:var(--bg-0);border:1px solid var(--rule);border-radius:var(--r-ctl);
  cursor:pointer;font-family:inherit}
.ask-b b{display:block;font-size:13px;font-weight:600;color:var(--fg-1)}
.ask-b span{display:block;font-size:12px;color:var(--fg-2);margin-top:2px}
@media (hover:hover){.ask-b:hover{border-color:var(--rule-strong);background:var(--bg-1)}}
.ask-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.ask-foot .mut{flex:1;min-width:200px;line-height:1.45}
body.w-mobile.internal .block .row .statecol{width:auto;flex:none;order:4;text-align:left}
body.w-mobile.internal .askrow{margin-left:0}
/* Отказ прибора — это ошибка, а не состояние, и коралловый здесь уместен:
   он означает «требует решения», а решение тут действительно требуется. */
.ro-note.err{border-left-color:var(--coral);background:var(--coral-soft)}
.ro-note.err b{color:var(--coral-text)}

/* ── получатели выпусков ─────────────────────────────────────────────────
   Служебный слой экрана: слаг призмы, счётчик блока, отметка замера.
   Тот же моношрифт и тот же разряд, что у остального служебного слоя, —
   отдельного стиля «мелкое серое» в системе нет и заводить его нельзя. */
.mut{color:var(--fg-3);font-size:12px;font-variant-numeric:tabular-nums}
.mono.mut,.mut.mono{font-family:var(--font-m);letter-spacing:.03em;white-space:nowrap}
/* Слаг рвался посередине («tbank-» / «edu») — дефис для переноса законный,
   а слаг после переноса перестаёт быть опознаваемым идентификатором.
   Имя призмы переносится по-прежнему, слаг — нет. */
/* «Не ушло» — единственное число на экране, требующее действия.
   На белом берём --coral-text (5,58), а не --coral (3,79, ниже AA). */
.bad{color:var(--coral-text);font-weight:600;font-variant-numeric:tabular-nums}
/* Ноль в поле, которое обычно тревожит, гасим: 0 неудач не должен читаться
   так же громко, как 12. Но он ОСТАЁТСЯ на экране — счётчик без пары
   зеленеет на пустой выборке. */
.fig.dim b{color:var(--fg-3)}
/* Подпись под таблицей объясняет, ПОЧЕМУ два столбца расходятся. Это часть
   таблицы, а не примечание к экрану, поэтому живёт внутри панели. */
.tbl-foot{margin:0;padding:14px 16px 16px;border-top:1px solid var(--rule);
  background:var(--bg-sunk);font-size:13px;line-height:1.55;color:var(--fg-2)}
.tbl-foot b{color:var(--fg-1);font-weight:600}
.notewrap .runnote{margin:0}
@media (max-width:700px){.notewrap{padding:16px 16px 0}}
/* Признак живости призмы в выборе. Слаг сам по себе не говорит, боевая
   призма это или корпусная сущность без выпусков — 30.08 на этом
   потерялись десять отметок. */
.login-chip .pm{font-size:11px;color:var(--fg-3);flex:none;margin-left:auto;
  padding-left:12px;white-space:nowrap}
.login-chip .pm.live{color:var(--fg-2)}
.login-chip .pm.dead{color:var(--coral-text)}
.login-chip.dead{opacity:.62}
@media (max-width:520px){.login-chip .pm{display:none}}

/* Стек `.whoami` из четырёх текстовых объектов (логин, роль, «сменить пароль»,
   «выйти») удалён 02.09 вместе с прежней шапкой: учётная запись живёт за одним
   управлением, `.acct-btn` выше (Ф2-4). */
/* Комментарий к теме — не второстепенное действие: он предмет недели разметки. */
.act.cmt.has{font-weight:600;color:var(--fg-1)}
/* Признак живости призмы в выпадающем списке. */
.menu.at-prism .mnum i{font-style:normal;color:var(--fg-3)}
.menu.at-prism .mnum i.dead{color:var(--coral-text)}
/* Сведение о выпуске целиком: свёрнуто по умолчанию — оно нужно один раз,
   а не при каждом проходе по темам. */
/* `.issuenote` удалён 02.09 вместе со складным блоком «Как уходит этот выпуск»:
   пояснение переехало под плашку доставки (Ф2-3а), и правил без разметки
   здесь не осталось. */

/* 🔴 Главный орган курации на телефоне — галочка состава — имел 20×20 при
   правиле 44. Замер 31.08; на широком экране это мышь, на узком палец.
   Область нажатия расширяется псевдоэлементом, а не размером: увеличить
   саму галочку значило бы переверстать строку ради касания. */
@media (max-width:700px){
  .row .cb{position:relative}
  .row .cb::after{content:"";position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px}
  .datebtn{min-height:44px}
}
/* Смена пароля и выход — две ссылки под ролью, не одна строка. */

/* ═══════════════════════════════════════════════════════════════════════════
   Стол креатора (T185, 12.09.2026)

   ⚠️ Балла и ранга на экране нет НАМЕРЕННО, и вёрстка не должна их
   подразумевать: ни бейджей, ни номеров строк, ни сортировочных стрелок.
   Базовые 4%, с которыми сравнивается результат, сняты на перемешанном
   списке с убранной колонкой резонанса — показанный порядок измерил бы
   согласие человека с машиной, а не ценность повода.
   ═════════════════════════════════════════════════════════════════════════ */

.desk-head { padding: 24px 20px 8px; }
.desk-head h1 { margin: 0 0 6px; display: inline-block; }
.desk-day { margin-left: 14px; vertical-align: middle; border: 1px solid var(--line, #e5e7eb);
            border-radius: 10px; padding: 6px 10px; font-size: 14px; font-family: inherit;
            background: var(--bg-1, #fff); }
.desk-sub { color: var(--ink-2, #6b7280); font-size: 14px; margin: 0; }
.desk-hint { display: block; margin-top: 6px; font-size: 13px; opacity: .8; }

.desk-list { padding: 8px 16px 96px; display: grid; gap: 14px; }
.desk-card { border: 1px solid var(--line, #e5e7eb); border-radius: 14px;
             padding: 16px 18px; background: var(--bg-1, #fff); }
.desk-card.marked { border-color: var(--accent, #d9643a); }
.desk-card h2 { font-size: 17px; line-height: 1.35; margin: 0 0 8px; }
.desk-text { font-size: 14px; line-height: 1.5; color: var(--ink-2, #4b5563); margin: 0 0 10px; }
.desk-link { font-size: 13px; }

.desk-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.desk-mk { border: 1px solid var(--line, #e5e7eb); background: transparent;
           border-radius: 999px; padding: 7px 16px; font-size: 14px; cursor: pointer; }
.desk-mk.on { background: var(--accent, #d9643a); color: #fff; border-color: transparent; }
.desk-cm { flex: 1 1 220px; min-width: 180px; border: 1px solid var(--line, #e5e7eb);
           border-radius: 10px; padding: 7px 12px; font-size: 14px; font-family: inherit; }

.desk-gen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.desk-prism { border: 1px solid var(--line, #e5e7eb); border-radius: 10px;
              padding: 7px 10px; font-size: 14px; font-family: inherit; }
.desk-go { border: 1px solid var(--line, #e5e7eb); background: transparent;
           border-radius: 10px; padding: 7px 14px; font-size: 14px; cursor: pointer; }
.desk-go[disabled] { opacity: .5; cursor: default; }

.desk-job { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.desk-job.run { background: #f4f4f5; color: #52525b; display: flex; gap: 10px; align-items: center; }
.desk-job.ok { background: #f0fdf4; }
.desk-job.bad { background: #fef2f2; }
.desk-job.neutral { background: #fafafa; color: #52525b; }
.desk-job-msg { margin: 0; }
.desk-sec { opacity: .6; font-size: 13px; }
.desk-angles { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.desk-angles li { line-height: 1.45; }
.desk-why { display: block; font-size: 13px; opacity: .75; margin-top: 3px; }

/* Вертушка — единственная анимация на экране. 1,5–5 минут ожидания без
   признака жизни читаются как зависание, и человек жмёт кнопку повторно. */
.spin { width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
        border: 2px solid #d4d4d8; border-top-color: #71717a;
        animation: deskspin .9s linear infinite; }
@keyframes deskspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

@media (max-width: 560px) {
  .desk-list { padding: 8px 12px 96px; }
  .desk-card { padding: 14px; }
  .desk-cm { flex-basis: 100%; }
}