/* =============================================================================
   Витрина Adminz Connector — по дизайн-системе (docs/47-design-system.md).

   ЭТО ВТОРАЯ СИСТЕМА, И ТАК РЕШЕНО. Опубликованные сайт и пульт Dialer
   остаются на старой: янтарь, Onest, скругления 8–12. Перекраска отложена
   владельцем до первых продаж, Connector — образец, по которому остальные
   мигрируют, когда решат. Расхождение здесь осознанное; не «приводите
   к одному виду», а спрашивайте владельца.

   Поэтому файл свой, а не `site/site.css`: у витрины Dialer другой набор,
   и подключать его сюда значило бы получить янтарную кнопку в кобальтовой
   системе.

   ДВА СЛОЯ ТОКЕНОВ (раздел 11). Примитивы описывают краску, семантика —
   работу. Правила ниже обращаются ТОЛЬКО к семантике: перекраска тогда
   меняет верхний блок, а не двести мест.

   Тема одна, светлая, и это выбор: система требует тёмную для звонилки
   и админки, где сидят часами, а не для витрины. Придумывать тёмный набор
   за дизайнера мы не станем.
   ========================================================================== */

@import url('./tokens.css');

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font: 400 17px/27px var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 var(--space-6); }

/* ---------------------------------------------------------------------------
   Типографика (раздел 4). Веса три: 400, 500, 600 — больше не нужно.
   Регистр обычный везде: капитель разваливает кириллические слова, и вёрстка
   получает случайный «технологичный» акцент, которого никто не заказывал.
   ------------------------------------------------------------------------ */
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: 40px; line-height: 46px; letter-spacing: -.015em; }
h2 { font-size: 28px; line-height: 34px; letter-spacing: -.01em; }
h3 { font-size: 16px; line-height: 24px; }
p  { margin: 0; }

.label {
  font: 500 13px/18px var(--font-body);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.lede { font-size: 17px; line-height: 27px; color: var(--text-secondary); max-width: var(--measure); }
.note { font-size: 14px; line-height: 20px; color: var(--text-secondary); max-width: var(--measure); }
.caption { font-size: 12px; line-height: 16px; color: var(--text-secondary); }

.numeric, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

a { color: var(--text-link); text-underline-offset: 3px; }

/* Фокус виден всегда: кольцо 2 px кобальтом с отступом 2 px.
   `outline: none` без замены недопустим. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---------------------------------------------------------------------------
   Шапка
   ------------------------------------------------------------------------ */
.top {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  position: sticky; top: 0; z-index: 20;
}
.top__row { display: flex; align-items: center; gap: var(--space-6); min-height: 56px; }
.top__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }

.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: inherit; }
/* Знак плоский: декоративные градиенты система запрещает. */
.brand__mark {
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  background: var(--cobalt-500); position: relative; flex: none;
}
.brand__mark::after {
  content: ""; position: absolute; inset: 7px 6px;
  background: var(--neutral-0);
  box-shadow: 0 4px 0 var(--neutral-0);
}
.brand__name { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.brand__name b { font-weight: 600; }

.langs { display: flex; gap: var(--space-1); }
.langs a {
  padding: 6px 10px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 18px; color: var(--text-secondary); text-decoration: none;
}
.langs a:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.langs a[aria-current="true"] { background: var(--bg-selected); color: var(--text-link); font-weight: 500; }
.langs__code { display: none; }

/* ---------------------------------------------------------------------------
   Кнопки (раздел 6). Заливка — у одного главного действия на экране,
   всё остальное контурное.
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface); color: var(--text-primary);
  font: 500 14px/20px var(--font-body); text-decoration: none;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--bg-surface-hover); }
.btn--primary {
  background: var(--action-primary-bg); border-color: var(--action-primary-bg);
  color: var(--action-primary-fg);
}
.btn--primary:hover { background: var(--action-primary-bg-hover); border-color: var(--action-primary-bg-hover); }
.btn--sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; }

/* ---------------------------------------------------------------------------
   Секции. Границы, а не тени: тень означает, что элемент физически лежит
   поверх остального. На витрине такого элемента нет ни одного.
   ------------------------------------------------------------------------ */
.band { padding: var(--band) 0; border-bottom: 1px solid var(--border-default); }
.band--surface { background: var(--bg-surface); }
.band > .wrap > * + * { margin-top: var(--space-6); }

.hero { padding: calc(var(--band) * .9) 0 var(--band); background: var(--bg-surface); border-bottom: 1px solid var(--border-default); }
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--bg-selected); color: var(--text-link);
  font: 500 13px/18px var(--font-body);
}

