/* Оформление сайта. Палитра и рамка взяты из макета review-2026-09-21:
   тёмно-синий текст, синий акцент, зелёный для сошедшегося.

   Стили страниц переехали сюда из base.html целиком и без изменений,
   кроме цветов: менять оформление слоями безопаснее, чем переписывать
   разом. Имена классов прежние, чтобы шаблоны продолжали работать. */

:root {
  /* color-scheme: light — сайт всегда светлый, как в макете. Тёмной темы
     в макете нет ни одной строкой, и самодельная тёмная тут вредна:
     смета — это документ, её сверяют с бумагой и с экраном сметной
     программы, а там белый лист. */
  color-scheme: light;
  --фон: #f7fafd;
  --карточка: #ffffff;
  --текст: #10284c;
  --тусклый: #587297;
  --рамка: #e3edf9;
  --акцент: #0875ff;
  --готово: #25b889;
  --ждёт: #9aa8bd;
  --ширина: 1200px;   /* как `.container` в макете */
}

* { box-sizing: border-box; }

/* Атрибут hidden должен прятать всегда. Браузер гасит его правилом
   `display: none` с самым слабым весом, и любое своё `display: flex`
   его перебивает — так уже висела пустая плашка в зоне загрузки.
   Шагам загрузки это тем более важно: они только и делают, что
   прячутся и показываются. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0;
  background: var(--фон);
  color: var(--текст);
  font: 16px/1.6 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.полоса {
  max-width: var(--ширина);
  margin: 0 auto;
  padding: 0 32px 4rem;
}

/* ── Шапка ─────────────────────────────────────────────────────── */

.шапка {
  border-bottom: 1px solid var(--рамка);
  background: var(--карточка);
}

