/* ── Портал андеррайтера — в стилистике Pin.Point ───────────────────────
   Все краски, кегли, отступы, тени и кривые — токены системы (tokens.css).
   Здесь только то, как из них собран портал. Своего числа, которого нет
   в токенах, не заводим; порталу нужны свои — ширина листа и поле. */

@import url("/static/tokens.css");

:root {
  --page-max: 1040px;   /* лист портала: таблицы шире колонки инструмента (900) */
  --gutter: var(--space-6);
  --field-pv: var(--space-3);
  --field-ph: var(--space-5);
  --rule-h: 12px;       /* коробка рисованной линии */
}

/* ── Основание ─────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  min-height: 100svh;
  /* Пятна под вкладками выходят за поле листа — горизонтальной прокрутки от них быть не должно. */
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  font-variation-settings: var(--vf-body);
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* Вес у Roboto Var — ось: font-weight без осей не сработает. */
b, strong { font-weight: normal; font-variation-settings: "wdth" 80, "wght" 560; }

:focus-visible {
  outline: var(--focus-ring-w) solid var(--color-ink);
  outline-offset: var(--focus-ring-offset);
}

a { color: inherit; }

button {
  font: inherit;
  font-variation-settings: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, select, textarea { hyphens: manual; }

input::selection { background: var(--color-select); color: var(--color-select-ink); }

p { margin: 0 0 var(--space-3); }

/* ── Заголовки: плакатный гротеск, строки заходят друг на друга ─────────── */

h1, h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: var(--vf-display);
  letter-spacing: var(--ls-display-twin);
  color: var(--color-ink);
  hyphens: manual;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
/* Заголовок блока — экрану, на который возвращаются постоянно: плакат в 64 там утомляет. */
h1.t-section { font-size: var(--fs-section); line-height: var(--lh-section); }
h2 { font-size: var(--fs-section-sm); line-height: var(--lh-section-sm); }

/* Подзаголовок — рукописным: «это говорим мы», а не данные. Только в одну строку:
   рукописное работает, пока им набрано немногое. Пояснения длиннее — в подсказку (.info). */
.sub {
  margin: var(--space-3) 0 var(--space-6);
  max-width: 64ch;
  font-family: var(--font-script);
  font-weight: 300;
  font-size: var(--fs-script-sub);
  line-height: var(--lh-script-sub);
  letter-spacing: var(--ls-script-sub);
  font-variation-settings: normal;
  color: var(--color-ink);
}

/* Ремарка — серым подписи, тихим корпусом. */
.caption {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text-sm);
  font-variation-settings: var(--vf-meta);
  color: var(--color-grey-note);
}

/* Знак-пояснение: серый в покое, под курсором растёт и чуть толще линия. */
.info {
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-left: var(--space-1);
  vertical-align: -0.1em;
  color: var(--color-grey-note);
  cursor: help;
  transition: color var(--dur-hover) var(--ease-fade), scale var(--dur-grow) var(--ease-grow);
}
h1 .info, h2 .info { vertical-align: 0.15em; }
.info svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; }
.info svg * { vector-effect: non-scaling-stroke; transition: stroke-width var(--dur-grow) var(--ease-grow); }
.info .info-dot { fill: currentColor; stroke: none; }
.info:hover, .info:focus-visible { color: var(--color-ink); scale: var(--scale-icon-hover); }
.info:hover svg *, .info:focus-visible svg * { stroke-width: var(--icon-line-hover); }

.muted { color: var(--color-grey-note); }
.small { font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); }

/* ── Верхняя строка ───────────────────────────────────────────────────── */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--space-6) var(--gutter);
}

