/* Страница «Команда» /team/ и /en/team/ (src/content/pages/<code>/team.html; замечание владельца 09.10 «визуал страницы
   слабенький»): стили только этой страницы, подключаются её front matter после site.css. Язык — гайда по вейджеру
   (wager-guide.css): шапка-панель --d8-panel с цифрой и лицами-маскотами справа (TeamBoard.astro), цветные плитки с иконками Lucide
   (ISC, public/assets/img/articles/wager/icons/LICENSE.txt), карточки людей с маскотами (TeamPeople.astro, Mascot.astro;
   маскоты page-mascot, MIT © Kamran Ahmed — public/assets/img/team/mascots/LICENSE.txt). Цвета — только токены
   tokens.css (плитки --d8-tile-*, панель --d8-panel) и белый/чёрный с прозрачностью; текст не мельче 12 px. */

/* ---------- тон человека (look.ts): свечение за маскотом в его карточке и в строке шапки ---------- */
.team-page [data-tone] { --tone-glow: var(--d8-tile-violet-glow); }
.team-page [data-tone="orange"] { --tone-glow: var(--d8-tile-orange-glow); }
.team-page [data-tone="blue"] { --tone-glow: var(--d8-tile-blue-glow); }
.team-page [data-tone="pink"] { --tone-glow: var(--d8-tile-pink-glow); }
.team-page [data-tone="green"] { --tone-glow: var(--d8-tile-green-glow); }
.team-page [data-tone="gold"] { --tone-glow: var(--d8-tile-gold-glow); }
.team-page [data-tone="sky"] { --tone-glow: var(--d8-tile-sky-glow); }
.team-page [data-tone="red"] { --tone-glow: var(--d8-tile-red-glow); }

/* ---------- плитки: иконка (--ti) и цвет (--tt, свечение --tg) задаёт data-icon, как в гайде ---------- */
.team-page [data-icon] { --tt: var(--d8-tile-violet); --tg: var(--d8-tile-violet-glow); }
.team-page [data-icon="crown"] { --ti: url(/assets/img/articles/wager/icons/crown.svg); --tt: var(--d8-tile-orange); --tg: var(--d8-tile-orange-glow); }
.team-page [data-icon="wallet"] { --ti: url(/assets/img/articles/wager/icons/wallet.svg); --tt: var(--d8-tile-blue); --tg: var(--d8-tile-blue-glow); }
.team-page [data-icon="gauge"] { --ti: url(/assets/img/articles/wager/icons/gauge.svg); }
.team-page [data-icon="percent"] { --ti: url(/assets/img/articles/wager/icons/percent.svg); --tt: var(--d8-tile-pink); --tg: var(--d8-tile-pink-glow); }
.team-page [data-icon="scale"] { --ti: url(/assets/img/articles/wager/icons/scale.svg); --tt: var(--d8-tile-green); --tg: var(--d8-tile-green-glow); }
.team-page [data-icon="users"] { --ti: url(/assets/img/articles/wager/icons/users.svg); }
.team-page [data-icon="shield-check"] { --ti: url(/assets/img/articles/wager/icons/shield-check.svg); --tt: var(--d8-tile-green); --tg: var(--d8-tile-green-glow); }
.ttile, .team-page h2[data-icon]::before {
  display: inline-block; flex: none; width: 44px; height: 44px; border-radius: 13px;
  background: var(--ti) center / 22px 22px no-repeat, var(--tt);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12), 0 8px 22px var(--tg);
}

/* заголовки разделов с плиткой */
.team-page h2[data-icon] { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.team-page h2[data-icon]::before { content: ""; }
@media (max-width: 640px) {
  .team-page h2[data-icon] { gap: 12px; }
  .team-page h2[data-icon]::before { width: 38px; height: 38px; border-radius: 11px; background-size: 19px 19px, auto; }
}

/* ---------- шапка: панель, текст слева, «кто что проверяет» справа ---------- */
.thero {
  position: relative; display: grid; gap: 24px; overflow: hidden;
  padding: clamp(18px, 4.4vw, 48px);
  border: 1px solid var(--d8-accent-line); border-radius: 26px;
  background: var(--d8-panel);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.08);
}
.thero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(70% 110% at 0% 0%, var(--d8-tile-pink-glow), transparent 60%),
    radial-gradient(60% 90% at 100% 100%, var(--d8-tile-blue-glow), transparent 60%);
}
.thero > * { position: relative; min-width: 0; }
.thero-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 14px;
  border: 1px solid var(--d8-accent-line); border-radius: 999px; background: var(--d8-accent-bg);
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--d8-lilac);
}
.thero-kicker::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--d8-gradient); }
.thero h1 { margin: 0 0 .4em; font-size: clamp(2rem, 4.2vw, 3.25rem); text-wrap: balance; }
.site-main .thero-lead { max-width: 54ch; margin: 0; font-size: clamp(1rem, 1.4vw, 1.1875rem); color: var(--d8-text-2); text-wrap: pretty; }
@media (max-width: 420px) {
  .thero .hero-actions .btn { flex: 1 1 auto; }
}
@media (min-width: 1000px) {
  .thero { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 44px; align-items: center; }
}

