/* ВИД КАБИНЕТА. Читается как продолжение витрины: та же гамма, те же шрифты, тот же зелёный
   как единственный цвет действия.

   🔴 ЧЕМ КАБИНЕТ НАРОЧНО ОТЛИЧАЕТСЯ ОТ ВИТРИНЫ, и это решение, а не нехватка сил:
   · живого видео под страницей НЕТ. Витрина продаёт и имеет право на движение; кабинет
     человек открывает, чтобы прочитать даты и суммы, и шевелящийся фон здесь мешает читать.
     Вместо ролика — неподвижное свечение, собранное градиентами: тот же свет, ноль веса,
     ноль обращений к сети (у кабинета в политике нет ни `media-src`, ни `script-src`);
   · раскладка разная от страницы к странице: вход — одна колонка по центру, список заказов —
     карточки, сам заказ — две колонки. Пять одинаковых полос подряд и есть то самое
     ощущение шаблона.

   ⛔ Ни одного `<style>` и ни одного атрибута `style=` в разметке: `style-src 'self'`
   отбрасывает их МОЛЧА — локально страница выглядит исправной, а у клиента едет. */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--hvoya);
  color: var(--molochnyy);
  font: 400 17px/1.55 "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Ниже — то, что заменяет кабинету живой фон. Три слоя, и каждый со своей работой:
     тёплое солнце в правом верхнем углу · холодная глубина внизу · общий уклон полотна.
     `fixed` держит свечение за окном, чтобы оно не ехало вместе с текстом при прокрутке. */
  background-image:
    radial-gradient(58% 44% at 82% -6%, rgba(197, 165, 124, .16), transparent 68%),
    radial-gradient(48% 38% at 12% 8%, rgba(143, 191, 127, .10), transparent 70%),
    linear-gradient(178deg, #12160f 0%, #0d1109 62%, #0a0d08 100%);
  background-attachment: fixed;
}

/* ── ВХОД: ТОТ ЖЕ ФОН, ЧТО НА ГЛАВНОЙ ────────────────────────────────────────
   Задача Кирилла 06.08.2026, дословно: «давай сделаем так что бы это ui окно с логином
   было на фоне нашего основного фона на главной странице. главное НЕ ПОВЕРХ текста который
   на главной. Только фон».

   🔴 ФОН ТОЛЬКО НА СТРАНИЦЕ ВХОДА, а не на всём кабинете, и это его же условие, прочитанное
   до конца. Список заказов и сам заказ — это даты, штуки и суммы; фотография под мелкими
   числами читать мешает, и ровно поэтому у кабинета изначально нет живого видео. Вход
   же — одна кнопка и одно поле, ему картинка не мешает.

   ⚠️ ЭТО СНИМОК, А НЕ ВИДЕО, И ИНАЧЕ БЫТЬ НЕ МОЖЕТ: в политике содержимого кабинета
   нет ни `media-src`, ни `script-src` (`core/security/csp.py`), то есть ролик браузер
   не возьмёт МОЛЧА. Взят первый кадр того самого ролика главной, уменьшенный до 1600 точек
   в ширину, — 126 КБ. Файл свой, `img-src 'self'` его разрешает, ослаблять политику
   не понадобилось ни на строку.

   ⚠️ Тёмная завеса поверх снимка — не украшение: под ней лежит утренний кадр со светлым
   туманом, и белый заголовок «Ваши заказы» без завесы пропадал бы на его светлых местах.
   Та же роль, что у `--vual` на сайте; здесь она набрана прямо, потому что в кабинете
   этой переменной нет и заводить её ради одной страницы незачем.

   🔴 ПРИЗНАК БЕРЁТСЯ У САМОЙ СТРАНИЦЫ (`:has`), А НЕ ВТОРЫМ КЛАССОМ НА `body`. Класс
   `polotno--vhod` уже стоит на всех четырёх страницах входа — вход, код, отказ, «заказа
   нет». Заведи мы второй класс, его пришлось бы ставить руками на каждой новой странице
   входа, и однажды его забудут поставить — молча, без единой ошибки. Здесь новая страница
   входа получает фон сама, потому что ставит тот же класс, что и остальные четыре. */
