/* CSS Document */

/* ============================= Wealth Accumulation Calculator — page-specific styles =========================== */


/* ---------- SVG Chart ---------- */

.tip-line { stroke: rgba(26,26,26,.18); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity .12s;}

.tip-line.on { opacity: 1;}

.tip-label {
    font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif; fill: var(--ink, #231F20); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .12s;
}

.tip-label.on { opacity: 1;}
.tip-sub { fill: var(--ink-3, #717182); font-size: 11px; letter-spacing: .04em;}
.tip-dot { stroke: #fff; stroke-width: 2; opacity: 0; transition: opacity .12s;}
.tip-dot.on { opacity: 1;}

.draw { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: dash 1.6s .8s cubic-bezier(.2,.8,.2,1) forwards;}

@keyframes dash {
    to { stroke-dashoffset: 0; }
}

.fade-area { opacity: 0; animation: fadeIn 1.2s 1.4s forwards;}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* ---------- Editable numbers ---------- */


/* ---------- Strategy selector ---------- */
.strategy-wrap { margin-top: 10px;}

.strategy-wrap select {
    width: 100%;  padding: 9px 16px;
    border-radius: 10px; border: 1px solid var(--rule-2, #d0d0d0); font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif;
    font-size: 14px; color: var(--ink, #231F20); background: var(--bg, #F6F6F6);  -webkit-appearance: none;  appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; transition: border-color .18s;
}

.strategy-wrap select:focus { outline: none; border-color: var(--magenta-1, #EC1750);}

/* ---------- Compounding chips ---------- */
.comp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px;}

.comp-chip {
    padding: 5px 14px; border-radius: 999px; font-size: 11px; letter-spacing: .04em;
    border: 1px solid var(--rule-2, #d0d0d0); cursor: pointer; transition: all .2s; color: var(--ink-2, #58595B);
    background: transparent; font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif;
}

.comp-chip.active { background: var(--navy-1, #085AA9); color: #fff; border-color: transparent;}
.comp-chip:hover:not(.active) { border-color: var(--navy-1, #085AA9); color: var(--navy-1, #085AA9);}

/* ---------- Field locked state ---------- */
.field-locked { opacity: .4 !important; pointer-events: none !important; user-select: none !important;}

/* ---------- Result grid overrides ---------- */
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: end;}
.result-grid .cell { display: flex; flex-direction: column; gap: 8px;}


/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  
    .result-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
	.strategy-wrap select {font-size: 20px;}
	.comp-chip {font-size: 1rem;}
}

@media (max-width: 600px) {
    .result-grid { grid-template-columns: 1fr; gap: 32px; }   
    .comp-chips {   gap: 16px 10px; justify-content: center; }
    .comp-chip { font-size: 14px; padding: 4px 10px; }
}


@media(max-width:480px){
	.strategy-wrap select {font-size: 1rem;}
	.comp-chips {column-gap: 30px;}
	#wealth-accumulation h1.display {max-width: 60%;}
}



@media(max-width:390px){

}

@media (max-width: 360px) {
    #wealth-accumulation h1.display { max-width: 65%; }
	.comp-chips { column-gap: 20px; }
}

@media(max-width:320px){
	.comp-chips { column-gap: 7px;}
}