/* ═══════════════════════════════════════════════════════════════════════
   KEY PEOPLE — единственный файл оформления.
   ═══════════════════════════════════════════════════════════════════════

   ЗАЧЕМ ОН ОДИН. До 26.09.2026 стили жили в десяти страницах: 816 строк,
   от 20 до 41 процента каждого файла. Каждая переменная цвета была
   объявлена по десять раз — и ещё столько же в тёмной теме. Семь из
   шестнадцати объявлены не везде, отчего `--ok` пришлось дописывать в две
   страницы руками, когда понадобился цвет комиссии.

   «Поменять акцентный цвет» стоило двадцати правок. Теперь — одной.

   ЭТО ГРАНИЦА. Оформление живёт здесь, разметка и скрипты — в страницах.
   Правила отсюда можно менять как угодно; имена классов и `id` — нельзя:
   за 81 идентификатор держатся кнопки, и переименование убивает их МОЛЧА.

   ─────────────────────────────────────────────────────────────────────
   БРЕНДБУК. Key People · Brand Guidelines v1.0, 2026. Правила оттуда,
   и каждое здесь не случайно:

   * «Orange is the one and only bright color; the brand has no second
     accent» — второго акцента не заводить. Зелёного «успеха» и красного
     «ошибки» в палитре нет: их роль играют терракота и какао.

   * «Do not set small type in orange on light grounds — use terracotta
     or cocoa» — оранжевый в мелком тексте на светлом не читается.

   * «Website. Light ground, inverse logo in a 36 px header. Orange lives
     in button outlines, rules and one accent bar — NO LARGE ORANGE FILLS
     on the site» — это прямое указание про сайт. Залить экран оранжевым
     значит нарушить собственный брендбук.

   * Lora — «Regular and Italic only; no Bold». Жирного начертания у
     основного текста нет вовсе; вес даёт Oswald в заголовках.

   * Тайский — Noto Sans Thai, «set 10 % smaller than the Latin on the
     same line»: у тайского выше строчные, и в один размер он выглядит
     крупнее соседней латиницы.
   ═══════════════════════════════════════════════════════════════════════ */

/* ⚠️ ШРИФТЫ ГРУЗИМ ТОЛЬКО В ТЕХ НАЧЕРТАНИЯХ, ЧТО НАЗВАНЫ В БРЕНДБУКЕ.
   Каждое лишнее — это ещё файл на телефоне агента в тайской мобильной
   сети. Oswald 500/600 (подзаголовки/заголовки), Lora 400 и курсив.
   `display=swap`: текст виден сразу системным шрифтом и подменяется, а не
   держит пустой экран до загрузки.

   Тайского здесь НЕТ намеренно: Noto Sans Thai стоит в системе почти
   любого тайского телефона, а веб-шрифт с тайским весит сотни килобайт —
   ровно на том экране, где мы первый раз показываемся тайскому агенту. */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400&family=Oswald:wght@500;600&display=swap');

