/* Parts that the shared report design (report-kit.js) adds on top of finance-report.css:
   bar rows with a name and a note, side-by-side bars for two periods, tiles, badges. */

.rk-bars > div {
    grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) 150px minmax(130px, 230px);
}

.rk-bars > div > span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.rk-av {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    font-size: 12.5px;
    font-style: normal;
}

.rk-bars .fr-fuel-qty {
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
}

.rk-bars .fr-fuel-qty b.is-good {
    color: var(--fr-good);
}

.rk-bars .fr-fuel-qty b.is-bad {
    color: var(--fr-bad);
}

.rk-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 11px;
    border-radius: 999px;
    background: var(--c);
    color: #fff;
    font-size: 12.5px;
    white-space: nowrap;
}

.rk-badge i {
    color: #fff;
}

.rk-pairs {
    display: grid;
    gap: 12px;
}

.rk-pair {
    display: grid;
    grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) 110px 110px;
    align-items: center;
    gap: 14px;
    font-size: 15px;
}

.rk-pair b {
    font-size: 16px;
    color: var(--fr-ink);
}

.rk-pair em {
    font-style: normal;
    color: var(--fr-ink2);
}

.rk-two {
    display: grid;
    gap: 5px;
}

.rk-two i {
    display: block;
    height: 12px;
    border-radius: 99px;
    transform-origin: right;
    animation: fr-wide 1s var(--fr-ease) both .35s;
}

.rk-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--fr-ink2);
}

.rk-legend i {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.rk-tiles {
    margin-bottom: 14px;
}

.rk-tiles .fr-op {
    color: var(--fr-ink2);
    font-size: 22px;
}

.rk-tiles .fr-tile {
    --c: var(--fr-t);
}

.rk-note {
    margin: 0;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--fr-line);
    background: color-mix(in srgb, var(--fr-t) 8%, transparent);
    font-size: 14px;
}

.rk-chips {
    margin-bottom: 12px;
}

.rk-chips button b {
    margin-inline-start: 4px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fr-t) 16%, transparent);
    font-size: 12.5px;
}

.fr-none i {
    color: var(--fr-t);
    font-size: 22px;
    vertical-align: middle;
}

.rk-journal {
    display: grid;
    gap: 8px;
}

.fr-wrap .fc-report {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .rk-bars > div {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rk-bars > div .fr-fuel-track {
        grid-column: 1 / -1;
        order: 3;
    }

    .rk-bars > div .fr-fuel-qty {
        grid-column: 1 / -1;
        order: 4;
    }

    .rk-pair {
        grid-template-columns: 1fr auto auto;
    }

    .rk-pair .rk-two {
        grid-column: 1 / -1;
        order: 5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rk-two i {
        animation: none;
    }
}