/* Оформление сервиса «М-СИСТЕМА | ТРАНСКРИБАЦИЯ».
   Палитра и типографика взяты из брендбука компании: синее поле, терракота на том,
   что требует внимания, лавандовые подложки, Gilroy и Tektur. Третьего цвета нет
   намеренно — «готово» это залитый синий, «ждет вас» терракота.
   Структура экрана — вариант «Реестр»: слева рельс с разделами, справа плотная
   таблица с синей шапкой, как в документах компании. */

@font-face{font-family:'Gilroy'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/статика/шрифты/Gilroy-Regular.otf') format('opentype');}
@font-face{font-family:'Gilroy'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/статика/шрифты/Gilroy-Semibold.otf') format('opentype');}
@font-face{font-family:'Gilroy'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/статика/шрифты/Gilroy-Bold.otf') format('opentype');}
@font-face{font-family:'Tektur'; font-weight:500; font-style:normal; font-display:swap;
  src:url('/статика/шрифты/Tektur-Medium.ttf') format('truetype');}

:root{
  --navy:#2E4372; --navy-deep:#22315A; --navy-soft:#5A6E9C;
  --terra:#B15139; --terra-deep:#8E3F2C; --terra-soft:#C9836E;
  --fill:#EEF1F8; --fill-2:#F6F8FC; --line:#DDE2EE; --line-2:#C9D2E6;
  --paper:#FFFFFF; --ink:#333B4D;
  /* Вторичный текст держит 4.5:1 на всех трех подложках (бумага, лаванда,
     страница): --mute 4.8:1, --rail-mute 4.7:1 на синем рельсе. Прежние
     #7C8698 и #5A6E9C давали 3.3:1 и 2.1:1 — расход и роль читались с трудом. */
  --mute:#5F6B80;
  --rail:#2A3D66; --rail-ink:#C3CEE6; --rail-mute:#99ACD4;
  --page:#F2F4F9;
  /* Цвет на каждый этап (решение пользователя 14.08.2026). Сгруппированы по
     смыслу: холодные — работа идет сама, теплые — ждет человека, зеленый —
     сделано, красный — сбой. Белый текст на каждом держит 4.5:1. */
  --этап-черновик:#59637A; /* собирается — еще не отправлена, ничего не стоила */
  --этап-лежит:#6B7A99;   /* не распознана — лежит, ничего не происходит */
  --этап-аср:#2E4372;     /* распознается */
  --этап-разбор:#4B3F87;  /* разбор моделью */
  --этап-сборка:#1F6F8B;  /* сборка документа */
  --этап-голоса:#B15139;  /* нужны спикеры */
  --этап-отбор:#B0651F;   /* отбор тем */
  --этап-готово:#2E7D5B;  /* готово */
  --этап-отчет:#1F5F49;   /* только отчет — записи нет, разбор остался */
  --этап-сбой:#B3261E;    /* ошибка */
  --рельс-ширина:224px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:'Gilroy',system-ui,-apple-system,sans-serif; font-weight:400;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--navy);}
/* Единственное движение в интерфейсе, кроме точки «идет»: заливка под курсором
   меняется за 120 мс, а не рывком. Ничего не появляется и не разъезжается. */
@media (prefers-reduced-motion:no-preference){
  .рельс nav a,.кн,table.реестр tbody tr,.отбор li,.кто a{
    transition:background-color .12s ease-out, color .12s ease-out,
      border-color .12s ease-out;}
}
/* Запасной — тот же Gilroy, а не системный моноширинный: пока Tektur грузится,
   марка не должна мигать чужим характером. */
.марка{font-family:'Tektur','Gilroy',system-ui,sans-serif; font-weight:500;
  letter-spacing:.03em;}
.числ{font-variant-numeric:tabular-nums;}

/* ——— каркас ——— */
.каркас{display:flex; min-height:100vh;}
.рельс{
  width:var(--рельс-ширина); flex:0 0 var(--рельс-ширина); background:var(--rail);
  color:var(--rail-ink); padding:20px 0 22px; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.рельс .лого{padding:0 18px 18px; border-bottom:1px solid rgba(255,255,255,.10);
  margin-bottom:14px;}
.рельс .лого a{color:#fff; font-size:12.5px; line-height:1.55; text-decoration:none;
  display:block;}
.рельс .лого i{font-style:normal; color:var(--rail-mute);}
.рельс nav{display:flex; flex-direction:column; gap:1px; padding:0 8px;}
.рельс nav a{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px;
  color:var(--rail-ink); text-decoration:none; font-size:13.5px; font-weight:500;
}
.рельс nav a:hover{background:rgba(255,255,255,.07); color:#fff;}
.рельс nav a:focus-visible{outline:2px solid #fff; outline-offset:1px;}
.рельс nav a[aria-current="page"]{background:rgba(255,255,255,.13); color:#fff;
  font-weight:600;}
.рельс .точка{width:6px; height:6px; border-radius:50%; background:var(--navy-soft);
  flex:0 0 auto;}
.рельс nav a[aria-current="page"] .точка{background:#fff;}
.рельс nav a.ждет .точка{background:var(--terra-soft);}
.рельс .счет{margin-left:auto; font-size:12.5px; color:var(--rail-mute);
  font-variant-numeric:tabular-nums;}
.рельс nav a[aria-current="page"] .счет{color:#fff;}
.раздел-рельса{padding:18px 18px 6px; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--rail-mute); font-weight:600;}
.расход-рельса{padding:0 18px; font-size:12.5px; line-height:1.7;}
.расход-рельса b{color:#fff; font-weight:600; display:block;}
.расход-рельса span{color:var(--rail-mute);}
/* Расход и вошедший — подвал рельса. Наверху, сразу под разделами, расход
   оставлял под собой пустое поле в пол-рельса. */
.подвал{margin-top:auto;}
.кто{padding:14px 18px 0; border-top:1px solid rgba(255,255,255,.10);
  font-size:12.5px; line-height:1.45;}
.кто b{color:#fff; font-weight:600; display:block; font-size:12.5px;}
/* Роль и «Выйти» — отдельными строками: инлайном они склеивались
   в «бенефициар Выйти» и читались как одна подпись. */
.кто span{color:var(--rail-mute); display:block;}
.кто a{color:var(--rail-mute); font-size:12.5px; text-decoration:underline;
  display:inline-block; margin-top:7px;}
.кто a:hover{color:#fff;}

.лист{flex:1; min-width:0; padding:26px 30px 60px; max-width:1240px;}
/* Реестр — таблица, а не текст, и мера читаемой строки к нему не относится.
   1240px хватало на шесть столбцов; седьмой, «Действие», уходил за край даже
   на экране 1920, потому что лист упирался в меру, а место справа пустовало.
   1560px — ширина, при которой семь столбцов стоят свободно, а не вплотную. */
.лист.широкий{max-width:1560px;}

/* ——— заголовки ——— */
.заглавие{display:flex; justify-content:space-between; align-items:baseline;
  gap:18px; flex-wrap:wrap;}
h1{margin:0; font-size:26px; font-weight:700; color:var(--navy); letter-spacing:-.015em;
  line-height:1.18; text-wrap:balance;}
h2{margin:0; font-size:19px; font-weight:700; color:var(--navy); letter-spacing:-.01em;
  line-height:1.25;}
/* Уточнение к заголовку — подпись справа по базовой линии, на узком экране
   переносится под заголовок. Не надзаголовок: над заголовком не встает никогда. */
.уточнение{font-size:12.5px; color:var(--mute);}
.черта{height:1px; background:var(--line); margin:13px 0 20px; border:0;}
.путь{font-size:12.5px; margin:0 0 12px;}
.путь a{text-decoration:none;} .путь a:hover{text-decoration:underline;}

/* ——— таблица реестра ——— */
.таблоборот{overflow-x:auto; border:1px solid var(--line); border-radius:8px;
  background:var(--paper);}
table.реестр{width:100%; border-collapse:collapse; font-size:13.5px;}
table.реестр thead th{background:var(--navy); color:#fff; text-align:left;
  padding:9px 12px; font-weight:600; font-size:12.5px; white-space:nowrap;}
table.реестр tbody td{padding:10px 12px; border-bottom:1px solid var(--line);
  vertical-align:middle;}
table.реестр tbody tr:last-child td{border-bottom:0;}
table.реестр tbody tr:nth-child(even){background:var(--fill-2);}
table.реестр tbody tr:hover{background:var(--fill);}
/* Вся строка ведет в запись. Класс ставит скрипт: без него строка не нажимается,
   и обещать курсором то, чего не будет, нельзя. Тема и действие живут своей
   жизнью — там правят и нажимают, курсор там обычный. */
table.реестр tbody tr.кликабельная{cursor:pointer;}
table.реестр tbody tr.кликабельная td.тема,
table.реестр tbody tr.кликабельная td.действие{cursor:default;}
table.реестр td.имя{font-weight:600;}
table.реестр td.имя a{text-decoration:none;}
table.реестр td.имя a:hover{text-decoration:underline;}
/* Страховка на имя вообще без разделителей: <wbr> из фильтра «переносимое»
   ставить некуда, и одно слово снова растянуло бы таблицу. Именно anywhere,
   а не break-word: только anywhere уменьшает min-content, а таблица делит
   ширину по нему — с break-word столбец остался бы прежним. */
table.реестр td.имя{overflow-wrap:anywhere;}
table.реестр td.числ{color:var(--mute); white-space:nowrap;}
/* Две колонки, которым разрешено переноситься: они длиннее прочих числовых
   и держали таблицу шире листа. «33 мин · 22 262 токенов» встает в две строки
   по разделителю, дата — по пробелу после запятой. Цифры внутри строки
   по-прежнему не рвутся: перенос идет только там, где уже есть пробел. */
table.реестр td.числ.расход,
table.реестр td.числ.дата{white-space:normal;}
/* Правимое значение: пунктир снизу — знак, что тему можно сменить прямо
   отсюда. Цвет остается текстовым: синяя ссылка спорила бы с именем файла. */
.паспорт dd.правится a{color:var(--ink); text-decoration:none;
  border-bottom:1px dashed var(--line-2);}
.паспорт dd.правится a:hover{color:var(--navy); border-bottom-color:var(--navy);}

/* Правка темы в строке реестра. Раскрывается вниз в потоке ячейки: обертка
   таблицы прокручивается по горизонтали и обрезала бы всплывающую панель. */
.правка summary{display:inline-block; cursor:pointer; list-style:none;
  border-bottom:1px dashed var(--line-2);}
.правка summary::-webkit-details-marker{display:none;}
.правка summary:hover{color:var(--navy); border-bottom-color:var(--navy);}
.правка summary:focus-visible{outline:2px solid var(--navy); outline-offset:2px;}
.правка[open] summary{color:var(--navy); font-weight:600; border-bottom-color:transparent;}
.правка form{display:flex; flex-direction:column; gap:8px; margin-top:9px;
  min-width:210px;}
.правка select,.правка input[type=text]{width:100%; font-size:13.5px;
  padding:7px 9px;}
.правка .кн{align-self:flex-start;}
/* Действие прижато вправо и в одну строку — столбец не сжимается ниже своего
   ряда кнопок. Пробовали разрешить перенос: таблица тут же отдала колонке
   минимум по одной кнопке, и кнопки встали в столбик даже на экране 1512,
   где места вдоволь. Ширину этому столбцу держит nowrap, а не медиазапрос.
   flex с gap вместо пробелов между инлайновыми кнопками: отбивка одинаковая
   и не зависит от переводов строки в шаблоне. */
table.реестр th.действие{text-align:right; white-space:nowrap;}
table.реестр td.действие{display:flex; flex-wrap:nowrap; gap:6px;
  justify-content:flex-end; align-items:center; white-space:nowrap;}

/* ——— пилюли состояний ——— */
.пил{display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
  border-radius:11px; font-size:12.5px; font-weight:600; white-space:nowrap;}
/* Цвет на каждый этап. Группы читаются издалека: холодные — работа идет сама,
   теплые — стоит и ждет человека, зеленый — сделано, красный — сбой. Все восемь
   держат 4.5:1 белым текстом. */
.пил.draft{background:var(--этап-черновик); color:#fff;} /* собирается */
.пил.lying{background:var(--этап-лежит); color:#fff;}   /* не распознана */
.пил.asr{background:var(--этап-аср); color:#fff;}       /* распознается */
.пил.brain{background:var(--этап-разбор); color:#fff;}  /* разбор моделью */
.пил.build{background:var(--этап-сборка); color:#fff;}  /* сборка документа */
.пил.voices{background:var(--этап-голоса); color:#fff;} /* нужны спикеры */
.пил.pick{background:var(--этап-отбор); color:#fff;}    /* отбор тем */
.пил.done{background:var(--этап-готово); color:#fff;}   /* готово */
.пил.report{background:var(--этап-отчет); color:#fff;}  /* только отчет */
.пил.fail{background:var(--этап-сбой); color:#fff;}     /* ошибка */
/* Вес темы — не состояние записи: у него свой тихий вид, иначе «ядро встречи»
   выглядело залитым синим ровно как «готово» и вокабуляр состояний размывался. */
.пил.вес{background:transparent; color:var(--navy); border:1px solid var(--line-2);
  font-weight:600;}
.пил.вес.вскользь{color:var(--mute); border-color:var(--line);}
.пил .бег{width:6px; height:6px; border-radius:50%; background:var(--navy);
  animation:пульс 1.6s ease-in-out infinite;}
@keyframes пульс{0%,100%{opacity:.25;} 50%{opacity:1;}}
@media (prefers-reduced-motion:reduce){.пил .бег{animation:none; opacity:.85;}}

/* ——— кнопки и формы ——— */
.кн{display:inline-block; padding:8px 15px; border-radius:6px; font-size:13.5px;
  font-weight:600; text-decoration:none; border:1px solid transparent; cursor:pointer;
  font-family:inherit; line-height:1.4;}
.кн.глав{background:var(--navy); color:#fff;}
.кн.глав:hover{background:var(--navy-deep);}
.кн.тихо{background:var(--paper); color:var(--navy); border-color:var(--line-2);}
.кн.тихо:hover{background:var(--fill);}
/* Необратимое действие: удалить запись, снять аудио. Не третий цвет — та же
   терракота, что означает «ждет решения человека», только на кнопке. Тихая
   в покое и залитая под курсором: спокойно смотреть, страшно нажимать. */
.кн.опасно{background:var(--paper); color:var(--terra-deep);
  border-color:var(--terra-soft);}
.кн.опасно:hover{background:var(--terra-deep); color:#fff;
  border-color:var(--terra-deep);}
.кн.опасно:focus-visible{outline-color:var(--terra-deep);}
.кн.мал{padding:5px 11px; font-size:12.5px;}
/* Флажок с подписью в строку: label в проекте блочный и весом 600, а здесь
   подпись — обычный текст рядом с квадратиком, а не заголовок поля. */
label.флажок{display:flex; align-items:flex-start; gap:9px; margin:0;
  font-size:13.5px; font-weight:400; cursor:pointer;}
label.флажок input[type=checkbox]{width:auto; margin:4px 0 0; flex:0 0 auto;}
.кн:focus-visible{outline:2px solid var(--navy); outline-offset:2px;}
.карта{background:var(--fill); border:1px solid var(--line); border-radius:8px;
  padding:18px 20px; margin:0 0 22px;}
label,.подпись-поля{display:block; margin:12px 0 5px; font-size:12.5px;
  font-weight:600;}
label:first-child,.подпись-поля:first-child{margin-top:0;}
input[type=text],input[type=password],select{
  width:100%; padding:9px 11px; border:1px solid var(--line-2); border-radius:6px;
  font-size:14.5px; font-family:inherit; color:var(--ink); background:var(--paper);
}
/* Поле по длине содержимого: имя — короткое, название файла и тема — длиннее.
   Растянутое на всю ширину листа поле обещает ввод, которого не будет. */
select,input[type=text]{max-width:58ch;}
/* Список с множественным выбором: строки читаются как перечень, а не как одно
   поле ввода — одна встреча бывает разрезана на несколько файлов. */
select[multiple]{padding:6px; height:auto;}
select[multiple] option{padding:5px 6px; border-radius:6px;}
input[type=text].узкое{max-width:34ch;}
::placeholder{color:var(--mute); opacity:1;}
input:focus-visible,select:focus-visible{outline:2px solid var(--navy); outline-offset:1px;}

/* Родной выбор файла в Chromium подписан по-английски («Choose File») и языком
   интерфейса не управляется. Ввод спрятан, роль кнопки играет label — без
   скриптов он тоже открывает выбор, только имя файла не подписывается. */
.файлвыбор{display:flex; align-items:center; gap:11px; flex-wrap:wrap;}
.файлвыбор input[type=file]{position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
.файлвыбор label{margin:0; cursor:pointer;}
.файлвыбор input[type=file]:focus-visible + label{outline:2px solid var(--navy);
  outline-offset:2px;}
.файлвыбор .имяфайла{font-size:12.5px; color:var(--mute); min-width:0;
  overflow-wrap:anywhere;}
.пояснение{color:var(--mute); font-size:12.5px; margin:9px 0 0; max-width:470px;}
.пояснение b{color:var(--ink);}

/* ——— карточки и сноски ——— */
.плита{border:1px solid var(--line); border-radius:8px; background:var(--paper);
  padding:16px 18px; margin:0 0 16px;}
/* Экран подписания живет одной колонкой по мере цитаты: заголовок, черта и
   карточки голосов одной ширины. Разъехавшись, они оставляли справа пустое
   поле в экран высотой. */
.колонка{max-width:680px;}
.плита.внимание{border-left:3px solid var(--terra); background:var(--fill-2);}
.паспорт{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border:1px solid var(--line); border-radius:8px; overflow:hidden; margin:0 0 20px;
  background:var(--paper);}
.паспорт > div{padding:11px 14px; border-right:1px solid var(--line);}
.паспорт > div:last-child{border-right:0;}
.паспорт dt{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mute); font-weight:600; margin:0 0 3px;}
.паспорт dd{margin:0; font-size:14.5px; font-weight:600;}
.ошибка-текст{color:var(--terra-deep); font-weight:500;}
/* Реплика — не карточка внутри карточки: рамку и радиус заменяет линейка слева,
   ширина строки держится в пределах читаемой меры. По этим репликам опознают
   голос, поэтому мера здесь важнее плотности. */
/* Мера задана в px, а не в ch: Chromium считает ch по глифу «0», у Gilroy он
   широкий, и 76ch давали 78 знаков в строке вместо семидесяти. Замерено. */
.цитата{border-left:1px solid var(--line-2); padding:2px 0 2px 13px; margin:9px 0;
  font-size:13.5px; max-width:515px; color:var(--ink);}
.плита.снято{background:var(--fill);}
.плита.снято > label b{color:var(--mute);}

/* ——— полоса распознавания ——— */
.прогресс{margin:12px 0 0;}
.желоб{height:6px; border-radius:6px; background:var(--line); overflow:hidden;}
/* Ширина проставляется на сервере при рендере, живых обновлений нет —
   переход здесь не сработал бы ни разу, поэтому его нет. */
.желоб i{display:block; height:100%; background:var(--navy); border-radius:6px;}
.прогресс .цифры{display:flex; justify-content:space-between; gap:12px;
  font-size:12.5px; color:var(--mute); margin-top:6px; font-variant-numeric:tabular-nums;}

/* ——— отбор тем: те же строки журнала, что и в реестре ——— */
/* Одна сетка на шапку и на строки — иначе колонки разъезжаются. */
.отбор-шапка,.отбор label{display:grid;
  grid-template-columns:64px minmax(0,1fr) 128px 130px; gap:0 14px;}
.отбор-шапка{background:var(--navy); color:#fff; font-size:12.5px; font-weight:600;
  padding:9px 14px;}
.отбор{list-style:none; margin:0; padding:0;}
.отбор li{border-bottom:1px solid var(--line);}
.отбор li:last-child{border-bottom:0;}
.отбор li.снято{background:var(--fill-2);}
.отбор li:hover{background:var(--fill);}
.отбор label{align-items:baseline; margin:0; padding:12px 14px; font-weight:400;
  cursor:pointer;}
.отбор input[type=checkbox]{width:auto; margin:2px 0 0; align-self:start;
  justify-self:center;}
.отбор .назв{font-size:14.5px; font-weight:600; color:var(--ink); min-width:0;}
.отбор li.снято .назв{color:var(--mute);}
.отбор .суть{display:block; font-size:12.5px; font-weight:400; color:var(--mute);
  margin-top:4px; max-width:470px;}
.отбор .числ{white-space:nowrap;}
.отбор .пил.вес{justify-self:start;}

/* Панель действия: решение принимают по ходу списка, а кнопка лежала под всеми
   темами — на длинной записи это четыре экрана прокрутки вниз и обратно. */
.панель{position:sticky; bottom:0; display:flex; align-items:center; gap:16px;
  flex-wrap:wrap; padding:13px 16px; margin:0 0 0; background:var(--paper);
  border:1px solid var(--line); border-radius:8px;}
.панель .счет-тем{font-size:12.5px; color:var(--mute);}
.панель .счет-тем b{color:var(--navy); font-variant-numeric:tabular-nums;}
.панель .кн{margin-left:auto;}

/* ——— части собираемой записи ——— */
/* Список, а не таблица: строк три-четыре, и колонки здесь были бы шапкой ради
   шапки. Порядок частей — смысловой (по нему идут сквозные тайм-коды),
   поэтому номер печатается, а не подразумевается. */
ol.части{list-style:none; margin:12px 0 0; padding:0;}
ol.части li{display:flex; align-items:baseline; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--line); font-size:13.5px;}
ol.части li:last-child{border-bottom:0;}
ol.части .номер{flex:0 0 auto; color:var(--mute); font-size:12.5px; font-weight:600;}
ol.части .имячасти{font-weight:600; min-width:0; overflow-wrap:anywhere;}
ol.части .мета{color:var(--mute); font-size:12.5px;}
ol.части form{margin-left:auto; flex:0 0 auto;}
/* Тема и отправка отбиты от списка частей чертой: это уже не «что собрано»,
   а «чем это станет». */
.отправка{margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--line);}

/* ——— поиск ——— */
/* Поле и кнопка в одну строку: запрос короткий, и переносить кнопку под него
   значит растягивать простое действие на два этажа. */
.строка-поиска{display:flex; gap:10px; align-items:stretch; flex-wrap:wrap;
  margin-top:5px;}
.строка-поиска input[type=text]{flex:1 1 320px; max-width:520px;}
.искалка label{margin-top:0;}

.плита.находка{padding:14px 18px 16px;}
.шапка-находки{display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; flex-wrap:wrap;}
.шапка-находки .имя-находки{font-weight:600; font-size:14.5px;
  text-decoration:none;}
.шапка-находки .имя-находки:hover{text-decoration:underline;}
.шапка-находки .числ{font-size:12.5px; color:var(--mute);}

/* Фрагмент и строка стенограммы — одна сетка: время, кто, реплика. Так место
   в записи читается столбиком, а не вылавливается из сплошного текста. */
ul.фрагменты{list-style:none; margin:12px 0 0; padding:0;}
ul.фрагменты li,.строка-текста{display:grid;
  grid-template-columns:76px 150px minmax(0,1fr); gap:0 14px; align-items:baseline;
  font-size:13.5px; padding:7px 0; margin:0;}
ul.фрагменты li{border-bottom:1px solid var(--line);}
ul.фрагменты li:last-child{border-bottom:0;}
.время{color:var(--mute); font-size:12.5px;}
.кто{color:var(--navy); font-weight:600; overflow-wrap:anywhere;}
.реплика{overflow-wrap:anywhere;}
/* Найденное слово: лавандовая подложка, а не желтый маркер браузера — третьего
   цвета в системе нет. Текст остается чернильным, читаемость не страдает. */
/* Без горизонтальных полей: «диссертация» внутри «диссертациях» отрывалась
   от своего окончания, и слово читалось разорванным. */
mark{background:var(--fill); color:var(--ink); font-weight:600;}

/* Основа запроса — тот же ярлык, что у термина в словаре: это не найденный
   текст, а то, по чему искали, и путать их подсветкой нельзя. */
.основа{display:inline-block; border:1px solid var(--line-2); border-radius:6px;
  padding:1px 7px; margin-right:5px; font-size:12.5px; color:var(--navy);
  font-weight:600;}

.стенограмма{margin-top:18px; border:1px solid var(--line); border-radius:8px;
  background:var(--paper); padding:8px 18px;}
.строка-текста + .строка-текста{border-top:1px solid var(--line);}
/* Совпавшая строка помечена подложкой во всю ширину: подсветки слова мало,
   чтобы найти место, прокручивая длинный разговор. */
.строка-текста.нашлось{background:var(--fill-2); margin:0 -18px; padding:7px 18px;}

@media (max-width:700px){
  ul.фрагменты li,.строка-текста{grid-template-columns:76px minmax(0,1fr);}
  .кто{grid-column:2;}
  .реплика{grid-column:2;}
}

/* ——— словарь подсказок ——— */
/* Темы в ряд кнопками: их семь, и переключение между ними — основное движение
   на экране. Прятать его в выпадающий список значит добавлять щелчок. */
nav.темы{display:flex; gap:8px; flex-wrap:wrap;}
/* Базовые термины облаком: их полторы сотни, и списком в столбик это четыре
   экрана прокрутки ради справки. Читаются как перечень, не как таблица. */
.облако{display:flex; flex-wrap:wrap; gap:6px;}
.облако .фраза{border:1px solid var(--line); border-radius:6px; padding:3px 9px;
  font-size:12.5px; background:var(--paper); color:var(--mute);}
/* Путь к файлу — тот же Gilroy на лавандовой подложке, без моноширинного.
   Гарнитур в системе две, и заводить третью ради одного упоминания пути
   в пояснительной фразе не за что: код здесь не набирают и не выравнивают
   в столбик, его только называют. */
code{font-size:12.5px; background:var(--fill); padding:1px 5px;
  border-radius:6px; color:var(--ink);}

/* ——— файлы и пустота ——— */
ul.файлы{list-style:none; padding:0; margin:0;}
ul.файлы li{padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
ul.файлы li:last-child{border-bottom:0;}
.пусто{border:1px dashed var(--line-2); border-radius:8px; padding:26px 20px;
  text-align:center; color:var(--mute); background:var(--paper);}

/* ——— вход ——— */
.вход{min-height:100vh; display:flex;}
.вход .поле{flex:0 0 44%; background:var(--rail); color:#fff; padding:34px 34px;
  display:flex; flex-direction:column; justify-content:space-between;}
.вход .поле .марка{font-size:12.5px; line-height:1.6; display:block;}
.вход .поле .марка i{font-style:normal; color:var(--rail-mute);}
.вход .поле h1{color:#fff; font-size:26px; margin:0 0 12px;}
.вход .поле p{margin:0; font-size:13.5px; color:var(--rail-ink); max-width:36ch;}
.вход .поле .низ{font-size:12.5px; color:var(--rail-mute);}
/* Два артефакта сервиса — фактом, а не обещанием. Маркер — та же точка, что
   у разделов рельса: другого списочного знака в системе нет. */
.вход .поле ul.итоги{list-style:none; margin:18px 0 0; padding:0;
  font-size:13.5px; color:var(--rail-ink);}
.вход .поле ul.итоги li{display:flex; align-items:center; gap:10px;
  padding:5px 0;}
.вход .поле ul.итоги li::before{content:''; width:6px; height:6px;
  border-radius:50%; background:var(--rail-mute); flex:0 0 auto;}
/* Форма на бумаге, а не прямо на грунте страницы: без края она висела посреди
   пустого поля и читалась как незаконченная. Створка держит ее по центру
   правой половины. */
.вход .створка{flex:1; display:flex; align-items:center; justify-content:center;
  padding:34px; min-width:0;}
.вход .форма{width:100%; max-width:440px; background:var(--paper);
  border:1px solid var(--line); border-radius:8px; padding:24px 26px 26px;}
.вход .форма .черта{margin:11px 0 18px;}
.вход .форма .подпись{color:var(--mute); font-size:12.5px; margin:14px 0 0;}

/* Выбор человека. Выпадающий список на двоих прятал главное решение экрана
   и молча оставлял первого: записи числились за тем, кого не выбирали.
   Плитки показывают обоих сразу и растут в две-три колонки, когда людей
   станет шестеро. */
fieldset.люди{border:0; margin:0 0 4px; padding:0; min-width:0;}
fieldset.люди legend{padding:0; margin:0 0 7px; font-size:12.5px;
  font-weight:600; color:var(--ink);}
fieldset.люди{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:9px;}
fieldset.люди legend{grid-column:1/-1;}
label.человек{display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:baseline; gap:2px 10px; margin:0; padding:11px 13px;
  border:1px solid var(--line-2); border-radius:6px; background:var(--paper);
  cursor:pointer; font-weight:400;}
label.человек input[type=radio]{width:auto; margin:0; grid-row:1/3;
  align-self:center;}
label.человек .имя{font-size:14.5px; font-weight:600; color:var(--ink);
  overflow-wrap:anywhere;}
label.человек .роль{grid-column:2; font-size:12.5px; color:var(--mute);}
label.человек:hover{background:var(--fill);}
/* :has поддерживают все браузеры проекта; там, где нет, состояние все равно
   видно по самой радиокнопке — она настоящая, а не нарисованная. */
label.человек:has(input:checked){background:var(--fill); border-color:var(--navy);}
label.человек:has(input:checked) .имя{color:var(--navy);}
label.человек:has(input:focus-visible){outline:2px solid var(--navy);
  outline-offset:2px;}
@media (prefers-reduced-motion:no-preference){
  label.человек{transition:background-color .12s ease-out,
    border-color .12s ease-out;}
}

/* ——— узкий экран ——— */
/* Реестр в узком окне: таблица разбирается на блоки по записи. Подписи столбцов
   приходят из data-подпись.
   Перелом 1320px, а не 700px, как было до 17.08.2026. Замер: семь столбцов
   с самым широким рядом действий (раздел «Отчеты» — «Скачать PDF», «Исходник»,
   «Удалить разбор») требуют 1022px, а лист отдает таблице ширину окна минус
   рельс и поля, то есть окно минус 286px. Ниже 1308px таблица не влезала
   и уходила в горизонтальную прокрутку, прятавшую «Действие» за краем — ровно
   та беда, от которой карточки и придуманы. Считать надо по худшей строке:
   при пороге по двухкнопочной строке «Отчеты» обрезались бы молча.
   Меняете столбцы или подписи кнопок — пересчитайте порог замером. */
@media (max-width:1320px){
  .таблоборот{border:0; border-radius:0; background:transparent; overflow-x:visible;}
  table.реестр thead{position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap;}
  table.реестр,table.реестр tbody,table.реестр tr,table.реестр td{display:block;
    width:auto;}
  table.реестр tr,table.реестр tbody tr:nth-child(even){background:var(--paper);}
  table.реестр tr{border:1px solid var(--line); border-radius:8px; padding:13px 15px;
    margin:0 0 10px;}
  table.реестр tbody td{border:0; padding:0; display:flex; gap:12px;
    justify-content:space-between; align-items:baseline;}
  table.реестр tbody td::before{content:attr(data-подпись); flex:0 0 auto;
    color:var(--mute); font-size:10.5px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase;}
  table.реестр tbody td + td{margin-top:8px;}
  table.реестр td.имя{font-size:15px; padding-bottom:10px; margin-bottom:11px;
    border-bottom:1px solid var(--line); display:block;}
  table.реестр td.имя::before{content:none;}
  /* Кнопки в столбик во всю ширину карточки. Не display:block, а колонка того
     же flex: тогда отбивка между кнопками приходит от gap, а не от полей —
     двумя кнопками подряд они иначе слипались. */
  table.реестр td.действие{margin-top:13px; flex-direction:column;
    align-items:stretch; justify-content:flex-start;}
  table.реестр td.действие::before{content:none;}
  table.реестр td.действие .кн{text-align:center;}
  /* В карточке ширины хватает: имя рвать посреди слога незачем, <wbr>
     на разделителях справляется сам. */
  table.реестр td.имя{overflow-wrap:break-word;}
}

@media (max-width:700px){
  /* Отбор тем на телефоне: колонок нет, вес и тайм-код уходят под название. */
  .отбор-шапка{display:none;}
  .отбор label{grid-template-columns:auto minmax(0,1fr); gap:0 12px;}
  .отбор .пил.вес{grid-column:2; justify-self:start; margin-top:8px;}
  .отбор .уточнение{grid-column:2; margin-top:5px;}
  .панель .кн{margin-left:0; flex:1 0 100%; text-align:center;}
}

@media (max-width:860px){
  :root{--рельс-ширина:auto;}
  .каркас{flex-direction:column;}
  .рельс{width:auto; flex:0 0 auto; position:static; height:auto; padding:16px 0 14px;}
  .рельс .лого{padding:0 18px 13px; margin-bottom:11px;}
  .рельс nav{flex-direction:row; flex-wrap:wrap; gap:5px;}
  .рельс nav a{flex:0 0 auto;}
  /* Подвал рельса в одну строку: на телефоне расход и вошедший занимали
     четверть первого экрана и отжимали содержимое вниз. */
  .подвал{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px;
    margin-top:13px; padding:12px 18px 0; border-top:1px solid rgba(255,255,255,.10);}
  .раздел-рельса{display:none;}
  .расход-рельса,.кто{padding:0; margin:0; border-top:0; font-size:12.5px;}
  .расход-рельса b,.расход-рельса span,.кто b,.кто span{display:inline;}
  .расход-рельса b::after,.кто b::after{content:'·'; color:var(--rail-mute);
    font-weight:400; margin:0 6px;}
  .кто a{margin:0 0 0 4px;}
  .лист{padding:20px 18px 48px;}
  .вход{flex-direction:column;}
  .вход .поле{flex:0 0 auto; gap:18px;}
  .вход .створка{padding:22px 18px 34px;}
  .вход .форма{max-width:none;}
}

/* ——— выдача пароля ——— */
/* Единственное место, где пароль виден глазами: в базе лежит отпечаток,
   и прочитать его позже нельзя. Поэтому крупно, моноширинным и с воздухом —
   его переписывают или диктуют, а не проглядывают. */
.пароль-выдача{margin:12px 0 0;}
.пароль-выдача code{font-size:19px; letter-spacing:.02em; padding:8px 14px;
  display:inline-block; background:var(--paper); border:1px solid var(--line-2);}