/* ══════ COMPATIBILITY CALCULATOR — tabs, two-person form, result ══════
   Isolated from the existing personal calculator flow.
   Only affects elements scoped to .calc-tabs / .compat-* / #formCompat / #compatResultBlock.
*/

/* ── Tabs ── */
.calc-tabs {
    display:flex;
    gap:.4rem;
    margin:0 0 1.5rem 0;
    padding:.35rem;
    background:rgba(8,5,16,.55);
    border:1px solid rgba(107,63,160,.2);
    border-radius:2px;
    position:relative;
    z-index:2;
}
.calc-tab {
    flex:1 1 50%;
    background:transparent;
    border:none;
    color:var(--text-muted);
    font-family:'Nunito Sans',sans-serif;
    font-size:.78rem;
    font-weight:500;
    letter-spacing:.12em;
    text-transform:uppercase;
    padding:.75rem 1rem;
    cursor:pointer;
    transition:color .25s, background .25s, box-shadow .25s;
    position:relative;
}
.calc-tab:hover { color:var(--gold-light); }
.calc-tab.active {
    color:var(--deep);
    background:linear-gradient(135deg,var(--gold),var(--gold-dark));
    box-shadow:0 2px 14px rgba(212,165,74,.22);
}
.calc-tab:focus-visible {
    outline:2px solid rgba(212,165,74,.45);
    outline-offset:2px;
}

/* ── Panes ── */
.calc-pane { display:none; }
.calc-pane.active { display:block; }

/* ── Compat form ── */
.compat-intro {
    font-size:.85rem;
    color:var(--text-muted);
    line-height:1.7;
    margin:0 0 1.4rem 0;
    text-align:center;
}
.compat-person {
    position:relative;
    padding:1.2rem 1.2rem 1.1rem;
    margin-bottom:1.2rem;
    background:linear-gradient(135deg,rgba(30,16,64,.35),rgba(107,63,160,.04));
    border:1px solid rgba(107,63,160,.16);
    border-radius:2px;
}
.compat-person + .compat-person { margin-top:.2rem; }
.compat-person-title {
    display:flex;
    align-items:center;
    gap:.6rem;
    font-family:'Cormorant Garamond',serif;
    font-size:1.15rem;
    color:var(--gold);
    font-weight:500;
    margin:0 0 1rem 0;
    letter-spacing:.02em;
}
.compat-person-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(212,165,74,.22),rgba(212,165,74,.08));
    border:1px solid rgba(212,165,74,.35);
    color:var(--gold);
    font-family:'Nunito Sans',sans-serif;
    font-size:.82rem;
    font-weight:600;
}

/* Local city suggestions inside compat pane must stay above siblings */
#formCompat .city-wrapper { position:relative; z-index:50; }

/* ── Result block ── */
.compat-result {
    margin-top:2rem;
    animation:fadeUp .8s forwards;
}
.compat-result #compatPerson1Table,
.compat-result #compatPerson2Table { margin-bottom:1rem; }

.compat-reading-card {
    margin-top:1.5rem;
    padding:clamp(1.5rem,3vw,2.4rem);
    background:linear-gradient(135deg,rgba(30,16,64,.55),rgba(74,32,64,.25));
    border:1px solid rgba(212,165,74,.12);
    box-shadow:0 30px 80px rgba(0,0,0,.4);
    position:relative;
}
.compat-reading-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(212,165,74,.4),transparent);
}
.compat-reading-header {
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1.3rem;
    padding-bottom:1rem;
    border-bottom:1px solid rgba(212,165,74,.12);
}
.compat-reading-icon {
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    font-size:1.6rem;
    color:var(--gold);
    background:radial-gradient(circle,rgba(212,165,74,.12),transparent 70%);
    border:1px solid rgba(212,165,74,.25);
    border-radius:50%;
}
.compat-reading-eyebrow {
    font-size:.68rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--orchid);
    margin-bottom:.25rem;
}
.compat-reading-title {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.4rem,3vw,1.8rem);
    color:var(--gold);
    font-weight:500;
    line-height:1.2;
}
.compat-reading-text {
    font-size:clamp(.95rem,1.8vw,1rem);
    color:var(--cream-muted);
    line-height:1.9;
    font-weight:300;
}
.compat-reading-text p { margin:0 0 1rem 0; }
.compat-reading-text p:last-child { margin-bottom:0; }
.compat-reading-text strong { color:var(--gold-light); font-weight:500; }
.compat-reading-text em { color:var(--cream); font-style:italic; }
.compat-reading-text .read-heading {
    font-family:'Cormorant Garamond',serif;
    font-size:1.25rem;
    color:var(--gold);
    font-weight:500;
    margin:1.5rem 0 .8rem 0;
    letter-spacing:.02em;
}

/* Label above each chart table inside compat result */
.compat-chart-label {
    font-family:'Cormorant Garamond',serif;
    font-size:1.25rem;
    color:var(--gold);
    text-align:center;
    margin:0 0 .5rem 0;
    font-weight:500;
    letter-spacing:.02em;
}

/* ── Loading dots inside compat result while GPT is streaming ── */
.compat-loading {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.35rem;
    padding:2rem 0;
    color:var(--text-muted);
    font-size:.88rem;
}
.compat-loading-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--gold);
    opacity:.3;
    animation:compatLoadDot 1.2s infinite ease-in-out;
}
.compat-loading-dot:nth-child(2) { animation-delay:.15s; }
.compat-loading-dot:nth-child(3) { animation-delay:.3s; }
@keyframes compatLoadDot {
    0%,80%,100% { opacity:.3; transform:scale(.9); }
    40% { opacity:1; transform:scale(1.1); }
}

/* ── Mobile tweaks ── */
@media (max-width:600px) {
    .calc-tab { font-size:.7rem; padding:.65rem .5rem; letter-spacing:.08em; }
    .compat-person { padding:1rem; }
    .compat-person-title { font-size:1rem; }
    .compat-person-badge { width:22px; height:22px; font-size:.72rem; }
    .compat-reading-card { padding:1.4rem 1.1rem; }
    .compat-reading-header { gap:.7rem; }
    .compat-reading-icon { width:40px; height:40px; font-size:1.3rem; }
}