/* Article "Compound interest calculator" (pipeline/pages/art_compound.py,
   js/art-compound-interest.js), on top of style.css and articles.css.
   Not assets: your money gray (--s6), interest blue (--s1); the race and the
   rates a year use the asset colors (a-spx, a-bond, a-gold, a-cash). Classes start with .ci-. */

/* the calculator: a sentence whose blanks are the inputs (as /inflation-calculator/) */
.art > .ci-calc { margin-top: 28px; padding: 24px 26px 22px; display: grid; gap: 14px; }
.ci-calc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.ci-calc-head .art-mode { margin: 0; }
.ci-sentence { margin: 0; }
.ci-sentence .dd { padding: 0 10px; }
.ci-sentence .dd > span { color: var(--muted); }
.ci-sentence input, .ci-sentence select { font: inherit; color: var(--ink); background: transparent; border: 0; padding: 2px 0; margin: 0; cursor: pointer; }
.ci-sentence input { width: 6.6ch; cursor: text; font-variant-numeric: tabular-nums; }
.ci-sentence input.ci-short { width: 3.4ch; text-align: right; }
.ci-sentence input[aria-invalid="true"] { color: var(--bad); }
.ci-sentence .dd:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.ci-sentence input:focus, .ci-sentence select:focus { outline: none; }
.ci-sentence option { font: 500 15px var(--font); }
.ci-res { display: contents; }
.ci-result { margin-top: 2px; align-items: center; }
.ci-result .pill { align-self: center; }
.ci-calc .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ci-answer { margin: 0; max-width: 78ch; color: var(--ink-2); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.ci-answer b { color: var(--ink); font-weight: 650; }
.art > .ci-gap { margin-top: 14px; }
.ci-tiles { margin-top: 40px !important; }
@media (max-width: 640px) {
  .art > .ci-calc { padding: 18px; }
  .ci-sentence { line-height: 2.1; }
  .ci-result .btn { margin-left: 0; }
}

/* charts */
.ci-plot-calc, .ci-plot-snow { min-height: 260px; }
.ci-plot-rule { min-height: 400px; }
.ci-plot-race { min-height: 320px; }
.ci-plot-dumb { min-height: 230px; }
.ci-area { stroke: none; }
.ci-area.ci-paid { fill: var(--s6); opacity: 0.32; }
.ci-area.ci-int { fill: var(--s1); opacity: 0.22; }
.ci-edge { fill: none; stroke-width: 2; stroke-linejoin: round; }
.ci-edge.ci-paid { stroke: var(--s6); }
.ci-edge.ci-int { stroke: var(--s1); stroke-width: 2.6; }
.ci-line { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-dasharray: 5 4; stroke-linejoin: round; }
.ci-hot { stroke: var(--surface); stroke-width: 2; }
.ci-hot.ci-int { fill: var(--s1); }
.ci-hot.ci-paid { fill: var(--s6); }
.ci-cross { stroke: var(--ink); stroke-opacity: 0.4; stroke-width: 1.2; stroke-dasharray: 2 4; }
.ci-cross-t { fill: var(--muted); font: 600 11px var(--font); }
.ci-end, .ci-endv { fill: var(--ink); font: 600 12px var(--mono); font-variant-numeric: tabular-nums; }
.ci-endv.sub { fill: var(--muted); }
.ci-cross-t, .ci-end, .ci-endv, .ci-x, .ci-dval { paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round; }
.ci-axis { fill: var(--muted); font: 500 11px var(--font); }
.ci-row { fill: var(--hover); }
.sw-sq.ci-paid-sw { background: color-mix(in srgb, var(--s6) 55%, var(--surface)); box-shadow: inset 0 2px 0 var(--s6); }
.sw-sq.ci-int-sw { background: color-mix(in srgb, var(--s1) 38%, var(--surface)); box-shadow: inset 0 2px 0 var(--s1); }
.ln.ci-simple-sw, .ln.ci-simple-line, .ln.ci-real-line { stroke: var(--ink); stroke-width: 1.8; stroke-dasharray: 4 3; }

/* the rule of 72: bricks */
.ci-rate { fill: var(--ink); font: 600 12px var(--mono); font-variant-numeric: tabular-nums; }
.ci-brick { fill: var(--spx); }
.ci-brick.part { stroke: var(--spx); stroke-width: 1; stroke-dasharray: 3 2; }
.ci-brick-t { fill: var(--ink); font: 600 10.5px var(--mono); pointer-events: none; }
.ci-brick-t.on-dark { fill: #fff; }
.ci-tick { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.ci-x { fill: var(--ink-2); font: 600 11.5px var(--mono); font-variant-numeric: tabular-nums; }
.sw-sq.ci-brick-sw { background: var(--spx); opacity: 0.8; }
.ci-tick-sw { display: inline-block; width: 2px; height: 12px; border-radius: 1px; background: var(--ink); margin: 0 4px; }

/* the race */
.ci-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px; }
.ci-controls .art-mode { margin: 0; }
.ci-starts[hidden] { display: none; }
.ci-starts { align-items: center; }
.ci-starts-l { font: 500 13px var(--font); color: var(--muted); padding: 0 6px 0 8px; }
@media (max-width: 480px) {
  .ci-starts-l { display: none; }
  .ci-starts .chip { padding: 8px 9px; }
}
.ci-cpi-key[hidden], .ci-even-key[hidden], .ci-real-key[hidden] { display: none; }
.ln.ci-even-sw { stroke: var(--ink); stroke-opacity: 0.6; stroke-width: 1.4; stroke-dasharray: 5 4; }
.ci-even { stroke: var(--ink); stroke-opacity: 0.5; stroke-width: 1.2; stroke-dasharray: 5 4; }

/* rates a year: after inflation (ring) to before (dot) */
.ci-zero { stroke: var(--axis); stroke-width: 1.4; }
.ci-dname { fill: var(--ink); font: 600 12.5px var(--font); }
.ci-dval { fill: var(--ink); font: 600 11.5px var(--mono); font-variant-numeric: tabular-nums; }
.ci-dval.sub { fill: var(--muted); }
.ci-dbar { stroke-width: 3; stroke-linecap: round; opacity: 0.45; }
.ci-dring { fill: var(--surface); stroke-width: 2.5; }
.ci-dbar.a-spx, .ci-dring.a-spx { stroke: var(--spx); }
.ci-dbar.a-bond, .ci-dring.a-bond { stroke: var(--bond); }
.ci-dbar.a-gold, .ci-dring.a-gold { stroke: var(--gold); }
.ci-dbar.a-cash, .ci-dring.a-cash { stroke: var(--cash); }
.ci-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ci-dot-nom { background: var(--ink); }
.ci-dot-real { box-shadow: inset 0 0 0 2px var(--ink); }
.ci-dot-real.a-spx { box-shadow: inset 0 0 0 2px var(--spx); }
.ci-dot-real.a-bond { box-shadow: inset 0 0 0 2px var(--bond); }
.ci-dot-real.a-gold { box-shadow: inset 0 0 0 2px var(--gold); }
.ci-dot-real.a-cash { box-shadow: inset 0 0 0 2px var(--cash); }

/* the formula */
.ci-formula { margin: 4px 0 18px !important; padding: 18px 22px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); font: 600 clamp(20px, 3vw, 26px)/1.3 var(--mono); letter-spacing: -0.02em; color: var(--ink); text-align: center; }
.ci-formula sup { font-size: 0.6em; }

/* tables */
.ci-years td b, .ci-race-table td b { color: var(--ink); font-weight: 650; }
.ci-race-table td { min-width: 112px; }
@media (max-width: 640px) {
  .ci-race-table th:first-child, .ci-race-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
  .ci-race-table thead th:first-child { z-index: 2; }
}