/* Минимальное оформление НОВЫХ страниц кабинета (login/login-confirm/cabinet/error) —
   CABINET-MVP-PLAN.md §8: та же палитра/шрифты, что у перенесённого лендинга
   (design-preview/v112-contrast-ii.html), но вёрстка проще - простые формы, без богатого дизайна. */
:root {
  --night: #0b0e12;
  --paper: #fff;
  --ink: #12151a;
  --fg: #f2f4f7;
  --dim-d: #a8b0bc;
  --acc: #e0a33e;
  --rule-d: rgb(255 255 255 / .16);
  --bad: #ff8f83;
  --ui: Commissioner, system-ui, sans-serif;
  --mono: "Roboto Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body.cabinet-page {
  margin: 0;
  min-height: 100svh;
  background: var(--night);
  color: var(--fg);
  font: 16px/1.6 var(--ui);
  font-weight: 300;
  display: flex;
  flex-direction: column;
}

.cab-header {
  padding: 22px 28px;
  border-bottom: 1px solid var(--rule-d);
}

.cab-header a.logo {
  font-weight: 600;
  letter-spacing: -.025em;
  font-size: 20px;
  color: var(--fg);
  text-decoration: none;
}

.cab-header .logo span { color: #58a6ff; }

.cab-header--with-lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Выпадашка на <details>/<summary> - без JS, открывается/закрывается нативно,
   клавиатура и читалки экрана работают из коробки. */
.cab-lang { position: relative; font: 12px var(--mono); }
.cab-lang summary {
  list-style: none;
  cursor: pointer;
  color: var(--dim-d);
  border: 1px solid var(--rule-d);
  border-radius: 8px;
  padding: 6px 10px;
  user-select: none;
}
.cab-lang summary::-webkit-details-marker { display: none; }
.cab-lang summary::after { content: "\25BE"; margin-left: 6px; }
.cab-lang[open] summary { color: var(--fg); border-color: var(--acc); }
.cab-lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--ink);
  border: 1px solid var(--rule-d);
  border-radius: 8px;
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 140px;
  z-index: 10;
}
.cab-lang li a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--fg);
  text-decoration: none;
  font: 14px var(--ui);
}
.cab-lang li a:hover, .cab-lang li a:focus-visible { background: rgb(255 255 255 / .06); color: var(--acc); }

.cab-main {
  flex: 1;
  display: grid;
  /* minmax(...,480px) - тот же "definite max" фиксированный трек - использует ВЕРХНЮЮ границу
     (480) для подсчёта числа треков auto-fit, а не нижнюю (320): на ширине контейнера 969px это
     считает "не влезло" для 2 карточек (2x480+24=984>969) и переносит их одну под другую, хотя
     сжатие до ~472px каждая дало бы им поместиться. minmax(...,1fr) вместо этого использует НИЖНЮЮ
     границу (320) для подсчёта треков, а сама ширина трека уже гибкая (1fr) и просто заполняет
     оставшееся место - канонический паттерн адаптивной сетки карточек.

     min(320px, 100%) вместо голого 320px - нижняя граница трека ФИКСИРОВАННАЯ, поэтому трек не
     может сжаться уже 320px даже когда контейнер уже: на вьюпорте 320px контентная коробка равна
     280px (padding 20px с каждой стороны), трек остаётся 320px и страница едет горизонтально
     (замерено: scrollWidth 340 против clientWidth 320, переполнение 20px; с min(...) - трек 280px,
     переполнение 0). Медиазапросов в файле нет, поэтому это единственная защита узких экранов;
     прежняя flex-раскладка переполнения не давала - flex-элементы сжимаются. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  justify-items: center;
  align-items: start;
  gap: 24px;
  padding: 56px 20px;
}

.cab-card {
  width: 100%;
  max-width: 480px;
  background: rgb(255 255 255 / .05);
  border: 1px solid var(--rule-d);
  border-radius: 16px;
  padding: 32px;
}

.cab-card h1 {
  font: 600 26px/1.2 var(--ui);
  letter-spacing: -.02em;
  margin: 0 0 12px;
}

.cab-card p.lead {
  color: var(--dim-d);
  margin: 0 0 24px;
  max-width: 44ch;
}

.cab-field { display: grid; gap: 8px; margin-bottom: 20px; }

.cab-field label {
  font: 11px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim-d);
}

.cab-field input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--rule-d);
  background: rgb(255 255 255 / .05);
  color: var(--fg);
  font: 16px var(--ui);
}

.cab-btn {
  display: inline-block;
  padding: 13px 26px;
  border: 0;
  border-radius: 9px;
  background: var(--acc);
  color: var(--ink);
  font: 600 15px var(--ui);
  cursor: pointer;
  text-decoration: none;
}

.cab-error {
  color: var(--bad);
  font-size: 14px;
  margin: -8px 0 20px;
}

.cab-note {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--dim-d);
}

.cab-note a { color: var(--acc); }

.cab-kv {
  display: grid;
  gap: 6px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-d);
}

.cab-kv span.k {
  font: 11px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim-d);
}

.cab-kv span.v { font-size: 16px; }

/* Фаза 1 ревью платежей 2026-09-23 (роль architecture): .cab-hint используется в cabinet.html
   (инструкции по переводу PayPal, исход покупки подписки), но правила для него не было -
   текст рендерился неоформленным, унаследовав только стили body. Тот же паттерн, что .cab-note
   (приглушённый мелкий текст-подсказка под основным контентом карточки). */
.cab-hint {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--dim-d);
}

