/* Character Widget — WowVendor DS (файл Shop/Components MI2pse3AB2kUEI5bXJ4GDR,
   нода-сет 11193:1391). Блок трекера персонажа: карточка на подложке gray-25 с
   рамкой information-50.

   ДВЕ ОСИ ИЗ FIGMA:
     Character added = True  — шапка персонажа, общий прогресс сезона, лента
                              карточек-статов (Raids / Mythic+ / PvP / Delves /
                              Season rankings);
     Character added = False — форма добавления персонажа (Region / Realm /
                              Character name + кнопка) и лента добавленных чипсов.
     Breakpoint = 1920-1280 / 1024 / 768 / 576 / 320 — ПЯТЬ нод, все пять сверены
     пиксельно, каждой соответствует класс-модификатор .cw--bp*.

   ПОЧЕМУ КЛАССЫ-ВАРИАНТЫ, А НЕ ТОЛЬКО @container: showcase-реплики снимаются в
   натуральную ширину ноды, а нода 1024 в макете шириной 952 (поля 36) — порог
   --bp-tlandscape (контейнер 960) от неё не срабатывает. Поэтому реплика жёстко
   выставляет флаги классом; живое демо переключается само, по @container.

   ЧИСЛА ТОЧЕК ПЕРЕЛОМА ЗДЕСЬ НЕ ЖИВУТ. Блок читает готовые флаги grid.css
   (--bp-mlandscape / --bp-tablet / --bp-tlandscape / --bp-desktop) и считает из
   них отступы и ширины арифметикой в calc() — так же, как это делает
   banner-feature. Переносы строк, где можно, отданы flex-wrap: он сам ломает
   раскладку в тех же местах, что и Figma (см. комментарии у --cw-meta-basis).

   Структурные px, которых нет в шкале токенов (габариты из ноды, как 56px
   аватара в blockquote): 44 — аватар, 20/16/12 — размеры иконок,
   159.4/149.6/160.6 — ширина карточки-стата на своей точке перелома,
   464/300 — пороги переноса строки внутри шапки и ряда прогресса. */

.cw {
  font-family: var(--font-family-base);
  /* Inter, ось opsz: браузер поджимает глифы на крупном кегле, Figma рисует с
     дефолтным opsz — гасим ось. Но на мелком кегле (12/14) эффект обратный:
     opsz:none там растягивает строку шире эталона, поэтому мелкой типографике
     ось возвращается. Порог виден по utility-классам, ими и разделено. */
  font-optical-sizing: none;
}
.cw .text-body-14,
.cw .text-body-14m,
.cw .text-body-12m,
.cw .text-display-12 { font-optical-sizing: auto; }

/* ── Карточка ───────────────────────────────────────────────────────────────
   Рамка — inset box-shadow, а не border: stroke в Figma лежит внутри и не
   раздвигает габарит (иначе весь контент уехал бы на 1px).
   ⚠ overflow НЕ клипаем (в ноде стоит overflow-clip): внутри карточки живут
   select и combobox, их меню абсолютно позиционировано и при overflow:hidden
   обрезалось нижним краем карточки — список региона/реалма было не выбрать.
   Ленты статов и чипсов от этого не растекаются: у них свой overflow-x:auto,
   а их бокс с учётом .bleed заканчивается ровно на краю карточки. */
.cw__card {
  /* padding: 20 → 32 с планшета (у пустого состояния — уже с 576, там своя нода) */
  --cw-pad: calc(var(--spacing-20) + var(--spacing-12) * var(--bp-tablet));
  --cw-gap: calc(var(--spacing-20) + var(--spacing-4) * var(--bp-tablet));

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--cw-gap);
  padding: var(--cw-pad);
  border-radius: var(--radius-12);
  background: var(--color-gray-25);
  box-shadow: inset 0 0 0 1px var(--color-information-50), var(--shadow-4);
}

.cw__card--empty {
  --cw-pad: calc(var(--spacing-20) + var(--spacing-12) * var(--bp-mlandscape));
  --cw-gap: var(--spacing-24);
}

/* Трек прогресса внутри виджета залит alpha-12, а не gray-50, как в самом
   компоненте, — локальный модификатор под префиксом блока. */
.cw .progress-bar__track { background: var(--color-alpha-dark-12); }

.cw__divider {
  align-self: stretch;
  height: 1px;
  background: var(--color-gray-100);
}

/* ── Шапка персонажа ────────────────────────────────────────────────────────
   Две ветки-узла: на десктопной ноде «Updated …» стоит в одной строке с
   аватаром и кнопками, на остальных — внутри блока с именем. Состав разный,
   поэтому одна ветка гасит другую (приём header'а). */
