/* Таблица тарифов (billing/_plan_table.html) — /pricing/ и /billing/.
   Только роли из marketing/tokens.css: landing.css в кабинете не грузится.
   Визуал — как карточки /pricing/: крупная mono-цена, волосяные линии, без теней. */

.plt {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
}

.plt-scroll { overflow-x: auto; }

.plt-table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;   /* sticky-колонка и линии в collapse ведут себя криво */
    border-spacing: 0;
    color: var(--text);
    font-family: var(--font-sans);
}

.plt-table th,
.plt-table td {
    padding: .75rem .75rem;
    border-top: 1px solid var(--border-faint);
    background: var(--surface);
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
}

/* ---- Шапка: тарифы и цены ---- */
.plt-table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--text);
    padding: 1.5rem .75rem .75rem;
    vertical-align: top;
}

/* Левая колонка приклеена: на телефоне таблица едет вбок, подпись строки остаётся */
.plt-table .plt-corner,
.plt-table .plt-row {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 26%;
    text-align: left;
    border-right: 1px solid var(--border-faint);
}

.plt-table .plt-corner { vertical-align: bottom; }

.plt-table .plt-row {
    padding-left: 1.25rem;
    font-size: .9375rem;
    font-weight: 500;
}

.plt-label {
    display: block;
    margin-bottom: .5rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.plt-plan { position: relative; min-width: 11rem; }

/* Рекомендуемый: синяя засечка сверху, как у плиток-ссылок лендинга (§8.17) */
.plt-plan.is-rec { box-shadow: inset 0 2px 0 var(--p-500); }

.plt-rec {
    position: absolute;
    top: .45rem;
    left: 0;
    right: 0;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--p-500);
}

.plt-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Высоту зоны никто не задаёт числом. Оба периода лежат в одной ячейке грида,
   неактивный скрыт через visibility — зона и колонка всегда размером с больший
   вариант, переключение не прыгает. В каждом блоке одни и те же пять строк в
   одну линию (пустые держат место) — кнопки всех тарифов на одном уровне. */
.plt-price-zone { display: grid; margin: .25rem 0 .5rem; }

.plt-price > span { white-space: nowrap; }

.plt-price {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
}

.plt-price-old {
    display: flex;               /* фиксированная высота: строка с бейджем не выше пустой, */
    align-items: center;         /* цены всех колонок и обоих периодов на одном уровне */
    height: 1.375rem;
    font-family: var(--font-mono);
    font-size: .8125rem;
    color: var(--text-muted);
}

.plt-discount {
    margin-left: .25rem;
    padding: 0 .3rem;
    border: 1px solid currentColor;
    border-radius: var(--r-xs);
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;            /* с рамкой ниже строки: бейдж не растит её относительно пустой */
    color: var(--a-600);
}

/* Цена — данные: mono + tabular-nums (§8.11) */
.plt-amount {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--t-h2);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.plt-per {
    font-family: var(--font-mono);
    font-size: .75rem;
    line-height: 1.2;
    color: var(--text-muted);
}

/* Итог за год — только в варианте «на год» (сумма к оплате, .is-due); помесячно
   строка пустая и держит высоту. Без охры: её пятно занял бейдж скидки (§8.2). */
.plt-total {
    min-height: 1.2em;
    margin-top: .35rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: .8125rem;
    line-height: 1.2;
    color: var(--text-muted);
}

.plt-total.is-due { font-weight: 600; color: var(--text); }

body:has(#period-monthly:checked) .plt [data-period="yearly"],
body:has(#period-yearly:checked) .plt-plan:has([data-period="yearly"]) [data-period="monthly"] { visibility: hidden; }

.plt-cta {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.plt-cta form { margin: 0; }

.plt-cta .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: .45rem .75rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;         /* колонка шире кнопки: min-width у .plt-plan */
}

/* ---- Переключатель периода ---- */
.plt-period { display: inline-flex; }

.plt-period input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plt-period label {
    margin: 0;
    padding: .45rem .8rem;
    border: 1px solid var(--border);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
}

.plt-period label:first-of-type { border-radius: var(--r-md) 0 0 var(--r-md); }
.plt-period label:last-of-type  { border-radius: 0 var(--r-md) var(--r-md) 0; border-left: 0; }

.plt-period input:checked + label {
    color: var(--text);
    background: var(--surface-alt);
    box-shadow: inset 0 -2px 0 var(--p-500);
}

.plt-period input:focus-visible + label { outline: 2px solid var(--p-500); outline-offset: 2px; }

.plt-save { color: var(--a-600); font-weight: 700; }

/* ---- Тело: лимиты и возможности ---- */
.plt-table .plt-group th {
    padding: .45rem 1.25rem;
    background: var(--surface-alt);
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.plt-group span { position: sticky; left: 1.25rem; }

.plt-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    font-weight: 600;
}

.plt-yes { color: var(--ok); font-weight: 700; }
.plt-no  { color: var(--border-strong); }

.plt-table .plt-included td {
    text-align: left;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.plt-extra { display: none; }
.plt.is-open .plt-extra { display: table-row-group; }

.plt-table .is-hov { background: var(--p-50); }

.plt-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    padding: .7rem;
    border: 0;
    border-top: 1px solid var(--border-faint);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--p-500);
    cursor: pointer;
}

.plt-toggle:hover { background: var(--surface-alt); }
.plt-toggle svg { transition: transform var(--d-fast) var(--e-out); }
.plt.is-open .plt-toggle svg { transform: rotate(180deg); }
.plt-toggle-less,
.plt.is-open .plt-toggle-more { display: none; }
.plt.is-open .plt-toggle-less { display: inline; }

/* Телефон: левая колонка узкая, переключатель периода — столбиком */
@media (max-width: 640px) {
    .plt-table .plt-corner,
    .plt-table .plt-row { width: 9.5rem; min-width: 9.5rem; }

    .plt-table .plt-row { padding-left: .75rem; font-size: .875rem; }

    /* Узкие колонки: в экран влезает край следующего тарифа — видно, что таблица листается */
    .plt-table { min-width: 0; }
    .plt-plan { min-width: 8rem; }
    .plt-amount { font-size: 1.5rem; }

    .plt-period { display: flex; flex-direction: column; }
    .plt-period label:first-of-type { border-radius: var(--r-md) var(--r-md) 0 0; }
    .plt-period label:last-of-type  { border-radius: 0 0 var(--r-md) var(--r-md); border-left: 1px solid var(--border); border-top: 0; }
}