.cab-secret {
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--acc);
  border-radius: 10px;
  background: rgb(224 163 62 / .1);
  word-break: break-all;
  font: 13px var(--mono);
}

.cab-secret .warn {
  display: block;
  margin-bottom: 8px;
  font: 500 12px var(--ui);
  color: var(--acc);
}

.cab-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

.cab-actions form { margin: 0; }

.cab-btn.secondary {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--rule-d);
}

/* ---- индикатор остатка бесплатной квоты ------------------------------- */
/* Тот же приём, что кольцо лендинга (money.js#donut/money.css .dnt) - SVG,
   stroke-dasharray, без JS и без библиотек - но прямая линия, а не кольцо:
   строка cab-kv и так вертикальный список, горизонтальный бар вписывается
   без лишней высоты. Цвета - те же токены палитры кабинета (--acc/--rule-d),
   а не заимствованные из money.css, чтобы не тянуть отдельный файл ради
   одной полосы. */
.qbar { margin-top: 10px; display: grid; gap: 6px; }

.qbar__figure {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--rule-d);
}

.qbar__figure svg { display: block; width: 100%; height: 100%; }

.qbar__fill { stroke: var(--acc); }

.qbar__caption {
  font: 12px var(--mono);
  color: var(--dim-d);
}

/* ---- история операций (пополнения/списания/корректировки, account_ledger_entry) --------- */
/* Переиспользует токены палитры кабинета (--rule-d/--dim-d/--acc/--mono/--ui), тот же приём, что
   .cab-hint выше - никакой новой визуальной системы под один раздел. */
.cab-history {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-d);
}

.cab-history__title {
  font: 600 15px/1.3 var(--ui);
  letter-spacing: -.01em;
  margin: 0 0 12px;
}

.cab-history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.cab-history__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "date   amount"
    "kind   balance";
  column-gap: 12px;
  row-gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-d);
}

.cab-history__row:last-child { border-bottom: 0; padding-bottom: 0; }

.cab-history__date {
  grid-area: date;
  font: 12px var(--mono);
  color: var(--dim-d);
}

.cab-history__kind {
  grid-area: kind;
  font-size: 13.5px;
}

.cab-history__amount {
  grid-area: amount;
  font: 600 14px var(--mono);
  text-align: right;
}

/* Кредиты (пополнения) - акцентный цвет; списания и остальное - приглушённый, тот же --dim-d,
   что подписи ключей .cab-kv span.k выше. */
.cab-history__amount-credit { color: var(--acc); }
.cab-history__amount-debit { color: var(--dim-d); }


.cab-history__balance {
  grid-area: balance;
  font: 12px var(--mono);
  color: var(--dim-d);
  text-align: right;
}

/* ---- юридические страницы (/terms, /privacy, /imprint, /dpa) ----------------------------- */
/* Тот же набор токенов палитры, что выше; отдельной визуальной системы нет. Карточка шире
   обычной (480px) - это документ для чтения, а не форма. */
.cab-card--legal { max-width: 820px; }

/* Длинные немецкие заголовки («Auftragsverarbeitungsvertrag (Gliederung)») на 320-375 шире карточки -
   без переноса h1 давал горизонтальную прокрутку страницы (фаза 2 ревью, живой замер). */
.cab-card--legal h1 { overflow-wrap: break-word; hyphens: auto; }

.cab-legal-banner {
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--acc);
  border-radius: 10px;
  background: rgb(224 163 62 / .12);
}

.cab-legal-banner strong {
  display: block;
  margin-bottom: 4px;
  font: 600 13px var(--mono);
  letter-spacing: .08em;
  color: var(--acc);
}

.cab-legal-banner p { margin: 0; font-size: 14px; }

.cab-legal-lang { margin: 0 0 20px; font-size: 13.5px; color: var(--dim-d); }