:root {
  /* ⚠️ СИСТЕМНАЯ ТЕМА — ОДНА СТРОКА, НО БЕЗ НЕЁ ТЁМНЫЙ РЕЖИМ НЕПОЛНЫЙ.
     Браузер не знает, что страница умеет тёмную тему, и рисует своими
     светлыми умолчаниями то, что рисует он сам: полосы прокрутки, поля
     ввода до применения наших правил, выпадающие списки. На тёмной
     странице это светлые заплатки. */
  color-scheme: light dark;

  /* ── палитра брендбука, дословно ─────────────────────────────────── */
  --orange:     #F0692A;   /* Sunny Orange — обводки, линейки, одна полоса */
  --ivory:      #F6F1E7;   /* Ivory — светлый фон, текст на оранжевом      */
  --cocoa:      #2A1E14;   /* Cocoa — основной текст                       */
  --terracotta: #C9501A;   /* Terracotta — ссылки, нажатое, мелкий цветной */
  --sand:       #E9DCC5;   /* Sand — линейки, разделители, вторые плитки   */

  /* ── роли: страницы обращаются к НИМ, а не к цветам напрямую ────────
     Так тёмная тема получается переназначением ролей, а не переписыванием
     каждого правила. И так же видно, где цвет использован не по смыслу. */
  --bg:       var(--ivory);
  --card:     #FFFFFF;
  --ink:      var(--cocoa);
  --muted:    #7A6A5C;            /* какао, разбавленный до читаемого серого */
  --line:     var(--sand);
  /* ⚠️ ЗДЕСЬ РОЛЬ ОБЪЯВЛЯЕТСЯ — И ТОЛЬКО ЗДЕСЬ ПРАВАЯ ЧАСТЬ ЦВЕТ, А НЕ
     РОЛЬ. Замена «var(--terracotta) → var(--accent)» по всем файлам
     задела и эту строку, превратив её в `--accent: var(--accent)` —
     самоссылку, от которой роль перестаёт существовать вовсе, а с ней
     гаснут все ссылки и акценты продукта разом. */
  --accent:   var(--terracotta);  /* ссылки и мелкий текст — НЕ оранжевый */
  --accent-strong: var(--orange); /* обводки, линейки, акцентная полоса     */
  --ph:       #EFE9DD;            /* место под ненагруженный снимок          */

  /* Оттенки состояний. Второго акцента нет: «хорошо» — какао с оттенком
     зелени земли, «внимание» — терракота, «плохо» — терракота темнее.
     Всё внутри той же тёплой гаммы, ничего чужого палитре. */
  --ok:      #4A6B3D;  --okbg:   #EDF1E7;
  --wait:    #9A5C18;  --waitbg: #F7EDDC;
  --no:      #A63A15;  --nobg:   #F8E8E2;
  --idlebg:  #EFE9DD;                 /* «ещё не писали» в панели хозяина */

  /* ⚠️ ТЕКСТ НА АКЦЕНТНОЙ ЗАЛИВКЕ — ОТДЕЛЬНАЯ РОЛЬ, А НЕ `#fff` ПО МЕСТУ.
     В тёмной теме акцент СВЕТЛЕЕТ (#E8834A), а белые надписи по девяти
     файлам остаются светлотемовыми — и кнопка «Войти» даёт 2.70 при
     норме 4.5. Заливка меняется в одном месте, текст на ней должен
     меняться там же. */
  --on-accent: #FFFFFF;

  /* ⚠️ ЗЕЛЁНЫЙ WHATSAPP — ЕДИНСТВЕННЫЙ ЦВЕТ ВНЕ ПАЛИТРЫ, и он тут не по
     недосмотру: это фирменный цвет чужого сервиса, кнопку с ним узнают не
     читая. Живёт только в панели хозяина, которую видит один человек.
     Наружу, к агентам и клиентам, он не выходит.

     Оказался здесь после того, как перенос стилей 26.09 вынес из админки
     её собственный `:root` — и восемь кнопок «WhatsApp» стали белым по
     белому: `var(--wa)` без объявления даёт пустоту, фон исчезает, текст
     остаётся белым. Контраст 1.0, кнопки не видно вовсе. Нашли
     проверяющие агенты; сторож на неопределённые переменные — в
     test_pages_js.py. */
  --wa:      #25D366;

  --shadow-sm: 0 1px 2px rgba(42, 30, 20, .06);
  --shadow:    0 1px 2px rgba(42, 30, 20, .06), 0 8px 24px rgba(42, 30, 20, .07);
  --shadow-lg: 0 20px 60px rgba(42, 30, 20, .28);

  /* ── типографика ─────────────────────────────────────────────────── */
  --font-head: "Oswald", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  /* Тайский и всё, что не латиница с кириллицей, — системным. */
  --font-th:   "Noto Sans Thai", system-ui, sans-serif;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Брендбук предусматривает тёмный режим: «On dark. Orange mark, light
       wordmark. Evening events, dark mode». Фон — какао, поднятое до
       рабочей темноты, чтобы оранжевый на нём не выжигал глаза. */
    --bg:     #191510;
    --card:   #221B14;
    --ink:    var(--ivory);
    --muted:  #A2907E;
    --line:   #3A2E23;
    --accent: #E8834A;              /* терракота на тёмном не читается   */
    --accent-strong: var(--orange);
    --ph:     #2B2219;
    /* ⚠️ --idlebg ЗАБЫВАЛИ ЗДЕСЬ. Соседние --ok/--wait/--no и их фоны
       переопределены все, а «ещё не писали» в панели хозяина оставался
       светло-песочным пятном на тёмной странице. */
    --idlebg: #2B2219;
    /* На светлом акценте тёмный текст читается, на белом — нет. */
    --on-accent: var(--cocoa);

    --ok:     #8FBF7A;  --okbg:   #24301E;
    --wait:   #D9A05C;  --waitbg: #33270F;
    --no:     #E08A6C;  --nobg:   #35211A;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, .55);
  }
}