/* Знак и имя — строка-ссылка: растёт от левого края. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: var(--vf-display);
  font-size: var(--fs-link);
  line-height: var(--lh-link);
  letter-spacing: calc(var(--ls-link) + var(--ls-display-twin));
  color: var(--color-ink);
  text-decoration: none;
  transform-origin: left center;
  transition: scale var(--dur-grow) var(--ease-grow);
}
.brand svg { width: 16px; height: 24px; fill: currentColor; flex-shrink: 0; }
.brand:hover, .brand:focus-visible { scale: var(--scale-hover); }

.menu { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; }
.who { color: var(--color-grey-note); font-variation-settings: var(--vf-meta); }
form.inline { display: inline; }

/* Текстовая кнопка: серая в покое, под курсором чернеет и растёт от своего края. */
.link {
  display: inline-block;
  color: var(--color-grey-note);
  font-variation-settings: var(--vf-meta);
  text-decoration: none;
  transition:
    color var(--dur-hover) var(--ease-fade),
    scale var(--dur-grow) var(--ease-grow);
}
.link:hover, .link:focus-visible { color: var(--color-ink); scale: var(--scale-hover); }
.menu .link { transform-origin: right center; }
.back { align-self: flex-start; transform-origin: left center; margin-bottom: var(--space-6); }

/* ── Лист ─────────────────────────────────────────────────────────────── */

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-20);
}

/* Раздел — не плашка: ярус один, лист. Разделы отбивает воздух и линия. */
.card { margin: 0 0 var(--space-12); }
.card > h2 { margin-bottom: var(--space-6); }
.card-head { display: flex; align-items: center; gap: var(--space-4) var(--space-6); flex-wrap: wrap; }

/* Одинокий блок — по оптическому центру: свободная высота делится 35 : 65. */
.optical { flex: 1; display: flex; flex-direction: column; }
.optical::before { content: ""; flex: 35; }
.optical::after { content: ""; flex: 65; }
.narrow { width: min(400px, 100%); margin: 0 auto; text-align: center; }
.narrow h1 { margin-bottom: var(--space-8); }
.narrow .sub { margin-inline: auto; }

/* Рисованная линия (картинка из системы: rule-1.png) — прорисовывается слева направо. */
.rule {
  height: var(--rule-h);
  margin: 0 0 var(--space-12);
  background: url("/static/img/rule-1.png") left center / 100% 100% no-repeat;
  animation: pp-rule-draw var(--dur-rule-draw) var(--ease-rule-draw) 0.2s backwards;
}
@keyframes pp-rule-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ── Поле ввода: вдавлено в лист ──────────────────────────────────────── */

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=search], select {
  min-width: 0;
  padding: var(--field-pv) var(--field-ph);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: var(--shadow-composer);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-composer);
  line-height: var(--lh-composer);
  letter-spacing: var(--ls-composer);
  font-variation-settings: var(--vf-composer);
}
input::placeholder { color: var(--color-grey-note); opacity: 1; }
/* Поле вдавлено и само показывает, где оно: рамка фокуса — тонкая серая, а не чернильная. */
input:not([type=checkbox]):focus-visible, select:focus-visible, .search:has(input:focus-visible) {
  outline: 1.5px solid var(--color-grey-off);
  outline-offset: 2px;
}
input[type=search]::-webkit-search-cancel-button { display: none; }

select {
  appearance: none;
  padding-right: calc(var(--field-ph) + var(--space-5));
  background: var(--color-paper) no-repeat right var(--field-ph) center / 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23303030' stroke-width='1.2'/%3E%3C/svg%3E");
  cursor: pointer;
}

.stack { display: flex; flex-direction: column; gap: var(--space-5); text-align: left; }
.stack label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--field-ph);
  color: var(--color-grey-note);
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text-sm);
  font-variation-settings: var(--vf-nav);
}
.stack label input { margin-left: calc(-1 * var(--field-ph)); }
.stack .primary { align-self: center; margin-top: var(--space-4); }

/* Поиск по номеру — поле и чёрная кнопка в нём, как поле ввода со стрелкой. */
.search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 640px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-composer);
}
.search input {
  flex: 1;
  padding: var(--space-2) 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--fs-text-lg);
  font-variant-numeric: tabular-nums;
}
.search input:focus-visible { outline: none; }