.cab-legal-body h2 { font: 600 19px/1.3 var(--ui); margin: 28px 0 10px; }
.cab-legal-body p, .cab-legal-body li { font-size: 15px; }
.cab-legal-body ul, .cab-legal-body ol { padding-left: 22px; }
.cab-legal-body table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
/* Узкий экран: таблица /privacy (cookie - 4 колонки) не ужимается уже своего min-content и давала
   горизонтальную прокрутку ВСЕЙ страницы (фаза 2 ревью: 515px на 320/375). Прокручивается сама
   таблица; перенос по буквам (overflow-wrap:anywhere) проверен и отвергнут - нечитаемо. */
@media (max-width: 720px) {
  .cab-legal-body table { display: block; overflow-x: auto; }
}
.cab-legal-body th, .cab-legal-body td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
  border: 1px solid var(--rule-d);
}
.cab-legal-body code { font: 13px var(--mono); }

/* Плейсхолдер: незаполненное автором поле или открытый вопрос. Должен бросаться в глаза и НЕ
   зависеть от баннера draft - см. LegalPagesController. */
mark.cab-placeholder {
  background: rgb(224 163 62 / .28);
  color: var(--fg);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 500;
}

.cab-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule-d);
  font-size: 14px;
}

.cab-legal-nav a { color: var(--acc); }

/* ---- API reference (/docs/invoicing) ----------------------------------------------------- */
/* Same token palette as everywhere else; no separate visual system. Wider than the legal card -
   this page carries tables and code examples, not prose paragraphs (invoicing-docs-page PLAN.md,
   Frontend п.4). No JS on this page, still (Р5 of that plan, new redaction - see
   invoicing-docs-syntax-highlighting PLAN.md п. 0.3): every rule below styles a <pre id="..."> per
   example, plain <table>s, nothing interactive - the syntax-highlighting colour comes from
   inline style="color:#RRGGBB" spans baked at build time into a generated Thymeleaf fragment
   (see the contract's whitelist, same plan п. 1.2), not from any rule here or from script. */
.cab-card--docs { max-width: 900px; }

.cab-card--docs h1 { overflow-wrap: break-word; hyphens: auto; }

.cab-docs-lang { margin: 0 0 20px; font-size: 13.5px; color: var(--dim-d); }

.cab-docs-body h2 { font: 600 20px/1.3 var(--ui); margin: 36px 0 12px; }
.cab-docs-body h2:first-child { margin-top: 0; }
.cab-docs-body h3 { font: 600 16px/1.3 var(--ui); margin: 22px 0 8px; }
.cab-docs-body p, .cab-docs-body li { font-size: 15px; }
.cab-docs-body ul { padding-left: 22px; }
.cab-docs-body section + section { margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--rule-d); }

.cab-docs-body code { font: 13px var(--mono); }

.cab-docs-body a { color: var(--acc); }
.cab-docs-body a:hover, .cab-docs-body a:focus-visible { text-decoration-thickness: 2px; }

/* Examples are one <pre> each (contract hook for the Tests stage - see the plan's разметочные
   хуки): horizontal scroll on the block itself, never on the page, so a long JSON line or a long
   curl command on a 320-375px viewport does not widen the whole document. The highlighting spans
   inside each <pre> only ever set color - font and scroll are still inherited from here.
   Contrast of every highlight colour against this exact background (--night, cabinet.css:5,
   under .cab-card's rgb(255 255 255 / .05), cabinet.css:115, under this rule's own
   rgb(255 255 255 / .03)) is checked by design-preview/build-docs-code.mjs at generation time,
   not by any Gradle test. If this background (or .cab-card's) ever changes, the constants in
   that script need updating and npm run docs-code needs re-running, or the contrast check drifts
   from what actually renders. */
.cab-docs-body pre {
  margin: 10px 0 16px;
  padding: 12px 14px;
  overflow-x: auto;
  border: 1px solid var(--rule-d);
  border-radius: 8px;
  background: rgb(255 255 255 / .03);
  font: 13px/1.5 var(--mono);
  white-space: pre;
}

.cab-docs-body table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
/* Same narrow-viewport treatment as the legal pages' tables (cabinet.css, .cab-legal-body table
   above): the table scrolls itself instead of widening the page. */
@media (max-width: 720px) {
  .cab-docs-body table { display: block; overflow-x: auto; }
}
.cab-docs-body th, .cab-docs-body td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
  border: 1px solid var(--rule-d);
}
.cab-docs-body th { font-weight: 600; }

.cab-docs-nav {
  display: flex;
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule-d);
  font-size: 14px;
}
.cab-docs-nav a { color: var(--acc); }