/* ==========================================================================
   SERPAVI Proof — визуальная система

   Продукт для агентств недвижимости: люди работают с полусотней объектов
   каждый день. Значит — плотные таблицы, спокойный фон, ясная иерархия.
   Не «стартап», а инструмент, рядом с которым лежат договоры.

   ШРИФТЫ СВОИ, БЕЗ GOOGLE FONTS. Подключение шрифтов Google отправляет IP
   посетителя в США; немецкие суды признавали это нарушением GDPR. Для
   продукта, который продаётся как compliance-инструмент, это неприемлемо.
   Файлы лежат в static/fonts и подключаются из static/fonts.css.

   Палитра и шрифты — общие с витриной: слоновая кость и бордо, Archivo на
   заголовки, Spectral на текст. Раньше приложение было сине-белым, и переход
   с витрины на вход выглядел как переход на чужой сайт.
   ========================================================================== */

:root {
  /* --- цвет ------------------------------------------------------------- */
  --ink:            #1A1512;   /* основной текст */
  --ink-soft:       #4E453C;   /* вторичный текст */
  --ink-faint:      #8A8071;   /* подписи, метаданные */

  --surface:        #FCFAF5;
  --surface-sunken: #F4F0E6;   /* фон страницы */
  --surface-raised: #FFFDF8;   /* выделенные блоки */

  --line:           #DCD3C1;
  --line-strong:    #C3B7A0;

  --accent:         #7C1421;   /* глубокий синий: доверие, официальность */
  --accent-hover:   #4A0D16;
  --accent-soft:    #F3E7E4;

  /* Семантика вердиктов. Не только цветом: у каждого есть текст и иконка,
     иначе дальтоник читает таблицу наугад. */
  --ok:             #2F5D3A;
  --ok-soft:        #E8EFE7;
  --warn:           #8A5A10;
  --warn-soft:      #F7EDDC;
  --danger:         #9B1C2A;
  --danger-soft:    #F6E6E5;
  --neutral:        #6B6255;
  --neutral-soft:   #EDE7DA;

  /* --- ритм -------------------------------------------------------------- */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;

  /* Esquinas casi rectas: el mundo del producto es documental, no de app. */
  --radius:    2px;
  --radius-lg: 3px;

  --shadow-sm: 0 1px 2px rgba(74, 13, 22, .07);
  --shadow:    0 2px 8px rgba(74, 13, 22, .09);
  --shadow-lg: 0 8px 28px rgba(74, 13, 22, .14);

  /* --- шрифт ------------------------------------------------------------- */
  --font: Spectral, Georgia, "Times New Roman", serif;
  --font-display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --content-width: 74rem;
  --form-width: 34rem;
}

/* --- сброс --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface-sunken);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 88, "wght" 700;
  text-transform: uppercase;
  letter-spacing: -.004em;
  line-height: 1.06;
}
h1 { font-size: 1.5rem; line-height: 1.25; }
h2 { font-size: 1.0625rem; line-height: 1.35; }
h3 { font-size: .9375rem; }

p { margin: 0 0 var(--s4); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono { font-family: var(--font-mono); font-size: .8125rem; }

/* ==========================================================================
   Каркас приложения
   ========================================================================== */

.shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}

.topbar__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 56px;
}

.brand {
  font-weight: 650;
  font-size: .9375rem;
  color: var(--ink);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--accent); }

.nav { display: flex; gap: var(--s1); margin-right: auto; }