.шапка .полоса {
  padding-bottom: 0;
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.знак {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -0.7px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.знак img { flex: none; }

.шапка nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  font-size: 13px;
}

.шапка nav a,
.шапка nav .ожидает {
  color: var(--текст);
  font-weight: 600;
  text-decoration: none;
  padding: 12px 0;
  white-space: nowrap;
}

.шапка nav a:hover { color: var(--акцент); }
.шапка nav a[aria-current="page"] { color: var(--акцент); }

/* Кнопка и ссылка, которых пока нет за спиной. Выглядят как в макете,
   но не ведут никуда: ни аккаунтов, ни оплаты на сервере нет. Решение
   пользователя от 22.09.2026 — пусть будут видны. Поддельный вход
   при этом делать нельзя: человек решит, что сметы защищены паролем,
   а они открыты любому, у кого есть ссылка. */
.ожидает { cursor: default; }

.подзаголовок { color: var(--тусклый); margin-top: 0.35rem; }

/* Страница со своим заголовком оставляет подзаголовок пустым —
   пустая строка не должна занимать место. */
.подзаголовок:empty { display: none; }

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

.кнопка {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--акцент);
  color: #fff;
  border: 1px solid var(--акцент);
  border-radius: 7px;
  padding: 14px 22px;
  min-height: 44px;   /* палец на телефоне меньше не попадает */
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.кнопка:hover { filter: brightness(1.08); }

.кнопка.тихая {
  background: transparent;
  color: var(--акцент);
  border-color: var(--рамка);
}

.кнопка:disabled {
  background: var(--ждёт);
  border-color: var(--ждёт);
  cursor: not-allowed;
  filter: none;
}

.кнопка.мелкая { padding: 10px 16px; min-height: 36px; font-size: 12px; }

/* «Регистрация» в шапке: в макете это обычная синяя кнопка шириной
   170 px, справа от меню. Вид держим макетный, действия за ней нет. */
.шапка .кнопка.ожидает {
  width: 170px;
  gap: 15px;
  padding: 12px 18px;
  cursor: default;
}

.кнопка.ожидает:hover { filter: none; }

/* Куда сейчас смотрит клавиатура. Без этой рамки человек, который ходит
   по сайту табом, не видит, где он находится. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-visible {
  outline: 3px solid var(--акцент);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Карточки и таблицы страниц ────────────────────────────────── */

.карточка {
  background: var(--карточка);
  border: 1px solid var(--рамка);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: 0 3px 14px rgb(34 56 90 / 3%);
}

h2 {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.35px;
  margin: 0 0 20px;
}

/* tabular-nums — цифры одной ширины. Без этого столбец денег «пляшет»:
   единица уже восьмёрки, и суммы перестают читаться колонкой. */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
td { padding: 0.5rem 0; border-bottom: 1px solid var(--рамка); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.имя { color: var(--тусклый); width: 40%; }

footer {
  color: var(--тусклый);
  font-size: 0.875rem;
  border-top: 1px solid var(--рамка);
  padding: 22px 0;
}

footer .полоса {
  padding-bottom: 0;
  display: flex;
  gap: 8px 20px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Область, куда бросают файл ────────────────────────────────── */

.зона {
  display: block;
  background: color-mix(in srgb, var(--акцент) 3%, var(--карточка));
  border: 1.5px dashed color-mix(in srgb, var(--акцент) 30%, var(--рамка));
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-bottom: 20px;
}

.зона:hover,
.зона.над {
  border-color: var(--акцент);
  background: color-mix(in srgb, var(--акцент) 8%, var(--карточка));
}

/* Стрелка сидит в плитке, а не висит в воздухе: так у взгляда есть
   куда упасть, когда страница открылась. */
.зона .стрелка {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  background: color-mix(in srgb, var(--акцент) 10%, var(--карточка));
  border: 1px solid color-mix(in srgb, var(--акцент) 20%, var(--рамка));
  border-radius: 14px;
  font-size: 30px;
  line-height: 1;
  color: var(--акцент);
}

.зона .крупно { font-size: 21px; font-weight: 600; letter-spacing: -0.35px; }
.зона .мелко { color: var(--тусклый); font-size: .9rem; margin-top: 8px; }
.зона .подчерк { color: var(--акцент); text-decoration: underline; }

/* Атрибут hidden браузер гасит правилом `display: none`, но своё
   `display: flex` его перебивает — без этой строки в зоне загрузки
   висит пустая серая плашка ещё до выбора файла. */
.выбран[hidden] { display: none; }

.выбран {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  background: var(--карточка);
  border: 1px solid var(--рамка);
  border-radius: 10px;
  padding: 18px;
}

.выбран .имя-файла {
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.выбран .вес { color: var(--тусклый); font-size: .875rem; white-space: nowrap; }

.беда {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 9px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}


/* ── Список смет внутри книги ──────────────────────────────────── */

.список-смет th {
  text-align: left;
  font-size: .8rem;
  font-weight: 600;
  color: var(--тусклый);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--рамка);
}

.список-смет td { padding: .7rem 0.6rem .7rem 0; }

.список-смет code {
  font: .85rem ui-monospace, "Cascadia Code", Consolas, monospace;
  background: var(--фон);
  border: 1px solid var(--рамка);
  border-radius: 5px;
  padding: .1rem .4rem;
}

.мелочь { color: var(--тусклый); font-size: .8rem; margin-top: .15rem; }

/* Пометка вместо кнопки там, где возможность ещё не готова */
.скоро {
  color: var(--тусклый);
  font-size: .8rem;
  white-space: nowrap;
  border: 1px dashed var(--рамка);
  border-radius: 6px;
  padding: .25rem .6rem;
}

/* ── Плашка результата проверки ────────────────────────────────── */

.итог {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  border: 1px solid var(--рамка);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--карточка);
}

.итог .значок {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; color: #fff;
}

.итог.сошлось {
  border-color: color-mix(in srgb, var(--готово) 45%, var(--рамка));
  background: color-mix(in srgb, var(--готово) 7%, var(--карточка));
}
.итог.сошлось .значок { background: var(--готово); }
.итог.разошлось {
  border-color: #dc2626;
  background: color-mix(in srgb, #dc2626 6%, var(--карточка));
}
.итог.разошлось .значок { background: #dc2626; }
.итог.нейтрально .значок { background: var(--ждёт); }

/* ── Таблица позиций ───────────────────────────────────────────── */

.позиции { font-size: .9rem; }

.позиции th {
  text-align: left;
  font-size: .75rem;
  font-weight: 600;
  color: var(--тусклый);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 .6rem .5rem 0;
  border-bottom: 1px solid var(--рамка);
  white-space: nowrap;
}

.позиции td { padding: .45rem .6rem .45rem 0; vertical-align: top; }

.позиции code {
  font: .8rem ui-monospace, "Cascadia Code", Consolas, monospace;
  color: var(--тусклый);
  white-space: nowrap;
}

/* Шапка таблицы полосой и подсветка строки под курсором. В смете
   на три тысячи строк глаз теряет, какую строку читает: полоса
   отделяет заголовки от данных, подсветка держит строку. */
.позиции th,
.список-смет th {
  background: color-mix(in srgb, var(--акцент) 5%, var(--фон));
  padding: 13px 12px;
}

.позиции td,
.список-смет td { padding: 13px 12px; }

.позиции tbody tr:hover,
.список-смет tbody tr:hover {
  background: color-mix(in srgb, var(--акцент) 4%, transparent);
}

/* Метка вида позиции */
.метка {
  display: inline-block;
  font-size: .72rem;
  line-height: 1.5;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.метка.работа { background: color-mix(in srgb, var(--акцент) 14%, transparent); color: var(--акцент); }
.метка.материал { background: color-mix(in srgb, var(--готово) 16%, transparent); color: var(--готово); }
.метка.прочее { background: var(--фон); color: var(--тусклый); border-color: var(--рамка); }

/* ── Ход загрузки ──────────────────────────────────────────────── */

.ход { margin-top: 1.25rem; }
.ход[hidden] { display: none; }

.жёлоб {
  height: 8px;
  background: var(--рамка);
  border-radius: 99px;
  overflow: hidden;
}

.полоса-хода {
  height: 100%;
  width: 0%;
  background: var(--акцент);
  border-radius: 99px;
  transition: width .15s linear;
}

.подпись-хода {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .6rem;
  color: var(--тусклый);
  font-size: .9rem;
}

.крутилка {
  width: 15px;
  height: 15px;
  border: 2px solid var(--рамка);
  border-top-color: var(--акцент);
  border-radius: 50%;
  animation: вертись .7s linear infinite;
  flex: none;
}

@keyframes вертись { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .крутилка { animation-duration: 2.4s; }
  .полоса-хода { transition: none; }
}

/* ── Узкий экран ───────────────────────────────────────────────── */

@media (max-width: 800px) {
  .полоса { padding-left: 18px; padding-right: 18px; }
  .шапка .полоса { min-height: 0; padding-top: 14px; padding-bottom: 14px; }
  /* Четыре пункта в строку на телефоне не помещаются: на 375 px «Тарифы»
     срезает краем. Разрешаем переносить — лучше вторая строка, чем
     обрубленное слово. */
  .шапка nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 4px 10px;
    font-size: 11px;
    flex-wrap: wrap;
  }
  .шапка nav a,
  .шапка nav .ожидает { padding: 4px 0; }
  .знак { font-size: 21px; }
  .кнопка.мелкая { margin-left: auto; }
  .шапка .кнопка.ожидает { width: 150px; padding: 10px; font-size: 11px; }

  /* На телефоне воздух внутри карточек дороже, чем красота отступов. */
  .карточка { padding: 20px 16px; border-radius: 12px; }
  h2 { font-size: 18px; margin-bottom: 16px; }
  .зона { padding: 32px 14px; }
  .зона .крупно { font-size: 18px; }
  .выбран { gap: 8px; padding: 12px; }
  .итог { padding: 16px; }
  .позиции, .список-смет { font-size: 13px; }
  .позиции th, .список-смет th,
  .позиции td, .список-смет td { padding: 10px 8px; }
  td.имя { width: 38%; }
}