/* ============================================================
   Фирменный слой поверх main.css.

   Сюда попадает только то, что НЕ выражается дизайн-токенами: логотип бренда,
   компактная шапка на телефоне, подвал и выравнивание внутренних страниц под
   стиль главной. Отступы и цвета — из tokens.css; собственные числа здесь —
   размеры знака логотипа, минимумы колонок в сетках кабинета и полупрозрачная
   белая линия подвала (токена белого с альфой в проекте нет).

   Файл заведён отдельно, потому что main.css в момент правки вёл
   параллельный чат. Когда он освободится, содержимое стоит перенести
   в main.css и убрать это подключение.
   ============================================================ */

/* --- Логотип: знак из бренд-пака + словесная часть текстом --- */
.logo__mark {
  height: 26px;
  width: auto;
  flex: none;
}
.logo__word {
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-h);
  color: var(--c-ink);
}
/* «.ai» — фирменным градиентом. Прозрачная заливка ТОЛЬКО под @supports (как в main.css:276):
   безусловный `-webkit-text-fill-color: transparent` перекрывает color даже там, где
   background-clip не работает (высокая контрастность, печать без фонов) — и «.ai» исчезает. */
.logo__ai { color: var(--c-brand-ink); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .logo__ai {
    background: var(--c-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
@media (forced-colors: active) {
  .logo__ai { background: none; -webkit-text-fill-color: currentColor; color: currentColor; }
}

@media (min-width: 768px) {
  .logo__mark { height: 32px; }
}

/* --- Шапка на узком экране ---
   Правила живут здесь, а не в main.css: тот файл ведёт параллельная задача.
   Проблема: логотип, «Войти» и «Зарегистрироваться» не помещались в 320–390 px —
   надписи налезали друг на друга, страница уезжала вбок. */
/* Шапка обязана переживать любой размер шрифта и длину подписей: если содержимое
   не помещается в строку, навигация переносится на вторую, а не выталкивает страницу
   вбок. Пиксельные пороги этого не гарантируют — текст масштабируется пользователем. */
.site-header__inner { flex-wrap: wrap; row-gap: var(--sp-2); }
/* Перенос нужен и ВНУТРИ навигации: иначе пара «Войти + Регистрация» остаётся одной
   неразрывной строкой и на 320 px с крупным шрифтом выталкивает страницу вбок. */
.site-nav { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.logo { min-width: 0; }

/* Базовое (десктопное) состояние подписей — ОБЯЗАТЕЛЬНО выше мобильного медиазапроса:
   специфичность у них одинаковая, и правило, стоящее ниже, побеждает. */
.navlink__short, .navlink__ico { display: none; }
.navlink--login { display: inline-flex; align-items: center; }

@media (max-width: 767px) {
  .site-header__inner { gap: var(--sp-2); }
  .logo__word { font-size: 1rem; }        /* словесная часть логотипа компактнее */
  .logo__mark { height: 22px; }
  .site-nav { gap: var(--sp-1); flex-shrink: 0; }
  .site-nav .navlink {
    padding: var(--sp-2);
    font-size: var(--fs-sm);
    white-space: nowrap;                  /* подпись не переносится по слогам */
  }
  /* На телефоне — короткая подпись у регистрации и иконка вместо слова «Войти» */
  .navlink__full { display: none; }
  .navlink__short { display: inline; }
  .navlink__ico { display: block; }
}

/* Кнопку регистрации НЕ прячем ни на одной ширине: это главное действие для нового
   посетителя, а перенос строки (flex-wrap выше) уже снимает проблему нехватки места.
   Любой порог скрытия — хоть в px, хоть в em — при крупном шрифте убирал её там,
   где короткая подпись прекрасно помещалась. */

/* Длинные слова не должны выталкивать страницу за экран (заголовок «конфиденциальности»
   на 320 px, названия тем в каталоге при крупном шрифте). Свойство наследуемое —
   одного правила на body хватает вместо перечисления тегов. */
body { overflow-wrap: break-word; }

/* --- Лид-абзац вне первого экрана ---
   `.hero__lead` из main.css центрируется на десктопе (правило hero старого макета).
   На страницах работы и темы этот же класс используется как вводный абзац под
   ЛЕВЫМ заголовком — центрирование там читается как сломанная вёрстка: заголовок
   у левого края, текст висит посередине с пустым полем. Внутри .hero поведение
   не меняем: там центрирование осмысленно (лендинги). */
.section .hero__lead {
  margin-left: 0;
  margin-right: 0;
  max-width: 70ch;          /* мера строки: без неё абзац растягивался бы на 1168 px */
}

/* --- Заголовки-ссылки в списках (каталог работ, блог) ---
   На главной карточка выглядит так: тёмный заголовок, подчёркивание и брендовый цвет
   появляются на наведении. В main.css заголовки списков наследуют общий стиль ссылок,
   и страница каталога превращалась в «стену синих подчёркнутых строк». Приводим к
   одному виду с главной. */
.order-card h2 a, .order-card h3 a,
.panel h2 a, .panel h3 a {
  color: var(--c-ink);
  text-decoration: none;
}
.order-card h2 a:hover, .order-card h3 a:hover,
.panel h2 a:hover, .panel h3 a:hover {
  color: var(--c-brand);      /* тот же ховер, что у карточек главной (home.css) */
  text-decoration: underline;
}

/* --- Личный кабинет на телефоне ---
   Меню кабинета задумано как горизонтальная прокрутка (`overflow-x: auto` в main.css),
   но у grid-элемента нет `min-width: 0`, поэтому вместо прокрутки контейнер растягивался
   по содержимому: страница уезжала вбок на ~340–400 px на всех страницах кабинета. */
.cabinet__aside, .cabinet__nav, .cabinet__me { min-width: 0; max-width: 100%; }
/* Та же причина у основной колонки: grid-элемент по умолчанию не сжимается меньше
   своего содержимого, и на планшете колонка вылезала за сетку 240px + 1fr. */
.cabinet__main { min-width: 0; }

/* Колонка кабинета уже страницы на ширину сайдбара (240 px + gap), поэтому сетки из
   main.css в неё не помещаются. Считаем по ДОСТУПНОЙ ширине, а не по ширине экрана:
   с порогом по вьюпорту раскладка чинилась только до 1023 px, а на 1024–1199 колонка
   оставалась такой же узкой и содержимое ломалось сильнее прежнего. */
@media (min-width: 768px) {
  .cabinet__main .type-picker { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); min-width: 0; }
  .cabinet__main .ladder { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* Разделы сайта в подвале — отдельной строкой над документами */
.site-footer .footer-nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* --- Карточка работы в каталоге и кабинете ---
   На 320 px заголовок и бейдж типа работы стояли в одной неразрывной строке и
   распирали карточку за край экрана. Правка здесь, а не в main.css: файл занят
   параллельной задачей. */
.order-card { min-width: 0; }
.order-card__top { flex-wrap: wrap; }
.order-card__top h2, .order-card__top h3 { min-width: 0; overflow-wrap: anywhere; }

/* Класс `footer-dim` пришёл на смену `.muted` в подвале: тот рассчитан на белый фон и
   давал ~2:1 на тёмной подложке. Своих правил классу не нужно — цвет и ссылки задаёт
   `.site-footer` (main.css). Оставлен как точка расширения. */