/* ==========================================================================
   Compare (mobile-first)
   Путь: /assets/css/compare.css
   ========================================================================== */

/* Базовый reset для корректного ужатия */
*,
*::before,
*::after { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, canvas, video { max-width: 100%; height: auto; display: block; }

/* Палитра */
:root{
  --c-a: #7C3AED;
  --c-b: #FF006E;
  --c-a-bg: rgba(124,58,237,0.15);
  --c-b-bg: rgba(255,0,110,0.15);
  --c-text: #111827;
  --c-muted: #4b5563;
  --c-line: #e5e7eb;
  --c-panel: #f1f5f9;
  --radius: 12px;
}

/* Контейнер */
.container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 10px 48px;
}

/* Хлебные крошки */
.breadcrumbs{
  font-size: 13px;
  margin-bottom: 10px;
  color: #6b7280;
  word-break: break-word;
}
.breadcrumbs a{ color:#6b7280; text-decoration:none; }

/* Заголовок */
.h1{ display:flex; align-items:flex-start; gap:10px; margin:6px 0 14px; }
.h1 .t{
  font-weight: 800;
  line-height: 1.2;
  display: flex; flex-wrap: wrap; align-items:flex-start; gap:8px;
  font-size: clamp(18px, 5.2vw, 32px);
  word-break: break-word; overflow-wrap: anywhere;
}
.h1 .t .side{ display:inline-flex; align-items:center; gap:6px; }
.h1 .t .pi{ font-size: clamp(18px, 4.6vw, 24px); line-height:1; }
.h1 .vs{ opacity:.4; margin: 0 4px; }

/* Сетка страницы */
.page-grid{ display:grid; grid-template-columns: 1fr; gap:16px; align-items:start; }

/* Карточки */
.card{
  width: 100%;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow:0 1px 1px rgba(0,0,0,.03);
  overflow: hidden;              /* не создаём горизонтальный скролл */
}
.card .card-head{
  padding: 12px 14px;
  border-bottom:1px solid var(--c-panel);
  font-weight:800; color:var(--c-text);
  display:flex; align-items:center; gap:8px;
  font-size: 15px;
  flex-wrap: wrap;               /* заголовок может переноситься */
}
.card .card-body{ padding: 14px; }

/* Радар */
.radar-wrap{
  width: 100%;
  height: min(68vw, 520px);
  min-height: 260px;
}
canvas#radar{ width:100% !important; height:100% !important; display:block; }

/* Легенда радара — не раздвигает макет */
.radar-legend{
  display: grid;
  grid-template-columns: auto 1fr auto 1fr; /* точка + текст, точка + текст */
  align-items: center;
  gap: 8px 10px;
  padding: 0 14px 12px;
}
.legend-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.radar-legend span{
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px; color:#4b5563;
}

/* Метрики */
.metric{ margin-bottom: 12px; }
.metric .metric-name{
  font-size: 15px; font-weight: 800; letter-spacing: .2px;
  color: var(--c-text);
  display: flex; align-items: center; gap: 8px;
  word-break: break-word; overflow-wrap: anywhere;
}

/* Пары строк внутри карточек метрик */
.row{
  display:flex;
  align-items:center;
  gap:8px;
  margin: 6px 0;
  font-size: 12px;
}
.row .label{
  flex: 1 1 auto;                 /* метка тянется */
  min-width: 0;                   /* позволяет обрезать текст */
  color:#374151;
  display: flex; align-items: center; gap:8px;
}
.row .label span[title],
.row .label > span:last-child{
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row .val{
  flex: 0 0 auto;                 /* значение справа фиксированное */
  margin-left: auto;              /* прижим к правой стороне */
  color: var(--c-text); font-weight:700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Полосы сравнения */
.bar{ height:10px; border-radius:999px; background:#f3f4f6; overflow:hidden; margin-top:2px; }
.bar > span{ display:block; height:100%; }

/* Дельта */
.delta{ margin-top:8px; font-size:12px; color:#6b7280; }
.delta b.pos{ color:#065f46; }
.delta b.neg{ color:#991b1b; }

/* Бейджи */
.badge{
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
  background:#eef2ff; color:var(--c-text);
  flex: 0 0 auto;
}

/* Текстовые секции слева */
h2{
  font-weight: 800;
  margin: 6px 0 12px;
  font-size: clamp(18px, 5vw, 22px);
  word-break: break-word; overflow-wrap: anywhere;
}

/* Чипсы различий — горизонтальный скролл только по ним */
.diff-chips{
  display:flex; flex-wrap:nowrap; gap:8px; margin:8px 0 2px;
  overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch;
}
.chip{
  flex:0 0 auto;
  border:1px solid var(--c-line);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  white-space:nowrap;
}
.chip.plus{ color:#065f46; background:#ecfdf5; border-color:#a7f3d0; }
.chip.minus{ color:#991b1b; background:#fef2f2; border-color:#fecaca; }

/* Предпочтение к меньшей анимации */
@media (prefers-reduced-motion: reduce){
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================= ≥ 460 px ============================= */
@media (min-width: 460px){
  .container{ padding:16px 12px 56px; }
  .card .card-head{ font-size:16px; }
}

/* ============================= ≥ 768 px ============================= */
@media (min-width: 768px){
  .h1 .t{ font-size: clamp(24px, 3.2vw, 28px); }
  .h1 .t .pi{ font-size: clamp(20px, 2.6vw, 22px); }
  .radar-wrap{ height: 420px; }
  .row{ font-size: 13px; }
  h2{ font-size: 20px; }
}

/* ============================= ≥ 1100 px ============================ */
@media (min-width: 1100px){
  .page-grid{ grid-template-columns: 1fr 360px; gap:24px; }
  .h1 .t{ font-size: 32px; }
  .h1 .t .pi{ font-size: 24px; }
  .radar-wrap{ height: 520px; }
  .breadcrumbs{ font-size: 14px; }
  .row{ font-size: 12px; }
}

/* ====================== Тонкая настройка сверхузких экранов ===================== */
/* Здесь устраняем последние причины «обрезания» при ширине < 360–420 px */
@media (max-width: 459.98px){
  .container{ padding-left:8px; padding-right:8px; }
  .card .card-head{ padding:10px 12px; }
  .card .card-body{ padding:12px; }
  .radar-legend{ grid-template-columns: auto 1fr; } /* в две строки, если не влезает */
  .row{ gap:6px; }
  .row .val{ margin-left:6px; }
  .badge{ padding:2px 6px; }
}

/* На очень узких экранах разрешаем перенос даже в числах справа */
@media (max-width: 360px){
  .row .val{ white-space: normal; line-height: 1.1; }
}