input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--color-ink); cursor: pointer; }

/* ── Кнопки ───────────────────────────────────────────────────────────── */

/* Чёрная кнопка — единственный следующий шаг. Растёт бульком (пружина с перелётом). */
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--cta-pt) var(--cta-pr) var(--cta-pb) var(--cta-pl);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-ink-inverse);
  font-family: var(--font-sans);
  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-variation-settings: "wght" 600;
  text-transform: uppercase;
  white-space: nowrap;
  transition: scale var(--dur-cta-scale) var(--spring-bounce), background-color var(--dur-hover) var(--ease-fade);
}
.primary:hover, .primary:focus-visible { scale: var(--scale-hover); }
.primary:disabled { background: var(--color-grey-off); cursor: default; scale: 1; }

/* Кнопка-переход — серая пилюля: не растёт, темнеет подложка. */
.goto, tr.more button {
  display: inline-block;
  padding: var(--goto-pv) var(--goto-ph);
  border-radius: var(--radius-pill);
  background: var(--color-goto);
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  font-variation-settings: var(--vf-light);
  transition: background-color var(--dur-hover) var(--ease-fade);
}
.goto:hover, .goto:focus-visible, tr.more button:hover, tr.more button:focus-visible { background: var(--color-goto-hover); }
tr.more button:disabled { color: var(--color-grey-off); cursor: default; }

/* ── Метки ────────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text-sm);
  font-variation-settings: var(--vf-pill);
  white-space: nowrap;
}
/* Риск — краской «опасное», подложка из неё на 10 %, как у опасной кнопки окна. */
.badge-risk { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, transparent); }
/* Предупреждение о данных — заметкой на полях: жёлтая, чернила свои. */
.badge-warn { color: var(--color-ink); background: var(--color-note-fill); }
.badge-muted { color: var(--color-grey-note); background: var(--color-goto); }
.risk-text { color: var(--color-danger); }

/* Пояснение по наведению: без пунктира — подсказка проявляется, когда к ней подошли. */
.hint { cursor: help; }

/* ── Сообщения ────────────────────────────────────────────────────────── */

.alert { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-5); border-radius: var(--radius-card); }
.alert p, .alert ul { margin: var(--space-1) 0; }
.alert ul { padding-left: var(--space-5); }
.alert-error { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, transparent); }
.alert-info { background: var(--color-goto); }

/* ── Таблица ──────────────────────────────────────────────────────────── */

/* В таблице слова не переносятся по слогам: колонки узкие, «пара-шют-ный» читается хуже строки. */
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; hyphens: manual; }
.journal td:first-child { white-space: nowrap; }
.table th, .table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; text-align: left; vertical-align: top; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table td { border-bottom: 1px solid var(--color-rule-soft); }
.table th {
  padding-top: 0;
  padding-bottom: var(--space-2);
  color: var(--color-grey-note);
  font-weight: normal;
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text-sm);
  font-variation-settings: var(--vf-nav);
}
.table td a {
  display: inline-block;
  font-variation-settings: var(--vf-meta-goal);
  text-decoration: none;
  transform-origin: left center;
  transition: scale var(--dur-grow) var(--ease-grow);
}
.table td a:hover, .table td a:focus-visible { scale: var(--scale-hover); }
.num { text-align: right !important; white-space: nowrap; }

/* Сортировка — серое действие: под курсором чернеет. */
.sort {
  color: inherit;
  font-variation-settings: inherit;
  transition: color var(--dur-hover) var(--ease-fade);
}
.sort:hover, .sort:focus-visible, .sort.active { color: var(--color-ink); }

/* ── Карточка номера ──────────────────────────────────────────────────── */

.card-head h1 { white-space: nowrap; font-variant-numeric: tabular-nums; }
.meta { margin: var(--space-4) 0 0; font-variation-settings: var(--vf-meta); color: var(--color-grey-note); }
.summary { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-4); }
.summary b { margin-right: var(--space-1); font-variation-settings: var(--vf-meta-goal); }

