/* Кабинет hookline (FR-1402, D-99, D-100). Только этот файл: CSP без
   'unsafe-inline' (D-95 п. 10) — стилей в разметке нет.

   Цвета — только в трёх блоках темы ниже; правила ссылаются на них через
   var(--…). Тёмный блок повторён дважды: по системной настройке и по
   data-theme="dark" (light-dark() без поддержки браузера лишил бы
   страницу всех цветов). Равенство блоков и контраст проверяют тесты. */

:root {
  color-scheme: light;
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #F0F2F5;
  --border: #D9DEE5;
  --border-strong: #7D8796;
  --text: #1A1F27;
  --muted: #566070;
  --accent: #1F5FD6;
  --accent-text: #FFFFFF;
  --accent-soft: #E6EEFB;
  --ok: #17703A;
  --ok-soft: #E3F3E8;
  --bad: #B42318;
  --bad-soft: #FDECEA;
  --bad-text: #FFFFFF;
  --warn: #8A5200;
  --warn-soft: #FFF1D6;
  --info: #1F5FD6;
  --info-soft: #E6EEFB;
  --neutral: #4B5563;
  --neutral-soft: #ECEFF3;
  --code-bg: #F3F5F8;
  --prod: #C0262D;
  --prod-soft: #FDECEA;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E1116;
    --surface: #161B22;
    --surface-2: #1C222B;
    --border: #2D3540;
    --border-strong: #6B7686;
    --text: #E6EAF0;
    --muted: #9AA4B2;
    --accent: #6EA8FE;
    --accent-text: #0E1116;
    --accent-soft: #1A2B45;
    --ok: #6FD08C;
    --ok-soft: #16301F;
    --bad: #FF8A80;
    --bad-soft: #3A1D1D;
    --bad-text: #0E1116;
    --warn: #F2B65A;
    --warn-soft: #3A2C12;
    --info: #6EA8FE;
    --info-soft: #1A2B45;
    --neutral: #B4BCC8;
    --neutral-soft: #262C35;
    --code-bg: #11161D;
    --prod: #FF6B6B;
    --prod-soft: #3A1D1D;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1116;
  --surface: #161B22;
  --surface-2: #1C222B;
  --border: #2D3540;
  --border-strong: #6B7686;
  --text: #E6EAF0;
  --muted: #9AA4B2;
  --accent: #6EA8FE;
  --accent-text: #0E1116;
  --accent-soft: #1A2B45;
  --ok: #6FD08C;
  --ok-soft: #16301F;
  --bad: #FF8A80;
  --bad-soft: #3A1D1D;
  --bad-text: #0E1116;
  --warn: #F2B65A;
  --warn-soft: #3A2C12;
  --info: #6EA8FE;
  --info-soft: #1A2B45;
  --neutral: #B4BCC8;
  --neutral-soft: #262C35;
  --code-bg: #11161D;
  --prod: #FF6B6B;
  --prod-soft: #3A1D1D;
}

/* База. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 1440px; margin: 0 auto; padding: 24px; }
h1 { margin: 0; font-size: 22px; font-weight: 650; line-height: 1.3; }
p, form, dl { margin: 0; }
a { color: var(--accent); }
a:hover { color: var(--text); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; padding: 1px 4px; border-radius: 4px; background: var(--code-bg); }
a:focus-visible, button:focus-visible, .input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Шапка. */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 8px 24px; background: var(--surface); border-bottom: 1px solid var(--border); border-top: 4px solid var(--border-strong); }
.top.env-prod { border-top-color: var(--prod); }
.brand { font-weight: 700; letter-spacing: .02em; }
.navlinks { display: flex; flex-wrap: wrap; gap: 4px; }
.navlinks a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 6px; text-decoration: none; color: var(--muted); }
.navlinks a:hover { background: var(--surface-2); color: var(--text); }
.navlinks a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.env-prod .envs a[aria-current="page"] { background: var(--prod-soft); color: var(--prod); }
.sections { padding-left: 12px; border-left: 1px solid var(--border); }
.who { margin-left: auto; color: var(--muted); }
.who-login { color: var(--text); font-weight: 600; }
.theme, .logout { display: flex; }

