/* ===========================================================
   Compare Page — Твой Путь  (Mobile-first)
   Сетка, карточки, шапка, вкладки, таблица, радар, сайдбар,
   пустые состояния, адаптив, тёмная тема.
   =========================================================== */

:root{
  --brand: #0057ff;
  --brand-2: #2a7dff;
  --bg: #ffffff;
  --card: #ffffff;
  --text: #11131a;
  --muted: #6a7286;
  --line: rgba(0,0,0,.08);
  --ring: rgba(0, 87, 255, .35);
  --shadow-1: 0 10px 30px rgba(0, 15, 50, .10);
  --shadow-2: 0 16px 36px rgba(0, 15, 50, .14);
  --radius: 16px;
  --radius-sm: 12px;
  --gap: 16px;
  --gap-lg: 20px;
  --content-max: 1224px;
  --side-pad: 24px;
  --side-pad-sm: 16px;
  --canvas-h-min: 280px;
  --canvas-h-max: 520px;
  --accent:  #16a34a;
  --accent-2:#22c55e;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f1117;
    --card: #121521;
    --text: #e8ecf2;
    --muted: #9aa6bd;
    --line: rgba(255,255,255,.08);
    --shadow-1: 0 10px 30px rgba(0,0,0,.45);
    --shadow-2: 0 16px 36px rgba(0,0,0,.55);
  }
}

html, body{ background: var(--bg); color: var(--text); }
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial,Noto Sans,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}

/* ============ PAGE CONTAINER (mobile base) ============ */
.compare-root{
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--side-pad-sm);
  padding-bottom: 24px;
}

.compare-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 12px;
}
.compare-left, .compare-right{ display: grid; gap: 14px; }

/* Карточки */
.compare-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 12px;
  /* важно: карточка сама не создаёт горизонтальный скролл страницы */
  max-width: 100%;
}

/* Если контент шире, скролл будет ТОЛЬКО у карточки правой колонки */
.compare-right .compare-card{
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.compare-card__head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.compare-card__title{ margin: 0; font-size: 22px; font-weight: 900; }
.compare-card__meta{ color: var(--muted); font-size: 13px; }

/* ============ HEADER + TABS ============ */
.compare-head{ display: grid; gap: 8px; margin: 6px 0 8px; }
.compare-head__top{
  display: grid; grid-template-columns: 1fr;
  justify-items: center; gap: 10px;
}
.compare-head__title{
  margin: 0; font-size: 22px; font-weight: 900; letter-spacing: .2px; text-align: center;
}
.compare-head__actions{ display: flex; gap: 10px; width: 100%; justify-content: center; }

.btn-share{
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; border: 0;
  font-weight: 800; letter-spacing: .2px;
  box-shadow: var(--shadow-1); cursor: pointer;
}
.btn-share:disabled{ opacity: .5; cursor: not-allowed; filter: grayscale(30%); }
.btn-share:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; }
.compare-head__sub{ color: var(--muted); font-size: 14px; text-align: center; }

.compare-tabs{ margin-top: 6px; }
.compare-tabs__list{
  display: flex; gap: 8px; list-style: none; padding: 0; margin: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scroll-snap-type: x proximity; justify-content: center; padding-bottom: 2px;
}
.compare-tabs__item{ flex: 0 0 auto; scroll-snap-align: start; }
.compare-tabs__btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 12px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  cursor: pointer; white-space: nowrap;
}
.compare-tabs__item.is-active .compare-tabs__btn{
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  box-shadow: var(--shadow-2);
}
.compare-tabs__btn:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; }
.compare-tabs__name{ font-weight: 800; }

/* ============ RADAR (mobile base, без горизонтального скролла) ============ */
.compare-radar__canvas-wrap{
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;       /* всегда квадрат и влезает в карточку */
  height: auto;
  min-height: var(--canvas-h-min);
  max-height: var(--canvas-h-max);
  margin-inline: auto;
  overflow: hidden;
}
.compare-radar__canvas-wrap canvas{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:0 !important;
}

