/* Card wrapper */
.fa-chart-card{
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 10px 10px 12px;
    background: #fff;
}
.fa-chart-title{
    font-size: 12px;      /* was 14px */
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: .1px;
}
.fa-charts.fa-layout-4 .fa-chart-title{ font-size: 7px; }
.fa-charts.fa-layout-2 .fa-chart-title{ font-size: 13px; }
/* Chart base */
.fa-chart{
    position: relative;
    width: 100%;
    max-width: 360px;  /* adjust */
    margin: 0 auto;
}
.fa-chart__bg{
    width: 100%;
    height: auto;
    display: block;
}

/* Overlay (South Indian uses 4x4 grid with blanks) */
.fa-chart--si .fa-chart__overlay{
    position:absolute;
    inset:0;

    /* allow different padding per side */
    top:    var(--pad-top,    9%);
    right:  var(--pad-right,  6%);
    bottom: var(--pad-bottom, 6%);
    left:   var(--pad-left,   6%);

    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap:0;
    pointer-events:none;
}

.fa-chart__cell,
.fa-chart__span2{
    display: flex;
    align-items: center;
    justify-content: center;
}
.fa-chart__span2{ grid-column: span 2; }

.fa-chart__planets{
    display:flex;
    flex-wrap:wrap;
    gap: var(--g1, .16rem) var(--g2, .22rem);
    max-width:96%;
    max-height:90%;
    align-content:center;
    justify-content:center;
    padding: var(--pad, .12rem);
}

.fa-chart__tag{
    font-weight:800;

    /* smaller by default */
    font-size: var(--fs, clamp(8px, 1.2vw, 10px));

    line-height:1.05;
    white-space:nowrap;
    display:inline-block;
    min-width:2ch;
    text-align:center;
}
/* =========================
   North Indian overlay
   ========================= */

.fa-chart--ni .fa-chart__overlay{
    --pad: 6.5%;
    position:absolute;
    inset:0;
    top:var(--pad); right:var(--pad); bottom:var(--pad); left:var(--pad);
    pointer-events:none;
}

.fa-chart--ni .fa-chart__house{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding-top: 14px; /* reserve space for sign label */
    box-sizing: border-box;
}

.fa-chart--ni .fa-chart__sign{
    position:absolute;
    top:4px;
    left:6px;
    font-weight:700;
    font-size:9px;
    line-height:1.0;
    color:#222;
    background: rgba(255,255,255,.80);
    padding: 1px 4px;
    border-radius: 4px;
}
.fa-chart--ni .fa-chart__planets{
    margin-top: 2px;
    max-height: 86%;
}

/* Reuse same planet layout + tag from your base chart css:
   .fa-chart__planets, .fa-chart__tag etc.
*/

/* Outer ring */
.fa-chart--ni .fa-chart__h2  { top:-3%;  left:15%;  width:21%;   height:21%; }
.fa-chart--ni .fa-chart__h3  { top:8.8%; left:1.0%; width:18.5%; height:32%; }
.fa-chart--ni .fa-chart__h5  { top:58.0%;left:1%;   width:18.5%; height:32%; }
.fa-chart--ni .fa-chart__h6  { top:80%;  left:15%;  width:21%;   height:21%; }
.fa-chart--ni .fa-chart__h8  { top:80%;  left:65%;  width:21%;   height:21%; }
.fa-chart--ni .fa-chart__h9  { top:60%;  left:80%;  width:18.5%; height:32%; }
.fa-chart--ni .fa-chart__h11 { top:10%;  left:80%;  width:18.5%; height:32%; }
.fa-chart--ni .fa-chart__h12 { top:-3%;  left:65%;  width:21%;   height:21%; }

/* Inner ring */
.fa-chart--ni .fa-chart__h1  { top:10%;  left:34%;  width:32%;   height:18.5%; }
.fa-chart--ni .fa-chart__h4  { top:38%;  left:15.0%;width:21%;   height:21%; }
.fa-chart--ni .fa-chart__h7  { top:62%;  left:34%;  width:32%;   height:18.5%; }
.fa-chart--ni .fa-chart__h10 { top:38%;  left:65%;  width:21%;   height:21%; }
/* -------------------------
   Shared chart card
------------------------- */
.fa-chart-card{
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 10px 10px 12px;
    background: #fff;
}
.fa-chart-title{
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 8px;
    letter-spacing: .2px;
}

.fa-chart{
    position: relative;
    width: 100%;
    max-width: 360px; /* adjust for your grid */
    margin: 0 auto;
}
.fa-chart__bg{
    width: 100%;
    height: auto;
    display: block;
}

/* tags */
.fa-chart__planets{
    display:flex;
    flex-wrap:wrap;
    gap:.22rem .32rem;
    max-width:92%;
    max-height:82%;
    align-content:center;
    justify-content:center;
    padding:.20rem;
}

