/* ══════ CHART TABLE — natal chart ══════ */
/* Width controlled by page-specific CSS (calc3.css) */

#chartTableBlock {
    display:none; margin-top:.8rem; margin-bottom:0;
    animation:fadeUp .6s forwards;
}
#chartTableBlock.visible { display:block; }

.chart-table-section {
    background:rgba(13,8,32,.4);
    border:1px solid rgba(107,63,160,.12);
    overflow:hidden;
}

.chart-table-title {
    font-family:'Cormorant Garamond',serif;
    font-size:1.3rem; color:var(--text-muted); font-weight:400;
    padding:1rem .8rem .7rem; text-align:center;
    border-bottom:1px solid rgba(212,165,74,.12);
    margin:0;
}

.chart-table-scroll {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:rgba(212,165,74,.3) rgba(13,8,32,.5);
}
.chart-table-scroll::-webkit-scrollbar { height:6px; }
.chart-table-scroll::-webkit-scrollbar-track { background:rgba(13,8,32,.5); border-radius:3px; }
.chart-table-scroll::-webkit-scrollbar-thumb { background:rgba(212,165,74,.3); border-radius:3px; }
.chart-table-scroll::-webkit-scrollbar-thumb:hover { background:rgba(212,165,74,.5); }

.chart-table {
    width:100%; border-collapse:collapse;
    font-family:'Nunito Sans',sans-serif;
    font-size:13px; line-height:1.4;
    white-space:nowrap;
}

/* ══ Header ══ */
.chart-table thead th {
    font-size:11px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--gold); font-weight:600;
    padding:6px 5px;
    border-bottom:2px solid rgba(212,165,74,.18);
    text-align:left;
    background:rgba(13,8,32,.95);
    position:sticky; top:0; z-index:1;
}

/* ══ Rows ══ */
.chart-table tbody tr { transition:background .12s; }
.chart-table tbody tr:nth-child(odd) { background:rgba(30,16,64,.1); }
.chart-table tbody tr:nth-child(even) { background:rgba(8,5,16,.2); }
.chart-table tbody tr:hover { background:rgba(212,165,74,.06); }

.chart-table td {
    padding:5px 5px;
    vertical-align:middle;
    border-bottom:1px solid rgba(107,63,160,.04);
}

/* ══ Columns ══ */
.ct-planet { color:var(--gold); font-weight:700; font-size:13px; }
.ct-karaka { color:var(--orchid); font-weight:500; font-size:12px; }
.ct-degrees { color:var(--cream-muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.ct-rashi { font-size:12.5px; }
.ct-navamsha { color:var(--cream-muted); font-size:12.5px; }
.ct-nakshatra { color:var(--gold-light); font-size:12.5px; }
.ct-pada { color:var(--amber); font-weight:700; }
.ct-nk-lord { color:var(--orchid); font-size:11.5px; }
.ct-rel { font-size:12.5px; }
.ct-house { text-align:center; color:var(--gold); font-weight:700; font-size:13px; }
.ct-ruler { color:var(--text-muted); font-size:12px; }
.ct-fb, .ct-eb { text-align:center; font-size:12.5px; font-weight:600; }
.ct-sb { text-align:center; font-size:12.5px; font-weight:500; }
.ct-bindu { text-align:center; font-size:12.5px; }
.ct-pos { font-size:10.5px; }
.ct-center { text-align:center; }

/* ══ Rashi element colors ══ */
.rashi-fire { color:#E8A040; }
.rashi-earth { color:#90A870; }
.rashi-air { color:#70B8D0; }
.rashi-water { color:#6890C0; }

/* ══ Relationship ══ */
.rel-exalt { color:#50C8B8; font-weight:600; }
.rel-own { color:#50C8B8; font-weight:500; }
.rel-moola { color:#50C8B8; }
.rel-friend { color:var(--gold-light); }
.rel-neutral { color:var(--text-muted); }
.rel-enemy { color:#E07090; font-weight:500; }
.rel-debil { color:#E06080; font-weight:700; }

/* ══ FB/EB ══ */
.fb-plus { color:#50C8B8; }
.fb-minus { color:#E07090; }
.fb-neutral { color:var(--cream-muted); }
.fb-h { color:var(--text-muted); }
.fb-yk { color:var(--amber); font-weight:700; }

/* ══ Shadbala ══ */
.sb-high { color:#50C8B8; font-weight:600; }
.sb-mid { color:var(--cream); }
.sb-low { color:#E07090; font-weight:600; }

/* ══ Bindu ══ */
.bi-high { color:#50C8B8; font-weight:500; }
.bi-mid { color:var(--cream-muted); }
.bi-low { color:#E07090; }

/* ══ Position ══ */
.pos-good { color:#50C8B8; font-weight:500; }
.pos-ok { color:var(--gold-light); }
.pos-bad { color:#E07090; font-weight:500; }
.pos-retro { color:var(--amber); font-weight:700; }

/* ══ Wider layout when chart table is active ══ */
body.has-chart-table .main,
body.has-chart-table .slider-wrap {
    max-width:880px;
}
body.has-chart-table .slider-wrap {
    border-top:none;
}

/* ══ MOBILE ══ */
@media(max-width:600px){
    body.has-chart-table .main { max-width:100%; }
    .chart-table-section { padding:0; }
    .chart-table { font-size:10px; }
    .chart-table thead th { font-size:8.5px; padding:4px 3px; }
    .chart-table td { padding:4px 3px; }
    .ct-planet { font-size:10.5px; }
    .chart-table-title { font-size:.85rem; padding:.5rem; }
}