/* Тарифы: карточка и выбор срока. Печатают двое - окно тарифов в кабинете
   (`template-parts/cabinet/studio/plans.php`) и страница цен сайта платформы
   (`page-pricing.php`); обе берут разметку из `template-parts/plans/`. */

/* --- ТАРИФЫ ---
   Ни рейтингов, ни числа клиентов, ни плашек «самый популярный», ни таймеров скидки:
   выбор объясняется тем, что входит, а не давлением.

   Карточка тарифа - системный компонент, и правила ниже - его. Второй экран с тарифами
   появился 24.09.2026 (страница цен сайта платформы, SCRUM-302), и правила переехали сюда
   из `studio.css` целиком. Не в `parts/`: там живут побайтовые копии проекта Claude
   Design, а этого компонента в нём нет. */
/* РАМКА - ГРАНИЦА КОНТРОЛА, А НЕ ВОЛОСЯНАЯ ЛИНИЯ, И ТЕНЬ (владелец 05.10.2026: «где хотя бы рамки
   вокруг карточек? ни рамок, ни теней»). Волосяная линия в 12% чёрного на белой плоскости окна не
   читалась вовсе, и три тарифа выглядели одним листом текста. */
.sc-plan{display:flex;flex-direction:column;gap:var(--sc-space-16);padding:var(--sc-space-24);
  background:var(--sc-surface);border:var(--sc-rule-w-hair) solid var(--sc-border-strong);
  border-radius:var(--sc-radius);box-shadow:var(--sc-shadow-sticky)}
/* Текущий тариф отмечен ДВУМЯ признаками - рамкой и заливкой, - и плашкой со словом:
   человек должен видеть, на чём он сейчас, иначе сравнивать не с чем. */
.sc-plan--current{border-color:var(--sc-selected-border);background:var(--sc-selected-surface)}
.sc-plan__price{margin:0;font-size:var(--sc-text-h2);line-height:var(--sc-lh-h2);
  font-weight:var(--sc-fw-text)}
.sc-plan__price small{font-size:var(--sc-text-caption);color:var(--sc-text-muted);
  font-weight:var(--sc-fw-text)}
.sc-plan__list{display:flex;flex-direction:column;gap:var(--sc-space-8);margin:0;padding:0;
  list-style:none;font-size:var(--sc-text-body-sm)}
.sc-plan__list li{display:flex;align-items:flex-start;gap:var(--sc-space-8)}
.sc-plan__list .sc-icon{font-size:18px;flex:none;color:var(--sc-success)}

.sc-pl__lead{margin:0;font-size:var(--sc-text-body-sm);color:var(--sc-text-muted)}
.sc-pl__cycle{display:flex;align-items:center;gap:var(--sc-space-8);flex-wrap:wrap}
.sc-pl__cycle .sc-chip{text-decoration:none}
.sc-pl__save{font-size:var(--sc-text-caption);color:var(--sc-text-muted)}
/* Единица счёта объясняется один раз и словами: человек считает картинки, а лимит считает
   обращения к модели. */
.sc-pl__unit{margin:0;display:flex;align-items:flex-start;gap:var(--sc-space-8);
  padding:var(--sc-space-12);border-radius:var(--sc-ui-radius);background:var(--sc-ink-50);
  font-size:var(--sc-text-caption);color:var(--sc-ink-800)}
.sc-pl__unit .sc-icon{font-size:18px;flex:none}
.sc-pl__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sc-space-16)}
.sc-pl__head{display:flex;align-items:center;gap:var(--sc-space-8)}
/* Имя тарифа: в окне - `b`, на странице цен - заголовок `h2` (у него поля браузера). */
.sc-pl__name{margin:0;font-size:var(--sc-text-h3);font-weight:var(--sc-fw-medium)}
.sc-pl__sum{margin:0;font-size:var(--sc-text-body-sm);color:var(--sc-text-muted)}
.sc-pl__foot{margin:0;font-size:var(--sc-text-caption);color:var(--sc-text-muted)}
.sc-plan > .sc-btn{margin-block-start:auto}

/* --- ОКНО ТАРИФОВ НА ВЕСЬ ЭКРАН (30.09.2026) ---
   Раскладка снята замером с эталонного конструктора (`&upgrade=true`): слой на всё окно, полоса
   60px с «Back» слева и крестиком справа, колонка по центру, карточка-герой высотой 280 со
   скруглением 24, кнопки тарифов 48. Колонка у нас шире эталонной (880): у эталона два тарифа, у
   нас три, и бесплатный из сравнения не уходит. Цвета и шрифты - токены кабинета.

   Слой стоит ВЫШЕ окна настроек: тарифы открывают из «Domains», и закрытие обязано вернуть туда
   же, то есть настройки под окном остаются открытыми. */
