/* ============================================================
   ProRoast · Совместимость по знакам зодиака (/compatibility/)
   Веб-адаптация токенов AuraUI (Docs/AppPreset/design_system.md):
   цвета/радиусы/отступы — через tokens.css, семантика оценок —
   positive #5FBF93 / caution #E0A642 / negative #E5645B
   (правило AuraTheme.Color.score: ≥75 / ≥45 / ниже).
   ============================================================ */

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

/* Калькулятору нужна более широкая рабочая область, чем обычной
   текстовой странице: две карточки и три колонки результата не
   должны сжимать русские подписи до переноса по буквам. */
#compat-app .container.narrow {
  max-width: 880px;
}

.compat-hero {
  /* Keep the heading at the same distance from the back-link card as feature
     articles: the link already provides the vertical separation. */
  padding: 0 0 var(--space-6);
  text-align: center;
}

.compat-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: clamp(28px, 5vw, var(--text-h1-size));
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  margin: var(--space-3) 0;
}

.compat-hero p {
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0 auto;
}

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

.compat-form {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.compat-partners {
  display: grid;
  gap: var(--space-5);
}

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

.compat-partner {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  /* Как и у .article-card: размытие на повторяющихся glass-карточках
     поверх фиксированного градиента заставляет GPU пересчитывать фон на
     каждом кадре скролла. Здесь эффект почти незаметен, поэтому заменяем
     его более плотной, но визуально эквивалентной заливкой. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--surface-glass-strong);
}

/* On desktop, partner cards share one height. Let the gender control absorb
   any spare space above it so date and zodiac modes align along the bottom. */
.compat-partner > .field:last-child {
  margin-top: auto;
}

.compat-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: 13px;
  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;
}

/* Переключатель режима: по дате / знак напрямую */
.compat-mode {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  padding: 3px;
  background: var(--surface-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}

.compat-mode label {
  display: flex;
  flex: 1;
  position: relative;
  min-width: 0;
}

.compat-mode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.compat-mode span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  width: 100%;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
}

.compat-mode input:checked + span {
  background: rgba(59, 130, 246, 0.12);
  color: var(--text-primary);
}

.compat-mode input:focus-visible + span {
  box-shadow: var(--ring-ai);
}

/* Дата */
.compat-date input[type='date'] {
  color-scheme: dark;
}

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

.compat-field-error {
  min-height: 1.2em;
  margin: var(--space-1) 0 0;
  font-size: 13px;
  color: var(--compat-negative);
}

.compat-boundary {
  margin: var(--space-1) 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.compat-boundary-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: var(--fw-semibold);
  color: var(--text-link);
  text-decoration: underline;
  cursor: pointer;
}

/* Явные display-правила ниже перебивали бы атрибут hidden (UA-стиль),
   из-за чего скрытый режим ввода оставался видимым. Фиксируем приоритет. */
.compat-date[hidden],
.compat-signgrid[hidden],
.compat-boundary[hidden] {
  display: none !important;
}

/* Сетка 12 знаков */
.compat-signgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.compat-signgrid label {
  position: relative;
  min-width: 0;
}

.compat-signgrid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.compat-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) 2px;
  min-height: var(--hit-min);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-input);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  min-width: 0;
  text-align: center;
}

.compat-sign img {
  width: 22px;
  height: 22px;
  opacity: 0.85;
  filter: invert(0.92);
}

[data-theme='light'] .compat-sign img {
  filter: none;
}

.compat-signgrid input:checked + .compat-sign {
  border-color: var(--border-ai);
  background: rgba(59, 130, 246, 0.12);
  color: var(--text-primary);
}

.compat-signgrid input:focus-visible + .compat-sign {
  box-shadow: var(--ring-ai);
}