/* Кнопки. */
.btn { font: inherit; min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--surface-2); color: var(--text); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: var(--bad-text); }
.btn.primary:hover, .btn.danger:hover { opacity: .9; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }

/* Сегмент: группа кнопок в общей рамке, нажатая — aria-pressed. */
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.seg button { font: inherit; min-height: 34px; padding: 0 12px; border: 0; background: var(--surface); color: var(--text); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border-strong); }
.seg button:hover { background: var(--surface-2); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.seg button:focus-visible { outline-offset: -2px; }

/* Поля: подпись над полем. */
.field { display: grid; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; }
.input { font: inherit; font-size: 14px; font-weight: 400; min-height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); width: 100%; }

/* Карточка, метки, уведомления. */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-ok { background: var(--ok-soft); color: var(--ok); }
.b-info { background: var(--info-soft); color: var(--info); }
.b-bad { background: var(--bad-soft); color: var(--bad); }
.b-warn { background: var(--warn-soft); color: var(--warn); }
.b-neutral { background: var(--neutral-soft); color: var(--neutral); }
.notice { padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.n-ok { background: var(--ok-soft); color: var(--text); }
.n-bad { background: var(--bad-soft); color: var(--text); }
.n-warn { background: var(--warn-soft); color: var(--text); }
.n-info { background: var(--info-soft); color: var(--text); }
.error code { overflow-wrap: anywhere; }

/* Таблица: шире экрана — прокрутка в своём блоке, а не страницы. */
.scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.tbl td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .mono { white-space: nowrap; }
.tbl tbody tr:hover td { background: var(--surface-2); }
/* Заголовок числовой колонки — по правому краю, как её числа: .tbl th
   перебивает .num по специфичности (T-054). */
.tbl th.num { text-align: right; }

/* Пары «имя — значение». */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.small { font-size: 12px; }
.num { text-align: right; }
.tag { display: inline-block; padding: 0 6px; border-radius: 4px; border: 1px solid var(--border); font-size: 11px; color: var(--muted); white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sect { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* Страницы. */
.login, .form-page, .users, .error-page, .journal, .detail-page { display: grid; gap: 16px; }
.login { max-width: 360px; margin: 64px auto; }
.form-page, .error-page { max-width: 560px; }
.login .card, .form-page .card { display: grid; gap: 16px; padding: 20px; }
.login form, .form-page form { display: grid; gap: 16px; }
.login .btn, .form-page .btn { justify-self: start; }
/* Даты и логины списка — без переноса по дефису; состояния и действия
   переносятся. */
.users .tbl td { white-space: nowrap; }
.users .tbl td:nth-last-child(-n+2) { white-space: normal; }
.inline { display: inline-flex; gap: 6px; margin: 0 6px 6px 0; vertical-align: top; }
.inline .input { width: auto; }
.password { font-size: 16px; font-weight: 600; }

/* Журнал и события (T-052): форма-сетка фильтров, таблица и панель
   карточки рядом; на узком экране панель — под таблицей. */
/* Колонка — minmax(0, 1fr): у элемента сетки min-width: auto, и таблица
   шире экрана растягивала страницу (горизонтальная прокрутка на 390 px,
   снимки T-052). */
.journal, .detail-page { grid-template-columns: minmax(0, 1fr); }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
/* Кнопка в заголовке (T-056) — справа, рядом с пометкой. */
.page-head .btn { margin-left: auto; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: start; padding: 16px; }
.filters .input { min-width: 0; }
.filter-actions { display: flex; flex-wrap: wrap; gap: 8px; align-self: end; }
.field-err { color: var(--bad); font-size: 12px; font-weight: 400; }
.hint { color: var(--muted); font-size: 12px; font-weight: 400; }
.check { align-self: end; min-height: 36px; align-content: center; }
.check .input { width: auto; min-height: 0; margin: 0 6px 0 0; vertical-align: middle; }
.split { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.list { flex: 999 1 640px; min-width: 0; overflow: hidden; }
.panel { flex: 1 1 400px; min-width: 0; }
.detail { display: flex; flex-direction: column; gap: 16px; padding: 16px; min-width: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card-head h2 { margin: 0; font-size: 15px; font-weight: 650; }
.empty { padding: 24px 16px; }
.more { padding: 12px 16px; }
.more:empty { display: none; }
.rowbtn { color: var(--accent); text-decoration: none; }
.rowbtn:hover { text-decoration: underline; }
.mark { display: none; }
.tbl tr:has(.mark.on) td { background: var(--accent-soft); }

/* Payload и тело ответа (T-053): блок кода с прокруткой в себе; тело
   ответа переносится — строка HTML-страницы ошибки бывает очень длинной. */
.view { display: grid; gap: 8px; min-width: 0; }
.code { margin: 0; padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; background: var(--code-bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; white-space: pre; overflow: auto; max-height: 60vh; }
.code.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.violations { margin: 0; padding-left: 20px; }
.sect .mono { text-transform: none; letter-spacing: 0; }

/* Endpoint'ы и подписки (T-054): ряд кнопок действий и сроков паузы,
   статистика по часам — под <details>. */
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hours summary { cursor: pointer; color: var(--accent); }
.hours[open] summary { margin-bottom: 8px; }

/* Формы (T-056, D-105 п. 3): сегмент из радио — label со скрытым input,
   который остаётся в порядке табуляции; fieldset — как поле; группы
   членов auth видны по выбранному радио (:has), без JS. */
.seg label { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; background: var(--surface); color: var(--text); font-weight: 400; cursor: pointer; }
.seg label + label { border-left: 1px solid var(--border-strong); }
.seg label:hover { background: var(--surface-2); }
.seg label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg label:has(input:checked) { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.seg label:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
fieldset.field { margin: 0; padding: 0; border: 0; }
fieldset.field legend { padding: 0; margin-bottom: 6px; }
fieldset.field .seg { justify-self: start; }
.auth-group { display: none; }
form:has(#auth-header:checked) .auth-header, form:has(#auth-basic:checked) .auth-basic { display: grid; gap: 16px; }
.input.bad { border-color: var(--bad); }
.errors, .form-page .card > ul { margin: 0; padding-left: 20px; }
.errors { margin-top: 6px; }

/* Формы подписки (T-060, D-106): семейства — textarea; группы получателя
   видны по выбранному радио (:has), без JS; ошибки элементов, перечень
   лимита и справочник семейств — под полем. */
textarea.input { padding: 8px 10px; line-height: 1.5; resize: vertical; }
.rcp-group { display: none; }
form:has(#recipient-endpoint:checked) .rcp-endpoint, form:has(#recipient-consumer:checked) .rcp-consumer { display: grid; gap: 16px; }
fieldset.pull { gap: 16px; }
.field .errors { color: var(--bad); font-size: 12px; font-weight: 400; }
.limit { display: grid; gap: 8px; font-weight: 400; }
.limit p { margin: 0; }
.limit summary, .catalog summary { cursor: pointer; color: var(--accent); font-weight: 400; }
.catalog[open] summary { margin-bottom: 8px; }

/* Форма ключа (T-061, D-107 п. 1): права — флажки столбцом; группы полей
   права видны по отмеченному флажку (:has), без JS. */
.perms { display: grid; gap: 8px; }
.perms label { font-weight: 400; cursor: pointer; }
.perms .input { width: auto; min-height: 0; margin: 0 6px 0 0; vertical-align: middle; }
.perm-group { display: none; }
form:has(#perm-publish:checked) .perm-publish, form:has(#perm-consume:checked) .perm-consume { display: grid; gap: 16px; }

/* Профили (T-057, D-108): группы полей расписания видны по выбранному
   радио (:has), без JS; превью пауз — метками. */
.sched-group { display: none; }
form:has(#sched-exponential:checked) .sched-exponential, form:has(#sched-explicit:checked) .sched-explicit { display: grid; gap: 16px; }
.steps { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.step { font-size: 12px; padding: 1px 7px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); }

/* Ширина телефона. */
@media (max-width: 600px) {
  main { padding: 16px; }
  .top { padding: 8px 16px; }
  .sections { padding-left: 0; border-left: 0; }
  .login { margin: 24px auto; }
}