.cw__char--desk    { display: var(--only-desktop); align-items: center; }
.cw__char--compact { display: var(--below-desktop); flex-direction: column; align-items: flex-start; }

.cw__char {
  gap: var(--spacing-16);
}

.cw__avatar {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-16);
  /* Белая обводка в Figma стоит СНАРУЖИ (в ноде картинка занимает все 44×44, а
     кольцо лежит за ними и не участвует в раскладке) — поэтому spread-тень, а
     не border и не inset: габарит и соседние отступы остаются прежними. */
  box-shadow: 0 0 0 4px var(--color-gray-0), var(--shadow-12);
  overflow: hidden;
}
.cw__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cw__ident {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
}
.cw__char--compact .cw__ident { align-self: auto; width: 100%; }

.cw__name { margin: 0; color: var(--color-gray-900); }
/* pre-wrap: в самой ноде вокруг «726 item level» стоят двойные пробелы —
   без него HTML их схлопнет и строка станет короче, чем в макете. */
.cw__meta { margin: 0; color: var(--color-gray-500); white-space: pre-wrap; }

/* Строка «мета · Updated». Перенос считает сам flex-wrap:
   basis меты 464px (её ширина на ноде 768) + 8 + 176 (ширина «Updated …»)
   влезают в контейнер 664 (768) и 888 (1024) — строка одна, мета растягивается
   ровно до 480/704, и «Updated» встаёт на 488/712, как в макете;
   в 496 (576) и 240 (320) не влезают — «Updated» уходит вниз с row-gap 24. */
.cw__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-8);
  row-gap: var(--spacing-24);
}
.cw__meta-row .cw__meta { flex: 1 1 464px; min-width: 0; }

.cw__updated {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  margin: 0;
  color: var(--color-positive-500);
  white-space: nowrap;
}
.cw__updated-icon { flex: none; width: 16px; height: 16px; }
.cw__updated-icon svg { display: block; width: 100%; height: 100%; }

.cw__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

/* ── Общий прогресс сезона ──────────────────────────────────────────────────
   Ряд «38% + полоса». basis полосы 300px: в контейнер 496 (576) она с процентом
   влезает, в 240 (320) — нет, и уходит на свою строку с row-gap 12, как на
   мобильной ноде. */
.cw__progress-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: var(--spacing-24);
  row-gap: var(--spacing-12);
}
.cw__percent { flex: none; margin: 0; color: var(--color-gray-900); }
.cw__progress {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
/* Подписи разведены по краям, ширина у каждой — по тексту: на мобильной ноде
   они делят 240px как 197 + 43, и деление пополам порвало бы левую на две
   строки. На широких точках результат тот же, что и у половин. */
.cw__progress-labels {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-8);
}
.cw__progress-labels p { flex: 0 1 auto; min-width: 0; margin: 0; color: var(--color-gray-700); }
.cw__progress-labels p:last-child { flex: none; text-align: right; }

/* ── Лента карточек-статов ──────────────────────────────────────────────────
   Прокручиваемая лента: full-bleed обязателен, иначе последняя карточка
   упирается в поле карточки и не видно, что ленту можно листать. Утилита .bleed
   общая (grid.css); блок задаёт только величину поля — здесь это НЕ поле
   .container, а собственный padding карточки, поэтому --bleed = --cw-pad. */
.cw__stats {
  --bleed: var(--cw-pad);
  display: flex;
  gap: var(--spacing-8);
  overflow-x: auto;
  scrollbar-width: none;
}
.cw__stats::-webkit-scrollbar { display: none; }

/* Ширина карточки-стата. На десктопной ноде карточки тянутся на всю ширину
   (fill, 211.2 каждая), на остальных — фиксированы, и лента прокручивается.
   grow = флаг десктопа: при 1 basis 0 + grow даёт fill, при 0 работает basis. */
.cw__stat {
  box-sizing: border-box;
  flex-grow: var(--bp-desktop);
  flex-shrink: 0;
  flex-basis: calc(
      160.6px * (1 - var(--bp-mlandscape))
    + 149.6px * (var(--bp-mlandscape) - var(--bp-tablet))
    + 159.4px * (var(--bp-tablet) - var(--bp-desktop)));
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
  border-radius: var(--radius-12);
  background: var(--color-gray-0);
}
.cw__stat-icon { flex: none; width: 20px; height: 20px; color: var(--color-gray-400); }
.cw__stat-icon svg { display: block; width: 100%; height: 100%; }
.cw__stat-text { display: flex; flex-direction: column; }
.cw__stat-value { margin: 0; color: var(--color-gray-900); }
.cw__stat-total { color: var(--color-gray-400); }
.cw__stat-name  { margin: 0; color: var(--color-gray-400); }
.cw__stat-bar   { align-self: stretch; }

