table {
    border-collapse: collapse;
}

:is(thead, .ratio__text) {
    opacity: 0;
    height: 0;
    width: 0;
}

tr {
    display: grid;
    gap: 0.3rem;
    grid-template-columns: 10rem 1fr min-content;
    justify-content: start;
}

td.name {
    text-align: right;
}

td.ratio {
    width: 10rem;
    display: grid;
    grid-template-columns: 5rem 5rem;
    grid-template-rows: 1fr;
    align-items: center;

    &::before {
        content: '';
        display: block;
        height: 100%;
        grid-row: 1 / 2;
        z-index: -1;
    }

    &:is(.ratio--save, .ratio--spend)::before {
        grid-column: 1 / 2;
        border-right: 1px dashed white;
        position: relative;
        right: -1px;
    }

    &.ratio--arrears::before {
        grid-column: 2 / 3;
        border-left: 1px dashed white;
        left: -1px;
    }
}

.ratio__bar {
    display: block;
    width: calc(3rem * var(--normal-abs-ratio) + 1px);
    height: 33%;
    background-color: var(--category-highlight-color);
    grid-row: 1 / 2;

    :is(.ratio--save, .ratio--spend) & {
        grid-column: 2 / 3;
    }

    .ratio--arrears & {
        grid-column: 1 / 2;
        position: relative;
        right: -1px;
        justify-self: end;
    }
}

td.balance {
    color: var(--category-highlight-color);
}

.ratio--arrears {
    --category-highlight-color: crimson;
}

.ratio--save {
    --category-highlight-color: white;
}

.ratio--spend {
    --category-highlight-color: dodgerblue;
}