.fa-chart__tag{
    font-weight:800;
    font-size: clamp(10px, 1.7vw, 12px);
    line-height:1.1;
    white-space:nowrap;
}
.fa-chart__tag.is-asc{ text-decoration: underline;
color:red;
}

/* -------------------------
   South Indian overlay
------------------------- */
.fa-chart--si .fa-chart__overlay{
    position:absolute;
    inset:0;

    --pad: 6%;
    top:var(--pad); right:var(--pad); bottom:var(--pad); left:var(--pad);

    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap:0;
    pointer-events:none;
}

.fa-chart--si .fa-chart__cell,
.fa-chart--si .fa-chart__span2{
    display:flex;
    align-items:center;
    justify-content:center;
}
.fa-chart--si .fa-chart__span2{ grid-column: span 2; }

/* Force 2 items per row inside each sign/house */
.fa-chart__planets{
    display: grid !important;
    grid-template-columns: repeat(2, max-content) !important;
    grid-auto-rows: max-content !important;
    gap: .10rem .18rem !important;
    place-content: center !important;     /* centers the grid inside box */
    justify-items: center !important;     /* centers each tag */
    max-width: 96% !important;
    max-height: 90% !important;
    padding: .08rem !important;
}

/* Slightly smaller default tag so 3+ always fits better */
.fa-chart__tag{
    font-size: 9px !important;
    line-height: 1.05 !important;
    min-width: 2ch;
    text-align: center;
}
/* NI house container: reserve top area for the sign badge */
.fa-chart--ni .fa-chart__house{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;

    padding-top: 16px;          /* space for sign label */
    box-sizing: border-box;
}

/* NI sign label = corner badge */
.fa-chart--ni .fa-chart__sign{
    position:absolute;
    top: 2px;
    left: 3px;                  /* change to right:3px if you prefer */
    font-weight: 800;
    font-size: 8px;
    line-height: 1;
    color: #222;

    background: rgba(255,255,255,.85);
    padding: 1px 4px;
    border-radius: 4px;
    pointer-events: none;
}
.fa-chart--ni .fa-chart__house .fa-chart__planets{
    --fs: 8px;
    --g1: .08rem;
    --g2: .12rem;
    --pad: .06rem;
}
/* ==============================
   NI: sign label without overlap
   ============================== */

/* reserve a top strip so planets don't collide with sign label */
.fa-chart--ni .fa-chart__house{
    padding-top: 18px !important;
    box-sizing: border-box !important;
}

/* corner badge */
.fa-chart--ni .fa-chart__sign{
    position: absolute !important;
    top: 2px !important;
    left: 3px !important;            /* default: top-left */
    z-index: 3 !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .2px;
    color: #111 !important;
    background: rgba(255,255,255,.90) !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
    pointer-events: none !important;
}

/* planets: make them 2-per-row so they don't form a tall vertical stack */
.fa-chart--ni .fa-chart__planets{
    display: grid !important;
    grid-template-columns: repeat(2, max-content) !important;
    grid-auto-rows: max-content !important;
    gap: .08rem .14rem !important;
    place-content: center !important;
    justify-items: center !important;
    margin-top: 2px !important;
    max-height: 86% !important;
}

/* slightly smaller tags in NI for crowded houses */
.fa-chart--ni .fa-chart__tag{
    font-size: var(--fs, 8px) !important;
    line-height: 1.05 !important;
}
/* per-house corner tuning */
.fa-chart--ni .fa-chart__sign--h1,
.fa-chart--ni .fa-chart__sign--h2,
.fa-chart--ni .fa-chart__sign--h12{
    top: 2px !important; left: 3px !important; right: auto !important; bottom: auto !important;
}

.fa-chart--ni .fa-chart__sign--h3,
.fa-chart--ni .fa-chart__sign--h4,
.fa-chart--ni .fa-chart__sign--h5{
    top: auto !important; bottom: 2px !important; left: 3px !important; right: auto !important;
}

.fa-chart--ni .fa-chart__sign--h6,
.fa-chart--ni .fa-chart__sign--h7,
.fa-chart--ni .fa-chart__sign--h8{
    top: auto !important; bottom: 2px !important; left: auto !important; right: 3px !important;
}

.fa-chart--ni .fa-chart__sign--h9,
.fa-chart--ni .fa-chart__sign--h10,
.fa-chart--ni .fa-chart__sign--h11{
    top: 2px !important; left: auto !important; right: 3px !important; bottom: auto !important;
}
/* =========================================
   Layout scaling (2 charts bigger than 4)
   ========================================= */

.fa-charts{
    --tag-base: 9px;          /* default for 4-chart grid */
    --sign-base: 7px;
    --chart-max: 360px;
    --gap-y: .10rem;
    --gap-x: .18rem;
    --pad: .08rem;
}

/* Bigger charts + bigger text for layout=2 */
.fa-charts.fa-layout-2{
    --tag-base: 12px;
    --sign-base: 9px;
    --chart-max: 460px;       /* increase chart size */
    --gap-y: .14rem;
    --gap-x: .22rem;
    --pad: .12rem;
}

