/* ══════════════════════════════════════════════════════════════
   COMPATIBILITY / SYNASTRY CHART — compatibility-chart.css
   ══════════════════════════════════════════════════════════════
   This file ASSUMES natal-chart.css has been loaded first.
   It does NOT redefine .nc-* classes — it only adds .cc-* classes
   for synastry-specific UI (two-person form, score gauge, hero
   grid, aspect cards, balance compare).

   The form fields, calculate button, breadcrumb, hero, time-unknown
   row, location autocomplete, FAQ blocks, related-cards, and the
   chart wheel layout itself all inherit natal-chart.css verbatim.
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════
   FORM — two natal-style cards stacked side by side
   with an "&" divider between them.
   ══════════════════════════════════════════════════ */

/* The calculator section needs more horizontal room for two people */
.cc-calculator-section{
    max-width:1100px;
}

/* The pair grid: Person A | & | Person B on desktop, stacks on mobile */
.cc-form-pair-grid{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:1.25rem;
    align-items:start;
    margin-bottom:1rem;
}
@media(max-width:880px){
    .cc-form-pair-grid{
        grid-template-columns:1fr;
        gap:.5rem;
    }
}

/* Each person's card-within-card */
.cc-form-person{
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.05);
    border-radius:10px;
    padding:1rem;
    display:flex;
    flex-direction:column;
    gap:.75rem;
}

.cc-form-person-label{
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-size:.95rem;
    color:#E8C547;
    font-weight:600;
    letter-spacing:.05em;
    text-align:center;
    padding-bottom:.4rem;
    border-bottom:1px solid rgba(232,197,71,.15);
}

/* The amp divider — small, vertical-centered between cards on desktop,
   horizontal break on mobile */
.cc-form-amp{
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-size:2rem;
    font-style:italic;
    color:#E8C547;
    align-self:center;
    padding:0 .25rem;
    opacity:.75;
    user-select:none;
}
@media(max-width:880px){
    .cc-form-amp{
        font-size:1.5rem;
        padding:.25rem 0;
        text-align:center;
        opacity:.5;
    }
}

/* Inside each person's card, the form-grid uses 3 cols (more compact than
   natal's 5 cols, since each card is narrower). Birth city full-width. */