.tboard {
  padding: 18px; border: 1px solid var(--d8-line-3); border-radius: 20px;
  background: var(--d8-bg-glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--sh-1);
}
.tboard-stat { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0 4px 14px; border-bottom: 1px solid var(--d8-line-2); }
.tboard-stat b {
  font-family: var(--font-head); font-weight: 800; font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--d8-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tboard-stat span, .tboard-title { font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.35; color: var(--d8-text-3); }
.tboard-title { margin: 14px 4px 8px; }
.tboard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tboard-row {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 6px 10px 6px 6px;
  border: 1px solid transparent; border-radius: 14px;
  transition: background-color .16s ease, border-color .16s ease;
}
.tboard-row:hover { background: var(--d8-surface-4); border-color: var(--d8-line-2); }
.tboard-text { display: grid; min-width: 0; line-height: 1.35; }
.tboard-role { font-weight: 600; font-size: .9375rem; color: var(--d8-text-1); }
.tboard-name { font-size: .8125rem; color: var(--d8-lilac); }
/* лицо: маскот человека, обрезанный по плечи, на его свечении; пока лист не загрузился (и без скрипта) — инициалы */
.tboard-face {
  position: relative; flex: none; width: 56px; height: 56px; overflow: hidden;
  border: 1px solid var(--d8-line-3); border-radius: 16px;
  background: radial-gradient(circle 34px at 50% 62%, var(--tone-glow), transparent 80%), var(--d8-panel);
  transition: border-color .16s ease;
}
.tboard-row:hover .tboard-face, .tboard-row:focus-visible .tboard-face { border-color: var(--d8-accent-line); }
.tboard-face .mascot { --mascot-size: 80px; position: absolute; left: calc(50% - var(--mascot-size) / 2); bottom: -22px; }
.tboard-initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: .875rem; line-height: 1; color: var(--d8-lilac);
  transition: opacity .3s ease;
}
.mascot.is-ready + .tboard-initials { opacity: 0; }
@media (min-width: 620px) and (max-width: 999px) {
  .tboard-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* пятый (нечётный последний) — посередине под двумя колонками, а не один слева рядом с пустой клеткой */
  .tboard-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 2px); }
}
@media (max-width: 420px) {
  .tboard { padding: 12px; }
  .tboard-row { gap: 12px; padding: 5px 6px 5px 5px; }
}

/* вводный абзац под шапкой */
.site-main .team-intro { margin-top: clamp(28px, 5vw, 48px); }
.team-intro > p { font-size: 1.0625rem; color: var(--d8-text-2); }