body:has(.polotno--vhod) {
  background-image:
    linear-gradient(180deg, rgba(10, 13, 8, .78) 0%, rgba(10, 13, 8, .62) 45%, rgba(10, 13, 8, .88) 100%),
    url("img/fon.webp");
  background-size: cover, cover;
  background-position: center, center;
}

/* ── Шапка: стекло, одна строка, высота под 80 точек ────────────────────────── */
.shapka {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
  padding: 0 clamp(16px, 4vw, 40px);
  background: var(--fon-shapki);
  /* Размытие подложки — то же стекло, что у витрины. Браузеры, которые его не умеют,
     получают полупрозрачную заливку: читаемость от этого не страдает. */
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--kromka);
}

/* Имя — логотип картинками, как в шапке сайта. Высота задаётся числом, соотношение браузер
   берёт из атрибутов разметки; поэтому знак остаётся кругом при любом масштабе шрифта. */
.shapka__imya {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}

.shapka__znak { height: 30px; width: auto; }
.shapka__slovo { height: 16px; width: auto; }

.shapka__imya:hover .shapka__znak,
.shapka__imya:hover .shapka__slovo { opacity: .82; }

.shapka__pravo { display: flex; align-items: center; gap: 18px; }

/* Ссылки справа в шапке — «← На сайт», телефон, «Мои заказы» — одним правилом:
   иначе зелёный общий `a` рядом с молочным телефоном читался бы как чужая кнопка,
   а без `nowrap` «← На сайт» на узком экране ломался бы посередине стрелки. */
.shapka__pravo > a {
  font-weight: 600;
  color: var(--molochnyy);
  text-decoration: none;
  white-space: nowrap;
}

.shapka__vyhod button {
  font: inherit;
  font-size: 15px;
  color: var(--polyn);
  background: transparent;
  border: 1px solid var(--kromka);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}

.shapka__vyhod button:hover { color: var(--molochnyy); border-color: var(--kromka-silnaya); }

/* ── Узкий экран: шапка не вылезает за край ────────────────────────────────────
   Замер штаба 12.08.2026 на странице входа: окно 320, страница 416 — вылезание
   96 точек. У вошедшего ещё шире: к «← На сайт» и телефону добавляются «Мои заказы»
   и «Выйти», и на 320 страница занимает 627.

   Приём тот же, что у витрины (`core/site/templates/site/base.html`): слово логотипа
   прячется, знак остаётся. Одной картинкой это было бы невозможно — поэтому знак и
   слово лежат двумя файлами и у кабинета тоже (`znak.webp`, `dervo.webp`).

   ⛔ «← На сайт» и телефон не прячутся ни на какой ширине: ради выхода на сайт вся
   работа и делалась, а телефон — единственный способ дозвониться, когда вход не работает.
   Перенос правого блока как раз и сохраняет обе ссылки видимыми, не ужимая их в ноль. */
@media (max-width: 767px) {
  .shapka {
    gap: 12px;
    height: auto;
    min-height: 68px;
    padding: 12px clamp(12px, 3vw, 24px);
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .shapka__slovo { display: none; }

  .shapka__znak { height: 26px; }

  .shapka__pravo {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
  }

  .shapka__pravo > a { font-size: 15px; }

  .shapka__vyhod button {
    padding: 6px 12px;
    font-size: 14px;
  }
}

/* ── Полотно ────────────────────────────────────────────────────────────────── */
.polotno {
  flex: 1;
  width: min(940px, 100% - 40px);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 76px) 0 64px;
}

/* Вход — единственная страница в одну колонку по центру: на ней ровно одно действие,
   и всё остальное на экране только мешало бы его найти.

   🔴 С 06.08.2026 это ОКНО НА ФОТОГРАФИИ, а не колонка на краске. Под страницей теперь лежит
   кадр главной (правило `body:has` выше), и текст, положенный прямо на него, читался бы через
   раз: под буквами то тёмная хвоя, то светлый туман. Стекло возвращает буквам ровную подложку
   и при этом не закрывает снимок — тот же приём и та же роль, что у панели корзины на сайте.

   ⚠️ `flex: 0 0 auto` отменяет `flex: 1`, доставшийся от `.polotno`. Без этой строки окно
   растянулось бы на всю высоту экрана, и стеклянная панель превратилась бы в полосу
   от шапки до подвала. */
