/* Сравнение тарифов /pricing/compare (templates/pricing_compare.html, aigen/plan_compare.py).
   Разделы вкладками (static/js/plan-compare.js), на телефоне вкладки в одну строку с прокруткой вбок.
   Таблица каждого раздела прокручивается вбок внутри себя, первая колонка (модель) стоит на месте. */

.cmp-hero { padding-bottom: 0; }
.cmp-back { color: var(--muted); font-size: 14.5px; font-weight: 560; text-decoration: none; }
.cmp-back::before { content: "‹ "; }
.cmp-back:hover { color: var(--text); }

/* вкладки: без скрипта их нет (hidden), разделы идут подряд */
.cmp-tabs { position: relative; display: flex; gap: 4px; margin: 26px 0 0; padding: 4px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface); width: fit-content; max-width: 100%;
  scrollbar-width: none; scroll-margin-top: 80px; }
.cmp-tabs::-webkit-scrollbar { display: none; }
.cmp-tabs[hidden] { display: none; }
.cmp-tab { flex: 0 0 auto; padding: 9px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--muted);
  font: inherit; font-size: 15px; font-weight: 620; white-space: nowrap; cursor: pointer; }
.cmp-tab:hover { color: var(--text); background: var(--surface-2); }
.cmp-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--text); }
.cmp-tab:focus-visible { outline: none; box-shadow: var(--ring); }

.cmp-group { margin-top: 34px; scroll-margin-top: 80px; }
.cmp-group[hidden] { display: none; }
.cmp-group h2 { margin: 0 0 4px; font-size: 24px; font-weight: 720; letter-spacing: -0.02em; }
.cmp-caption { margin: 0 0 12px; max-width: 72ch; color: var(--muted); line-height: 1.5; }
/* во вкладках название раздела уже на вкладке */
.cmp-tabbed .cmp-group { margin-top: 18px; }
.cmp-tabbed .cmp-group h2 { display: none; }

.cmp-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  overscroll-behavior-x: contain; }
.cmp-scroll:focus-visible { outline: none; box-shadow: var(--ring); }
.cmp-table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
/* общие th и td сайта (app.css) с заглавными буквами, линией под каждой строкой и без переносов: здесь свои */
.cmp-table th, .cmp-table td { padding: 9px 12px; border-bottom: 0; text-align: right; vertical-align: top;
  white-space: normal; text-transform: none; letter-spacing: normal; color: var(--text); font-size: inherit; }
.cmp-table thead th { padding-top: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 700; white-space: nowrap; vertical-align: bottom; }
.cmp-table thead small { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; font-weight: 520; }
.cmp-table .cmp-name { position: sticky; left: 0; z-index: 1; width: 30%; min-width: 210px; text-align: left;
  background: var(--surface); font-weight: 400; box-shadow: 1px 0 0 var(--border); }
.cmp-table thead .cmp-name { z-index: 2; color: var(--muted); font-weight: 600; }
.cmp-name b { display: block; font-weight: 680; line-height: 21px; }
/* у первой строки модели сверху её название: числа опускаются на строку варианта */
.cmp-model tr.cmp-first > td { padding-top: 30px; }
.cmp-var { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.cmp-note { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.cmp-table .cmp-price { white-space: nowrap; color: var(--muted); }
.cmp-table .cmp-n { font-weight: 640; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-table .cmp-zero { color: var(--muted); font-weight: 400; }
.cmp-table .cmp-main { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.cmp-table thead .cmp-main { color: var(--accent); }
.cmp-model + .cmp-model tr.cmp-first > * { border-top: 1px solid var(--border); }
.cmp-model tr.cmp-more > * { padding-top: 2px; }
.cmp-mprice { display: none; }

.cmp-how ul { display: grid; gap: 8px; max-width: 820px; margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.55; }
.cmp-cta { margin-top: 28px; }

@media (max-width: 640px) {
  .cmp-tabs { margin-top: 18px; width: auto; }
  .cmp-tab { padding: 8px 13px; font-size: 14.5px; }
  .cmp-group h2 { font-size: 21px; }
  .cmp-table { font-size: 14px; }
  .cmp-table th, .cmp-table td { padding: 8px 9px; }
  .cmp-table .cmp-name { width: 148px; min-width: 148px; max-width: 148px; }
  /* на телефоне цена под названием варианта, а колонка «Цена» уступает место тарифам */
  .cmp-table .cmp-price { display: none; }
  .cmp-mprice { display: inline; white-space: nowrap; }
  .cmp-table { min-width: 0; }
  .cmp-table th.cmp-plan, .cmp-table td.cmp-n { min-width: 64px; }
}