/* Пол */
.compat-gender {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.compat-gender label {
  position: relative;
  min-width: 0;
}

.compat-gender input {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.compat-gender span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  width: 100%;
  padding: 4px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-input);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.compat-gender input:checked + span {
  border-color: var(--border-ai);
  background: rgba(59, 130, 246, 0.12);
  color: var(--text-primary);
}

.compat-gender input:focus-visible + span {
  box-shadow: var(--ring-ai);
}

.compat-submit {
  justify-self: center;
  min-width: min(100%, 320px);
  min-height: var(--hit-min);
  margin-top: var(--space-2);
  padding: 12px 22px;
  border-color: var(--border-default);
  background: var(--surface-glass-strong);
  color: var(--text-primary);
  box-shadow: none;
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  transition: transform 0.12s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.compat-submit:not(:disabled):hover {
  border-color: var(--border-gold);
  box-shadow: var(--glow-soft-ai);
  transform: translateY(-1px);
}

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

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

.compat-result {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

/* staggered fade + slide 12px, 0.22–0.42s, cubic-bezier(0.22,1,0.36,1)
   (AuraTheme.Motion.easeOut) */
.compat-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);
}

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

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

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

.compat-summary {
  margin: 0;
  color: var(--text-secondary);
  max-width: 60ch;
  overflow-wrap: anywhere;
}

/* Кольцо: трек из style.css (.ring-track), заливка своя — цвет по оценке */
.compat-ring {
  position: relative;
  width: 200px;
  height: 200px;
}

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

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

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

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

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

.compat-score-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--text-score-size);
  line-height: 1;
  letter-spacing: var(--text-score-ls);
}

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

.compat-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);
}

/* Категории */
.compat-cats {
  padding: var(--space-2) var(--space-5);
  /* Список категорий и три итоговые карточки могут быть на экране
     одновременно; не создаём для каждой дорогостоящий backdrop layer. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--surface-glass-strong);
}

.compat-cat {
  border-bottom: 1px solid var(--border-subtle);
}

.compat-cat:last-child {
  border-bottom: none;
}

.compat-cat summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr minmax(56px, 120px) 34px 32px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  min-height: var(--hit-min);
}

.compat-cat summary::-webkit-details-marker {
  display: none;
}

/* The whole row is a native <summary>, so the chevron is a visual affordance
   for the same keyboard-accessible toggle rather than a second control. */
.compat-cat summary::after {
  content: '⌄';
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-input);
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.compat-cat[open] summary::after {
  transform: rotate(180deg);
  background: var(--surface-glass-strong);
  color: var(--text-primary);
}

.compat-cat summary:focus-visible::after {
  box-shadow: var(--ring-ai);
}

.compat-cat-icon {
  font-size: 18px;
}

.compat-cat-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.compat-cat-label {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 15px;
  color: var(--text-primary);
}

.compat-cat-title {
  font-size: 12px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compat-cat-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.compat-cat-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.compat-cat-bar-fill.compat-tone-positive { background: var(--compat-positive); }
.compat-cat-bar-fill.compat-tone-caution { background: var(--compat-caution); }
.compat-cat-bar-fill.compat-tone-negative { background: var(--compat-negative); }

.compat-cat-score {
  font-weight: 700;
  font-size: 15px;
  text-align: right;
  color: var(--text-primary);
}

.compat-cat-desc {
  padding: 0 0 var(--space-4);
}

.compat-cat-desc p {
  margin: 0 0 var(--space-3);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* Списки: сильные стороны / зоны риска / советы */
.compat-lists {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .compat-lists {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
}

.compat-list {
  padding: var(--space-5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--surface-glass-strong);
}

.compat-list-positive { border-color: rgba(95, 191, 147, 0.35); }
.compat-list-caution { border-color: rgba(224, 166, 66, 0.35); }
.compat-list-info { border-color: var(--border-ai); }

.compat-list-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 16px;
}

.compat-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.compat-list-items li {
  display: flex;
  gap: var(--space-2);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  min-width: 0;
  overflow-wrap: anywhere;
}

.compat-list-marker {
  flex: none;
}

/* Действия и CTA */
.compat-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

.compat-copied {
  align-self: center;
  font-size: 13px;
  color: var(--compat-positive);
}

.compat-error {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  color: var(--text-secondary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--surface-glass-strong);
}

@media (max-width: 599px) {
  .compat-partner {
    padding: var(--space-4);
  }

  .compat-mode span {
    padding-inline: var(--space-1);
    font-size: 12px;
  }

  .compat-gender {
    gap: var(--space-1);
  }

  .compat-gender span {
    padding-inline: var(--space-1);
    font-size: 12px;
  }

  .compat-cats {
    padding-inline: var(--space-4);
  }

  .compat-cat summary {
    grid-template-columns: auto minmax(0, 1fr) auto 32px;
    gap: var(--space-2);
  }

  .compat-cat-title {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .compat-cat-bar {
    grid-column: 2 / -1;
  }

  .compat-cat-score {
    min-width: 2ch;
  }
}

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