.annual-report {
    display: grid;
    /* The year takes 72.5 of the 350px the narrow row is drawn at, and stops growing at the
       200px of the wide one — a share and a cap instead of a breakpoint, so the row keeps
       shrinking evenly in between. `min-content` as the floor, since neither grows with the
       text and an enlarged year would otherwise break across two lines. */
    grid-template-columns: minmax(min-content, min(20.714%, 12.5rem)) minmax(0, 1fr);
    column-gap: var(--sav-grid-gutter);
    padding-block: 1.5rem 3.75rem;
    border-block-start: 1px solid var(--sav-color-lila);

    /* `[hidden]` comes from the user agent stylesheet and loses to the `display` above. */
    &[hidden] {
        display: none;
    }
}

/* A heading is blau by default, and the year is not. */
.annual-report__year {
    color: var(--sav-color-dunkelblau);
}

/* The label of a small button is the Label/Tag style, whose tracking the button itself does
   not carry yet — without it the row's buttons come out narrower than they are drawn. */
.annual-report__button {
    letter-spacing: var(--sav-text-label-tracking);
}

.annual-report__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-block-start: 2rem;
}

/* Both classes, so the two values beat the ones `--small` sets on the same element whatever
   order the two stylesheets are enqueued in — one class each would be a tie. */
.annual-report__button.annual-report__button--download {
    --button-icon: 1.125rem;
    --button-icon-gap: 0.6875rem;

    & .button__icon {
        inline-size: var(--button-icon);
        margin-inline-start: var(--button-icon-gap);
        opacity: 1;
    }
}