/* ---------------------------------------------------------------------------
   Карточки и списки
   ------------------------------------------------------------------------ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: var(--space-4); }
.card {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: var(--space-6);
}
.band--surface .card { background: var(--bg-app); }
.card p { margin-top: var(--space-2); font-size: 14px; line-height: 20px; color: var(--text-secondary); }

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--measure); }
.list li { position: relative; padding-left: var(--space-6); font-size: 15px; line-height: 23px; color: var(--text-secondary); }
.list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: var(--space-3); height: 1px; background: var(--border-strong);
}

/* ---------------------------------------------------------------------------
   Таблица. Шапка без верхнего регистра, зебры нет — строки разделяет
   граница. Столбец «что сделано у нас» выделен как выбранная строка:
   кобальтовым фоном, а не вторым акцентом.
   ------------------------------------------------------------------------ */
.table {
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.table table { border-collapse: collapse; width: 100%; min-width: 620px; }
.table th, .table td {
  text-align: left; padding: var(--space-3) var(--space-4);
  font-size: 14px; line-height: 20px; vertical-align: top;
  border-bottom: 1px solid var(--border-default);
}
.table thead th { font: 500 13px/18px var(--font-body); color: var(--text-secondary); background: var(--neutral-25); }
.table tbody th { font-weight: 400; color: var(--text-primary); width: 42%; }
.table tbody td { color: var(--text-secondary); }
.table .pick { background: var(--bg-selected); color: var(--text-primary); }
.table thead .pick { color: var(--text-link); font-weight: 500; background: var(--bg-selected-hi); }
.table tr:last-child th, .table tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------------------
   Схема: что где стоит. Не снимок продукта — продукт ещё не звонил,
   а нарисованный снимок работающей системы был бы обещанием.
   ------------------------------------------------------------------------ */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.flow__box {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface); padding: var(--space-4) var(--space-6);
  font-size: 14px; line-height: 20px; color: var(--text-secondary);
}
.flow__box b { display: block; font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-1); }
.flow__box--us { border-color: var(--border-selected); background: var(--bg-selected); }

/* ---------------------------------------------------------------------------
   Что готово, а что нет. Цвет здесь не единственный носитель смысла:
   у каждой стороны своя подпись и свой знак — это про дальтонизм и про
   то, что на страницу смотрят боковым зрением.
   ------------------------------------------------------------------------ */
.state { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.state__col {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface); padding: var(--space-6);
}
.state__col h3 { display: flex; align-items: center; gap: var(--space-2); }
.state__col ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.state__col li { position: relative; padding-left: var(--space-6); font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.state__col li::before { position: absolute; left: 0; font: 500 13px/20px var(--font-mono); }
.state--ready li::before { content: "✓"; color: var(--status-live); }
.state--wait  li::before { content: "→"; color: var(--text-disabled); }

.dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex: none; }
.dot--live { background: var(--status-live); }
.dot--off  { background: var(--status-off); }

.badge-state {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-xs);
  font: 500 12px/16px var(--font-body);
}
.badge-state--ready { background: var(--status-live-bg); color: var(--status-live); }
.badge-state--wait  { background: var(--status-off-bg); color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
   Цена и контакты
   ------------------------------------------------------------------------ */
.price { display: flex; align-items: baseline; gap: var(--space-2); }
.price b { font: 600 28px/34px var(--font-mono); font-variant-numeric: tabular-nums; }
.price span { font-size: 14px; color: var(--text-secondary); }

.contacts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); font: 500 15px/23px var(--font-mono); }

/* ---------------------------------------------------------------------------
   Подвал
   ------------------------------------------------------------------------ */
.foot { padding: var(--space-12) 0; background: var(--bg-app); font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.foot__row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-8); }
.foot p { margin-top: var(--space-3); max-width: 46ch; }
.foot a { display: block; color: var(--text-secondary); text-decoration: none; margin-bottom: var(--space-2); }
.foot a:hover { color: var(--text-link); }
.langs--foot { flex-direction: column; align-items: flex-start; gap: 0; }
.langs--foot a { padding-left: 0; padding-right: 0; }
.langs--foot a[aria-current="true"] { background: none; }

/* ---------------------------------------------------------------------------
   Узкий экран
   ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  :root { --band: 56px; }
  h1 { font-size: 30px; line-height: 36px; }
  h2 { font-size: 22px; line-height: 28px; }
  body { font-size: 16px; line-height: 25px; }
  .langs__full { display: none; }
  .langs__code { display: inline; }
  .foot__row { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Движение отвечает на действие человека и длится меньше 200 мс.
   Тому, кто просил не двигать, не двигаем ничего. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}