/* Expense Ratio Calculator */

/* The three lines' colours, also on the labels and the result's keys. The value before fees takes the text colour */
#er_tool {
    --er-base: var(--ck-text-1);
    --er-a: #0B8574;
    --er-b: #A8326B;
}

[data-bs-theme="dark"] #er_tool {
    --er-a: #41CDB8;
    --er-b: #F27DB0;
}

/* The fields are the calculators' own (.tool-field in assets/css/tool.css), with the label above instead of
   beside. Number fields lose the browser's up/down buttons, as there (that rule is scoped to .tool-calculator,
   which a code tool isn't inside) */
#er_tool input[type="number"]::-webkit-outer-spin-button,
#er_tool input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#er_tool input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* A wrong field: the box is red. Bootstrap's own invalid style would also make room for an icon on the right,
   where the unit sits */
#er_tool .tool-field.is-invalid {
    padding-right: 0;
    background-image: none;
}

#er_tool .tool-field.is-invalid:focus-within {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

/* A short piece of a chart line, before the label of the field or value it belongs to */
.er-key {
    display: inline-block;
    width: 1.25rem;
    height: 0;
    margin-right: 0.4rem;
    border-top: 3px solid;
    vertical-align: middle;
}

.er-key-base {
    border-top-style: dashed;
    border-color: var(--er-base);
}

.er-key-a {
    border-color: var(--er-a);
}

.er-key-b {
    border-color: var(--er-b);
}

/* The three values of the chosen year */
.er-finals {
    font-variant-numeric: tabular-nums;
}

.er-name,
.er-diff {
    font-size: 0.875rem;
    color: var(--ck-text-2);
}

.er-value {
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ck-text-1);
    overflow-wrap: anywhere;
}

/* The values keep their lines while empty, so the chart doesn't move when the numbers arrive */
.er-value:empty::before,
.er-diff:empty::before,
.er-verdict:empty::before {
    content: "\00a0";
}

/* The answer in one sentence, set apart from the numbers above and the chart below */
.er-verdict {
    margin-bottom: 1rem;
    padding: 0.625rem 0.875rem;
    border: var(--bs-border-width) solid var(--ck-border-subtle);
    border-radius: var(--bs-border-radius);
    background: var(--ck-surface-2);
    font-variant-numeric: tabular-nums;
}

/* The chart: drawn by tool.js as one SVG, as wide as its box */
.er-chart svg {
    display: block;
    width: 100%;
    touch-action: pan-y;
    cursor: crosshair;
}

.er-chart text {
    font-size: 12px;
    fill: var(--ck-text-2);
    font-variant-numeric: tabular-nums;
}

.er-chart .er-grid {
    stroke: var(--ck-border-subtle);
    stroke-width: 1;
}

.er-chart .er-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.er-chart .er-line-base {
    stroke: var(--er-base);
    stroke-width: 2;
    stroke-dasharray: 6 5;
}

.er-chart .er-line-a {
    stroke: var(--er-a);
}

.er-chart .er-line-b {
    stroke: var(--er-b);
}

.er-chart .er-cursor {
    stroke: var(--ck-text-3);
    stroke-width: 1;
}

.er-chart .er-dot {
    stroke: var(--ck-surface);
    stroke-width: 2;
}

.er-chart .er-dot-base {
    fill: var(--er-base);
}

.er-chart .er-dot-a {
    fill: var(--er-a);
}

.er-chart .er-dot-b {
    fill: var(--er-b);
}

/* The table scrolls inside its box, both ways, rather than widening the page. The box draws the outer edge,
   square, and the cells only the lines between them, so no line is doubled */
.er-table-wrap {
    max-height: 24rem;
    overflow: auto;
    border: var(--bs-border-width) solid var(--ck-border-subtle);
    scrollbar-width: thin;
}

.er-table {
    --bs-table-bg: var(--ck-surface);
    --bs-table-color: var(--ck-text-1);
    --bs-table-border-color: var(--ck-border-subtle);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.er-table > thead > tr {
    border-top-width: 0;
}

.er-table > tbody > tr:last-child,
.er-table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

.er-table tr > :first-child {
    border-left-width: 0;
    text-align: left;
}

.er-table tr > :last-child {
    border-right-width: 0;
}

.er-table > :not(caption) > * > * {
    padding: 0.375rem 0.625rem;
    text-align: right;
    white-space: nowrap;
}

/* The header row stays in view while the rows scroll. A collapsed border doesn't travel with a sticky cell, so
   the line under the header is a shadow */
.er-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom-width: 0;
    box-shadow: inset 0 calc(-1 * var(--bs-border-width)) 0 var(--ck-border-subtle);
    font-weight: 500;
}