/* Токены повторяют дизайн-систему «Стенд экспериментов», чтобы разделы Brandside выглядели одинаково. */
:root {
  --surface: #f6f7f6; --surface-raised: #ffffff; --surface-sunken: #eceeed;
  --line: #d8ddda; --line-strong: #848f89;
  --ink: #121815; --ink-muted: #556059;
  --emerald: #047857; --emerald-soft: #d5f3e6; --on-emerald: #ffffff;
  --calibration: #9a4a06; --calibration-soft: #fbecd6;
  --control: #1d4ed8; --control-soft: #dde7fb;
  --danger: #b42318; --danger-soft: #fbe2df; --on-danger: #ffffff;
  --added: #5b21b6; --added-soft: #ece4fb;
  --focus: var(--emerald);
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0e1311; --surface-raised: #151b18; --surface-sunken: #0a0e0c;
    --line: #26302b; --line-strong: #5d6b64;
    --ink: #e6ece8; --ink-muted: #97a49c;
    --emerald: #3fcf98; --emerald-soft: #0b2a1f; --on-emerald: #06130d;
    --calibration: #f2b25c; --calibration-soft: #33230e;
    --control: #8db1ff; --control-soft: #16233f;
    --danger: #ff8a7a; --danger-soft: #3a1714; --on-danger: #1b0a07;
    --added: #c4a8ff; --added-soft: #241a3b;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 14px/20px var(--font-sans); }
a { color: var(--emerald); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
code, .mono { font: 400 12px/18px var(--font-mono); }
.muted { color: var(--ink-muted); }
.small { font-size: 12px; line-height: 16px; }

.top { display: flex; align-items: stretch; gap: var(--space-8); padding: 0 var(--space-8);
       background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: var(--space-2); align-self: center; padding: var(--space-3) 0;
         font: 600 15px/22px var(--font-sans); color: var(--ink); }
/* Логотип: камертон цветом текста, звуковые волны изумрудным; цвета берутся из токенов, поэтому знак следует тёмной теме. */
.brand-mark { width: 26px; height: 26px; flex: none; }
.brand-waves { fill: none; stroke: var(--emerald); stroke-width: 1.75; stroke-linecap: round; }
.brand-fork { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.brand-knob { fill: var(--ink); }
.brand-ai { margin-left: calc(-1 * var(--space-1)); padding: 0 5px; border-radius: var(--radius-sm);
            background: var(--emerald); color: var(--on-emerald); font: 500 11px/18px var(--font-mono); }
.brand:hover { text-decoration: none; }
.sections { display: flex; gap: var(--space-6); flex: 1; }
.sections a, .sections .section-off { display: flex; align-items: center; margin-bottom: -1px; padding-top: 2px; border-bottom: 2px solid transparent;
                                    font: 600 14px/20px var(--font-sans); color: var(--ink-muted); }
.sections a:hover { color: var(--ink); text-decoration: none; }
.sections a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--emerald); }
/* Раздел, который готовится: пункт шапки виден, но не нажимается. */
.sections .section-off { opacity: .5; cursor: not-allowed; }
.who { display: flex; align-items: center; align-self: stretch; gap: var(--space-4); }
/* Имя пользователя открывает страницу «Настройки»; на ней имя подчёркнуто, как выбранный раздел шапки. */
.who-link { display: flex; align-items: center; gap: var(--space-2); align-self: stretch; margin-bottom: -1px; padding-top: 2px;
            border-bottom: 2px solid transparent; font: 600 14px/20px var(--font-sans); color: var(--ink); }
.who-link:hover { text-decoration: none; }
.who-link[aria-current="page"] { border-bottom-color: var(--emerald); }
.who-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none;
              border-radius: 50%; background: var(--surface-sunken); color: var(--ink-muted); }
.who-link:hover .who-avatar, .who-link[aria-current="page"] .who-avatar { background: var(--emerald-soft); color: var(--emerald); }
.who-avatar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* Вкладки страницы (Tabs дизайн-системы), как в Стенде экспериментов. */
.tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--line); margin: var(--space-4) 0; }
.tabs button { background: none; border: 0; padding: var(--space-2) 0; margin-bottom: -1px; font: 600 14px/20px var(--font-sans);
               color: var(--ink-muted); cursor: pointer; border-bottom: 2px solid transparent; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--emerald); }