.polotno--vhod {
  flex: 0 0 auto;
  width: min(520px, 100% - 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: clamp(36px, 9vh, 96px) auto clamp(36px, 7vh, 80px);
  padding: clamp(28px, 5vw, 40px) clamp(22px, 5vw, 38px) clamp(30px, 5vw, 40px);
  background: var(--steklo-panel);
  border: 1px solid var(--kromka-yarkaya);
  border-radius: var(--radius);
  /* Размытие того, что лежит под окном: без него сквозь стекло читается фотография
     и мешает мелким буквам подписи под полем. */
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 64px rgba(10, 13, 8, .5);
}

/* Заголовок внутри окна мельче общего: 44 точки набраны под страницу шириной 940,
   а окно входа вдвое уже — в нём та же строка встала бы в три ряда. */
.polotno--vhod h1 { font-size: clamp(26px, 3.2vw, 32px); }

h1 {
  margin: 0 0 14px;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.01em;
  text-shadow: var(--ten-teksta-krupnogo);
}

h2 {
  margin: 44px 0 16px;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
}

.vvodnaya {
  margin: 0 0 30px;
  max-width: 46ch;
  color: var(--moloko-myagkoe);
}

.melko { margin-top: 36px; font-size: 15px; color: var(--polyn); }

/* Строка про обработку данных под формой входа. Мельче обычного мелкого и ближе к форме:
   это сноска к полю ввода, а не самостоятельная мысль. Отступ сверху втрое меньше, чем
   у `.melko`, — иначе строка отрывается от формы и читается как отдельный абзац.

   ⚠️ Ширина ограничена мерой чтения: строка стоит под полем ввода, которое на широком
   экране растянуто, и без ограничения она уехала бы в одну длинную строку через всю
   страницу. */
.soglasie-vhoda {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 42ch;
}

a { color: var(--list); text-decoration-color: rgba(143, 191, 127, .4); }
a:hover { color: var(--list-svetlyy); }

/* ── Форма ──────────────────────────────────────────────────────────────────── */
.forma { display: flex; flex-direction: column; gap: 12px; }

.forma label {
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--polyn);
}

.forma input {
  font: inherit;
  font-size: 19px;
  color: var(--molochnyy);
  background: rgba(240, 238, 233, .04);
  border: 1px solid var(--kromka-yarkaya);
  border-radius: var(--radius-melkiy);
  padding: 15px 18px;
  transition: border-color .18s ease, background .18s ease;
}

.forma input::placeholder { color: rgba(163, 171, 157, .55); }

.forma input:focus {
  outline: none;
  border-color: var(--list);
  background: rgba(240, 238, 233, .06);
}

/* Код набирают по одной цифре и вслух проговаривают — поэтому крупно и вразрядку. */
.forma input[name="code"] {
  font-size: 26px;
  letter-spacing: .34em;
  text-align: center;
  padding-left: 24px;
}

.forma button {
  font: inherit;
  font-weight: 600;
  /* 🔴 ТЁМНЫЙ текст на зелёном, а не светлый. Замер: светлый даёт отношение яркостей 1,8
     при пороге 4,5, тёмный — 9,0. Эта же ошибка была на кнопке «В корзину» и жила до тех пор,
     пока зелёный не стал единственным цветом действия. */
  color: var(--list-temnyy);
  background: var(--list);
  border: 0;
  border-radius: var(--radius-melkiy);
  padding: 15px 22px;
  margin-top: 6px;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease;
}

.forma button:hover { background: var(--list-svetlyy); }
.forma button:active { transform: translateY(1px); }

.otkaz {
  margin: 0 0 22px;
  padding: 14px 18px;
  color: var(--oshibka);
  background: rgba(224, 138, 138, .07);
  border: 1px solid rgba(224, 138, 138, .3);
  border-left-width: 3px;
  border-radius: var(--radius-melkiy);
}