/* Переключатель словами: серые варианты, под выбранным — выпуклость бумаги. */
.switcher, .tabs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.switcher { align-items: baseline; margin: var(--space-6) 0 0; }
/* Подпись переключателя — что выбирают; сама не нажимается и пятна не получает. */
.switcher-label {
  margin-right: var(--space-2);
  color: var(--color-grey-note);
  font-size: var(--fs-text-sm);
  font-variation-settings: var(--vf-nav);
}
.switcher a, .tab {
  position: relative;
  isolation: isolate;
  color: var(--color-grey-note);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-fade);
}
.switcher a { font-variation-settings: var(--vf-meta-goal); }
.switcher a::before, .tab::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--switch-spot-v)) calc(-1 * var(--switch-spot-h));
  z-index: -1;
  background: var(--dent-image) center / 100% 100% no-repeat;
  scale: 1 -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-pop) var(--ease-pop);
}
.switcher a:hover, .switcher a:focus-visible, .tab:hover, .tab:focus-visible,
.switcher a.active, .tab.active { color: var(--color-ink); }
.switcher a.active::before, .tab.active::before { opacity: 1; }
.switcher a.active, .tab.active { cursor: default; }

/* Вкладки — корпусом: плакатный на экране один, у номера. */
.tabs { gap: var(--space-2) var(--space-8); margin: 0 0 var(--space-8); }
.tab {
  padding: var(--space-2) 0;
  font-size: var(--fs-text-md);
  line-height: var(--lh-composer);
  font-variation-settings: var(--vf-meta-goal);
}

/* Аккаунты — нажимаемые блоки. Выбранный вдавлен в лист, прежние — серым подписи. */
.accounts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-12);
}
.account {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  text-decoration: none;
  font-variation-settings: var(--vf-meta);
  transition: scale var(--dur-grow) var(--ease-grow), box-shadow var(--dur-pop) var(--ease-fade);
}
.account:hover, .account:focus-visible { scale: var(--scale-block-hover); }
.account.selected { box-shadow: var(--shadow-composer); cursor: default; scale: 1; }
.account.earlier:not(.selected) { color: var(--color-grey-note); }
.account-title {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  color: var(--color-grey-note);
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text-sm);
  font-variation-settings: var(--vf-nav);
}
.account-name { margin-bottom: var(--space-1); font-size: var(--fs-text-md); line-height: var(--lh-composer); font-variation-settings: var(--vf-meta-goal); }
.account-meta { color: var(--color-grey-note); font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); }
.account-meta .hint { white-space: nowrap; }
.account.earlier:not(.selected) .account-name { color: var(--color-grey-note); }

/* ── Вкладка: фильтры, сравнение, комментарии ─────────────────────────── */

#tab { min-height: 160px; }
#tab .caption:has(+ .table, + .alert) { margin-bottom: var(--space-6); }
.loading { animation: pp-breath 1.6s var(--ease-breath) infinite; }
@keyframes pp-breath { 50% { opacity: 0.4; } }

.filters { display: flex; gap: var(--space-3) var(--space-5); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-8); }
.filters input[type=search], .filters select {
  --field-pv: var(--space-2);
  --field-ph: var(--space-4);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
}
.filters input[type=search] { width: 260px; }
.filters label:not(.check) { display: inline-flex; gap: var(--space-2); align-items: center; color: var(--color-grey-note); font-variation-settings: var(--vf-meta); }
.check { display: inline-flex; gap: var(--space-2); align-items: center; cursor: pointer; font-variation-settings: var(--vf-meta); }
.export { margin-left: auto; }

.compare-head { display: grid; gap: var(--space-1); margin: 0 0 var(--space-2); font-variation-settings: var(--vf-meta); }
.compare tr.section th {
  padding-top: var(--space-8);
  color: var(--color-ink);
  font-size: var(--fs-text-md);
  line-height: var(--lh-text);
  font-variation-settings: var(--vf-meta-goal);
}
.compare .part-new td:first-child { font-variation-settings: var(--vf-meta-goal); }
.compare .part-gone td:first-child { color: var(--color-grey-off); text-decoration: line-through; }
.compare td.chg { background: var(--color-mark-hover); padding-left: var(--space-2); }
.compare td.chg b { font-variation-settings: var(--vf-meta-goal); }

