/* =============================================================
   cn.css — оболочка публичного сайта CHATONAUT: шапка, подвал,
   переключатель языков, кнопки.

   Тело страниц красит pchk.css (та же дизайн-система, что у ЭТОЧАТБОТ):
   она берёт акцент из --color-brand-700 и потому перекрашивается сама.
   Здесь только то, чего в pchk нет, — навигация издания.

   Канон, общий с pchk: НИКАКИХ градиентов; ховер не двигает элемент
   (прыгающая под курсором кнопка читается как сбой, а не как отклик).
   ============================================================= */

:root{
  --cn-ink:#22242B;
  --cn-ink-2:#5F6062;
  --cn-ink-3:#96969A;
  --cn-paper:#F4F3EF;
  --cn-line:#DAD8D1;
  --cn-line-soft:#E9E7E1;
  --cn-brand:var(--color-brand-700,#3A45D6);
  --cn-brand-hover:var(--color-brand-800,#2D37AE);
  --cn-brand-50:var(--color-brand-50,#EEF0FD);
}

/* ─── Кнопка ─────────────────────────────────────────────── */
.cn-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;background:var(--cn-brand);color:#fff;
  font-size:15px;font-weight:600;line-height:1;
  padding:13px 22px;border:0;cursor:pointer;
  transition:background .15s ease;
}
.cn-btn:hover{background:var(--cn-brand-hover);}
.cn-btn--sm{padding:9px 16px;font-size:14px;border-radius:10px;}
.cn-btn--ghost{background:transparent;color:var(--cn-ink);border:1px solid var(--cn-line);}
.cn-btn--ghost:hover{background:#fff;border-color:var(--cn-ink-3);}

/* ─── Шапка ──────────────────────────────────────────────── */
.cn-hdr{position:sticky;top:0;z-index:60;background:var(--cn-paper);border-bottom:1px solid var(--cn-line);}
.cn-hdr__in{
  max-width:1200px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px;
}
.cn-hdr__brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;}
.cn-hdr__brand img{width:32px;height:32px;display:block;}
.cn-hdr__brand span{font-size:16.5px;font-weight:700;letter-spacing:.08em;color:var(--cn-ink);}

.cn-hdr__nav{display:none;align-items:center;gap:22px;}
.cn-hdr__lnk{
  font-size:14.5px;font-weight:500;color:var(--cn-ink-2);text-decoration:none;
  transition:color .15s ease;white-space:nowrap;
}
.cn-hdr__lnk:hover,.cn-hdr__lnk.is-on{color:var(--cn-ink);}
.cn-hdr__side{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.cn-hdr__signin{display:none;}

/* Выпадающее «Channels» */
.cn-menu{position:relative;}
.cn-menu__btn{
  display:inline-flex;align-items:center;gap:5px;background:0;border:0;cursor:pointer;padding:0;
  font-size:14.5px;font-weight:500;color:var(--cn-ink-2);font-family:inherit;
  transition:color .15s ease;
}
.cn-menu__btn:hover,.cn-menu[data-open] .cn-menu__btn{color:var(--cn-ink);}
.cn-menu__btn svg{transition:transform .15s ease;}
.cn-menu[data-open] .cn-menu__btn svg{transform:rotate(180deg);}
.cn-menu__panel{
  position:absolute;top:calc(100% + 14px);left:-16px;width:330px;
  background:#fff;border:1px solid var(--cn-line);border-radius:16px;padding:8px;
  box-shadow:0 18px 40px -22px rgba(21,22,27,.35);
}
.cn-menu__panel a{
  display:block;padding:11px 12px;border-radius:11px;text-decoration:none;
  transition:background .12s ease;
}
.cn-menu__panel a:hover{background:var(--cn-paper);}
.cn-menu__t{display:block;font-size:14.5px;font-weight:600;color:var(--cn-ink);}
.cn-menu__d{display:block;margin-top:2px;font-size:13px;color:var(--cn-ink-3);line-height:1.35;}

/* Бургер (мобильный) */
.cn-hdr__burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:38px;padding:0 9px;border:1px solid var(--cn-line);border-radius:10px;
  background:#fff;cursor:pointer;
}
.cn-hdr__burger span{display:block;height:1.5px;background:var(--cn-ink);border-radius:2px;}
.cn-hdr__mob{
  border-top:1px solid var(--cn-line);background:var(--cn-paper);
  padding:8px 20px 16px;display:flex;flex-direction:column;
}
.cn-hdr__mob a{
  padding:11px 0;font-size:15.5px;font-weight:500;color:var(--cn-ink);text-decoration:none;
  border-bottom:1px solid var(--cn-line-soft);
}
.cn-hdr__mob a:last-child{border-bottom:0;}

/* ─── Подвал ─────────────────────────────────────────────── */
.cn-ftr{margin-top:clamp(56px,7vw,104px);border-top:1px solid var(--cn-line);background:var(--cn-paper);}

/* Юридическая полоса над футером (оговорка про знак Meta). Отдельная секция,
   а не абзац в контенте: у ЭТОЧАТБОТ та же сноска стоит ровно так же.
   Тон бумаги издания на белом подвале читается как самостоятельная полоса,
   линия сверху отделяет её от последнего экрана страницы. */
/* Полоса с оговоркой про знак Meta — САМОСТОЯТЕЛЬНАЯ секция над футером.
   Цвет взят из палитры Instagram, но ПЛОСКИМ тоном: фирменный градиент
   Instagram в интерфейс не пускаем (правило издания — ноль градиентов),
   а лиловый #833AB4 в сильном разбеле читается как «инстаграмная» полоса
   и не спорит с фиолетовым брендом Chatonaut. Текст по центру: это не абзац
   страницы, а подпись ко всему сайту, ей незачем цепляться за левый край. */
.cn-legal-note{background:#F7F2FA;border-top:1px solid #E6DAF0;padding:34px 0;}
.cn-legal-note__text{
  margin:0;
  text-align:center;
  font-size:15px;
  line-height:1.6;
  color:#4A3B57;              /* тёмный лиловый: контрастнее серого, но не чёрный */
  letter-spacing:.1px;
}
@media (max-width:640px){
  .cn-legal-note{padding:26px 0;}
  .cn-legal-note__text{font-size:14px;}
}
.cn-ftr__in{
  max-width:1200px;margin:0 auto;padding:clamp(36px,4vw,56px) 20px clamp(28px,3vw,40px);
  display:grid;gap:36px;
}
.cn-ftr__logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;}
.cn-ftr__logo img{width:26px;height:26px;display:block;}
.cn-ftr__logo span{font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--cn-ink);}
.cn-ftr__tag{margin:12px 0 16px;font-size:14px;line-height:1.5;color:var(--cn-ink-2);max-width:34ch;}
.cn-ftr__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;}
.cn-ftr__cols h3{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cn-ink-3);}
.cn-ftr__cols a{display:block;padding:5px 0;font-size:14px;color:var(--cn-ink-2);text-decoration:none;transition:color .15s ease;}
.cn-ftr__cols a:hover{color:var(--cn-ink);}
.cn-ftr__bot{
  border-top:1px solid var(--cn-line);
  max-width:1200px;margin:0 auto;padding:16px 20px 28px;
  display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--cn-ink-3);
}
.cn-ftr__note{max-width:60ch;}