/* ══ основа ════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-body);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ⚠️ ТАЙСКИЙ — НА 10% МЕЛЬЧЕ, как требует брендбук. У тайского выше
   строчные буквы, и в одном кегле с латиницей он выглядит крупнее
   соседнего слова. Правило вешается на `lang`, который проставляет
   переключатель языка, — значит работает само, без правки страниц.

   ⚠️ КЕГЛЬ — ТОЛЬКО НА КОРНЕ, И ЭТО НЕ ПРИДИРКА. Было `:lang(th){.9em}`
   без ограничения, а `lang` НАСЛЕДУЕТСЯ: селектор совпадал с каждым
   потомком, и 0.9 перемножалось по всей глубине вложенности. Живая
   цепочка на витрине: body 12.96 → .wrap 11.66 → header 10.50 →
   .hdtext 9.45 → h1 8.50. Заголовок в 42 точки превращался в 8,5 —
   название агентства читалось как серая подпись.

   Вторая половина той же беды: `:lang(th)` имеет вес (0,1,0) и бьёт
   собственное правило `h1{font-size:42px}` с весом (0,0,1). То есть
   размеры заголовков не применялись вовсе.

   Правило пролежало мёртвым с самого написания и проснулось 27.09.2026,
   когда движок начал проставлять `lang` на `<html>`. До того `:lang(th)`
   не совпадал ни с чем, и ошибки никто не видел.

   `rem` вместо `em` не спасёт: перемножение уйдёт, но вес останется, и
   заголовки по-прежнему будут одного размера. Поэтому — только корень. */
:lang(th), :lang(th) body { font-family: var(--font-th); }
html:lang(th) { font-size: .9em; }

h1, h2, h3, h4, .h {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -.005em;
  margin: 0;
  line-height: 1.2;
}
h1 { font-size: 30px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; font-weight: 500; }

/* Прописные получают +4% трекинга — правило брендбука для Oswald. */
.caps {
  font-family: var(--font-head);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}

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

/* ══ логотип ═══════════════════════════════════════════════════════ */
/* Брендбук: «inverse logo in a 36 px header» — на светлом фоне оранжевый
   ключ и тёмная надпись. Минимальная ширина 90 px; ниже неё бородки ключа
   сливаются, и надо переходить на один знак.

   ⚠️ ВЕРСИЙ ЛОГОТИПА ЧЕТЫРЕ, И ВЫБИРАЕТ ИХ ФОН. Первый набросок ставил
   inverse-версию везде — и в тёмной теме надпись «KEY PEOPLE» исчезла
   вовсе: она там тёмная по тёмному. Осталась висеть одна оранжевая
   скобка ключа, и выглядело это не как ошибка, а как «так задумано».
   Поэтому подмена живёт ЗДЕСЬ, а страницы просто кладут обе картинки. */
