/* --- тарифы: сетка карточек -------------------------------------------- */
.tariff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
               gap: var(--space-6); margin: var(--space-4) 0; }
.tariff-grid .card { margin: 0; }
/* кнопка «Подключиться» — в подвале карточки (ui-card__footer), чтобы
   у карточек разной высоты действия стояли на одной линии */
.tariff-grid .card > button { margin-top: auto; align-self: flex-start; }
/* T47: выделение текущего тарифа на странице тарифов — по классу
   tariff-card--current (ставит updateTariffsActive): рамка accent +
   подпись «Ваш тариф» (.tariff-current-mark, скрыта у остальных). */
.tariff-card--current { border-color: var(--accent); border-width: 2px;
                        padding: calc(var(--space-6) - 1px); }
.tariff-current-mark { display: inline-flex; align-items: center;
                       align-self: flex-start;
                       height: 26px; padding: 0 12px;
                       margin: 0; border-radius: var(--radius-full);
                       background: var(--accent); color: var(--on-accent);
                       font-family: var(--font-mono); font-size: 12px;
                       font-weight: 500; }

/* подзаголовок-строка настроек над сеткой (режим · автоуплата · доходы) —
   плоская панель кита, ответы — маленькие secondary-кнопки-меню */
.settings-line { font-size: 14px; line-height: 22px; color: var(--ink-muted);
                 background: var(--surface-raised);
                 border: 1px solid var(--line); border-radius: var(--radius-md);
                 padding: var(--space-3) var(--space-4);
                 /* на анонимной точке входа это первый блок экрана
                    (заголовок убран) — верхний отступ как у h1 */
                 margin: var(--space-8) 0 var(--space-4); }
/* T48: ответы на 3 начальных вопроса — кнопки с выпадающим меню
   (native select недоступен по стилю: попап с вариантами рендерит
   openAnswerMenu в общий #modal-root, как принято для модалов) */
.answer-drop { height: 30px; padding: 0 12px; font-size: 13px;
               vertical-align: middle; background: var(--surface-raised);
               border-color: var(--line-strong); color: var(--ink);
               box-shadow: none; }
.answer-drop:not(:disabled):hover { background: var(--accent-soft);
                                    border-color: var(--accent);
                                    color: var(--ink); transform: none;
                                    box-shadow: none; }
.answer-drop:after { content: " ▾"; font-size: 10px; color: var(--ink-subtle); }
.answer-menu { display: grid; gap: var(--space-2); margin-top: 0; }
/* варианты ответа в попапе — вторичные действия кита (одно главное
   действие на экране остаётся за кнопкой подтверждения шага); текущий
   вариант — с рамкой accent */
.answer-menu button { background: var(--surface-raised);
                      border-color: var(--line); color: var(--ink);
                      box-shadow: none; height: var(--control-md);
                      justify-content: flex-start; }
.answer-menu button:not(:disabled):hover {
  border-color: var(--line-strong); background: var(--surface-raised);
  transform: none; box-shadow: none; }
.answer-menu button[aria-current="true"] { border-color: var(--accent);
                                           color: var(--gilt); }
.answer-current { font-family: var(--font-mono); font-size: 12px;
                  line-height: 16px; color: var(--ink-muted); }

/* подпись «вы вошли как …» под экраном диагностики */
.phone-label { font-family: var(--font-mono); color: var(--ink); }

@media (max-width: 720px) {
  h1 { font-size: 24px; line-height: 32px; margin-top: var(--space-6); }
  .card { padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}