/* Общий оверрайд для всех разделов многостраничника «Биржа Кладовок».
   Подключается из reports/<раздел>/index.html, включая reports/kp/.
   Правки живут здесь, а не внутри страниц, чтобы пересборка выгрузок
   в SurgayGPT их не затирала.

   Файл перенесён с проекта DAGAMY (report-overrides.v3.css, 30.07.2026)
   без изменений правил: обе страницы порождены одним генератором SurgayGPT
   и используют одну систему токенов Tailwind. Там он закрывал две задачи:
   1. Светлая тема сливается, кнопки и табы не видны.
   2. Шрифт мелкий, увеличить в 1,2 раза (стандарт КП, пункт 16).
   Замер до правки на DAGAMY: приглушённый текст давал контраст 4.49 при
   норме AA 4.5, абзацы и табы отрисовывались 12px, у табов border-width
   был 0. Комментарии ниже сохранены как история решений.
*/

/* ------------------------------------------------------------------ */
/* 1. Масштаб 1,2. Tailwind считает размеры и отступы в rem, поэтому   */
/*    одна строка поднимает и текст, и ритм страницы пропорционально.  */
/* ------------------------------------------------------------------ */
html {
  font-size: 120%;
}

/* Широкие таблицы при 1,2 уезжают за экран. Даём им меньший шаг       */
/* и honest горизонтальный скролл внутри своего блока.                 */
[class*="overflow-x-"] {
  font-size: 0.917em; /* 1,2 x 0,917 даёт 1,1 от исходного */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* 2. Контраст приглушённого текста и границ                           */
/* ------------------------------------------------------------------ */
/* Этот файл подключается раньше inline-стилей страницы, поэтому по порядку
   каскада он проигрывает. Для кастомных свойств спасает !important.
   КП исключено через html:not([data-kp]): у него первый экран тёмный даже
   в светлой теме, и затемнение приглушённого текста там убило бы контраст.
   Замер до правки: 4.49 при норме AA 4.5. После: около 8.5. */
/* ВАЖНО: полотно и поверхность карточки задаются РАЗДЕЛЬНО по темам.
   Первая версия правки ставила --background и --card без такого разделения,
   из-за чего в тёмной теме полотно уезжало в серый, табы становились белыми
   при светлом тексте, и текст пропадал. */
html:not(.dark):not([data-kp]) {
  --muted-foreground: 215 30% 32% !important;
  --border: 214 22% 74% !important;
  /* Карточки не имели контура, потому что их фон совпадал с фоном страницы
     (обе были rgb(249,250,251)). Уводим полотно в серый, тогда белая
     карточка отделяется сама, а рамка и тень дают ей край. */
  --background: 214 20% 93% !important;
  --card: 0 0% 100% !important;
}

html.dark:not([data-kp]) {
  --muted-foreground: 215 22% 74% !important;
  --border: 215 16% 34% !important;
  /* Та же логика наоборот: полотно темнее, карточка светлее полотна. */
  --background: 222 30% 9% !important;
  --card: 222 22% 15% !important;
}

/* Акцентный синий имел светлоту 60%, поэтому белый текст на плашках
   bg-primary давал 3.19, а синий текст на светлом фоне 3.64. Опускаем
   светлоту: белое на нём становится около 5.5, синее на белом около 6.
   Применяется и к КП: градиентные слова первого экрана заданы своими
   цветами, переменную не используют. */
html:not(.dark):not([data-kp]) {
  --primary: 217 91% 40% !important;
}

/* КП исключено и здесь. У него первый экран тёмный, и на нём text-primary
   используется как цвет текста: затемнение акцента уронило контраст до 2.36
   (замерено). С исходным акцентом там 4.26, что читаемо.
   Тёмную тему тоже не трогаем: жалоба была про светлую, а в тёмной этот же
   акцент служит и цветом текста, и фоном плашек, любое смещение ломает
   одно из двух. */

/* ------------------------------------------------------------------ */
/* 3. Типографика                                                      */
/* ------------------------------------------------------------------ */
html,
body,
#root {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
[role="heading"] {
  font-weight: 700 !important;
}

p,
li,
td,
th,
blockquote,
.prose {
  font-weight: 400 !important;
}

.prose,
.prose p,
.prose li,
li {
  line-height: 1.58 !important;
}

/* Прежнее правило ловило только .prose p, поэтому обычные абзацы       */
/* оставались на Tailwind-классе text-xs, то есть 12px. Поднимаем пол   */
/* всем текстовым элементам.                                           */
p,
li,
td,
th,
.prose,
.prose p,
.prose li,
li .min-w-0.break-words {
  font-size: 0.9375rem !important; /* 15px до масштаба, 18px после */
}

/* Самые мелкие подписи задавались АБСОЛЮТНЫМИ значениями text-[10px] и
   text-[11px], поэтому масштаб в rem их не касался вообще. Поднимаем в
   полтора раза явными пикселями, тогда результат предсказуем. */
.text-xs,
.text-xs * {
  font-size: 18px !important; /* было 12px */
}

[class*="text-[11px]"],
[class*="text-[11px]"] * {
  font-size: 16.5px !important; /* было 11px */
}

[class*="text-[10px]"],
[class*="text-[10px]"] * {
  font-size: 15px !important; /* было 10px */
}

[class*="text-[13px]"],
[class*="text-[13px]"] * {
  font-size: 19.5px !important;
}

/* Полупрозрачный текст вида text-foreground/70 терял контраст. */
[class*="text-foreground/"] {
  color: hsl(var(--foreground)) !important;
}

:where(div, span, p, li, a, button)[class~="font-bold"] {
  font-weight: 600 !important;
}

:where(div, span, p, li, a, button)[class~="font-semibold"],
:where(div, span, p, li, a, button)[class~="font-medium"] {
  font-weight: 500 !important;
}

strong,
b {
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* 4. Табы локальной навигации. Были без рамки и без фона, поэтому     */
/*    читались как обычный текст, а не как кнопки.                     */
/* ------------------------------------------------------------------ */
[data-lpd-local-nav-trigger] {
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 41, 0.06);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

[data-lpd-local-nav-trigger]:hover {
  border-color: hsl(var(--primary)) !important;
  background: rgba(59, 130, 246, 0.08) !important;
}

[data-lpd-local-nav-trigger][aria-current="location"] {
  color: #10357f !important;
  background: rgba(59, 130, 246, 0.14) !important;
  border-color: rgba(59, 130, 246, 0.55) !important;
  box-shadow: inset 0 -2px 0 #3b82f6;
  font-weight: 600 !important;
}

html.dark [data-lpd-local-nav-trigger] {
  box-shadow: none;
}

html.dark [data-lpd-local-nav-trigger][aria-current="location"] {
  color: #dbeafe !important;
  background: rgba(96, 165, 250, 0.2) !important;
  border-color: rgba(96, 165, 250, 0.55) !important;
  box-shadow: inset 0 -2px 0 #60a5fa;
}

/* ------------------------------------------------------------------ */
/* 5. Аккордеоны, подсказки и прочий интерактив: должно быть видно,    */
/*    что на это можно нажать.                                         */
/* ------------------------------------------------------------------ */
button[aria-expanded]:hover {
  background: rgba(59, 130, 246, 0.06) !important;
}

button.cursor-help {
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
}

/* ------------------------------------------------------------------ */
/* 4b. Контур карточек. Жалоба «нету контура»: блоки сливались с полотном.
       Даём им белую поверхность, видимую рамку и мягкую тень, чтобы край
       читался без утяжеления. Скругление служит признаком карточки.       */
/* ------------------------------------------------------------------ */
html:not(.dark):not([data-kp]) [class*="rounded-xl"],
html:not(.dark):not([data-kp]) [class*="rounded-2xl"],
html:not(.dark):not([data-kp]) [class*="rounded-lg"] {
  border-color: hsl(214 22% 76%) !important;
}

html:not(.dark):not([data-kp]) [class*="rounded-xl"][class*="border"],
html:not(.dark):not([data-kp]) [class*="rounded-2xl"][class*="border"] {
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 41, 0.06), 0 10px 24px -16px rgba(15, 23, 41, 0.22) !important;
}

html.dark:not([data-kp]) [class*="rounded-xl"],
html.dark:not([data-kp]) [class*="rounded-2xl"],
html.dark:not([data-kp]) [class*="rounded-lg"] {
  border-color: hsl(215 16% 34%) !important;
}

html.dark:not([data-kp]) [class*="rounded-xl"][class*="border"],
html.dark:not([data-kp]) [class*="rounded-2xl"][class*="border"] {
  background-color: hsl(222 24% 14%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -16px rgba(0, 0, 0, 0.7) !important;
}

/* ------------------------------------------------------------------ */
/* 5b. Кнопка темы. В КП и в отчётах она выглядела по-разному, хотя    */
/*     атрибуты и вычисленные стили совпадали. Чтобы не гадать, какой  */
/*     обработчик её перекрашивает, задаём вид принудительно: светлая   */
/*     пилюля с солнцем в светлой теме, тёмная с луной в тёмной.        */
/*     Файл общий, поэтому все семь разделов выглядят одинаково.        */
/* ------------------------------------------------------------------ */
#lpd-page-theme-toggle {
  background-color: #ffffff !important;
  background-image: linear-gradient(145deg, #ffffff, #f3f7fb) !important;
  color: #1b2838 !important;
  border-color: rgba(96, 113, 134, 0.32) !important;
  /* blur выносил кнопку в отдельный слой композитинга, и фон не отрисовывался,
     хотя в вычисленных стилях стоял белым. На непрозрачной пилюле блюр
     ничего не даёт, поэтому снимаем. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: auto !important;
}

#lpd-page-theme-toggle [data-lpd-theme-icon] {
  background-image: linear-gradient(145deg, #ffd36a, #e79422) !important;
  color: #4b2c06 !important;
}

html.dark #lpd-page-theme-toggle {
  background-color: #1a2230 !important;
  background-image: linear-gradient(145deg, #232d3a, #161d27) !important;
  color: #f4f7fb !important;
  border-color: rgba(141, 160, 184, 0.32) !important;
}

html.dark #lpd-page-theme-toggle [data-lpd-theme-icon] {
  background-image: linear-gradient(145deg, #27456c, #152033) !important;
  color: #dceaff !important;
}

/* ------------------------------------------------------------------ */
/* 6. Доступность: видимый фокус с клавиатуры на всём интерактиве.     */
/* ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid #2563eb !important;
  outline-offset: 2px !important;
}

/* ------------------------------------------------------------------ */
/* 7. Ширина контента                                                  */
/* ------------------------------------------------------------------ */
.max-w-7xl {
  max-width: 96rem !important;
}

@media (min-width: 1536px) {
  .max-w-6xl {
    max-width: 88rem !important;
  }
}

/* На узком экране масштаб 1,2 сжимаем до 1,12, иначе строки рвутся.   */
@media (max-width: 640px) {
  html {
    font-size: 112%;
  }
}

/* Подписи внутри SVG-диаграмм были 11px. Они позиционированы координатами,
   поэтому поднимаем умеренно: при 16px соседние подписи начинают налезать. */
svg text {
  font-size: 14px !important;
}

/* Плашки bg-warning шли с белым текстом: белое на янтарном rgb(245,159,10)
   даёт 2.13. Это исходная палитра страницы, не наша правка. Меняем текст
   на тёмный, тогда контраст около 8. */
html:not([data-kp]) {
  --warning-foreground: 30 70% 12% !important;
}

/* ------------------------------------------------------------------ */
/* 8. Значение в карточке метрики                                      */
/* ------------------------------------------------------------------ */
/* Генератор набирает его классом text-2xl всегда, независимо от того, что
   внутри. Замер до правки: 28,8px при интерлиньяже 38,4px, и в «Анализе
   аудитории» значения занимали 8-13 строк, карточки вырастали до 584px,
   потому что в поле под число попадал целый абзац. Правка Дмитрия
   11.08.2026: высоту текста уменьшить, чтобы он выглядел соразмерно
   остальному тексту. Размер ставит сборка по длине содержимого, атрибутом
   data-metric, а класс text-2xl при этом снимается, чтобы не спорить
   с этими правилами по каскаду. */

[data-metric] {
  font-variant-numeric: tabular-nums;
}

/* Короткое число: остаётся акцентом карточки, но уже не кричит. */
[data-metric="s"] {
  font-size: 26px;
  line-height: 1.2;
}

/* Короткая фраза вида «оценочно: 12-45 тыс ₽». */
[data-metric="m"] {
  font-size: 20px;
  line-height: 1.32;
}

/* Абзац-пояснение: читается как обычный текст, только полужирным. */
[data-metric="l"] {
  font-size: 18px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  [data-metric="s"] { font-size: 23px }
  [data-metric="m"] { font-size: 19px }
  [data-metric="l"] { font-size: 17px }
}

/* ------------------------------------------------------------------ */
/* 10. Слайдер «Было и Станет»                                         */
/* ------------------------------------------------------------------ */
/* Жалоба Дмитрия 11.08.2026 со скриншотом с телефона: у макета нового
   первого экрана срезан весь текст слева, видна только правая часть
   с фотографией склада.

   Причина: обе картинки в слайдере это ДОКУМЕНТЫ, макет экрана и скриншот
   сайта, а генератор показывает их как фотографии, классом object-cover.
   Контейнер имеет соотношение 16/9, макет 3/2 (1536x1024), скриншот 16/10
   (1280x800). object-cover растягивает картинку до заполнения и срезает
   лишнее по краям, поэтому у макета уходил левый край, то есть заголовок,
   буллеты и кнопка. Чем уже экран, тем больше срезалось.

   Документ показывают целиком. Ставим контейнеру соотношение макета и
   вписываем картинки, а не кадрируем. */

[data-lpd-comparison] {
  aspect-ratio: 3 / 2 !important;
  background: hsl(var(--muted));
}

[data-lpd-comparison] img {
  object-fit: contain !important;
  object-position: center !important;
}

/* Ссылка «открыть крупно» под слайдером сравнения, её добавляет оболочка. */
.shell-zoom {
  margin: 10px 2px 0 !important;
  font-size: 16px !important;
  color: hsl(var(--muted-foreground)) !important;
}

.shell-zoom a {
  color: hsl(var(--primary)) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}