/* CSS Document */

/* =================== XIRR CALCULATOR - Page Specific Styles ========================= */

/* ---------- Flows Table ---------- */
.flows { display: flex; flex-direction: column; gap: 2px; margin-top: 8px;}
.flow { display: grid; grid-template-columns: 120px 1fr 32px; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule);}

.flow .date { background: transparent; border: 0; font-size: 14px; color: var(--ink-2); outline: none; font-variant-numeric: tabular-nums; padding: 4px 0; letter-spacing: -0.005em; width: 100%;}

.flow input.amt {
    background: transparent; border: 0; font-size: 22px;  color: var(--ink); outline: none; text-align: right;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: 0.08em; font-weight: 400; width: 100%; padding: 2px 0;
}

.flow .amt.neg { color: var(--navy-1);}
.flow .amt.pos { color: var(--magenta-2);}
.flow .del { color: var(--ink-3); font-size: 18px; transition: color .2s; line-height: 1; text-decoration: none; cursor: pointer;}

.flow .del:hover { color: var(--magenta-2);}
.flow.current { position: relative; padding-top: 22px; border-top: 1px solid var(--rule);}
.flow.current .date { color: var(--ink); font-weight: 500;}

.flow.current::before {
    content: "current value"; position: absolute; font-size: 10px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--accent);  margin-top: -30px;
}

.flows-head { display: grid; grid-template-columns: 120px 1fr 32px; gap: 18px; padding-bottom: 8px;
    border-bottom: 1px solid var(--rule-2); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}

.flows-head .a { text-align: right;}
.add { margin-top: 18px;}

/* ---------- Visualization / Timeline ---------- */
.vizwrap { position: relative; padding-top: 6px;}
.vizwrap .eyebrow { margin-bottom: 18px;}
.tl-legend { display: flex; align-items: center; gap: 24px; margin-bottom: 14px; font-size: 12px; color: var(--ink-2); letter-spacing: .02em;}
.tl-legend .sw { display: inline-flex; align-items: center; gap: 8px;}
.tl-legend .sw .chip { width: 14px; height: 14px; border-radius: 3px; display: inline-block;}
.tl-legend .sw .chip.neg { background: var(--navy-1);}
.tl-legend .sw .chip.pos { background: var(--magenta-2);}

svg.tl { display: block; width: 100%; height: auto; overflow: visible;}

/* SVG Styles */
.tl-axis { stroke: var(--ink-2); stroke-width: 1.25;}
.tl-axis-zero-lbl { fill: var(--ink-3); font-size: 11px; letter-spacing: .04em; font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif;}
.tl-grid { stroke: var(--rule); stroke-dasharray: 2 4;}
.tl-tick { stroke: var(--ink-3); stroke-width: 1;}
.tl-label { fill: var(--ink-2); font-size: 13px; letter-spacing: .02em;  font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif;}

.pop-amt { font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 500; fill: var(--ink); font-variant-numeric: tabular-nums;}
.pop-amt.neg { fill: var(--navy-1);}
.pop-amt.pos { fill: var(--magenta-2);}
.bar { transition: opacity .25s;}
.bar.neg { fill: var(--navy-1);}
.bar.pos { fill: var(--magenta-2);}
.bar:hover { opacity: .85;}

/* ---------- XIRR Hero ---------- */
.xirr-hero {
    display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
    flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 34px;
}

.xirr-num {
    font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif; font-weight: 300; font-size: clamp(80px, 9.5vw, 120px);
    line-height: .9; letter-spacing: 0.04em; color: var(--ink); font-variant-numeric: tabular-nums;
}

.xirr-num .pct {font-size: 0.45em;color: var(--ink);}
.xirr-side { display: flex; flex-direction: column; align-items: flex-end;  gap: 8px;}
.xirr-meta { font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif; color: var(--ink-2); font-size: 20px;}

/* ---------- Summary ---------- */
.summary {  margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr 1fr;  gap: 48px;}
.summary .cell { display: flex; flex-direction: column; gap: 6px;}
.summary .v {font-size: 24px;font-weight: 300;letter-spacing: 0.04em;font-variant-numeric: tabular-nums;}
.summary .v.navy { color: var(--navy-1);}
.summary .v.mag { color: var(--magenta-2);}

@media (max-width: 1700px) {

}

/* ---------- Responsive ---------- */
@media (max-width: 1600px) {

}

@media (max-width: 1280px) {

}

@media (max-width: 1100px) {

}

@media (max-width: 900px) {
    .summary { grid-template-columns: 1fr 1fr; } 
    .xirr-num { font-size: 80px; }
	.flow .date,.flows-head,.tlink.muted {font-size: 1rem;}
	.tl-legend {font-size: 1rem;}
	.flow.current::before { margin-top: -40px; font-size: 14px;}
	.pop-amt,.tl-label{font-size: 1rem;}
}

@media (max-width: 480px) {
	.xirr-hero .cap.acc{text-align: left;}
	.summary .cell {    align-items: flex-start;}
	.flow.current::before {font-size: 12px;}
    .xirr-num { font-size: 56px; }
    .flow { grid-template-columns: 125px 1fr 28px;  gap: 10px; padding: 10px 0; }
    .flow input.amt { font-size: 1rem; }
    .flows-head { grid-template-columns: 90px 1fr 28px; gap: 10px; font-size: 12px; }
    .xirr-hero { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 0px;}
    .xirr-side {  align-items: flex-start;}
	.pop-amt, .tl-label { font-size: 1.2rem;letter-spacing: 0.14em; }
	.summary .v {font-size: 18px; }
    .summary {row-gap: 1.5rem;}
	.summary .cell:nth-child(2) .cap{ margin-left: auto;}
	.summary .cell:nth-child(2) .v  { margin-left: auto;}
	.tl-axis-zero-lbl {font-size: 20px;}
}

@media(max-width:375px){
	    .flow .date, .flows-head, .tlink.muted { font-size: 0.8rem; }
	    .flow {grid-template-columns: 100px 1fr 28px;}
}