.plain-list { margin: 0; padding-left: var(--space-4); }

.page { min-width: 0; max-width: 1440px; margin: 0 auto; padding: var(--space-6) var(--space-8) var(--space-8); }
.display { font: 600 28px/34px var(--font-sans); margin: 0 0 var(--space-1); }
.title { font: 600 20px/28px var(--font-sans); margin: 0 0 var(--space-1); }
.heading { font: 600 15px/22px var(--font-sans); margin: 0; }
.label { font: 600 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.lead { max-width: 860px; margin: 0 0 var(--space-4); color: var(--ink-muted); }
.card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); }

.btn { font: 600 13px/20px var(--font-sans); padding: var(--space-1) var(--space-3); border: 1px solid var(--line-strong);
       border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--surface-sunken); }
.btn.primary { background: var(--emerald); border-color: var(--emerald); color: var(--on-emerald); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.approve { color: var(--emerald); border-color: var(--emerald); }
.btn.approve.on { background: var(--emerald); color: var(--on-emerald); }
.btn.reject { color: var(--danger); border-color: var(--danger); }
.btn.reject.on { background: var(--danger); color: var(--on-danger); }
.btn.ghost { border-color: transparent; color: var(--ink-muted); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--surface-raised); }
.btn:disabled { opacity: .6; cursor: progress; }

/* Dialog дизайн-системы (как на Стенде экспериментов): фон страницы затемнён, окно по центру, кнопка действия справа;
   отказ — кнопка danger, одобрение — primary. */
.modal { width: min(480px, calc(100% - 32px)); padding: var(--space-6); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--surface-raised); color: var(--ink); box-shadow: 0 16px 48px rgb(0 0 0 / .24); }
.modal::backdrop { background: rgb(10 14 12 / .45); }
.modal-title { font: 600 18px/26px var(--font-sans); margin: 0; }
.modal-text { margin: var(--space-2) 0 0; color: var(--ink); overflow-wrap: anywhere; }
.modal-field { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-4); }
.modal-field textarea { font: 400 14px/20px var(--font-sans); padding: 5px var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--ink); resize: vertical; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }
input[type="text"], input[type="password"], input[type="date"], select {
  font: 400 14px/20px var(--font-sans); padding: 5px var(--space-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); min-width: 0; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }

.login { max-width: 360px; margin: 10vh auto 0; }
.login form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.error { color: var(--danger); background: var(--danger-soft); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }

.search-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.search-row input[type="text"] { flex: 1 1 360px; }
.filters { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-items: end; margin-bottom: var(--space-3); }
.checkline { display: flex; gap: var(--space-2); align-items: center; font-size: 13px; }
.ms { position: relative; }
.ms > summary { list-style: none; cursor: pointer; padding: 5px var(--space-2); border: 1px solid var(--line-strong);
                border-radius: var(--radius-md); background: var(--surface-raised); display: flex; justify-content: space-between; gap: var(--space-2); }
.ms > summary::-webkit-details-marker { display: none; }
.ms > summary::after { content: "▾"; color: var(--ink-muted); }
.ms[open] > summary { border-color: var(--emerald); }
.ms-body { position: absolute; z-index: 5; top: calc(100% + 2px); left: 0; min-width: 100%; width: max-content; max-width: 360px; max-height: 320px; overflow: auto;
           background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: var(--space-2); }
.ms-body label { display: flex; gap: var(--space-2); align-items: baseline; padding: 2px 0; cursor: pointer; }
.ms-body .cnt { margin-left: auto; padding-left: var(--space-3); color: var(--ink-muted); font: 400 12px/16px var(--font-mono); }
.ms-body input[type="text"] { width: 100%; margin-bottom: var(--space-2); }
.summary { margin: var(--space-3) 0; color: var(--ink-muted); }