.radar-legend__list{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:12px 0 0;
}
.radar-legend__item{
  display:inline-flex; gap:8px; align-items:center;
  border:1px solid var(--line); padding:8px 10px; border-radius:10px; background:transparent;
}
.radar-legend__item.is-off{ opacity:.45; }
.radar-legend__swatch{ width:14px; height:14px; border-radius:4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.radar-legend__btn{ background:transparent; border:0; color:var(--text); cursor:pointer; font-weight:700; }

/* ============ TABLE (внутренний горизонтальный скролл) ============ */
.compare-card.compare-table{  /* карточка таблицы прокручивается только внутри */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.compare-table__wrap{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;         /* ← скролл ТОЛЬКО здесь */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter: stable both-edges;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line);
}

.cmp-table{
  border-collapse: separate; border-spacing: 0;
  width: max-content;       /* ширина по содержимому */
  min-width: 640px;         /* читаемый минимум для мобилки */
}
.cmp-table thead th{
  position: sticky; top: 0; z-index: 2;
  background: color-mix(in srgb, var(--card) 90%, var(--brand) 10%);
  border-bottom: 1px solid var(--line);
  text-align: left; font-weight: 800; font-size: 13px; color: var(--text);
}
.cmp-col-metric{ width: 200px; }
.cmp-col-delta{ width: 100px; }
.cmp-col-leader{ width: 140px; }

.cmp-sort{
  display:inline-flex; align-items:center; gap:6px;
  padding:12px 12px; width:100%;
  background:transparent; border:0; cursor:pointer;
}
.cmp-sort__arrow{
  width:8px; height:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(0); opacity:.35; transition: transform .2s ease, opacity .2s ease;
}
.cmp-sort.is-active .cmp-sort__arrow{ opacity:1; }

.cmp-cell{ border-bottom:1px solid var(--line); padding:10px 8px; font-size:14px; }
.cmp-row:hover .cmp-cell{ background: color-mix(in srgb, var(--card) 90%, var(--brand) 5%); }
.cmp-row.is-focused .cmp-cell{ background: color-mix(in srgb, var(--card) 82%, var(--brand) 18%); }

.cmp-metric .cmp-metric__btn{
  background:transparent; border:0; color:var(--text); cursor:pointer; font-weight:800; text-align:left;
}
.cmp-invert{
  display:inline-flex; align-items:center; gap:4px;
  margin-left:8px; font-size:11px; color:var(--muted);
  padding:2px 6px; border-radius:999px; border:1px dashed var(--line);
}
.cmp-prof-0.is-active, .cmp-prof-1.is-active, .cmp-prof-2.is-active{
  background: color-mix(in srgb, var(--card) 82%, var(--brand) 18%);
  font-weight: 800;
}
.cmp-delta{ font-variant-numeric: tabular-nums; }
.cmp-leader{
  font-weight:800; padding:6px 10px; border-radius:999px;
  background: color-mix(in srgb, var(--brand) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line));
}

/* ============ REASONS + FOCUS ============ */
.reasons-leader{
  display:grid; gap:6px; margin-bottom:8px;
  padding:10px; border:1px solid var(--line); border-radius:12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, var(--card)), var(--card));
}
.reasons-leader__badge{
  display:inline-block;font-size:11px;font-weight:900;letter-spacing:.3px;
  color:#fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius:999px;padding:4px 8px;width:fit-content;
}
.reasons-leader__name{ font-weight: 900; }
.reasons-subttl{ margin:10px 0 8px 0; font-size:14px; color:var(--muted); font-weight:800; }
.reasons-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.reasons-item{
  display:block; padding:10px; border:1px solid var(--line); border-radius:10px;
  background: color-mix(in srgb, var(--card) 96%, var(--brand) 4%);
}
.reasons-item__label{ font-weight: 900; }
.reasons-item__text{ color: var(--text); }

.focus-card{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.focus-card__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.focus-card__hint{
  font-size: 11px; color: var(--muted);
  padding: 4px 8px; border-radius: 999px; border: 1px dashed var(--line);
}
.focus-bars{ display:grid; gap:10px; margin-top:8px; }
.focus-bar__top{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:6px; }
.focus-bar__name{ max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:800; }
.focus-bar__val{ font-variant-numeric: tabular-nums; color:var(--muted); }
.focus-bar__track{ height:10px; border-radius:999px; background: color-mix(in srgb, var(--card) 85%, var(--brand) 15%); position:relative; overflow:hidden; }
.focus-bar__fill{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius:999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); transition: width .35s ease;
}
.focus-legend{ margin-top:8px; color:var(--muted); font-size:12px; }

/* ============ EMPTY ============ */
.compare-empty{ display:grid; place-items:center; }
.compare-empty__card{
  background: var(--card); border: 1px dashed var(--line);
  box-shadow: var(--shadow-1); border-radius: var(--radius);
  padding: 18px; text-align: center; max-width: 720px; margin: 14px auto;
}
.compare-empty__icon{ font-size:42px; margin-bottom:8px; }
.compare-empty__title{ margin:0 0 6px; font-size:20px; font-weight:900; }
.compare-empty__text{ color:var(--muted); margin:0 0 10px; }
.compare-empty__actions{ margin-bottom:10px; }
.compare-empty__btn{
  padding:10px 14px; border-radius:12px; border:1px solid var(--line);
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff;
  font-weight:800; box-shadow: var(--shadow-1); cursor:pointer;
}
.compare-empty__tips{ list-style:disc; padding-left:20px; text-align:left; color:var(--muted); margin:10px auto 0; }

/* ============ DESKTOP / TABLET ============ */
@media (min-width: 721px){
  .compare-root{ padding-inline: var(--side-pad); }

  .compare-grid{
    grid-template-columns: 1.42fr .9fr;
    gap: var(--gap-lg);
    margin-top: 16px;
  }

  .compare-card{ padding: 16px; }
  .compare-head{ gap: 12px; }
  .compare-head__title{ font-size: 30px; }
  .compare-right{ position: sticky; top: 88px; height: fit-content; }

  /* Радар немного просторнее */
  .compare-radar__canvas-wrap{ max-height: var(--canvas-h-max); }

  /* Таблица на десктопе растягивается, но без растягивания страницы */
  .cmp-table{ min-width: 760px; }
  .cmp-cell{ padding: 10px 12px; }
  .cmp-col-metric{ width: 240px; }
  .cmp-col-delta{ width: 120px; }
  .cmp-col-leader{ width: 160px; }
}