/* Compound interest (tools/compound-interest.html). Shared pieces: quickwin.css. */
.ci-plot { margin-top: 40px; }
.ci-plot .qw-bar.is-last .qw-b { background: repeating-linear-gradient(135deg, var(--kesef) 0 2px, rgba(255, 214, 2, .16) 2px 6px); }
.ci-plot .qw-bar.is-last .qw-a { background: var(--kesef); }
.ci-real { fill: none; stroke: var(--parchment); stroke-width: 2.5; stroke-dasharray: 6 5; filter: drop-shadow(0 0 2px var(--stage-2)); vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ci-tag { position: absolute; right: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-bottom: 10px; pointer-events: none; }
.ci-tag b { font: 500 15px/1.1 var(--font-sans); color: var(--kesef); font-variant-numeric: tabular-nums; }
.ci-tag span { font: 400 12px/1.2 var(--font-mono); color: var(--parchment-2); }
@media (prefers-reduced-motion: no-preference) { .ci-tag { transition: bottom .5s var(--ease); } }
.ci-hint { margin-top: 16px; line-height: 1.55; }
.ci-hint + .kc-more { margin-top: 20px; }
#ci-infl-field { margin-top: 20px; }
#ci-infl-field small a { color: var(--ink); }
#ci-rates { margin-top: 14px; }
.qw-table-panel .tk-hint { margin: 0; }
@media (max-width: 760px) { .ci-tag b { font-size: 13px; } }
@media (max-width: 420px) { .tf-work .ks-seg button { padding: 0 12px; font-size: 13px; } }