/* Apply the variables */
.fa-charts .fa-chart{ max-width: var(--chart-max) !important; }

.fa-charts .fa-chart__planets{
    gap: var(--g1, var(--gap-y)) var(--g2, var(--gap-x)) !important;
    padding: var(--pad, .08rem) !important;
}

.fa-charts .fa-chart__tag{
    font-size: var(--fs, var(--tag-base)) !important; /* --fs still shrinks crowded signs */
    line-height: 1.05 !important;
}

/* NI sign label scales too */
.fa-charts .fa-chart--ni .fa-chart__sign{
    font-size: var(--sign-base) !important;
}
/* -------------------------------
   NI: sign label strip (no overlap)
-------------------------------- */

/* House is a column: top strip = sign, rest = planets */
.fa-chart--ni .fa-chart__house{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    padding: 0 !important;                 /* reset old padding */
}

/* Sign label becomes a dedicated strip */
.fa-chart--ni .fa-chart__sign{
    position: static !important;           /* stop absolute positioning */
    order: 0 !important;
    display: inline-block !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    background: rgba(255,255,255,.90) !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
    z-index: 2 !important;
}

/* Planets get the remaining area */
.fa-chart--ni .fa-chart__planets{
    order: 1 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 96% !important;
    max-height: calc(100% - 14px) !important; /* leaves room for sign strip */
    margin: 0 !important;
    padding: .06rem !important;

    display: grid !important;
    grid-template-columns: repeat(2, max-content) !important;
    grid-auto-rows: max-content !important;
    gap: .08rem .14rem !important;
    place-content: center !important;
    justify-items: center !important;
}

/* ==========================
   Ashtakavarga (numbers) - overrides
   ========================== */
.fa-av-charts .fa-av-val{
    font-size: clamp(16px, 2.3vw, 22px) !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .2px;
}

/* box behind the number + fill */
.fa-av-charts .fa-av-cellbox{
    width: 78%;
    height: 62%;
    border-radius: 10px;
    display:flex;
    align-items:center;
    justify-content:center;

    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.78);

    /* fill (0..1) from --pct */
    background-image: linear-gradient(
            180deg,
            rgba(25,135,84,.22) 0%,
            rgba(25,135,84,.22) calc(var(--pct) * 100%),
            rgba(255,255,255,0) calc(var(--pct) * 100%)
    );
}
/* ==========================
   Ashtakavarga: enable clicks on overlay
   ========================== */
.fa-av-chart .fa-chart__overlay{
    pointer-events: auto !important;
}

.fa-av-chart .fa-chart__cell,
.fa-av-chart .fa-chart__house{
    pointer-events: auto !important;
    cursor: pointer;
}

/* optional: make the box feel clickable */
.fa-av-chart .fa-av-cellbox{
    cursor: pointer;
}
/* ==========================
   Ashtakavarga: selection highlight
   ========================== */
.fa-av-chart [data-faav-sign].is-active{
    outline: 2px solid rgba(13,110,253,.55);
    outline-offset: 2px;
    border-radius: 8px;
}

.fa-av-chart [data-faav-sign].is-active .fa-av-cellbox{
    box-shadow: 0 10px 24px rgba(13,110,253,.18);
}
.fa-av-mini .badge{ font-size:.82rem; }
.fa-av-mini .table th, .fa-av-mini .table td{ padding:.25rem .5rem; }
/* North Indian: desktop readability boost (mobile unchanged) */
@media (min-width: 992px){
    .fa-chart--ni .fa-chart__planets{
        --fs: clamp(10px, 0.75vw, 13px);
    }

    /* Optional: make sign numbers a touch clearer too */
    .fa-chart--ni .fa-chart__sign{
        font-size: 11px;
    }
}
/* ================================
   North Indian: improve readability
   specifically for 2-chart layout on desktop
   (affects horo.php + shodasha.php)
================================== */
@media (min-width: 992px){

    /* Base bump for NI in 2-up layout */
    .fa-charts.fa-layout-2 .fa-chart--ni .fa-chart__planets{
        --fs: clamp(11px, 0.9vw, 14px);
    }

    /* Optional: clearer sign numbers in NI */
    .fa-charts.fa-layout-2 .fa-chart--ni .fa-chart__sign{
        font-size: 12px;
    }

    /* If your NI template sets very small per-cell --fs inline (crowded houses),
       keep a minimum on desktop so it doesn't become micro-text. */
    .fa-charts.fa-layout-2 .fa-chart--ni .fa-chart__cell[style*="--fs:6px"]{ --fs: 9px !important; }
    .fa-charts.fa-layout-2 .fa-chart--ni .fa-chart__cell[style*="--fs:7px"]{ --fs: 10px !important; }
    .fa-charts.fa-layout-2 .fa-chart--ni .fa-chart__cell[style*="--fs:8px"]{ --fs: 11px !important; }
}
.fa-chart-bar::before { content: none !important; }