/* Тест «совместимость пары» (/taro/sovmestimost/): поверх taro.css, те же токены витрины из deploy/landing/DESIGN.md. */
[hidden]{display:none!important}
.compat-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.compat-form h2{margin-bottom:10px}
.compat-form fieldset{margin:0 0 14px;padding:0;border:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 14px}
.compat-form legend{padding:0 0 6px;font-size:19px}
.compat-form label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.compat-form input{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:inherit;font-size:17px}
.compat-form input:focus-visible,.compat-link input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.compat-form .taro-button{margin-top:8px}
.compat-error{margin:4px 0 0;padding:10px 14px;border-radius:14px;background:var(--lilac-mist);color:var(--ink);font-size:15px}
.compat-result{padding:0 0 30px;outline:none}
.compat-result>.taro-panel{margin-bottom:24px}
.compat-result h2 em{font-style:italic;color:var(--accent)}
.compat-cards{display:grid;grid-template-columns:repeat(3,minmax(0,170px));gap:18px;margin:18px 0 0}
.compat-cards figure{margin:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;justify-items:center;align-content:start;text-align:center}
.compat-cards img{width:100%;height:auto;aspect-ratio:4/7;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.compat-cards figure:nth-child(2) img{box-shadow:0 18px 40px rgba(17,17,18,.14)}
.compat-cards figcaption{display:grid;gap:2px;max-width:100%;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.compat-cards strong{font-weight:500;font-size:17px;color:var(--ink)}
.compat-pair-text{margin:22px 0 0;max-width:720px;font-size:20px;line-height:1.45;letter-spacing:-.015em}
.compat-meanings{margin:18px 0 0;max-width:720px;display:grid;gap:4px}
.compat-meanings dt{font-size:14px;color:var(--muted)}
.compat-meanings dd{margin:0 0 10px}
.compat-next{padding:0 0 10px}
.compat-link{display:grid;gap:6px;margin-top:12px;font-size:14px;color:var(--muted)}
.compat-link input{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
.compat-again{border:0;background:none;padding:0;cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.compat-arcana{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:20px 0 0;padding:0;list-style:none}
.compat-arcana li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start;scroll-margin-top:16px}
.compat-arcana img{width:64px;height:auto;aspect-ratio:4/7;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.compat-arcana h3{margin:0 0 4px;font-weight:500;font-size:17px;line-height:1.3}
.compat-arcana h3 a{text-decoration:none}
.compat-arcana h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.compat-arcana p{margin:0;font-size:15px;line-height:1.5}
@media (max-width:900px){.compat-hero{grid-template-columns:minmax(0,1fr)}.compat-arcana{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.compat-form fieldset{grid-template-columns:minmax(0,1fr)}.compat-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .compat-cards strong{font-size:14px}.compat-pair-text{font-size:18px}}