/* ── Пустое состояние: форма добавления ─────────────────────────────────────*/
.cw__intro { display: flex; flex-direction: column; gap: var(--spacing-4); }
.cw__title { margin: 0; color: var(--color-gray-900); }
/* На мобильной ноде заголовок набран Display/16 (16/22), с 576 — Display/18
   (18/24): разная типографика, поэтому это два узла, одна ветка гасит другую.
   Значение флага — inline; во flex-колонке .cw__intro оно блокифицируется. */
.cw__title--mobile { display: var(--below-mlandscape); }
.cw__title--wide   { display: var(--from-mlandscape); }
.cw__desc  { margin: 0; color: var(--color-gray-500); }

.cw__form { display: flex; flex-direction: column; gap: var(--spacing-24); }

/* Поля: до планшета basis 100% — каждое на своей строке (row-gap 20);
   с планшета basis 200px — три в ряд с column-gap 12 (на 768 они растягиваются
   до 213.33, на 1024 до 237 — ровно как в макете). */
.cw__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: var(--spacing-12);
  row-gap: var(--spacing-20);
}
.cw__field {
  flex: 1 1 calc(100% * (1 - var(--bp-tablet)) + 200px * var(--bp-tablet));
  width: auto;      /* у select/input/combobox своя ширина 320px по умолчанию */
  min-width: 0;
}

/* Кнопка «Add character» — два узла разного размера, одна ветка гасит другую:
   с 1024 она стоит в ряду полей (Large, 44), ниже — на своей строке во всю
   ширину (Medium, 40). */
.cw__add--wide   { display: var(--from-tlandscape); flex: none; align-self: flex-end; }
.cw__add--narrow { display: var(--below-tlandscape); }

/* ── Пустое состояние: добавленные персонажи ────────────────────────────────*/
.cw__chars { display: flex; flex-direction: column; gap: var(--spacing-8); }
.cw__chars-label { margin: 0; color: var(--color-gray-500); }

/* До планшета чипсы идут одной прокручиваемой лентой (full-bleed, как статы),
   с планшета переносятся в несколько рядов и bleed гасится — иначе перенос
   считался бы по ширине с полями и чипсы залезали бы за край. */
.cw__chips-scroll {
  --bleed: calc(var(--cw-pad) * (1 - var(--bp-tablet)));
  overflow-x: auto;
  scrollbar-width: none;
}
.cw__chips-scroll::-webkit-scrollbar { display: none; }
.cw__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  width: max-content;
  /* с планшета ширина ограничена контейнером → перенос; ниже — лента */
  max-width: calc(100% * var(--bp-tablet) + 9999px * (1 - var(--bp-tablet)));
}

/* ══ Классы-варианты (showcase-реплики нод Figma) ═══════════════════════════
   Жёстко выставляют те же флаги, что @container выставил бы по ширине. Чисел
   точек перелома здесь нет — только значения флагов. */
.cw--bp320 .bp-scope {
  --bp-mlandscape: 0; --bp-tablet: 0; --bp-tlandscape: 0; --bp-desktop: 0;
  --only-desktop: none; --below-desktop: flex;
  --from-mlandscape: none; --below-mlandscape: inline;
  --from-tlandscape: none; --below-tlandscape: flex;
}
.cw--bp576 .bp-scope {
  --bp-mlandscape: 1; --bp-tablet: 0; --bp-tlandscape: 0; --bp-desktop: 0;
  --only-desktop: none; --below-desktop: flex;
  --from-mlandscape: inline; --below-mlandscape: none;
  --from-tlandscape: none; --below-tlandscape: flex;
}
.cw--bp768 .bp-scope {
  --bp-mlandscape: 1; --bp-tablet: 1; --bp-tlandscape: 0; --bp-desktop: 0;
  --only-desktop: none; --below-desktop: flex;
  --from-mlandscape: inline; --below-mlandscape: none;
  --from-tlandscape: none; --below-tlandscape: flex;
}
.cw--bp1024 .bp-scope {
  --bp-mlandscape: 1; --bp-tablet: 1; --bp-tlandscape: 1; --bp-desktop: 0;
  --only-desktop: none; --below-desktop: flex;
  --from-mlandscape: inline; --below-mlandscape: none;
  --from-tlandscape: flex; --below-tlandscape: none;
}
.cw--bp1280 .bp-scope {
  --bp-mlandscape: 1; --bp-tablet: 1; --bp-tlandscape: 1; --bp-desktop: 1;
  --only-desktop: flex; --below-desktop: none;
  --from-mlandscape: inline; --below-mlandscape: none;
  --from-tlandscape: flex; --below-tlandscape: none;
}