/* ─── Раскладка пошире ───────────────────────────────────── */
@media (min-width:900px){
  .cn-hdr__nav{display:flex;}
  .cn-hdr__signin{display:inline;}
  .cn-hdr__burger{display:none;}
  .cn-hdr__mob{display:none !important;}
  .cn-ftr__in{grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:56px;}
  .cn-ftr__cols{grid-template-columns:repeat(4,minmax(0,1fr));}
  .cn-ftr__bot{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;}
}

/* ─── Значок внутри .pk-btn ──────────────────────────────────
   ЗАЧЕМ ЗДЕСЬ, А НЕ В pchk.css. Файл pchk.css общий с ЭТОЧАТБОТ, и правка в
   нём доехала бы до чужого издания. cn.css грузит только layout
   chatonaut_site — дальше издания она не уйдёт.

   ЧТО ЧИНИТ. Стрелку и знаки в кнопках печатают ОБЩИЕ помощники контентного
   слоя (cnb_arrow, реестр cnb_icon). Размер атрибутами они намеренно не
   задают: один и тот же знак стоит на странице в нескольких кеглях, и решать
   обязан CSS. Для .pk-link, .pk-eyebrow, .pk-faq-ic и .pk-card-ic правило у
   страниц есть, а для .pk-btn его не было нигде во всём издании — и <svg>
   оставался заменяемым элементом с дефолтом 300×150. Замерено в браузере:
   стрелка «Start for free» в финальном CTA — 97px на /, 158px на /pricing,
   97px на /about и 259px на /ai-agents (на /contacts своё правило на 16px,
   поэтому там было верно). Значение 16px взято оттуда же, чтобы кнопки
   издания не разъезжались.

   :not([width]) — страховка: правило не имеет права трогать знак, которому
   размер УЖЕ задан разметкой (у автора были причины). */
