/* ===========================
   core.base.css
   Базовые стили: глобал, фрейм страницы и карточки-контейнера
   =========================== */

/* Глобально */
html, body { height: 100%; }
body {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  color: var(--text);
  background: var(--bg);
}

/* Общая страница (мобильный фрейм по умолчанию) */
.page{
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2px 0 2px;   /* только вертикальные отступы */
  box-sizing: border-box;
}

/* Карточка-контейнер (ровно 90% ширины экрана, по центру) */
.card{
  width: 95vw;            /* фиксировано 90% экрана */
  margin: 0 auto;         /* центрируем */
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 20px 18px 5px;
  position: relative;
  box-sizing: border-box; /* паддинги внутри ширины */
}

/* Кликабельные элементы по умолчанию как кнопки */
.tap-area,
.metric-card,
.y-btn,
.card-weight,
.steps,
.ex-row {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Заголовки / подзаголовки */
.title{
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 8px 8px 10px 0;
}
.title h1,
.title h2{
  margin: 0;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.lead{
  margin: 8px 0 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.35;
}