.nav a {
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: .875rem;
  font-weight: 500;
}
.nav a:hover { background: var(--surface-sunken); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

.topbar__side { display: flex; align-items: center; gap: var(--s3); }

.lang { display: flex; align-items: center; gap: var(--s2); }
.lang select {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--s1) var(--s2);
  font: inherit;
  font-size: .8125rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.who {
  font-size: .8125rem;
  color: var(--ink-faint);
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

main {
  flex: 1;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s8);
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
  flex-wrap: wrap;
}
.page-head__text { min-width: 0; }
.page-head p { margin: var(--s1) 0 0; color: var(--ink-faint); font-size: .875rem; }

/* Узкие страницы — формы. Строка ввода длиной во весь экран читается плохо. */
.narrow { max-width: var(--form-width); }

/* ==========================================================================
   Карточки
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card__body { padding: var(--s5); }
.card__head {
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.card + .card { margin-top: var(--s4); }

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

.button, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  min-height: 38px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.button:hover, button:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.button:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.button--quiet, button.quiet {
  background: var(--surface);
  color: var(--ink-soft);
  border-color: var(--line-strong);
}
.button--quiet:hover, button.quiet:hover {
  background: var(--surface-sunken);
  border-color: var(--line-strong);
  color: var(--ink);
}

.button--danger, button.danger-button {
  background: var(--danger);
  border-color: var(--danger);
}
.button--danger:hover, button.danger-button:hover { background: #8a1818; border-color: #8a1818; }

.button--small { min-height: 30px; padding: var(--s1) var(--s3); font-size: .8125rem; }

/* Ссылка, оформленная как кнопка формы (переключатели, пересчёт). */
.link {
  background: none; border: none; padding: 0; min-height: 0;
  color: var(--accent); font: inherit; font-size: .8125rem; cursor: pointer;
}
.link:hover { background: none; text-decoration: underline; color: var(--accent-hover); }
.inline { display: inline; }

/* ==========================================================================
   Формы
   ========================================================================== */

.stack p { margin: 0 0 var(--s4); }

.stack label,
.field label {
  display: block;
  font-size: .8125rem;
  font-weight: 550;
  color: var(--ink-soft);
  margin-bottom: var(--s1);
}

.stack input, .stack select, .stack textarea,
.field input, .field select {
  width: 100%;
  padding: var(--s2) var(--s3);
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  font-size: .9375rem;
  color: var(--ink);
}
.stack input::placeholder { color: var(--ink-faint); }

.stack input[type="checkbox"] { width: auto; min-height: 0; margin-right: var(--s2); }

.helptext {
  display: block;
  font-size: .8125rem;
  color: var(--ink-faint);
  margin-top: var(--s1);
}

.errorlist {
  list-style: none;
  margin: var(--s1) 0 0;
  padding: 0;
  color: var(--danger);
  font-size: .8125rem;
}

.form-actions {
  display: flex; align-items: center; gap: var(--s4);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

/* Форма характеристик — 11 полей. В две колонки читается заметно быстрее. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s5); }
.grid-2 > p { margin-bottom: var(--s4); }

/* ==========================================================================
   Фильтры
   ========================================================================== */

.filters {
  display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.filters label { display: flex; flex-direction: column; gap: var(--s1);
  font-size: .75rem; color: var(--ink-faint); text-transform: uppercase;
  letter-spacing: .16em; font-family: var(--font-display);
  font-variation-settings: "wdth" 96, "wght" 600; text-transform: uppercase; }
.filters input, .filters select {
  padding: var(--s2) var(--s3); min-height: 38px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); font: inherit; font-size: .875rem;
}
.filters__search input { min-width: 16rem; }
.filters__spacer { margin-left: auto; }

/* ==========================================================================
   Таблицы
   ========================================================================== */

.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }

table { width: 100%; border-collapse: collapse; background: var(--surface); }

th {
  text-align: left;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
  font-weight: 650;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
  white-space: nowrap;
}

td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-raised); }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.strong { font-weight: 600; }
td .sub { display: block; font-size: .75rem; color: var(--ink-faint); margin-top: 1px; }

.actions { white-space: nowrap; text-align: right; }
.actions a, .actions button { margin-left: var(--s3); font-size: .8125rem; }
.actions a:first-child, .actions form:first-child { margin-left: 0; }

/* ==========================================================================
   Метки вердиктов
   ========================================================================== */

.tag {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: .75rem; font-weight: 550;
  padding: 2px var(--s2);
  border-radius: 100px;
  white-space: nowrap;
}
.tag::before { content: "●"; font-size: .5rem; line-height: 1; }