.cc-form-person .cc-form-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:.6rem;
}
.cc-form-person .nc-field--location{
    grid-column:1/-1;
}
@media(max-width:480px){
    .cc-form-person .cc-form-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

/* The optional name field is full-width above the date grid */
.cc-field--name{
    grid-column:1/-1;
}


/* ══════════════════════════════════════════════════
   RESULTS HERO — score card + chart wheel side by side
   ══════════════════════════════════════════════════ */

.cc-hero-grid{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:1.5rem;
    align-items:start;
    margin-bottom:2.5rem;
}
@media(max-width:1100px){
    .cc-hero-grid{
        grid-template-columns:1fr;
        gap:1.25rem;
    }
}

.cc-hero-chart-section{
    min-width:0; /* let the chart shrink properly inside the grid */
}


/* ══════════════════════════════════════════════════
   CHART AREA — vertical stack: tabs, controls, then body
   This replaces .nc-wheel-layout (which is a flex row) since we
   need vertical stacking with three view containers.
   ══════════════════════════════════════════════════ */

.cc-chart-area{
    display:flex;
    flex-direction:column;
    gap:.85rem;
    position:relative;
}

.cc-chart-body{
    display:flex;
    align-items:flex-start;
    gap:1.25rem;
    position:relative;
}
@media(max-width:900px){
    .cc-chart-body{
        flex-direction:column;
    }
}

.cc-chart-stage{
    flex:1;
    min-width:0; /* allow flex item to shrink below content size */
    position:relative;
}

/* The balance panel — positioned overlay on the LEFT of the chart on
   desktop, stacks above the chart on mobile. We define it here since
   natal-chart.css doesn't have one (natal doesn't need it). */
.nc-balance-panel{
    flex:0 0 240px;
    background:rgba(18,18,18,.92);
    border:1px solid rgba(232,197,71,.18);
    border-radius:10px;
    padding:.85rem;
    color:#bbb;
    font-size:.78rem;
    backdrop-filter:blur(6px);
    align-self:stretch;
}
@media(max-width:900px){
    .nc-balance-panel{
        flex:0 0 auto;
        width:100%;
    }
}

/* Hide the balance panel via the toggle button */
.cc-chart-area.nc-balance-hidden .nc-balance-panel{
    display:none;
}


/* ══════════════════════════════════════════════════
   SCORE CARD — animated circular gauge + tier + breakdown
   ══════════════════════════════════════════════════ */

.cc-score-card{
    background:rgba(255,255,255,.025);
    border:1px solid rgba(232,197,71,.18);
    border-radius:14px;
    padding:1.5rem 1.25rem;
    text-align:center;
    color:#bbb;
}

.cc-score-names{
    font-size:.78rem;
    color:#888;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-bottom:.75rem;
}

.cc-score-circle-wrap{
    position:relative;
    width:180px;
    height:180px;
    margin:.25rem auto 1rem;
}
.cc-score-circle-svg{
    width:100%;
    height:100%;
    transform:rotate(-90deg);
}
.cc-score-circle-track{
    fill:none;
    stroke:rgba(232,197,71,.08);
    stroke-width:8;
}
.cc-score-circle-progress{
    fill:none;
    stroke:url(#cc-score-gradient);
    stroke-width:8;
    stroke-linecap:round;
    stroke-dasharray:502.65; /* 2π × 80 */
    stroke-dashoffset:502.65;
    transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1);
}
.cc-score-circle-text{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.cc-score-pct{
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-size:2.75rem;
    font-weight:700;
    color:#E8C547;
    line-height:1;
}
.cc-score-pct-suffix{
    font-size:1.25rem;
    color:#b8860b;
    margin-left:.05em;
    vertical-align:.4em;
}
.cc-score-pct-label{
    font-size:.65rem;
    color:#888;
    letter-spacing:.1em;
    text-transform:uppercase;
    margin-top:.15rem;
}

.cc-score-tier{
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-size:1.15rem;
    color:#f0e6d3;
    font-weight:600;
    margin-bottom:.25rem;
}
.cc-score-destiny{
    display:inline-block;
    font-size:.7rem;
    color:#E8C547;
    background:rgba(232,197,71,.1);
    padding:.2rem .55rem;
    border-radius:99px;
    border:1px solid rgba(232,197,71,.25);
    letter-spacing:.05em;
    margin-bottom:.75rem;
}

.cc-score-breakdown-toggle{
    background:none;
    border:1px solid rgba(232,197,71,.2);
    color:#bbb;
    padding:.45rem .85rem;
    border-radius:8px;
    font-size:.78rem;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
    margin-top:.25rem;
}
.cc-score-breakdown-toggle:hover{
    background:rgba(232,197,71,.05);
    border-color:rgba(232,197,71,.35);
}
.cc-score-breakdown-list{
    margin-top:1rem;
    text-align:left;
    font-size:.78rem;
    color:#ccc;
    border-top:1px solid rgba(232,197,71,.1);
    padding-top:.85rem;
}
.cc-score-breakdown-list[hidden]{display:none}
.cc-score-breakdown-item{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:.4rem 0;
    border-bottom:1px solid rgba(255,255,255,.04);
    gap:.6rem;
}
.cc-score-breakdown-item:last-child{border-bottom:none}
.cc-score-breakdown-text{flex:1; line-height:1.4}
.cc-score-breakdown-points{
    color:#E8C547;
    font-weight:700;
    font-size:.85rem;
    flex:0 0 auto;
}


/* ══════════════════════════════════════════════════
   CHART INTRO — small label above the chart wheel
   ══════════════════════════════════════════════════ */

.cc-chart-intro{
    text-align:center;
    margin-bottom:.6rem;
    font-size:.85rem;
    color:#888;
}
.cc-chart-intro-names{
    color:#f0e6d3;
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-weight:600;
    letter-spacing:.02em;
}


/* ══════════════════════════════════════════════════
   BALANCE PANEL — score-aware overlay on the chart
   (extends .nc-balance-panel from natal-chart.css)
   ══════════════════════════════════════════════════ */

.cc-bp-section{
    margin-bottom:1rem;
    padding-bottom:.85rem;
    border-bottom:1px solid rgba(232,197,71,.08);
}
.cc-bp-section:last-child{margin-bottom:0; padding-bottom:0; border-bottom:none}
.cc-bp-section-title{
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-size:.85rem;
    color:#f0e6d3;
    font-weight:600;
    margin-bottom:.5rem;
    letter-spacing:.03em;
}

.cc-bp-score-mini{
    text-align:center;
    padding:.5rem 0 .25rem;
}
.cc-bp-score-mini-pct{
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-size:1.75rem;
    font-weight:700;
    color:#E8C547;
    line-height:1;
}
.cc-bp-score-mini-tier{
    font-size:.72rem;
    color:#888;
    margin-top:.15rem;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.cc-bp-elem-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.25rem 0;
    font-size:.72rem;
    color:#aaa;
    gap:.45rem;
}
.cc-bp-elem-name{
    flex:0 0 60px;
    font-weight:600;
    letter-spacing:.04em;
}
.cc-bp-elem-bars{
    flex:1;
    display:flex;
    gap:.35rem;
    align-items:center;
}
.cc-bp-elem-bar{
    flex:1;
    height:6px;
    background:rgba(255,255,255,.05);
    border-radius:3px;
    overflow:hidden;
}
.cc-bp-elem-bar-fill{
    height:100%;
    background:currentColor;
    transition:width .8s cubic-bezier(.2,.8,.2,1);
}


/* ══════════════════════════════════════════════════
   CROSS-ASPECT CARDS — grid below the chart hero
   ══════════════════════════════════════════════════ */

.cc-section-block{
    margin:0 auto 2.5rem;
    max-width:1100px;
}
.cc-section-title{
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-size:1.4rem;
    color:#f0e6d3;
    margin:0 0 .35rem;
    text-align:center;
}
.cc-section-subtitle{
    text-align:center;
    color:#888;
    font-size:.9rem;
    margin:0 auto 1.25rem;
    max-width:620px;
    line-height:1.5;
}

.cc-aspect-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:.85rem;
}

.cc-aspect-card{
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.06);
    border-left-width:3px;
    border-radius:8px;
    padding:.85rem 1rem;
}
.cc-aspect-card[data-aspect="conjunction"]{border-left-color:#d4a843}
.cc-aspect-card[data-aspect="trine"]{border-left-color:#6ab56a}
.cc-aspect-card[data-aspect="sextile"]{border-left-color:#6ab5d4}
.cc-aspect-card[data-aspect="square"]{border-left-color:#e07070}
.cc-aspect-card[data-aspect="opposition"]{border-left-color:#e07070}

.cc-aspect-card-header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.65rem;
    margin-bottom:.5rem;
}
.cc-aspect-card-side{
    flex:1;
    text-align:center;
    color:#bbb;
    font-size:.7rem;
    line-height:1.3;
}
.cc-aspect-card-side-label{
    font-size:.65rem;
    color:#888;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin-bottom:.15rem;
}
.cc-aspect-card-glyph{
    font-size:1.4rem;
    color:#f0e6d3;
    font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols',serif;
    line-height:1;
}
.cc-aspect-card-planet{
    font-size:.78rem;
    color:#ccc;
    margin-top:.15rem;
}
.cc-aspect-card-aspect{
    flex:0 0 auto;
    text-align:center;
}
.cc-aspect-card-aspect-symbol{
    font-size:1.25rem;
    line-height:1;
    color:#E8C547;
    font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols',serif;
}
.cc-aspect-card-aspect-name{
    font-size:.65rem;
    color:#888;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin-top:.15rem;
}
.cc-aspect-card-orb{
    font-size:.6rem;
    color:#666;
    margin-top:.1rem;
}
.cc-aspect-card-interp{
    color:#aaa;
    font-size:.78rem;
    line-height:1.5;
    text-align:center;
    border-top:1px dashed rgba(255,255,255,.06);
    padding-top:.5rem;
}


/* ══════════════════════════════════════════════════
   BALANCE COMPARE — side-by-side bars below the chart
   ══════════════════════════════════════════════════ */

.cc-balance-compare{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.25rem;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(232,197,71,.1);
    border-radius:12px;
    padding:1.25rem;
}
@media(max-width:680px){
    .cc-balance-compare{grid-template-columns:1fr}
}
.cc-bc-person{
    display:flex;
    flex-direction:column;
    gap:.65rem;
}
.cc-bc-person-name{
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-size:.95rem;
    color:#E8C547;
    text-align:center;
    font-weight:600;
    margin-bottom:.25rem;
}
.cc-bc-bar-row{
    display:flex;
    align-items:center;
    gap:.6rem;
}
.cc-bc-bar-label{
    flex:0 0 70px;
    font-size:.72rem;
    color:#bbb;
    font-weight:600;
    letter-spacing:.04em;
}
.cc-bc-bar-track{
    flex:1;
    height:8px;
    background:rgba(255,255,255,.05);
    border-radius:4px;
    overflow:hidden;
}
.cc-bc-bar-fill{
    height:100%;
    transition:width .8s cubic-bezier(.2,.8,.2,1);
    border-radius:4px;
}
.cc-bc-bar-pct{
    flex:0 0 36px;
    font-size:.7rem;
    color:#888;
    text-align:right;
}
.cc-bc-bar-fill--fire{background:#d4604a}
.cc-bc-bar-fill--earth{background:#7ab87a}
.cc-bc-bar-fill--air{background:#9ec46a}
.cc-bc-bar-fill--water{background:#6a8ad8}
.cc-bc-bar-fill--cardinal{background:#e8a04a}
.cc-bc-bar-fill--fixed{background:#a86b4a}
.cc-bc-bar-fill--mutable{background:#b88adc}


/* ══════════════════════════════════════════════════
   LIGHT MODE OVERRIDES (parity with natal chart)
   ══════════════════════════════════════════════════ */

body.nc-light-mode .cc-form-person{
    background:rgba(0,0,0,.02);
    border-color:rgba(184,134,11,.15);
}
body.nc-light-mode .cc-form-person-label{color:#8b6508}
body.nc-light-mode .cc-form-amp{color:#8b6508; opacity:.6}

body.nc-light-mode .cc-score-card{
    background:rgba(0,0,0,.025);
    border-color:rgba(184,134,11,.25);
}
body.nc-light-mode .cc-score-pct,
body.nc-light-mode .cc-bc-person-name{color:#8b6508}
body.nc-light-mode .cc-score-tier{color:#3a3020}

body.nc-light-mode .cc-aspect-card{
    background:rgba(0,0,0,.02);
    border-color:rgba(0,0,0,.05);
}

body.nc-light-mode .nc-balance-panel{
    background:rgba(245,240,232,.92);
    border-color:rgba(184,134,11,.25);
    color:#3a3020;
}


/* ══════════════════════════════════════════════════
   VIEW TABS — three-tab switcher above the chart area
   Tabs sit on a dark band, active tab has a gold underline +
   slightly elevated background. Each tab has an icon + label
   + small hint text underneath.
   ══════════════════════════════════════════════════ */

.cc-view-tabs{
    display:flex;
    gap:.5rem;
    margin-bottom:.85rem;
    padding:.4rem;
    background:rgba(0,0,0,.25);
    border:1px solid rgba(232,197,71,.1);
    border-radius:10px;
}
@media(max-width:680px){
    .cc-view-tabs{
        gap:.25rem;
        padding:.25rem;
    }
}

.cc-view-tab{
    flex:1;
    background:transparent;
    border:1px solid transparent;
    border-radius:8px;
    padding:.55rem .75rem;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
    color:#bbb;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.15rem;
    font-family:inherit;
}
.cc-view-tab:hover{
    background:rgba(232,197,71,.04);
    color:#f0e6d3;
}
.cc-view-tab--active{
    background:rgba(232,197,71,.08);
    border-color:rgba(232,197,71,.25);
    color:#E8C547;
}
.cc-view-tab--active:hover{
    background:rgba(232,197,71,.1);
}

.cc-view-tab-icon{
    font-size:1.15rem;
    line-height:1;
    color:inherit;
    font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols',serif;
}
.cc-view-tab-label{
    font-size:.82rem;
    font-weight:600;
    letter-spacing:.02em;
}
.cc-view-tab-hint{
    font-size:.65rem;
    color:#888;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.cc-view-tab--active .cc-view-tab-hint{color:#b8860b}
@media(max-width:540px){
    /* On narrow screens, hide the hint to save vertical space */
    .cc-view-tab-hint{display:none}
    .cc-view-tab-label{font-size:.75rem}
}


/* ══════════════════════════════════════════════════
   VIEW HELP TEXT — small caption below each view
   ══════════════════════════════════════════════════ */

.cc-view-help{
    margin-top:.85rem;
    text-align:center;
    color:#888;
    font-size:.78rem;
    line-height:1.5;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
}


/* ══════════════════════════════════════════════════
   VIEW 1 — SIDE BY SIDE (default for beginners)
   Two natal-chart-style wheels rendered next to each other,
   with the person's name above each chart.
   ══════════════════════════════════════════════════ */

.cc-side-by-side-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    align-items:start;
}
@media(max-width:780px){
    .cc-side-by-side-grid{
        grid-template-columns:1fr;
        gap:1.5rem;
    }
}

.cc-single-chart-wrap{
    text-align:center;
}
.cc-single-chart-name{
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-size:1rem;
    color:#E8C547;
    font-weight:600;
    letter-spacing:.05em;
    margin-bottom:.5rem;
    padding:.4rem .75rem;
    background:rgba(232,197,71,.06);
    border-radius:6px;
    display:inline-block;
}

.cc-single-chart-wrap svg{
    width:100%;
    height:auto;
    max-height:80vh;
    display:block;
    background:transparent;
}


/* ══════════════════════════════════════════════════
   VIEW 3 — SYNASTRY GRID (for experts)
   14×14 (well, 10×10 for the major planets) table of cross-aspects.
   Rows = Person A's planets. Columns = Person B's planets.
   Each filled cell shows the aspect symbol with color-coded
   background. Cell intensity reflects orb tightness.
   ══════════════════════════════════════════════════ */

.cc-grid-wrap{
    overflow-x:auto;
    padding:.5rem 0 1.5rem;
}

.cc-grid{
    border-collapse:separate;
    border-spacing:2px;
    width:100%;
    max-width:760px;
    margin:0 auto;
    font-size:.78rem;
}

.cc-grid th, .cc-grid td{
    padding:0;
    text-align:center;
    vertical-align:middle;
    height:54px;
    width:54px;
    background:rgba(255,255,255,.025);
    border-radius:4px;
    border:1px solid rgba(255,255,255,.04);
}

.cc-grid-corner{
    background:transparent !important;
    border:none !important;
    width:80px;
    height:54px;
    position:relative;
    color:#888;
    font-size:.65rem;
    letter-spacing:.04em;
}
.cc-grid-corner-a{
    position:absolute;
    bottom:6px;
    left:6px;
    color:#E8C547;
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
}
.cc-grid-corner-b{
    position:absolute;
    top:6px;
    right:6px;
    color:#b8860b;
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
}
.cc-grid-corner-divider{
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, transparent calc(50% - 0.5px), rgba(232,197,71,.25) 50%, transparent calc(50% + 0.5px));
}

.cc-grid-col-header,
.cc-grid-row-header{
    background:rgba(0,0,0,.2) !important;
    border-color:rgba(232,197,71,.15) !important;
    display:table-cell;
}
.cc-grid-col-header{vertical-align:middle}
.cc-grid-row-header{padding:0 .25rem}

.cc-grid-glyph{
    display:block;
    font-size:1.15rem;
    line-height:1;
    margin-bottom:.15rem;
    font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols',serif;
}
.cc-grid-name{
    display:block;
    font-size:.62rem;
    color:#888;
    letter-spacing:.03em;
    text-transform:uppercase;
}

.cc-grid-cell{
    cursor:default;
    transition:background .12s ease, transform .12s ease;
    display:table-cell;
    font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols',serif;
}
.cc-grid-cell--filled{
    cursor:help;
}
.cc-grid-cell--filled:hover{
    transform:scale(1.05);
    z-index:2;
    position:relative;
    background-color:rgba(232,197,71,.15) !important;
}
.cc-grid-aspect-symbol{
    display:block;
    font-size:1.3rem;
    line-height:1;
    font-weight:600;
}
.cc-grid-orb{
    display:block;
    font-size:.6rem;
    color:#888;
    margin-top:.15rem;
    letter-spacing:.02em;
    font-family:inherit;
}

.cc-grid-cell--empty{
    background:rgba(255,255,255,.01);
}

/* Legend below the grid */
.cc-grid-legend{
    margin-top:1.25rem;
    display:flex;
    flex-wrap:wrap;
    gap:.85rem 1.5rem;
    justify-content:center;
    color:#888;
    font-size:.78rem;
    padding:.85rem 1rem;
    background:rgba(0,0,0,.2);
    border-radius:8px;
}
.cc-grid-legend-item{
    display:flex;
    align-items:center;
    gap:.4rem;
}
.cc-grid-legend-symbol{
    font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols',serif;
    font-size:1.1rem;
    line-height:1;
}
.cc-grid-legend-item-hint{
    flex-basis:100%;
    text-align:center;
    color:#666;
    font-size:.72rem;
    margin-top:.4rem;
    padding-top:.5rem;
    border-top:1px solid rgba(232,197,71,.06);
}


/* ══════════════════════════════════════════════════
   LIGHT MODE for new view components
   ══════════════════════════════════════════════════ */

body.nc-light-mode .cc-view-tabs{
    background:rgba(0,0,0,.05);
    border-color:rgba(184,134,11,.18);
}
body.nc-light-mode .cc-view-tab{color:#5a5044}
body.nc-light-mode .cc-view-tab--active{
    background:rgba(184,134,11,.12);
    color:#8b6508;
}
body.nc-light-mode .cc-grid-cell{background:rgba(0,0,0,.02)}
body.nc-light-mode .cc-grid-cell--empty{background:rgba(0,0,0,.01)}
body.nc-light-mode .cc-grid-col-header,
body.nc-light-mode .cc-grid-row-header{background:rgba(0,0,0,.05) !important}

/* ══════════════════════════════════════════════════
   HERO LAYOUT — UPDATED FOR DRAWER

   The original .cc-hero-grid had a 340px fixed left column for the
   score card. That's what was eating ~30% of the viewport. We're
   replacing that fixed-column behavior with a single-column hero
   so the chart takes the full width by default. The score still
   exists — it lives in the slide-out drawer (see below) AND in the
   in-chart balance panel that was already there.

   We override the rule rather than removing the original .cc-hero-grid
   (which is used in the existing structure) so older cached HTML still
   renders correctly. The overriding selector matches one-column behavior.
   ══════════════════════════════════════════════════ */

.cc-hero-grid{
    /* Replace the 340px+1fr two-column with a single column. The score
       card div #cc-score-card is now hidden by default (see rule below)
       since its content is rehoused into the drawer. */
    grid-template-columns:1fr;
}

/* Hide the original left-side score card. We keep the markup in the HTML
   for backward-compat / non-JS users, but in the new layout the score
   lives in the drawer. */
.cc-score-card{
    display:none;
}


/* ══════════════════════════════════════════════════
   SCORE DRAWER — slide-out panel from the LEFT edge

   Mental model: think of this like a side-mounted index card holder.
   By default it's tucked away. Click the toggle tab on the left edge
   and it slides out, revealing the full score breakdown. Click again
   (or click outside, or press ESC) to slide it away.

   Position: fixed to viewport (not page), pinned to left edge.
   Animation: transform-based (GPU-accelerated, smooth on mobile).
   Width: 320px desktop, 85vw mobile.
   ══════════════════════════════════════════════════ */

.cc-drawer{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:320px;
    max-width:85vw;
    background:rgba(18,18,18,.97);
    border-right:1px solid rgba(232,197,71,.25);
    box-shadow:4px 0 24px rgba(0,0,0,.5);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transform:translateX(-100%);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
    z-index:200;
    display:flex;
    flex-direction:column;
    /* Only show drawer once results are ready — toggled via a class
       on the drawer itself by JS after results render */
    visibility:hidden;
    opacity:0;
    transition:transform .35s cubic-bezier(.2,.8,.2,1),
               visibility 0s linear .35s,
               opacity .35s ease;
}
.cc-drawer.cc-drawer--ready{
    visibility:visible;
    opacity:1;
    transition:transform .35s cubic-bezier(.2,.8,.2,1),
               visibility 0s linear,
               opacity .35s ease;
}
.cc-drawer.cc-drawer--open{
    transform:translateX(0);
}

/* The drawer body — scrolls if content is tall on short viewports */
.cc-drawer-body{
    flex:1;
    overflow-y:auto;
    padding:1.5rem 1.25rem;
    color:#bbb;
    /* Custom scrollbar matching the gold/dark aesthetic */
    scrollbar-width:thin;
    scrollbar-color:rgba(184,134,11,.4) transparent;
}
.cc-drawer-body::-webkit-scrollbar{width:6px}
.cc-drawer-body::-webkit-scrollbar-track{background:transparent;margin:8px 0}
.cc-drawer-body::-webkit-scrollbar-thumb{background:rgba(184,134,11,.35);border-radius:3px}
.cc-drawer-body::-webkit-scrollbar-thumb:hover{background:rgba(184,134,11,.6)}

/* Drawer header — title + close-X button */
.cc-drawer-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:1rem;
    margin-bottom:1rem;
    border-bottom:1px solid rgba(232,197,71,.15);
}
.cc-drawer-title{
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-size:.85rem;
    color:#E8C547;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin:0;
}
.cc-drawer-close{
    background:none;
    border:none;
    color:#888;
    font-size:1.4rem;
    cursor:pointer;
    line-height:1;
    padding:0 .25rem;
}
.cc-drawer-close:hover{color:#f0e6d3}

/* The toggle TAB on the drawer's right edge — always visible when
   results are showing, slides with the drawer when it opens. The little
   tab is the affordance — tells the user the drawer exists and is
   their entry point. */
.cc-drawer-toggle{
    position:absolute;
    top:50%;
    /* Place the tab JUST OUTSIDE the drawer's right edge. When the
       drawer is closed (transform: translateX(-100%)), the tab is at
       the left edge of the viewport. When open, the tab moves with it
       and becomes the close affordance. */
    right:-44px;
    transform:translateY(-50%);
    width:44px;
    height:88px;
    background:rgba(18,18,18,.97);
    border:1px solid rgba(232,197,71,.25);
    border-left:none;
    border-radius:0 8px 8px 0;
    color:#E8C547;
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.05em;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    padding:.5rem .25rem;
    box-shadow:4px 0 12px rgba(0,0,0,.3);
    transition:background .15s ease, color .15s ease;
}
.cc-drawer-toggle:hover{
    background:rgba(28,28,28,.98);
    color:#f0e6d3;
}
.cc-drawer-toggle-icon{
    font-size:1.1rem;
    line-height:1;
    font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols',serif;
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.cc-drawer.cc-drawer--open .cc-drawer-toggle-icon{
    transform:rotate(180deg);
}
.cc-drawer-toggle-label{
    writing-mode:vertical-rl;
    text-orientation:mixed;
    transform:rotate(180deg);
    text-transform:uppercase;
    font-size:.65rem;
    color:#bbb;
}

/* Backdrop — dim the page when drawer is open. Click anywhere on
   the backdrop to close the drawer. */
.cc-drawer-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:199;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility 0s linear .35s;
}
.cc-drawer-backdrop.cc-drawer-backdrop--open{
    opacity:1;
    visibility:visible;
    transition:opacity .35s ease, visibility 0s linear;
}

/* The drawer's CONTENT styling — score circle (smaller version),
   tier label, breakdown list. Mirrors the original .cc-score-card
   internals but tighter to fit the drawer width. */
.cc-drawer-score-circle-wrap{
    position:relative;
    width:160px;
    height:160px;
    margin:.5rem auto 1rem;
}
.cc-drawer-score-pct{
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-size:2.5rem;
    font-weight:700;
    color:#E8C547;
    line-height:1;
}
.cc-drawer-score-tier{
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-size:1.1rem;
    color:#f0e6d3;
    font-weight:600;
    text-align:center;
    margin-bottom:.35rem;
}
.cc-drawer-score-names{
    text-align:center;
    color:#888;
    font-size:.78rem;
    letter-spacing:.04em;
    margin-bottom:.85rem;
}
.cc-drawer-destiny{
    display:block;
    text-align:center;
    margin:0 auto .85rem;
    font-size:.7rem;
    color:#E8C547;
    background:rgba(232,197,71,.1);
    padding:.25rem .65rem;
    border-radius:99px;
    border:1px solid rgba(232,197,71,.25);
    letter-spacing:.04em;
    width:fit-content;
}
.cc-drawer-breakdown{
    margin-top:1rem;
    padding-top:1rem;
    border-top:1px solid rgba(232,197,71,.12);
}
.cc-drawer-breakdown-title{
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-size:.78rem;
    color:#E8C547;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:.65rem;
}
.cc-drawer-breakdown-item{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:.45rem 0;
    border-bottom:1px solid rgba(255,255,255,.04);
    gap:.6rem;
    font-size:.78rem;
    color:#ccc;
    line-height:1.4;
}
.cc-drawer-breakdown-item:last-child{border-bottom:none}
.cc-drawer-breakdown-text{flex:1}
.cc-drawer-breakdown-points{
    color:#E8C547;
    font-weight:700;
    font-size:.85rem;
    flex:0 0 auto;
}

/* On mobile, the toggle tab gets smaller and sits flush */
@media(max-width:680px){
    .cc-drawer{width:85vw}
    .cc-drawer-toggle{
        width:36px;
        height:72px;
        right:-36px;
    }
    .cc-drawer-toggle-label{font-size:.6rem}
}


/* ══════════════════════════════════════════════════
   EXPAND BUTTON — sits in the controls bar to open the modal.

   We add it as a regular .nc-wheel-ctrl-btn so it inherits all the
   existing hover/active/light-mode styling. No new visual tokens.
   ══════════════════════════════════════════════════ */

.cc-expand-btn .cc-expand-icon{
    display:inline-block;
    margin-right:.25rem;
    font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols',serif;
}


/* ══════════════════════════════════════════════════
   MODAL — fullscreen "zoom lens" for the active view.

   Mental model: take whatever view the user is currently looking at
   (side-by-side, bi-wheel, or grid) and re-render it at viewport-max
   dimensions in a fullscreen overlay. Tab state is preserved when
   the modal closes — user goes right back to where they were.

   The modal renders the active view by CLONING the existing rendered
   chart nodes into the modal body (not re-running the SVG draw
   functions). This keeps things fast and avoids any state drift.
   ══════════════════════════════════════════════════ */

.cc-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    z-index:300;
    display:none;
    align-items:center;
    justify-content:center;
    padding:2rem;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}
.cc-modal.cc-modal--open{
    display:flex;
}

.cc-modal-content{
    position:relative;
    width:100%;
    height:100%;
    max-width:1600px;
    background:rgba(18,18,18,.98);
    border:1px solid rgba(232,197,71,.25);
    border-radius:14px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.cc-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1rem 1.25rem;
    border-bottom:1px solid rgba(232,197,71,.15);
    background:rgba(0,0,0,.3);
    flex:0 0 auto;
}
.cc-modal-title{
    font-family:'Cinzel', 'Trajan Pro', Georgia, serif;
    font-size:1rem;
    color:#E8C547;
    font-weight:600;
    letter-spacing:.04em;
    margin:0;
}
.cc-modal-close{
    background:none;
    border:1px solid rgba(232,197,71,.25);
    color:#bbb;
    font-size:1rem;
    cursor:pointer;
    line-height:1;
    padding:.4rem .85rem;
    border-radius:8px;
    font-family:inherit;
    transition:background .15s ease, color .15s ease;
}
.cc-modal-close:hover{
    background:rgba(232,197,71,.08);
    color:#f0e6d3;
}

.cc-modal-body{
    flex:1;
    overflow:auto;
    padding:1.5rem 2rem;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* When the modal contains side-by-side, give each chart proper room */
.cc-modal-body .cc-side-by-side-grid{
    width:100%;
    max-width:1500px;
    gap:2rem;
}
.cc-modal-body .cc-single-chart-wrap svg{
    /* In the modal, charts can be much bigger */
    max-height:80vh;
    max-width:100%;
}

/* When the modal contains the bi-wheel, center it large */
.cc-modal-body .nc-wheel-container{
    width:100%;
    max-width:900px;
}
.cc-modal-body #cc-modal-chart-wheel{
    width:100%;
    height:auto;
    max-height:80vh;
}

/* When the modal contains the grid, let it use the available width */
.cc-modal-body .cc-grid-wrap{
    width:100%;
    overflow-x:auto;
}
.cc-modal-body .cc-grid{
    max-width:none;
    margin:0 auto;
}

@media(max-width:680px){
    .cc-modal{padding:.5rem}
    .cc-modal-body{padding:.75rem}
    .cc-modal-body .cc-side-by-side-grid{
        grid-template-columns:1fr;
        gap:1rem;
    }
}


/* ══════════════════════════════════════════════════
   LIGHT MODE OVERRIDES for drawer + modal
   ══════════════════════════════════════════════════ */

body.nc-light-mode .cc-drawer{
    background:rgba(245,240,232,.97);
    border-right-color:rgba(184,134,11,.25);
    color:#3a3020;
}
body.nc-light-mode .cc-drawer-body{color:#3a3020}
body.nc-light-mode .cc-drawer-title{color:#8b6508}
body.nc-light-mode .cc-drawer-close{color:#666}
body.nc-light-mode .cc-drawer-close:hover{color:#3a3020}
body.nc-light-mode .cc-drawer-toggle{
    background:rgba(245,240,232,.97);
    border-color:rgba(184,134,11,.25);
    color:#8b6508;
}
body.nc-light-mode .cc-drawer-toggle:hover{
    background:rgba(250,245,238,.98);
    color:#3a3020;
}
body.nc-light-mode .cc-drawer-toggle-label{color:#5a5044}
body.nc-light-mode .cc-drawer-score-pct{color:#8b6508}
body.nc-light-mode .cc-drawer-score-tier{color:#3a3020}
body.nc-light-mode .cc-drawer-breakdown-title{color:#8b6508}
body.nc-light-mode .cc-drawer-breakdown-item{color:#3a3020}
body.nc-light-mode .cc-drawer-breakdown-points{color:#8b6508}

body.nc-light-mode .cc-modal{
    background:rgba(245,240,232,.92);
}
body.nc-light-mode .cc-modal-content{
    background:rgba(250,245,238,.99);
    border-color:rgba(184,134,11,.25);
}
body.nc-light-mode .cc-modal-header{
    background:rgba(0,0,0,.04);
    border-bottom-color:rgba(184,134,11,.18);
}
body.nc-light-mode .cc-modal-title{color:#8b6508}
body.nc-light-mode .cc-modal-close{
    border-color:rgba(184,134,11,.25);
    color:#5a5044;
}
body.nc-light-mode .cc-modal-close:hover{
    background:rgba(184,134,11,.08);
    color:#3a3020;
}


/* ══════════════════════════════════════════════════
   SHARE TOAST — small "Copied!" pill that appears under the share btn
   when the link is copied. Soft, non-modal, auto-dismisses.
   ══════════════════════════════════════════════════ */

.cc-share-toast{
    position:fixed;
    bottom:2rem;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:rgba(18,18,18,.97);
    border:1px solid rgba(232,197,71,.35);
    color:#E8C547;
    padding:.65rem 1.25rem;
    border-radius:99px;
    font-size:.85rem;
    font-weight:600;
    letter-spacing:.03em;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    z-index:400;
    box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.cc-share-toast.cc-share-toast--show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}
body.nc-light-mode .cc-share-toast{
    background:rgba(245,240,232,.98);
    border-color:rgba(184,134,11,.35);
    color:#8b6508;
}