.pk-btn svg:not([width]){width:16px;height:16px;flex:none;}

/* ═══ ТЕЛО СТАТЬИ БЛОГА ═══════════════════════════════════════════════
   Шаблон views/chatonaut/blog/post.php печатает `body_html` внутри
   .cn-article. Правил под этот класс НЕ СУЩЕСТВОВАЛО — а Tailwind-reset
   обнуляет отступы и кегль у h2/h3/p/ul/table. В итоге шестьдесят статей
   выводились сплошной стеной: заголовок неотличим от абзаца, таблица без
   линеек, списки без маркеров. Читать это невозможно, и первым заметил
   владелец, а не я.

   ЗДЕСЬ, А НЕ В tw.css. Класса `prose` в собранном Tailwind нет вовсе, а
   добавлять плагин типографики ради одного шаблона — тащить зависимость и
   пересборку. cn.css грузится только layout'ом chatonaut_site, то есть
   правка не уйдёт ни к ЭТОЧАТБОТ, ни в кабинет.

   РИТМ. Кегль 18px/1.75 — длинный текст читают глазами, а не сканируют.
   Отступ СВЕРХУ у заголовка больше, чем снизу: так блок визуально
   принадлежит своему разделу, а не висит между двумя. */
.cn-article{font-size:18px;line-height:1.75;color:var(--cn-ink);}
.cn-article > *:first-child{margin-top:0;}
.cn-article > *:last-child{margin-bottom:0;}

.cn-article p{margin:0 0 1.15em;}

.cn-article h2{
  margin:2.2em 0 .7em;font-size:1.5em;line-height:1.25;
  font-weight:700;letter-spacing:-.015em;color:var(--cn-ink);
  /* text-wrap:balance — чтобы в заголовке не оставалось висячего слова. */
  text-wrap:balance;
}
.cn-article h3{
  margin:1.9em 0 .55em;font-size:1.2em;line-height:1.35;
  font-weight:600;color:var(--cn-ink);text-wrap:balance;
}

.cn-article ul,
.cn-article ol{margin:0 0 1.15em;padding-left:1.5em;}
.cn-article ul{list-style:disc;}
.cn-article ol{list-style:decimal;}
.cn-article li{margin:.4em 0;padding-left:.2em;}
.cn-article li::marker{color:var(--cn-ink-3);}
.cn-article li > ul,
.cn-article li > ol{margin:.4em 0 .2em;}

.cn-article a{
  color:var(--cn-brand);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--cn-brand) 35%,transparent);
}
.cn-article a:hover{text-decoration-color:currentColor;}

.cn-article strong{font-weight:600;color:var(--cn-ink);}

.cn-article blockquote{
  margin:1.6em 0;padding:.15em 0 .15em 1.15em;
  border-left:3px solid var(--cn-brand);
  color:var(--cn-ink-2);font-style:normal;
}
.cn-article blockquote p:last-child{margin-bottom:0;}