/* ⚠️ ВЫСОТА 46, А НЕ 36 — И ЭТО СЧИТАЕТСЯ, А НЕ ПОДБИРАЕТСЯ НА ГЛАЗ.
   Брендбук: «Horizontal no smaller than 24 mm / 90 px wide. Below the
   minimum the key bits merge and “PEOPLE” stops reading».
   У нашего файла соотношение ровно 2:1, значит 90 точек ширины дают 45
   высоты. Первая версия стояла на 36 — то есть 72 точки, на пятую часть
   мельче минимума, и так было на ВСЕХ экранах, включая десктоп.

   Поймано измерением, а не глазом: на снимке логотип выглядел нормально.
   Правило брендбука — число, и проверять его надо числом. */
.logo { display: inline-flex; align-items: center; height: 46px; flex: none; }
.logo img { height: 100%; width: auto; display: block; }
.logo .on-dark { display: none; }

/* ⚠️ ОТСТУПОВ ЗДЕСЬ НЕТ НАМЕРЕННО. У блока жёсткая высота, и padding
   съедает её изнутри: 32 минус 12 и 8 оставили картинке ДЕСЯТЬ точек
   вместо девяноста. Снаружи это выглядело как «мелкий логотип», а не как
   ошибка вёрстки. Отступы ставит тот, кто кладёт логотип, — маржой. */

@media (prefers-color-scheme: dark) {
  .logo .on-light { display: none; }
  .logo .on-dark  { display: block; }
}

/* ══ полосы и линейки ══════════════════════════════════════════════ */
/* «Orange lives in button outlines, rules and one accent bar» — вот они,
   те самые три места, и больше оранжевого на странице нет. */
.accent-bar {
  height: 3px;
  background: var(--accent-strong);
  border: 0;
  margin: 0;
}
hr, .rule {
  height: 1px; border: 0; background: var(--line); margin: 20px 0;
}

/* ══ кнопки ════════════════════════════════════════════════════════ */

.btn {
  appearance: none;
  font: 500 14.5px/1 var(--font-head);
  letter-spacing: .01em;
  padding: 11px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color .15s, color .15s, background .15s;
}
.btn:hover { border-color: var(--accent-strong); color: var(--accent); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: default; }
.btn:disabled:hover { border-color: var(--line); color: var(--ink); }

/* Главная кнопка — ОБВОДКОЙ, а не заливкой. Прямое правило брендбука про
   сайт; сплошная оранжевая плашка на светлом фоне ему противоречит. */
.btn--main {
  border: 1.5px solid var(--accent-strong);
  color: var(--accent);
  background: transparent;
  font-weight: 600;
}
.btn--main:hover { background: var(--accent-strong); color: var(--ivory); }
@media (prefers-color-scheme: dark) {
  .btn--main { color: var(--accent); }
}

/* Заливка допустима ровно там, где кнопка И ЕСТЬ действие страницы —
   одна на экран. Брендбук запрещает большие заливки, а не кнопки. */
.btn--solid {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--ivory);
  font-weight: 600;
}
.btn--solid:hover { opacity: .9; color: var(--ivory); border-color: var(--accent-strong); }

.btn--quiet { padding: 8px 13px; font-size: 13px; color: var(--muted); }
.btn--quiet:hover { color: var(--accent); }
.btn--wide { width: 100%; justify-content: center; }

/* ══ поля ══════════════════════════════════════════════════════════ */

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label,
.label {
  font: 500 12.5px/1.3 var(--font-head);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
input, select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font: 400 16px/1.4 var(--font-body);   /* 16px: меньше — iOS зумит форму */
}
textarea { min-height: 76px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent-strong);
  outline-offset: 1px;
  border-color: transparent;
}
::placeholder { color: var(--muted); opacity: .7; }

/* ══ карточки ══════════════════════════════════════════════════════ */

.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
}

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Место под снимок держит РАМКА, а не картинка: пока снимок в пути, у
   него нет размеров, и сетка на глазах перестраивается — соседние
   карточки прыгают, текст уезжает. */
.ph { position: relative; aspect-ratio: 4/3; background: var(--ph); overflow: hidden; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ph .no {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); font-size: 13px;
}

/* ══ бирки ═════════════════════════════════════════════════════════ */

