.tr-page {
    width: 95%;
    max-width: 860px;
    padding: .5rem;
    margin: 0 0 1rem 0;
}

.tr-report {
    margin-bottom: 2rem;
}

.tr-report h3 {
    margin-bottom: 0.5rem;
}

.tr-desc {
    margin-bottom: 1rem;
    font-size: 0.9em;
    color: var(--muted);
}

.tr-table-wrap {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.tr-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9em;
}

.tr-table th,
.tr-table td {
    border: 1px solid var(--border);
    padding: 0.4rem 0.7rem;
    text-align: left;
}

.tr-table thead tr {
    background: var(--fg_color);
    color: var(--bg_color);
}

.tr-row--income {
    background: color-mix(in srgb, var(--green) 50%, var(--bg_color));
}

.tr-row--expense {
    background: color-mix(in srgb, var(--red) 50%, var(--bg_color));
}

.tr-row--balance_start,
.tr-row--balance_end {
    background: var(--subtle);
    font-weight: bold;
}

.tr-row--total_income {
    background: var(--green);
    font-weight: bold;
}

.tr-row--total_expenses {
    background: var(--red);
    font-weight: bold;
}

.tr-notes {
    font-size: 0.85em;
    color: var(--muted);
    margin-top: 0.5rem;
}

.tr-archive {
    margin-top: 1.5rem;
    font-size: 0.9em;
}

.tr-archive h4 {
    margin-bottom: 0.5rem;
}

.tr-archive ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
}

.tr-archive ul li {
    margin-bottom: 0.25rem;
}

@media screen and (min-width: 768px) {
    .tr-page {
        width: 90%;
    }
}