.table-wrap { overflow-x: auto; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font: 600 11px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted);
     background: var(--surface-sunken); padding: var(--space-2) var(--space-3); position: relative; }
.col-resize { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; }
.col-resize::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 3px; width: 2px; border-radius: 1px; background: var(--line-strong); opacity: 0; }
th:hover .col-resize::after, .resizing .col-resize::after { opacity: 1; }
.col-resize:hover::after, .col-resize:active::after { background: var(--emerald); }
/* Ширину задал посетитель: столбцы держат свою долю ширины таблицы, текст переносится, а не растягивает таблицу. */
table.resized { table-layout: fixed; }
table.resized td { overflow: hidden; overflow-wrap: anywhere; }
table.resized td.body, table.resized td.tags { min-width: 0; }
.resizing { cursor: col-resize; user-select: none; }
th .sort { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
th .sort.active { color: var(--ink); }
td { padding: var(--space-3); border-top: 1px solid var(--line); vertical-align: top; }
tbody tr:hover { background: var(--surface-sunken); }
td.id { width: 130px; }
td.doc { width: 220px; }
td.body { min-width: 280px; }
td.tags { min-width: 180px; }
td.acts { width: 170px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; white-space: pre-line; }
.badge { display: inline-block; white-space: nowrap; padding: 0 var(--space-1); border-radius: var(--radius-sm); font: 600 11px/16px var(--font-sans); letter-spacing: .04em; margin: 0 var(--space-1) var(--space-1) 0; }
.auth-norm { color: var(--danger); background: var(--danger-soft); }
.auth-official_practice { color: var(--control); background: var(--control-soft); }
.auth-company_guide { color: var(--added); background: var(--added-soft); }
.auth-article { color: var(--ink-muted); background: var(--surface-sunken); }
.st-approved { color: var(--emerald); background: var(--emerald-soft); }
.st-rejected { color: var(--danger); background: var(--danger-soft); }
.st-unreviewed { color: var(--ink-muted); background: var(--surface-sunken); border: 1px dashed var(--line-strong); }
.st-stale { color: var(--calibration); background: var(--calibration-soft); }
.tag { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 0 var(--space-2); margin: 0 var(--space-1) var(--space-1) 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
       background: var(--surface-raised); color: var(--ink); font: 400 12px/18px var(--font-mono); cursor: pointer;
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.tag.rev { color: var(--calibration); border-color: var(--calibration); background: var(--calibration-soft); }
.acts .stack { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; }
.pager { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin-top: var(--space-3); }
.pages { display: flex; gap: 2px; align-items: center; }
.page-btn { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 var(--space-2); box-sizing: border-box;
        border: 1px solid transparent; border-radius: var(--radius-md); background: none;
        font: 400 13px/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; }
button.page-btn:hover { background: var(--surface-sunken); }
button.page-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.page-btn[aria-current="page"] { background: var(--emerald); border-color: var(--emerald); color: var(--on-emerald); font-weight: 500; cursor: default; }
.page-btn.step { font: 400 18px/20px var(--font-sans); border-color: var(--line-strong); background: var(--surface-raised); }
span.page-btn.step { border-color: var(--line); color: var(--ink-muted); cursor: default; }
.page-btn.gap { min-width: 20px; padding: 0; color: var(--ink-muted); cursor: default; }
.page-range { font: 400 13px/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.page-size { margin-left: auto; display: inline-flex; gap: var(--space-2); align-items: center; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.empty { padding: var(--space-6); text-align: center; color: var(--ink-muted); }

/* Раздел «Токены доступа»: форма выпуска в строку, новый токен моноширинным шрифтом с переносом в любом месте. */
.token-new, .token-issued { max-width: 860px; margin-bottom: var(--space-4); }
.token-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin-top: var(--space-3); }
.token-form .field { flex: 1 1 200px; }
.token-form .token-purpose { flex-grow: 2; }
.token-new .error { margin-top: var(--space-3); }
.token-issued { border-color: var(--emerald); }
.token-value { display: block; margin-top: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-sunken);
               border-radius: var(--radius-md); overflow-wrap: anywhere; user-select: all; }

/* Раздел «Документы»: список и страница чтения. Ширина текста ограничена для чтения, место записи выделено слева. */
td.doc-title { min-width: 200px; }
td.num { font-variant-numeric: tabular-nums; }
/* Плашка числа записей по образцу DatasetChip дизайн-системы. */
.chips { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.chip { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; white-space: nowrap; }
.chip-v { flex: none; padding: 0 var(--space-2); background: var(--surface-sunken); border-right: 1px solid var(--line);
          font: 500 12px/18px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.chip-t { padding: 0 var(--space-2); font: 400 12px/18px var(--font-sans); color: var(--ink-muted); }
td.nowrap { white-space: nowrap; }
.back { display: inline-block; margin-bottom: var(--space-3); font-weight: 600; }
.doc-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; margin: var(--space-2) 0 var(--space-4); }
.doc-meta .badge { margin: 0; }
.doc-decision { max-width: 860px; margin-bottom: var(--space-4); }
.doc-decision .decision { margin-top: 0; }
.doc-decision .decision .badge { margin: 0; }
.doc-history > summary { cursor: pointer; color: var(--ink-muted); }
.doc-text { max-width: 860px; padding: var(--space-6) var(--space-8); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
            font: 400 15px/24px var(--font-sans); overflow-wrap: anywhere; }
.doc-text > * { margin: 0 0 var(--space-3); scroll-margin-top: var(--space-4); }
.doc-text > :last-child { margin-bottom: 0; }
.doc-text h2 { font: 600 20px/28px var(--font-sans); margin-top: var(--space-6); }
.doc-text h3 { font: 600 17px/24px var(--font-sans); margin-top: var(--space-6); }
.doc-text h4, .doc-text h5, .doc-text h6 { font: 600 15px/22px var(--font-sans); margin-top: var(--space-4); }
.doc-text > :first-child { margin-top: 0; }
.doc-text p { white-space: pre-line; }
.doc-text ul, .doc-text ol { padding-left: var(--space-6); }
.doc-text pre { white-space: pre-wrap; padding: var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-md); font: 400 13px/20px var(--font-mono); }
.doc-text code { padding: 0 2px; background: var(--surface-sunken); border-radius: var(--radius-sm); }
.md-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
/* Заголовок таблицы внутри документа — текст документа: без прописных букв служебных таблиц консоли. */
.md-table th { white-space: normal; text-transform: none; letter-spacing: normal; font: 600 13px/20px var(--font-sans); color: var(--ink); }
.md-table td { padding: var(--space-2) var(--space-3); }
.doc-text .hit { margin-left: calc(-1 * var(--space-4)); padding-left: calc(var(--space-4) - 3px); border-left: 3px solid var(--emerald); background: var(--emerald-soft); }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100vw); background: var(--surface-raised);
          border-left: 1px solid var(--line-strong); display: flex; flex-direction: column; z-index: 10; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.drawer-actions { display: flex; gap: var(--space-2); align-items: center; }
/* Стрелка записи — квадрат 32px, как стрелка полосы страниц: рамка line-strong; на краю недоступна (рамка line, знак ink-muted). */
.nav-btn { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised);
           color: var(--ink); font: 400 14px/20px var(--font-mono); cursor: pointer; }
.nav-btn:hover:not(:disabled) { background: var(--surface-sunken); }
.nav-btn:disabled { border-color: var(--line); color: var(--ink-muted); cursor: default; }
.drawer-body { padding: var(--space-4); overflow: auto; }
.drawer-body pre { white-space: pre-wrap; font: 400 13px/20px var(--font-sans); margin: var(--space-3) 0; padding: var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-md); }
.drawer-body dl { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3); }
.drawer-body dt { color: var(--ink-muted); }
.drawer-body dd { margin: 0; word-break: break-word; }
.decision { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin: var(--space-3) 0; }
.decision input[type="text"] { flex: 1 1 220px; }
.history { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.history li { padding: var(--space-2) 0; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .top, .page { padding-left: var(--space-3); padding-right: var(--space-3); } .doc-text { padding: var(--space-4); } .top { gap: var(--space-3); flex-wrap: wrap; } }