/* ТАБЛИЦА. Без линеек она читалась двумя параллельными столбцами текста —
   ровно то, что видно на скриншоте владельца. Прокрутка отдельным
   контейнером: на телефоне таблица из двух колонок с длинными фразами
   иначе распирает страницу вбок. */
.cn-article table{
  width:100%;margin:1.6em 0;border-collapse:collapse;
  font-size:.94em;line-height:1.6;
}
.cn-article thead th{
  text-align:left;font-weight:600;color:var(--cn-ink);
  background:var(--cn-line-soft);
  padding:.7em .9em;border-bottom:1px solid var(--cn-line);
}
.cn-article tbody td{
  padding:.7em .9em;vertical-align:top;
  border-bottom:1px solid var(--cn-line-soft);
}
.cn-article tbody tr:last-child td{border-bottom:0;}

.cn-article code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em;padding:.15em .38em;border-radius:5px;
  background:var(--cn-line-soft);color:var(--cn-ink);
}
.cn-article pre{
  margin:1.5em 0;padding:1.1em 1.2em;overflow-x:auto;
  border-radius:12px;background:var(--cn-ink);color:#F4F3EF;
  font-size:.88em;line-height:1.6;
}
.cn-article pre code{background:none;padding:0;color:inherit;}

.cn-article figure{margin:1.8em 0;}
.cn-article figure img{border-radius:12px;width:100%;height:auto;}
.cn-article figcaption{
  margin-top:.6em;font-size:.85em;color:var(--cn-ink-3);text-align:center;
}

.cn-article hr{margin:2.4em 0;border:0;border-top:1px solid var(--cn-line);}

/* Телефон: кегль чуть меньше, отступы у заголовков тоже — иначе на узком
   экране раздел начинается с полупустого экрана. */
@media (max-width:640px){
  .cn-article{font-size:17px;}
  .cn-article h2{margin-top:1.8em;font-size:1.38em;}
  .cn-article h3{margin-top:1.5em;}
  .cn-article table{font-size:.9em;}
}

/* Обёртка таблицы — ставит шаблон статьи (см. blog/post.php). Прокрутка
   живёт ЗДЕСЬ, а не на самой таблице: `display:block` на <table> убивает
   выравнивание колонок на широком экране. */
.cn-article .cn-tablewrap{margin:1.6em 0;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cn-article .cn-tablewrap > table{margin:0;min-width:min(100%,520px);}

/* ═══ ВРЕЗКА-ПРИЗЫВ В СТАТЬЕ ═══════════════════════════════════════════
   Ставит шаблон статьи перед первым разделом. Фон — фирменный индиго
   ПЛОСКОЙ ЗАЛИВКОЙ: градиенты в этом проекте запрещены отдельным правилом.

   Врезка намеренно шире колонки текста на 24px с каждой стороны: так она
   читается врезкой, а не абзацем в рамке, и глаз цепляется за неё при
   прокрутке. На узком экране вылет убираем — там он давал бы полосу
   прокрутки. */
.cn-article .cn-cta{
  margin:2.4em -24px;padding:28px 32px;border-radius:16px;
  background:var(--cn-brand);color:#fff;
}
.cn-article .cn-cta__t{
  margin:0 0 .35em;font-size:1.12em;line-height:1.35;font-weight:700;color:#fff;
}
.cn-article .cn-cta__d{
  margin:0 0 1.1em;font-size:.95em;line-height:1.6;color:rgba(255,255,255,.85);
}
.cn-article .cn-cta__b{
  display:inline-block;padding:11px 22px;border-radius:10px;
  background:#fff;color:var(--cn-brand);
  font-weight:600;font-size:.95em;line-height:1;text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease;
}
.cn-article .cn-cta__b:hover{
  text-decoration:none;transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
@media (max-width:720px){
  .cn-article .cn-cta{margin-left:0;margin-right:0;padding:24px;}
}