/* ── Список заказов ─────────────────────────────────────────────────────────── */
.zakazy { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.zakaz {
  position: relative;
  padding: 26px 28px;
  background: var(--steklo-plitka);
  border: 1px solid var(--kromka);
  border-radius: var(--radius);
  transition: border-color .2s ease, transform .2s ease;
}

.zakaz:hover { border-color: var(--kromka-yarkaya); transform: translateY(-2px); }

.zakaz__shapka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.zakaz__nomer {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--molochnyy);
  text-decoration: none;
}

/* Вся карточка кликабельна, но ссылка при этом одна: растянутый псевдоэлемент — приём,
   который не ломает чтение с клавиатуры и не требует ни строчки скрипта. */
.zakaz__nomer::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.zakaz:hover .zakaz__nomer { color: var(--list-svetlyy); }

.zakaz__data { font-size: 15px; color: var(--polyn); }

.zakaz__sostav {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  color: var(--moloko-myagkoe);
  font-size: 15px;
}

.zakaz__sostav li { padding: 3px 0; }

.zakaz__niz {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--kromka);
}

.zakaz__summa {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.zakaz__ogovorka { font-size: 14px; color: var(--polyn); max-width: 46ch; }

/* ── Страница заказа: две колонки на широком экране ─────────────────────────── */
.zakaz-podpis { margin: 0 0 8px; color: var(--polyn); font-size: 15px; }

.razvorot {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

@media (min-width: 860px) {
  .razvorot { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  /* Заголовок раздела в правой колонке выравнивается с левым: без этого «Гарантия»
     висела бы на 44 точки ниже «Что заказано», и разворот читался бы как две страницы. */
  .razvorot > * > h2:first-child { margin-top: 0; }
}

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

.sostav li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--kromka);
}

.sostav__chto { color: var(--molochnyy); }
.sostav__skolko { color: var(--polyn); white-space: nowrap; }
.sostav__cena { color: var(--moloko-myagkoe); white-space: nowrap; }

.itog {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.itog__podpis { font-family: "Raleway", sans-serif; font-size: 15px; color: var(--polyn); }

/* Гарантия — отдельная стеклянная панель: это не строка списка, а обещание, за которое
   мы отвечаем деньгами, и выглядеть оно должно как документ, а не как примечание. */
.garantiya {
  padding: 24px 26px;
  background: var(--steklo-panel);
  border: 1px solid var(--kromka);
  border-radius: var(--radius);
}

.garantiya h2 { margin-top: 0; }

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

.posadka li { padding: 12px 0; border-bottom: 1px solid var(--kromka); }
.posadka li:last-child { border-bottom: 0; }

.posadka__chto { display: block; }
.posadka__srok { display: block; margin-top: 3px; font-size: 15px; color: var(--polyn); }
.posadka__srok b { color: var(--pesok-detal); font-weight: 600; }

.pusto { margin: 0; color: var(--polyn); }

/* ── Подвал ─────────────────────────────────────────────────────────────────── */
/* ⚠️ `margin-top: auto` прижимает подвал к низу окна на КОРОТКИХ страницах. Он понадобился
   06.08.2026 вместе с окном входа: полотно входа перестало растягиваться на всю высоту
   (`flex: 0 0 auto`), и подвал повис сразу под стеклянной панелью, а под ним осталась
   пустая полоса до края экрана. На остальных страницах кабинета свободного места нет вовсе,
   и эта строка там не делает ничего. */
.podval {
  margin-top: auto;
  padding: 26px clamp(16px, 4vw, 40px);
  border-top: 1px solid var(--kromka);
  color: var(--polyn);
  font-size: 15px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}

.podval a { color: var(--moloko-myagkoe); text-decoration: none; }
.podval a:hover { color: var(--molochnyy); }

/* Реквизиты юрлица — своей строкой во всю ширину подвала (задача Кирилла 08.08.2026).
   `flex-basis: 100%` ставит их ПОД строкой с телефоном, а не рядом: в один ряд с ней они
   переносились бы посреди ОГРН на узком экране. Кегль мельче — их читает тот, кто их ищет. */
.podval__legal {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ── Движение выключается, если человек попросил систему его убрать ─────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}