/* Compound interest calculator (/compound-interest): what is its own. Panels, tiles, fields, buttons, the table, the chart
   frame and the colours come from the app kit (css/app-kit, docs/app-kit.md). Loaded only on this app's page (StylePaths). */

/* Simple interest has the app's own amber (the dashed line in the chart). */
.compound-landing-app {
    --ci-simple: #d97706;
}

.dark .compound-landing-app > .filter-landing-controls,
.compound-landing-app[data-theme="dark"] > .filter-landing-stage {
    --ci-simple: #fbbf24;
}

/* Each tile's strip has its colour in the chart: the balance line, the contributions and interest areas, and the amber
   of the comparison for the real value. */
.compound-landing-app .ci-stat-final { --ak-stat-color: var(--ak-success); }
.compound-landing-app .ci-stat-contrib { --ak-stat-color: color-mix(in srgb, var(--ak-series-1) 55%, transparent); }
.compound-landing-app .ci-stat-interest { --ak-stat-color: color-mix(in srgb, var(--ak-series-3) 55%, transparent); }
.compound-landing-app .ci-stat-real { --ak-stat-color: var(--ci-simple); }

.compound-landing-app .ci-swatch-contrib { --ak-swatch: color-mix(in srgb, var(--ak-series-1) 55%, transparent); }
.compound-landing-app .ci-swatch-interest { --ak-swatch: color-mix(in srgb, var(--ak-series-3) 55%, transparent); }
.compound-landing-app .ci-swatch-simple { --ak-swatch: var(--ci-simple); }

.compound-landing-app .ci-chart {
    border-radius: 0.4rem;
    cursor: crosshair;
    touch-action: pan-y;
}

.compound-landing-app .ci-chart:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: 3px;
}

/* The balance column, in the colour of the balance line. */
.compound-landing-app .ci-table td.ci-strong {
    color: var(--ak-success);
    font-weight: 700;
}

.compound-landing-app .ci-table thead th {
    white-space: normal;
    vertical-align: bottom;
}