.tag--dentro_del_limite          { background: var(--ok-soft);      color: var(--ok); }
.tag--excede_el_limite           { background: var(--danger-soft);  color: var(--danger); }
.tag--requiere_revision_juridica { background: var(--warn-soft);    color: var(--warn); }
.tag--regulacion_no_aplica,
.tag--no_calculable              { background: var(--neutral-soft); color: var(--neutral); }
.tag--incomplete                 { background: var(--warn-soft);    color: var(--warn); }

/* ==========================================================================
   Результат расчёта
   ========================================================================== */

.verdict {
  border-radius: var(--radius-lg);
  padding: var(--s5);
  margin-bottom: var(--s4);
  border: 1px solid transparent;
  border-left-width: 4px;
}
.verdict h2 { font-size: 1.125rem; margin-bottom: var(--s1); }
.verdict p { margin: 0; font-size: .9375rem; }

.verdict--dentro_del_limite          { background: var(--ok-soft);      border-color: var(--ok); }
.verdict--excede_el_limite           { background: var(--danger-soft);  border-color: var(--danger); }
.verdict--requiere_revision_juridica { background: var(--warn-soft);    border-color: var(--warn); }
.verdict--regulacion_no_aplica,
.verdict--no_calculable              { background: var(--neutral-soft); border-color: var(--neutral); }

.figure { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.figure__value {
  font-size: 2.25rem; letter-spacing: .005em;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 74, "wght" 900;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.figure__unit { font-size: 1rem; color: var(--ink-faint); }
.figure__label {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); font-weight: 650; margin-bottom: var(--s1);
}

/* Пары «поле — значение»: карточка объекта, происхождение расчёта. */
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s5); margin: 0; }
.facts dt { font-size: .8125rem; color: var(--ink-faint); }
.facts dd { margin: 0; font-size: .875rem; }

.section-title {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); font-weight: 650;
  margin: var(--s5) 0 var(--s3);
}

/* ==========================================================================
   Сообщения и пустые состояния
   ========================================================================== */

.messages { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.messages li {
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  margin-bottom: var(--s2);
  font-size: .875rem;
  border-left: 3px solid;
}
.messages .error   { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.messages .warning { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn); }
.messages .success { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok); }
.messages .info    { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.notice {
  padding: var(--s3) var(--s4);
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: var(--radius);
  font-size: .875rem;
  margin-bottom: var(--s4);
}

.empty {
  padding: var(--s7) var(--s5);
  text-align: center;
  color: var(--ink-faint);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.empty h2 { color: var(--ink-soft); margin-bottom: var(--s2); }
.empty p { font-size: .875rem; margin-bottom: var(--s4); }

.subtle { color: var(--ink-faint); font-size: .875rem; }
.danger { color: var(--danger); }

/* ==========================================================================
   Страницы входа и регистрации
   ========================================================================== */

.auth {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--s5);
  background: var(--surface-sunken);
}
.auth__card {
  width: 100%; max-width: 24rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--s6);
}
.auth__brand {
  font-size: 1.125rem; font-weight: 650; text-align: center;
  margin-bottom: var(--s2); color: var(--ink);
}
.auth__tagline {
  text-align: center; font-size: .8125rem; color: var(--ink-faint);
  margin-bottom: var(--s5);
}
.auth__links { margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line); font-size: .8125rem; color: var(--ink-faint); }
.auth__links p { margin: 0 0 var(--s2); }
.auth__lang { margin-top: var(--s5); }

/* ==========================================================================
   Адаптив.
   Агент часто в разъездах: таблицы обязаны читаться с телефона.
   ========================================================================== */

@media (max-width: 900px) {
  :root { --content-width: 100%; }
  .grid-2 { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; gap: var(--s1) 0; }
  .facts dd { margin-bottom: var(--s3); }
}

