/* ============================================================
   ProRoast · Нумерологическая совместимость (/services/numerology/)
   Токены — из tokens.css, семантика оценок повторяет калькулятор
   совместимости: positive #5FBF93 / caution #E0A642 / negative #E5645B
   (правило score: ≥75 / ≥45 / ниже). Значения продублированы под своими
   именами, потому что css/compatibility.css на этой странице не грузится.
   ============================================================ */

:root {
  --num-positive: #5FBF93;
  --num-caution: #E0A642;
  --num-negative: #E5645B;
}

/* Колонка контента — общая для всех страниц сервисов (.container.narrow,
   640px): кнопка «назад», заголовок, лид и SEO-блоки стоят ровно там же, где
   на соседних страницах. Шире выходит только сам калькулятор.

   ---------- Форма ---------- */

.num-app {
  /* Ровно те же отступы, что у .aic-app на странице тренажёра переписки:
     сверху space-6 к лиду, снизу space-2 — дальше идёт первый <h2> SEO-блока
     со своим margin-top var(--space-10). */
  margin: var(--space-6) 0 var(--space-2);
}

.num-form {
  display: grid;
  gap: var(--space-5);
}

.num-form-title {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
}

.num-partners {
  display: grid;
  gap: var(--space-5);
  /* Карточки не растягиваются друг под друга: имя необязательно, и пустое
     поле у одного партнёра не должно менять высоту второго. */
  align-items: start;
}

@media (min-width: 768px) {
  .num-partners {
    grid-template-columns: 1fr 1fr;
  }
}

.num-partner {
  /* У fieldset браузерный margin-inline: 2px — карточки оказывались уже
     колонки и не совпадали краями с остальными блоками страницы. */
  margin: 0;
  min-inline-size: 0;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  border: 1px solid var(--border-default);
  /* Как и у .compat-partner: блюр на повторяющихся glass-карточках поверх
     фиксированного градиента заставляет GPU пересчитывать фон на каждом
     кадре скролла, а читается почти никак. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--surface-glass-strong);
}

.num-partner-title {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-footnote-size);
  color: var(--text-primary);
  margin: 0;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  text-align: center;
}

/* Поля — общий компонент .field из style.css, здесь только правки для
   нативного date-контрола. */
.num-date input[type='date'] {
  /* iOS Safari даёт date-полю собственную intrinsic-ширину и центрирует
     значение — без сброса appearance поле вылезает за карточку, а «дд.мм.гггг»
     обрезается. */
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  inline-size: 100%;
  overflow: hidden;
  color-scheme: dark;
}

.num-date input[type='date']::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

.num-date input[type='date']::-webkit-datetime-edit {
  padding: 0;
  overflow: hidden;
}

[data-theme='light'] .num-date input[type='date'] {
  color-scheme: light;
}

.num-form-error {
  justify-self: center;
  margin: 0;
  text-align: center;
  font-size: var(--text-footnote-size);
  color: var(--num-negative);
}

.num-submit {
  /* Главный CTA страницы: фирменный градиент .btn-ai, размеры как у
     .compat-submit — два калькулятора должны читаться одинаково. */
  justify-self: center;
  min-width: min(100%, 380px);
  min-height: 56px;
  padding: 14px 28px;
  font-size: var(--text-title-size);
  letter-spacing: -0.01em;
  border-color: transparent;
  transition: transform 0.12s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.num-submit:not(:disabled):hover {
  filter: brightness(1.06);
  box-shadow: var(--glow-ai), 0 0 0 1px rgba(139, 92, 246, 0.35);
  transform: translateY(-1px);
}

.num-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.num-hint {
  justify-self: center;
  margin: 0;
  max-width: 60ch;
  text-align: center;
  font-size: var(--text-footnote-size);
  line-height: var(--text-callout-lh);
  color: var(--text-secondary);
}

/* ---------- Результат ---------- */

.num-result {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

/* display выше перебивает UA-правило для [hidden], и до первого расчёта
   пустые карточки результата занимали бы экран. Фиксируем приоритет. */
.num-result[hidden] {
  display: none !important;
}

/* Тот же staggered fade + slide, что у калькулятора совместимости. */
.num-stagger {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.num-result.is-visible .num-stagger {
  opacity: 1;
  transform: none;
}

.num-result-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.num-result-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
}

.num-summary {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  max-width: 60ch;
  overflow-wrap: anywhere;
}

/* Кольцо: трек .ring-track и обёртка .score-num из style.css, заливка своя. */
.num-ring {
  position: relative;
  width: 200px;
  height: 200px;
}

.num-ring svg {
  transform: rotate(-90deg);
  overflow: visible;
}

.num-ring-fill {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dashoffset 2.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.num-tone-positive .num-ring-fill {
  stroke: var(--num-positive);
  filter: drop-shadow(0 4px 14px rgba(95, 191, 147, 0.45));
}

.num-tone-caution .num-ring-fill {
  stroke: var(--num-caution);
  filter: drop-shadow(0 4px 14px rgba(224, 166, 66, 0.45));
}

.num-tone-negative .num-ring-fill {
  stroke: var(--num-negative);
  filter: drop-shadow(0 4px 14px rgba(229, 100, 91, 0.45));
}

.num-score-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  font-size: var(--text-score-size);
  line-height: var(--text-score-lh);
  letter-spacing: var(--text-score-ls);
}

.num-tone-positive .num-score-value { color: var(--num-positive); }
.num-tone-caution .num-score-value { color: var(--num-caution); }
.num-tone-negative .num-score-value { color: var(--num-negative); }

.num-score-overline {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Карточки результата — внутренние отступы как у .aic-card на странице
   тренажёра: 24 сверху и снизу, 20 по бокам. */
.num-card {
  padding: var(--space-6) var(--space-5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--surface-glass-strong);
}

.num-card-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-title-size);
  line-height: var(--text-title-lh);
  letter-spacing: var(--text-title-ls);
}

.num-card p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-callout-size);
  line-height: 1.6;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.num-card p:last-child {
  margin-bottom: 0;
}

.num-card p strong {
  color: var(--text-primary);
}

/* Шкалы */
.num-scale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, 200px) 44px;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--hit-min);
  border-bottom: 1px solid var(--border-subtle);
}