/* ---------- карточки людей ---------- */
.tpeople { display: grid; gap: clamp(16px, 2vw, 24px); }
.tcard {
  position: relative; display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 330px; grid-template-areas: "stage main facts";
  gap: 24px 28px; align-items: start; padding: 24px;
  scroll-margin-top: calc(var(--header-h) + 16px);
  border: 1px solid var(--d8-line-3); border-radius: var(--r-lg);
  background: var(--d8-surface-card); box-shadow: var(--sh-1);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tcard:target, .tcard:focus-within { border-color: var(--d8-accent-line); }
.tcard:target { box-shadow: var(--sh-1), var(--glow); }

/* сцена маскота: портрет постоянного размера рядом с именем; маскот (бюст, тающий книзу) стоит на нижнем крае
   сцены — в ячейке листа под персонажем пятая часть пустоты, её срезает край; свечение — круг, не тянется */
.tcard-stage {
  grid-area: stage; align-self: start; position: relative; height: 224px;
  overflow: hidden; border: 1px solid var(--d8-line-2); border-radius: 20px;
  background: radial-gradient(circle 112px at 50% 62%, var(--tone-glow), transparent 75%), var(--d8-panel);
}
.tcard-stage .mascot {
  --mascot-size: 230px; position: absolute; left: calc(50% - var(--mascot-size) / 2); bottom: calc(var(--mascot-size) * -.2);
}
/* кнопка маскота шире сцены и уходит под её нижний край: рамку фокуса рисует сцена, а не обрезанная кнопка */
@supports selector(:has(a)) {
  .tcard-stage:has(.mascot-btn:focus-visible) { outline: 3px solid var(--d8-focus); outline-offset: 3px; }
  .tcard-stage .mascot-btn:focus-visible { outline: none; }
}
.tcard-initials {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-family: var(--font-head); font-weight: 800; font-size: .8125rem; line-height: 1; color: var(--d8-on-accent);
  background: var(--d8-gradient); box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

.tcard-main { grid-area: main; min-width: 0; }
.tcard-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.tcard-who { min-width: 0; }
.tcard h3 { margin: 0 0 6px; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.tcard .tcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .8125rem; line-height: 1.4; }
.tcard-title { color: var(--d8-text-2); }
.tcard-mail {
  padding: 2px 10px; border: 1px solid var(--d8-line-3); border-radius: 999px; background: var(--d8-surface-2);
  color: var(--d8-lilac); overflow-wrap: anywhere; cursor: text; -webkit-user-select: all; user-select: all;
}
.site-main .tcard-bio { max-width: 68ch; margin: 0; color: var(--d8-text-2); }
.tcard-bio + .tcard-bio { margin-top: .8em; }

.tcard-facts {
  grid-area: facts; display: grid; gap: 18px; padding: 16px;
  border: 1px solid var(--d8-line-2); border-radius: 16px; background: var(--d8-surface-2);
}
.site-main .tcard-list { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; max-width: none; margin: 0; }
.tcard-list > strong {
  flex: none; width: 100%; margin-bottom: 2px;
  font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.35; color: var(--d8-text-3);
}
.tchip {
  display: inline-flex; align-items: center; padding: 5px 11px;
  border: 1px solid var(--d8-line-3); border-radius: 999px; background: var(--d8-surface-3);
  font-size: .8125rem; line-height: 1.35; color: var(--d8-text-1);
}
.site-main .tcard-signs { flex-direction: column; flex-wrap: nowrap; gap: 7px; }
.tsign { position: relative; padding-left: 22px; font-size: .875rem; line-height: 1.45; color: var(--d8-text-2); }
.tsign::before { content: "✓"; position: absolute; left: 2px; top: 0; font-weight: 800; color: var(--d8-good); }
/* запятые и точка предложения реестра: их слышит читалка и берёт копирование, глазу хватает чипов */
.tsep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1099px) {
  .tcard { grid-template-columns: 180px minmax(0, 1fr); grid-template-areas: "stage main" "facts facts"; }
  .tcard-stage { height: 204px; }
  .tcard-stage .mascot { --mascot-size: 208px; }
  .tcard-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .tcard { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "main" "facts"; gap: 18px; padding: 14px; }
  .tcard-stage { height: 200px; }
  .tcard-stage .mascot { --mascot-size: 210px; }
  .tcard-facts { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .tcard-head { align-items: flex-start; }
}

/* таблица «кто отвечает»: карточка не прыгает при наведении — она не ссылка */
.team-page .card:has(> .table):hover { transform: none; }

/* мелкий шрифт в конце страницы */
.team-small { display: grid; gap: 6px; }
.site-main .team-small > .meta { margin: 0; }

/* ---------- маскоты (Mascot.astro, public/assets/js/mascot.js) ---------- */
.mascot { position: relative; display: inline-block; flex: none; width: var(--mascot-size, 140px); height: var(--mascot-size, 140px); }
.mascot-btn {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 28%;
  background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.mascot-btn[hidden] { display: none; }
.mascot-btn:focus-visible { outline: 3px solid var(--d8-focus); outline-offset: 4px; }
.mascot-squash { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 78%; opacity: 0; transition: opacity .3s ease; }
.mascot.is-ready .mascot-squash { opacity: 1; }
.mascot-layer { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 300% 300%; background-position: 50% 50%; }
.mascot-react { opacity: 0; }
.mascot.is-reacting .mascot-dir { opacity: 0; }
.mascot.is-reacting .mascot-react { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mascot-squash, .tboard-row, .tboard-face, .tboard-initials, .tcard { transition: none; }
}