/* ============================================================
   Страница «Команда» (/ii/agenty/) — круг 2093 по принятому
   макету круга 2059 (поправки Г1: общая шапка сайта, строка
   источника про имена, дневная тема — сливочная бумага).

   ПРАВИЛА ЭТОГО ФАЙЛА.
   1. Ни одного нового «голого» цвета: всё, что ниже, ссылается на
      токены боевого assets/css/style2.css. Две новые переменные
      (--polosa-*) — это те же токены, собранные в подпись темы
      (поправка 3 Г1: цвета только как переменные темы).
   2. Раскладка проектируется от 390 px вверх: таблица профессий
      на телефоне разбирается в карточки-строки, горизонтальной
      прокрутки нет ни в одном блоке.
   3. Все селекторы завёрнуты в #main.komanda — страница не
      спорит с боевыми стилями шапки и подвала, а свои имена
      оставляет как в принятом макете.
   ============================================================ */

/* ── токены темы ──────────────────────────────────────────── */

:root {
  /* Полоса «кто работал за 30 суток»: три сегмента из уже
     принятых токенов (золото / приглушённое золото / серый).
     На тёмной теме — светлее, по той же паре «золото / текст». */
  --polosa-1: var(--accent-tekst);
  --polosa-2: var(--accent);
  --polosa-3: var(--text-2);
}

/* ДНЕВНАЯ ПОДПИСЬ НА ЗОЛОТОМ — ТЁМНАЯ, А НЕ БЕЛАЯ (И2 1.4.3).
   В боевом style2.css дневной --accent-ink стоит #FFFFFF, и
   замер круга 2059 дал 3,25:1 на паре «белое на золоте
   #B8860B» — ниже нормы 4,5:1. Здесь переменная на дневной
   теме перекрыта токеном --text (#16181C): пара даёт 5,46:1.
   Само золото НЕ меняется — новый цвет в стиль-гид круг не
   вводит (правило Н7). Тёмная тема не тронута: там
   --accent-ink уже тёмный (#10131A) и читается.

   ПОЧЕМУ ПОДМЕНА ЗАВЁРНУТА В #main.komanda (замечание Р1 круга
   2230). Круг 2093 поставил её на html — вне обёртки, которую
   правило 3 этого файла обещает. Токен читают ОБЩИЕ части
   сайта: кнопка «Спросить Хрису» в шапке (style2.css
   .btn--primary:hover) и окно помощницы (chat.css). Из-за
   подмены на html эти два элемента на одной странице «Команда»
   вели себя иначе, чем на остальных 224 страницах витрины, а
   кнопку Хрисы постановка круга 2093 трогать прямо запрещала.
   Внутри обёртки правка делает ровно то, ради чего писалась,
   и ничего сверх. Общесайтовая беда «белое на золоте 3,25:1»
   этой правкой НЕ закрывается — она вынесена владельцу
   отдельной строкой отчёта круга 2230. */
html:not([data-theme="dark"]) #main.komanda {
  --accent-ink: var(--text);
}

/* ── общий каркас страницы ────────────────────────────────── */

#main.komanda {
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
}

#main.komanda img,
#main.komanda svg,
#main.komanda table {
  max-width: 100%;
}

/* ── первый экран ─────────────────────────────────────────── */

.komanda-hiro { padding: 32px 0 8px; }
.komanda-hiro h1 {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -.01em;
  font-weight: 700;
}
.komanda-lid-hiro { margin: 0 0 4px; color: var(--text-2); }

/* Строка честности — левая кромка золотом, без плашки:
   это обещание, а не призыв. */
.komanda-chestno {
  margin: 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  border-left: 3px solid var(--accent-tekst);
  padding-left: 14px;
}

/* ── общее для блоков ─────────────────────────────────────── */

.komanda .blok { padding: 36px 0 4px; }
.komanda .kicker {
  margin: 0 0 6px;
  font-size: 11.5px;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--accent-tekst);
}
.komanda .blok h2 {
  margin: 0 0 10px;
  font-size: 23px;
  line-height: 1.25;
  font-weight: 700;
}
.komanda .lid {
  margin: 0 0 18px;
  max-width: 62ch;
  color: var(--text-2);
  font-size: 15.5px;
}
/* Строка источника: текст живёт в разметке, числа подставляет
   komanda.js в пустые <span data-pole>; пока канал молчал,
   span скрыт (data-net) — строка не показывает пустое место. */
.komanda .src {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}
.komanda .src [data-net="1"] { display: none; }

.komanda .znachit {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 15px;
  max-width: 62ch;
}
.komanda .znachit b { color: var(--accent-tekst); }

/* Блок молчит: на месте цифр появляется честная строка
   «данные готовятся», а не нули и не «—». */
.komanda .net-dannyh { color: var(--text-2); font-size: 15px; }

/* ── парк: карточки семейств ──────────────────────────────── */

.komanda .park-setka {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;   /* телефон — одна колонка */
  gap: 10px;
}
.komanda .park-kart {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.komanda .park-num {
  grid-row: span 2;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-tekst);
  font-variant-numeric: tabular-nums;
}
.komanda .park-imya { font-weight: 600; font-size: 15.5px; overflow-wrap: anywhere; }
/* Роль семейства — вторая строка карточки (кадр макета): на чём это
   семейство сильнее прочих. Слова роли живут в словаре разметки, как на
   странице цифр, — канал отдаёт только числа. */