.sc-plx{position:fixed;inset:0;z-index:calc(var(--sc-z-sheet) + 5);display:block;overflow:auto;
  background:var(--sc-surface,#fff);color:var(--sc-ink-900);overscroll-behavior:contain}
.sc-plx[hidden]{display:none}

.sc-plx__bar{position:sticky;inset-block-start:0;z-index:1;display:flex;align-items:center;
  justify-content:space-between;block-size:60px;padding-inline:var(--sc-space-16);
  background:color-mix(in oklab,var(--sc-surface,#fff) 95%,transparent);
  backdrop-filter:blur(8px)}
.sc-plx__back{display:inline-flex;align-items:center;gap:var(--sc-space-4);min-block-size:28px;
  padding:var(--sc-space-4) var(--sc-space-8);border-radius:var(--sc-radius-ctl,8px);background:var(--sc-ink-50);
  color:var(--sc-ink-700);font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium);
  text-decoration:none}
.sc-plx__back .sc-icon{font-size:18px}
.sc-plx__back:hover{background:var(--sc-surface-sunken);color:var(--sc-ink-900)}
.sc-plx__back:focus-visible,.sc-plx__x:focus-visible{outline:var(--sc-focus-ring-w) solid var(--sc-focus-ring);outline-offset:2px}
.sc-plx__x{text-decoration:none;color:var(--sc-ink-700)}

.sc-plx__col{display:flex;flex-direction:column;gap:var(--sc-space-24);inline-size:min(1040px,100%);
  margin-inline:auto;padding:var(--sc-space-16) var(--sc-space-16) var(--sc-space-48)}

.sc-plx__hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  gap:var(--sc-space-24);min-block-size:280px;padding:var(--sc-space-24);border-radius:var(--sc-radius);
  background:var(--sc-ink-50);overflow:hidden}
.sc-plx__heroT{display:flex;flex-direction:column;gap:var(--sc-space-8);max-inline-size:392px}
.sc-plx__h{margin:0;font-size:24px;line-height:30px;font-weight:var(--sc-fw-medium);color:var(--sc-ink-900);text-wrap:balance}
.sc-plx__p{margin:0;font-size:var(--sc-text-body);line-height:24px;color:var(--sc-text-muted);text-wrap:pretty}
.sc-plx__risk{margin:0;font-size:var(--sc-text-body);line-height:24px;font-weight:var(--sc-fw-medium);color:var(--sc-ink-900)}

/* Уменьшенный сайт человека в рамке браузера - как у эталона; кадр уменьшает скрипт кабинета
   (`data-sc-frame`), тем же приёмом, что карточку сайта на главной. */
.sc-plx__prev{align-self:stretch;display:flex;flex-direction:column;min-block-size:232px;
  border-radius:var(--sc-radius,12px);background:var(--sc-surface);box-shadow:0 1px 3px rgb(0 0 0 / .08);overflow:hidden}
.sc-plx__prevBar{display:flex;align-items:center;gap:6px;block-size:28px;padding-inline:var(--sc-space-12);
  border-block-end:1px solid var(--sc-hairline)}
.sc-plx__prevBar i{inline-size:8px;block-size:8px;border-radius:50%;background:var(--sc-ink-100)}
.sc-plx__prevTag{margin-inline-start:auto;padding:2px 8px;border-radius:999px;font-size:11px;line-height:16px;
  font-weight:var(--sc-fw-medium);background:var(--sc-warning-bg);color:var(--sc-ink-800)}
.sc-plx__prevTag[data-live="1"]{background:color-mix(in oklab,var(--sc-success) 16%,var(--sc-surface))}
.sc-plx__prevBox{position:relative;flex:1;overflow:hidden;background:var(--sc-ink-50)}

.sc-plx__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.sc-plx .sc-plan{border-radius:var(--sc-radius);padding:var(--sc-space-24)}
.sc-plx .sc-plan > .sc-btn{min-block-size:var(--sc-control-h-md);border-radius:var(--sc-radius-ctl)}

@media (max-width:860px){
  .sc-plx__hero{grid-template-columns:minmax(0,1fr);min-block-size:0}
  .sc-plx__prev{display:none}
  .sc-plx__grid{grid-template-columns:minmax(0,1fr)}
}

/* ВОПРОС ПЕРЕД СМЕНОЙ ТАРИФА (SCRUM-508) - поверх окна тарифов. Ход входа и ухода - общий
   (`windows.css`); здесь только место и плоскость. Сумму вписывает скрипт из расчёта Paddle. */
.sc-pay-ask{position:fixed;inset:0;z-index:calc(var(--sc-z-sheet) + 6);display:grid;place-items:center;
  padding:var(--sc-space-16)}
.sc-pay-ask[hidden]{display:none}
.sc-pay-ask__sc{position:absolute;inset:0;border:0;padding:0;background:var(--sc-scrim);cursor:pointer}
.sc-pay-ask__w{position:relative;inline-size:min(100%,440px);padding:var(--sc-space-24);
  border-radius:var(--sc-radius-md);background:var(--sc-plane);box-shadow:var(--sc-shadow-overlay)}
.sc-pay-ask__h{margin:0 0 var(--sc-space-8);font-size:var(--sc-text-h3);font-weight:var(--sc-fw-medium)}
.sc-pay-ask__b{margin:0 0 var(--sc-space-16);color:var(--sc-text-muted)}
.sc-pay-ask__err{margin:0 0 var(--sc-space-16);color:var(--sc-ink-950);font-weight:var(--sc-fw-medium)}
.sc-pay-ask__ft{display:flex;gap:var(--sc-space-8);justify-content:flex-end;flex-wrap:wrap}
.sc-plan .sc-btn[aria-busy]{opacity:.6;cursor:progress}