.num-scale:last-child {
  border-bottom: none;
}

.num-scale-label {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-callout-size);
  color: var(--text-primary);
  min-width: 0;
}

.num-scale-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.num-scale-track span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.num-scale-track span.num-tone-positive { background: var(--num-positive); }
.num-scale-track span.num-tone-caution { background: var(--num-caution); }
.num-scale-track span.num-tone-negative { background: var(--num-negative); }

.num-scale-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  font-size: var(--text-callout-size);
  text-align: right;
  color: var(--text-primary);
}

/* Карточки партнёров */
.num-people {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 768px) {
  .num-people {
    grid-template-columns: 1fr 1fr;
  }
}

.num-person {
  padding: var(--space-6) var(--space-5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--surface-glass-strong);
  min-width: 0;
}

.num-person-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-title-size);
  line-height: var(--text-title-lh);
  letter-spacing: var(--text-title-ls);
  overflow-wrap: anywhere;
}

.num-person p {
  margin: 0 0 var(--space-3);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.num-person p strong {
  color: var(--text-primary);
}

.num-person-lead {
  margin-bottom: var(--space-2);
}

.num-person-lead strong {
  color: var(--gold-300);
}

.num-square-title {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-footnote-size);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.num-square {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  max-width: 260px;
}

.num-square-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hit-min);
  padding: var(--space-1) 2px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-input);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-callout-size);
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.num-square-cell.is-empty {
  color: var(--text-disabled);
  background: transparent;
}

.num-square-notes {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-footnote-size);
  line-height: var(--text-callout-lh);
  color: var(--text-secondary);
}

/* Действия под результатом */
.num-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
}

.num-share {
  min-height: var(--hit-min);
}

.num-share-note {
  margin: 0;
  font-size: var(--text-footnote-size);
  color: var(--num-positive);
}

/* ---------- Таблица 9×9 в SEO-блоке ---------- */

.num-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-4) 0;
  border-radius: var(--radius-md);
}

.num-matrix {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: var(--text-footnote-size);
}

.num-matrix th {
  font-weight: var(--fw-semibold);
  text-align: center;
  padding: var(--space-2);
  background: var(--surface-glass-strong);
  color: var(--gold-300);
  white-space: nowrap;
}

.num-matrix td {
  padding: var(--space-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--surface-glass);
}

.num-matrix td.num-tone-positive {
  color: var(--num-positive);
  background: rgba(95, 191, 147, 0.1);
}

.num-matrix td.num-tone-caution {
  color: var(--num-caution);
  background: rgba(224, 166, 66, 0.1);
}

.num-matrix td.num-tone-negative {
  color: var(--num-negative);
  background: rgba(229, 100, 91, 0.1);
}

.num-disclaimer {
  font-size: 14px;
  color: var(--text-tertiary);
}

/* ---------- Мобильные ---------- */

@media (max-width: 599px) {
  /* Боковые отступы внутри карточек на мобильных не режем: на соседних
     страницах (.aic-card) они остаются 20px, и текст в карточке должен
     начинаться на том же расстоянии от края экрана. Ужимаем только по
     вертикали. */
  .num-partner {
    padding: var(--space-4) var(--space-5);
  }

  .num-date input[type='date'] {
    padding-inline: 10px;
  }

  .num-ring {
    width: 168px;
    height: 168px;
  }

  .num-score-value {
    font-size: 52px;
  }

  .num-card,
  .num-person {
    padding: var(--space-5);
  }

  /* В 350px подпись, полоса и число в одну строку не помещаются: подпись
     ломается на три строки, а полоса сжимается до 56px. Раскладываем в две
     строки — подпись и число сверху, полоса под ними. */
  .num-scale {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'label value'
      'track track';
    align-items: baseline;
    row-gap: var(--space-2);
    column-gap: var(--space-3);
    min-height: 0;
    padding: var(--space-3) 0;
  }

  .num-scale-label { grid-area: label; }
  .num-scale-value { grid-area: value; }
  .num-scale-track { grid-area: track; }

  .num-actions .btn {
    width: 100%;
  }

  .num-square {
    max-width: none;
  }

  .num-matrix {
    font-size: var(--text-caption-size);
    min-width: 460px;
  }

  .num-matrix th,
  .num-matrix td {
    padding: 6px 4px;
  }
}

/* Доступность: prefers-reduced-motion отключает анимации */
@media (prefers-reduced-motion: reduce) {
  .num-stagger,
  .num-ring-fill,
  .num-scale-track span {
    transition: none;
  }
}