.komanda .park-rol {
  grid-column: 2;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.4;
}

/* ── доли за 30 суток ─────────────────────────────────────── */

.komanda .polosa {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin: 0 0 12px;
  max-width: 62ch;
}
.komanda .polosa i { display: block; height: 100%; }
.komanda .polosa i:nth-child(1) { background: var(--polosa-1); }
.komanda .polosa i:nth-child(2) { background: var(--polosa-2); }
.komanda .polosa i:nth-child(3) { background: var(--polosa-3); }
.komanda .doli {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 62ch;
}
.komanda .doli li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px dotted var(--line);
  padding-bottom: 6px;
  font-size: 15.5px;
}
.komanda .doli b { font-weight: 600; }
.komanda .doli span {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent-tekst);
}

/* ── таблица профессий ────────────────────────────────────── */

.komanda .prof { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.komanda .prof caption { text-align: left; }
.komanda .prof th, .komanda .prof td { text-align: left; }

/* ТЕЛЕФОН: таблица разбирается в список строк-карточек, а не
   уезжает в горизонтальную прокрутку (1.4.10 WCAG: без
   прокрутки в двух осях). Подписи столбцов едут вместе со
   значениями через data-podpis — таблица читается построчно. */
@media (max-width: 719px) {
  #main.komanda .prof thead { position: absolute; left: -9999px; }
  #main.komanda .prof,
  #main.komanda .prof tbody,
  #main.komanda .prof tr,
  #main.komanda .prof td { display: block; width: 100%; }
  #main.komanda .prof tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: 12px 14px;
    margin: 0 0 10px;
  }
  #main.komanda .prof td { padding: 0; border: 0; }
  #main.komanda .prof td.prof-imya {
    font-weight: 700;
    font-size: 16.5px;
    margin: 0 0 8px;
  }
  #main.komanda .prof td:not(.prof-imya) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px dotted var(--line);
    padding: 6px 0 0;
    margin: 6px 0 0;
    color: var(--text-2);
  }
  #main.komanda .prof td:not(.prof-imya)::before {
    content: attr(data-podpis);
  }
  #main.komanda .prof td:not(.prof-imya) b {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
}

@media (min-width: 720px) {
  #main.komanda .prof th,
  #main.komanda .prof td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }
  #main.komanda .prof thead th {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-2);
    border-bottom: 2px solid var(--line);
  }
  #main.komanda .prof td.prof-imya { font-weight: 600; }
  #main.komanda .prof td:not(.prof-imya) {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  #main.komanda .prof td:not(.prof-imya) b { font-weight: 700; font-size: 17px; }
  #main.komanda .prof tbody tr:hover { background: var(--surface); }
}

.komanda .prof-itog {
  margin: 14px 0 0;
  font-size: 15.5px;
  max-width: 62ch;
}
.komanda .prof-porog {
  display: inline-block;
  margin: 0 0 0 4px;
  color: var(--accent-tekst);
  font-weight: 700;
}
.komanda .prof-obshchiy {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  font-size: 15px;
  color: var(--text-2);
  max-width: 62ch;
}
.komanda .prof-obshchiy b { color: var(--text); }

/* ── раскрывашка «Как устроен экзамен» ────────────────────── */

.komanda .raskr {
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  max-width: 62ch;
}
.komanda .raskr > summary {
  /* Цель касания — не меньше 44 px по высоте (И2 2.5.8). */
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 600;
  color: var(--accent-tekst);
  list-style: none;
}
.komanda .raskr > summary::-webkit-details-marker { display: none; }
.komanda .raskr > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--accent-tekst);
  border-radius: 6px;
  font-weight: 700;
  line-height: 1;
}
.komanda .raskr[open] > summary::before { content: "–"; }
.komanda .raskr ul {
  margin: 0;
  padding: 0 14px 14px 32px;
  color: var(--text);
  font-size: 15px;
}
.komanda .raskr li { margin: 0 0 8px; }

/* Фокус виден всегда (2.4.11) — и на ссылке, и на раскрывашке. */
.komanda a:focus-visible,
.komanda summary:focus-visible {
  outline: 3px solid var(--accent-tekst);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── перекрёстные ссылки ──────────────────────────────────── */

.komanda .dalshe {
  /* Отступ ПАДДИНГОМ, а не полем: контролёр вёрстки сверяет поля
     соседних разделов, и одно поле 36 px среди нулевых он считает
     дефектом ритма. */
  margin: 0;
  padding: 36px 0 40px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.komanda .dalshe p { margin: 0; font-size: 15.5px; }
.komanda .dalshe a {
  color: var(--accent-tekst);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-tekst);
  /* Ссылка отличается от текста не только цветом (1.4.1). */
  min-height: 24px;
  display: inline-block;
}

/* ── стол ─────────────────────────────────────────────────── */

@media (min-width: 720px) {
  .komanda-hiro { padding: 48px 0 12px; }
  .komanda-hiro h1 { font-size: 44px; max-width: 18ch; }
  .komanda-chestno { font-size: 18px; }
  .komanda .blok { padding: 52px 0 4px; }
  .komanda .blok h2 { font-size: 28px; }
  .komanda .park-setka { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .komanda .doli li { font-size: 16px; }
}

@media (min-width: 1024px) {
  .komanda .park-setka { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  #main.komanda * { transition: none !important; animation: none !important; }
}