/* Additive calendar-year comparison; styles stay inside this component. */
.fr-cumulative {
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius, 14px);
    background: #fff;
    color: #334155;
    box-shadow: var(--card-shadow, 0 1px 4px rgb(15 23 42 / 6%));
    font-family: inherit;
}
.fr-cumulative [hidden] { display: none !important; }
.fr-cumulative .fr-cumulative-title { margin: 0 0 .3rem; font-size: .95rem; font-weight: 700; color: #334155; }
.fr-cumulative .fr-cumulative-intro { margin: 0 0 1rem; font-size: .8rem; line-height: 1.55; color: #64748b; }
.fr-cumulative-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.fr-cumulative-field { display: flex; flex-direction: column; gap: .3rem; font-size: .72rem; font-weight: 600; color: #475569; }
.fr-cumulative-field select {
    min-height: 38px;
    max-width: 100%;
    padding: .45rem 2rem .45rem .65rem;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: .78rem;
}
.fr-cumulative-field select:disabled { opacity: .6; }
.fr-cumulative :is(select, button, summary):focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
.fr-cumulative .fr-cumulative-status { margin: .7rem 0; color: #64748b; font-size: .72rem; line-height: 1.5; }
.fr-cumulative-retry { border: 1px solid #bfdbfe; border-radius: 7px; background: #eff6ff; color: #1d4ed8; padding: .5rem .8rem; font: inherit; font-size: .8rem; cursor: pointer; }
.fr-cumulative-summary { padding: .9rem 1rem; margin: 1rem 0; border-left: 3px solid #2563eb; border-radius: 0 8px 8px 0; background: #f8fafc; }
.fr-cumulative-summary:empty { display: none; }
.fr-cumulative .fr-cumulative-total { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: baseline; margin: 0; }
.fr-cumulative-total strong { font-size: 1.65rem; font-weight: 700; color: #2563eb; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.fr-cumulative-total span { font-size: .8rem; font-weight: 600; color: #475569; }
.fr-cumulative .fr-cumulative-coverage { margin: .4rem 0 0; font-size: .75rem; line-height: 1.55; color: #475569; }
.fr-cumulative .fr-cumulative-comparison { margin: .45rem 0 0; font-size: .78rem; line-height: 1.6; color: #334155; }
.fr-cumulative-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 1rem 0 .65rem; font-size: .72rem; color: #475569; }
.fr-cumulative-key { display: inline-flex; align-items: center; gap: .35rem; }
.fr-cumulative-key::before { content: ''; width: 20px; border-top: 2px solid #94a3b8; }
.fr-cumulative-key-current::before { border-color: #2563eb; border-top-width: 3px; }
.fr-cumulative-key-typical::before { border-color: #475569; border-top-style: dashed; }
.fr-cumulative-key-selected::before { border-color: #0f766e; border-top-width: 3px; }
.fr-cumulative-plot { position: relative; height: 320px; min-width: 0; }
.fr-cumulative .fr-cumulative-note { margin: .7rem 0 0; color: #64748b; font-size: .72rem; line-height: 1.6; }
.fr-cumulative-details { margin-top: 1rem; border-top: 1px solid #e2e8f0; padding-top: .75rem; }
.fr-cumulative-details > summary { width: fit-content; cursor: pointer; font-size: .78rem; font-weight: 600; color: #1d4ed8; }
.fr-cumulative-table-wrap { overflow-x: auto; margin-top: .65rem; }
.fr-cumulative table { width: 100%; border-collapse: collapse; text-align: left; font-size: .74rem; line-height: 1.45; }
.fr-cumulative caption { text-align: left; padding: 0 0 .6rem; color: #64748b; font-size: .72rem; }
.fr-cumulative th, .fr-cumulative td { padding: .55rem .6rem; vertical-align: top; border-bottom: 1px solid #e2e8f0; }
.fr-cumulative thead th { background: #f8fafc; color: #475569; font-weight: 600; }
.fr-cumulative tbody th, .fr-cumulative td:nth-child(2), .fr-cumulative td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
    .fr-cumulative { padding: 1rem; }
    .fr-cumulative-controls { align-items: stretch; }
    .fr-cumulative-field { flex: 1 1 140px; min-width: 0; }
    .fr-cumulative-field select { width: 100%; }
    .fr-cumulative-plot { height: 265px; }
    .fr-cumulative-summary { padding: .75rem; }
    .fr-cumulative th, .fr-cumulative td { padding: .5rem .4rem; }
}