@media (max-width: 680px) {
  body { font-size: 15px; }

  .topbar__inner { padding: var(--s2) var(--s4); flex-wrap: wrap; gap: var(--s3); min-height: 0; }
  .nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: var(--s1); }
  .who { display: none; }

  main { padding: var(--s5) var(--s4) var(--s7); }
  h1 { font-size: 1.25rem; }

  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .button { width: 100%; }

  .card__body { padding: var(--s4); }

  .filters { flex-direction: column; align-items: stretch; }
  .filters__search input { min-width: 0; width: 100%; }
  .filters__spacer { margin-left: 0; }
  .filters .button { width: 100%; }

  .figure__value { font-size: 1.75rem; }

  /* Таблица превращается в карточки: горизонтальный скролл на телефоне
     означает, что половину данных не увидят. */
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: var(--s3);
    padding: var(--s3) var(--s4);
  }
  .table-cards td { border: none; padding: var(--s1) 0; }
  .table-cards td::before {
    content: attr(data-label);
    display: block;
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-faint); font-weight: 650;
  }
  .table-cards td:empty { display: none; }
  .table-cards .actions { text-align: left; padding-top: var(--s3); }
  .table-cards .actions a:first-child { margin-left: 0; }
  .table-cards .num { text-align: left; }
}

/* --- печать -------------------------------------------------------------- */

@media print {
  .topbar, .filters, .actions, .form-actions { display: none; }
  body { background: #fff; font-size: 11pt; }
  main { max-width: none; padding: 0; }
  .card { border: none; box-shadow: none; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Ширины колонок. Без них браузер отдаёт место заголовкам, а адрес —
   единственное, что человек читает первым, — жмётся в четыре строки. */
table { table-layout: fixed; }
.col-main    { width: auto; }
.col-narrow  { width: 9rem; }
.col-money   { width: 10rem; }
.col-tag     { width: 12rem; }
.col-actions { width: 13rem; }
.col-id      { width: 4rem; }
.col-date    { width: 12rem; }

td { overflow-wrap: anywhere; }
th[title] { cursor: help; }

@media (max-width: 680px) {
  table { table-layout: auto; }
  .table-cards colgroup { display: none; }
}

.auth__title { font-size: 1rem; margin-bottom: var(--s4); text-align: center; }

.page-head__actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
@media (max-width: 680px) { .page-head__actions { width: 100%; }
  .page-head__actions .button { flex: 1; } }

/* --- Тревоги ------------------------------------------------------------- */

/* Значок в навигации. Число, а не точка: «есть тревоги» и «их одиннадцать» —
   разные новости, и вторая заставляет открыть экран сегодня. */
.badge {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 .35rem;
  margin-left: .35rem;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
}

.alerts { list-style: none; margin: 0; padding: 0; }

.alert {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
}
.alert:last-child { border-bottom: 0; }

.alert__severity {
  flex: 0 0 auto;
  min-width: 6.5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.alert--critical .alert__severity { color: var(--danger); }
.alert--warning  .alert__severity { color: var(--warn); }
.alert--info     .alert__severity { color: var(--ink-faint); }

.alert__body { flex: 1 1 auto; min-width: 0; }
.alert__text { margin: 0; }

/* На узком экране подпись уровня встаёт над текстом: 6,5rem слева на
   телефоне съедали бы половину строки. */
@media (max-width: 40rem) {
  .alert { display: block; }
  .alert__severity { display: block; margin-bottom: .2rem; }
}

/* Срок вышел или на исходе. Не только цветом: у строки есть и текстовая
   метка — дальтоник читает таблицу наугад, если цвет единственный признак. */
.row--urgent td { background: var(--danger-soft); }
.row--past td   { background: var(--neutral-soft); color: var(--ink-soft); }

ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 0; }

/* Извлечение из PDF: значение слева, источник справа. Источник набран
   мельче и другим цветом — он для проверки, а не для чтения подряд. */
.extraction td { vertical-align: top; }
.extraction label.field {
  display: block;
  font-size: .8125rem;
  color: var(--ink-soft);
  margin-bottom: .2rem;
}
.extraction input, .extraction select { width: 100%; max-width: 26rem; }
.snippet q {
  display: block;
  font-size: .8125rem;
  color: var(--ink-faint);
  line-height: 1.5;
  quotes: "«" "»";
}

/* La página de alta explica en una línea qué crea, porque «crear cuenta» no
   dice que además se está dando de alta la agencia. */
.auth__hint {
  margin-top: calc(-1 * var(--s3));
  margin-bottom: var(--s5);
  max-width: 34ch;
}