.comments-table .c-date { white-space: nowrap; width: 1%; color: var(--color-grey-note); font-variation-settings: var(--vf-meta); }
.comments-table .c-kind { width: 1%; }
.comments-table .c-kind .badge { margin: 0 var(--space-1) var(--space-1) 0; }
.comment-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-reason { width: 28%; color: var(--color-grey-note); font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); }
/* Цитата, за которую отмечено, — жёлтым маркером под текстом. */
mark { padding: 0 2px; border-radius: 2px; background: var(--color-mark); color: var(--color-ink); }
tr.more td { padding-top: var(--space-6); border-bottom: 0; text-align: center; }

/* ── Подсказка при наведении — плашка над листом (static/ui.js) ───────── */

.pp-tip {
  position: fixed;
  z-index: 60;
  max-width: min(320px, calc(100vw - 2 * var(--space-4)));
  padding: var(--tip-pt) var(--tip-ph) var(--tip-pb);
  border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card);
  background: var(--color-paper);
  box-shadow: var(--shadow-above);
  color: var(--color-ink);
  font-family: var(--font-script);
  font-weight: 300;
  font-size: var(--fs-tip);
  line-height: var(--lh-tip);
  letter-spacing: var(--ls-menu);
  font-variation-settings: normal;
  pointer-events: none;
  animation: pp-tip-in var(--dur-tip) var(--ease-tip) both;
}
.pp-tip--up { border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 0; }
@keyframes pp-tip-in { from { opacity: 0; } }

/* ── Появление: блок садится в поток ──────────────────────────────────── */

@keyframes pp-pop {
  from { opacity: 0; transform: scale(var(--pop-scale)) translateY(var(--reveal-y)); }
  to   { opacity: 1; transform: none; }
}
.page > *, #tab[data-pop] > * { animation: pp-pop var(--dur-pop) var(--ease-pop) backwards; }
.page > :nth-child(2) { animation-delay: 60ms; }
.page > :nth-child(3) { animation-delay: 120ms; }
.page > :nth-child(n + 4) { animation-delay: 180ms; }
.page > .rule { animation: pp-rule-draw var(--dur-rule-draw) var(--ease-rule-draw) 0.2s backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ── Узкое окно ───────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  :root { --gutter: var(--space-4); }
  .topbar { padding-block: var(--space-4); }
  .who { display: none; }
  h1 { font-size: clamp(var(--fs-section-sm), 12vw, var(--fs-display)); line-height: 0.875; }
  .search { padding-left: var(--space-5); }
  .search input { font-size: var(--fs-text-md); }
  .filters input[type=search] { width: 100%; }
  .export { margin-left: 0; }
  .table:not(.journal) th:nth-child(3), .table:not(.journal) td:nth-child(3) { display: none; }
  /* Широкая таблица листается вбок сама, а не раздвигает лист. */
  .table:not(.comments-table) { display: block; overflow-x: auto; }
  .journal { font-size: var(--fs-text-sm); }
  .journal th, .journal td { padding: var(--space-2) var(--space-2) var(--space-2) 0; }
  /* Комментарии на телефоне — карточкой: дата и категория строкой, ниже текст и причина. */
  .table.comments-table thead { display: none; }
  .table.comments-table tr { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-rule-soft); }
  .table.comments-table td { display: inline-block; width: auto; border: 0; padding: 2px var(--space-2) 2px 0; }
  .table.comments-table td.comment-text, .table.comments-table td.comment-reason { display: block; }
}

/* Второй фактор админа: QR-код привязки и резервные коды (login_code_*.html). */
.qr { display: flex; justify-content: center; }
.qr svg { display: block; }
.codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}