/* PLANARI KIT — приведение рабочих экранов к брендбуку (20.08.2026).

   Зачем: аудит показал, что кабинет, вход, редактор, анкета, обмер и витрина сделаны каждый
   по-своему — пять оттенков «почти чёрного», три шрифта заголовков, радиусы 8/9/10/11/20/26/50%,
   высоты кнопок от 27 до 52 px. При этом на сервере уже лежит единая дизайн-система
   /brand/planari-theme.css, но рабочие страницы её не подключали.

   Главная находка: заголовки задавались шрифтом Archivo, у которого НЕТ кириллицы (в fonts.css
   только latin/latin-ext/vietnamese). То есть русские заголовки везде рисовались системным
   фолбэком — фирменного начертания на рабочих экранах не было вообще.

   Этот файл подключается ПОСЛЕ собственных стилей страницы и приводит к общему знаменателю
   только то, что видно и не ломает раскладку: семейство шрифтов, роли цветов у кнопок,
   радиусы и высоту цели нажатия. Размеры блоков, сетки и поведение страниц не трогаются. */

@import url("/brand/planari-theme.css");

/* Рабочие экраны тёмные ВСЕГДА. Дизайн-система по умолчанию следует системной схеме, и на
   светлой системе кабинет получал светлый фон при тёмных карточках — текст сливался с плашками.
   Поэтому тёмные токены закрепляем явно. */
:root, :root:not([data-theme]), :root[data-theme="dark"] {
  --bg: #0b0c10; --bg-2: #101218; --surface: #16181f; --surface-2: #1d2129;
  --line: #272b34; --line-2: #343a45;
  --text: #f1efe9; --text-2: #c5c8d0; --muted: #9298a6;
  --accent: #3fc8d4; --accent-weak: #13312f; --accent-ink: #062227;
  --cta-ink: #08252b;
  color-scheme: dark;
}

body { font-family: var(--font-body); }
h1, h2, h3, .sec h2, .card h3 { font-family: var(--font-display); }

/* Кнопки: одна форма и три роли — первичная (бренд-градиент), обычная, тихая */
.btn, button.btn, a.btn, .pl-btn {
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}
.btn.p, .btn.primary, .pl-btn--primary {
  background: var(--grad);
  color: var(--cta-ink);
  border: none;
  font-weight: 800;
}
.btn.p:hover, .pl-btn--primary:hover { filter: brightness(1.06); }

/* Цель нажатия: 40 px мышью, 44 пальцем — «Ководство» и закон Фиттса */
.cta .btn, .top .btn, .modesw button { min-height: 40px; }
@media (max-width: 560px) {
  .cta .btn, .top .btn, .modesw button { min-height: 44px; }
}


/* ---- Контраст: пары, не дотягивавшие до нормы (замер 20.08.2026) ---- */

/* Вход через соцсети: фирменный синий слишком светлый под белым текстом */
a.btn.vk, a.btn.mail { background: #0056cc; }

/* Акцентные кнопки действий: белый текст на #178a7a давал 4.24 */
#plBudgetGo, #plfb-btn { background: #0f6b5f; }

/* Светлая бирюза — фон для ТЁМНОГО текста, белый на ней читается плохо */
a.dl { color: var(--accent-ink); }

/* Кнопка проверки участка: коричневый текст на синем не читался */
#plLandBtn { color: #fff; }

/* Подписи групп инструментов: 8 px и приглушённый цвет — на грани различимости */
.tools .tcap { font-size: 9px; color: var(--text-2); }

/* Заглушки и приглушённые подписи — единым тоном, который проходит норму на тёмном фоне */
.prev span, .empty, .dt { color: var(--muted); }

/* Значок VK: фирменный синий на белом кружке давал 4.13 */
a.btn.vk .ic { color: #0056cc; }


/* ================= МОБИЛЬНЫЙ СЛОЙ (аудит 22.08.2026) =================
   Телефон держат в руке и тыкают пальцем: цель — 44 px, поле — кегль 16 px
   (меньше — iOS зумит страницу при фокусе и ломает вёрстку). */
@media (max-width: 640px) {

  /* Поля ввода: не даём браузеру зумить и делаем их достаточной высоты */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select, textarea {
    font-size: 16px;
    min-height: 44px;
  }

  /* Галочки и переключатели: 13×13 — мимо пальца */
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }

  /* Действия: одна цель нажатия для всего интерфейса */
  .btn, button.btn, a.btn, .plb-btn, .fold, .go, #cookieok,
  .cnt button, .modesw button, .cta .btn, .top .btn {
    min-height: 44px;
  }
  .cnt button { min-width: 44px; }
  .fold { padding: 0 14px; }

  /* Знак Планари — тоже ссылка, её жмут */
  a.plhome { min-height: 44px; display: inline-flex; align-items: center; }

  /* Подписи, которые на телефоне переставали читаться */
  .tools .tcap { font-size: 10px; }
}

@media (max-width: 640px) {
  /* ширина цели: иконочные кнопки были 39-40 px по горизонтали при высоте 44 */
  .top .btn, .plb-btn, .crumb a { min-width: 44px; }
  .crumb a, summary { min-height: 44px; display: inline-flex; align-items: center; }
  /* вкладки папок не помещались в строку и последняя уезжала за край */
  .folders { flex-wrap: wrap; }
  /* поле выбора файла и кнопка звука — тоже цели нажатия */
  input[type=file], #plvb { min-height: 44px; }
}

@media (max-width: 640px) {
  /* второстепенные подписи: 11.5-12.5 px в руке уже не читаются */
  .hint, .dt, .note, .empty, small, figcaption, .balsub, .balnote, .freeit span { font-size: 13px; }

  /* намёк на прокрутку: лента инструментов вдвое шире экрана, но выглядит как обрезанная */
  .tools {
    background-image: linear-gradient(to left, rgba(63,200,212,.16), rgba(63,200,212,0) 42px);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 42px 100%;
  }
}

@media (max-width: 640px) {
  /* добор целей и кегля: правила ниже специфичнее локальных, иначе страница их перебивает */
  a.plhome, #copilotbar .btn, .top .btn { min-width: 44px; }
  .top .btn { font-size: 13px; }
  #tools .tcap { font-size: 10px; }
  .card .dt, .cb .dt, .prev span { font-size: 13px; }
  /* текстовые ссылки, которые работают как действия (регистрация, документы, политика) */
  #switch a, .foot a, .cnt a, #cookieb a, .lead a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 640px) {
  /* пояснения вариантов в анкете: 11.5-12 px читаются со стола, но не в руке */
  .opt span, .opt em, .why, #plvidmount div, label span span { font-size: 13px; line-height: 1.4; }
}

@media (max-width: 640px) {
  /* подписи галочек: правило страницы задано классом, поэтому повторяем его специфичность */
  .chk span { font-size: 13px; line-height: 1.4; }
}

@media (max-width: 640px) {
  /* остаток мелкого текста анкеты: пояснения счётчиков, подписи ограничений, подпись под видео */
  .cnt small, .pl-lim, #plvidmount div { font-size: 13px; line-height: 1.4; }
}

@media (max-width: 640px) {
  /* подписи стилей дома под картинками — это выбор, а не украшение: 12 px мало */
  .styles figcaption, figure figcaption { font-size: 13px; }
}