.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  font: 500 11.5px/1.5 var(--font-head);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--ph);
  color: var(--muted);
}
.tag--ok   { background: var(--okbg);   color: var(--ok); }
.tag--wait { background: var(--waitbg); color: var(--wait); }
.tag--no   { background: var(--nobg);   color: var(--no); }

/* ══ окна и сообщения ══════════════════════════════════════════════ */

.modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(26, 18, 12, .74);
  display: none; place-items: start center;
  padding: 20px; overflow: auto;
}
.modal.on { display: grid; }
.modal > .panel { width: min(96vw, 620px); margin: auto; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--cocoa); color: var(--ivory);
  padding: 12px 20px; border-radius: var(--radius);
  font-size: 14px; opacity: 0; pointer-events: none;
  transition: opacity .18s; z-index: 70;
}
.toast.on { opacity: 1; }

.err { color: var(--no); font-size: 14px; }

/* ══ мелочи, общие для всех страниц ════════════════════════════════ */

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 64px; }
.muted { color: var(--muted); }
.empty {
  padding: 52px 20px; text-align: center; color: var(--muted);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}

/* Цена — единственное место, где числу нужен вес. Lora жирной не бывает
   (правило брендбука), поэтому вес берём у Oswald. */
.price {
  font: 600 19px/1.2 var(--font-head);
  font-variant-numeric: tabular-nums;
}
.price .per { font: 400 13px/1 var(--font-body); color: var(--muted); }

/* ══ телефон ═══════════════════════════════════════════════════════ */
/* Две колонки, а не одна: агент листает витрину, а не читает ленту. При
   одной колонке за экран видно ровно один объект, и пролистать полсотни
   превращается в работу. */
@media (max-width: 560px) {
  .wrap { padding: 0 12px 48px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  h1 { font-size: 24px; }
  h2 { font-size: 18px; }
  .panel { padding: 16px; border-radius: var(--radius); }
  .price { font-size: 16px; }
}

/* ── ШАПКА САЙТА — ОДНА НА ВСЕ СТРАНИЦЫ ─────────────────────────────
   ⚠️ БЫЛА СКОПИРОВАНА В ТРИ ФАЙЛА, И КОПИИ РАЗОШЛИСЬ. У карточки объекта
   не оказалось правила отступов для ссылок в мобильной шапке — того
   единственного, что их разделяет, — и меню слиплось в «АгентстваНовое
   Кабинет». Ни один сторож такого не видит: разметка цела, скрипт цел,
   переменные объявлены. Поймано глазами при проходе пути агента.

   Правила scoped на `.top`. Страница клиентской подборки этого класса не
   использует вовсе — то есть шапка продукта ей и не достанется, ради чего
   копии когда-то и заводились. */
.top { background: var(--card); border-bottom: 1px solid var(--line); }
.top .in { max-width: 1080px; margin: 0 auto; padding: 0 20px;
           display: flex; align-items: center; gap: 20px; height: 76px; }
.top .sitenav { margin-left: auto; display: flex; gap: 22px; }
.top .sitenav a { font: 400 15px/1 var(--font-body); color: var(--muted); }
.top .sitenav a:hover { color: var(--accent); text-decoration: none; }

@media (max-width: 760px) {
  .top .in { height: auto; flex-direction: column; align-items: stretch;
             gap: 0; padding: 0; }
  .top .logo { margin: 10px 14px 6px; }
  .top .sitenav { margin: 0; gap: 0; overflow-x: auto; padding: 0 14px 10px;
                  scrollbar-width: none; }
  .top .sitenav::-webkit-scrollbar { display: none; }
  /* ⚠️ ИМЕННО ЭТА СТРОКА И ПОТЕРЯЛАСЬ ПРИ КОПИРОВАНИИ. Отступ справа —
     единственное, что разделяет ссылки, когда `gap` обнулён. */
  .top .sitenav a { white-space: nowrap; font-size: 14.5px;
                    padding: 4px 12px 4px 0; }
}