.accordion-entry {
    /* 40px → 46px */
    --accordion-entry-marker-size: clamp(2.5rem, 2.5rem + (100vw - 24.375rem) * 0.00448, 2.875rem);
    /* 10px → 71px, the room the design leaves between the longest question and the knob. */
    --accordion-entry-knob-gap: clamp(0.625rem, 0.625rem + (100vw - 24.375rem) * 0.04559, 4.4375rem);

    /* 24px → 32px */
    padding-block-end: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.00598, 2rem);
    border-block-end: 1px solid var(--sav-color-dunkelblau);
    color: var(--sav-color-dunkelblau);
}

.accordion-entry__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--accordion-entry-knob-gap);
    align-items: start;
    cursor: pointer;

    @media (prefers-reduced-motion: no-preference) {
        transition: color var(--sav-duration-fade) var(--sav-ease-out);
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            color: var(--sav-color-dunkelblau-hover);
        }
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }

    /* Safari draws the disclosure triangle from a pseudo-element of its own, which a
       display other than `list-item` does not take away. */
    &::-webkit-details-marker {
        display: none;
    }
}

.accordion-entry__question {
    font-weight: var(--sav-font-weight-light);
    /* 18px → 30px */
    font-size: clamp(1.125rem, 1.125rem + (100vw - 24.375rem) * 0.00897, 1.875rem);
    /* 28px → 44px */
    line-height: clamp(1.75rem, 1.75rem + (100vw - 24.375rem) * 0.01196, 2.75rem);
    letter-spacing: normal;
    /* Takes the row's colour, which the document otherwise sets for every heading. */
    color: inherit;
}

.accordion-entry__marker {
    display: grid;
    place-items: center;
    inline-size: var(--accordion-entry-marker-size);
    block-size: var(--accordion-entry-marker-size);
    border-radius: 50%;
    background-color: var(--sav-color-hellgrau);

    @media (prefers-reduced-motion: no-preference) {
        transition: background-color var(--sav-duration-fade) var(--sav-ease-out);
    }

    @media (hover: hover) and (pointer: fine) {
        .accordion-entry__summary:hover > & {
            background-color: var(--sav-color-hellblau);
        }
    }

    .accordion-entry__summary:focus-visible > & {
        background-color: var(--sav-color-hellblau);
    }

    /* 20.87px → 24px, the design's own icon sizes, which are 24 of 46 at either width. */
    & .icon {
        inline-size: calc(var(--accordion-entry-marker-size) * 12 / 23);
        block-size: calc(var(--accordion-entry-marker-size) * 12 / 23);

        @media (prefers-reduced-motion: no-preference) {
            transition: rotate var(--sav-duration-fade) var(--sav-ease-out);
        }
    }
}

/* The cross of the open state is the plus turned by an eighth. */
.accordion-entry__disclosure[open] .icon {
    rotate: 45deg;
}

.accordion-entry__answer {
    max-inline-size: min(100%, var(--sav-text-width));
}

/* The room around the answer sits on the text and not on the box around it: that box is what grows
   out of nothing while the entry opens, and a distance of its own would stand under a closed
   question too. A margin rather than padding, which a row of no height cannot compress away.
   24px → 32px above; below, the answer keeps 24px more room to the line than two questions keep. */
.accordion-entry__answer-text {
    margin-block: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.00598, 2rem) 1.5rem;
}

/* The answer unfolds: its single row grows from nothing to the height of the text. That needs
   the answer to stay rendered while it is closed, so this stylesheet decides whether it is seen
   — the browser's own hiding would have nothing to animate, in either direction. Where the
   content of a disclosure cannot be addressed, the answer simply appears and disappears. */
@supports selector(::details-content) {
    .accordion-entry__disclosure::details-content {
        content-visibility: visible;
    }

    /* Named off the disclosure it stands in, not off its own class alone: the editor renders the
       answer without one, and hiding it there would leave the block with nothing to write in. */
    .accordion-entry__disclosure > .accordion-entry__answer {
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        transition:
            grid-template-rows var(--sav-duration-unfold) var(--sav-ease-out),
            visibility var(--sav-duration-unfold);
        transition-behavior: allow-discrete;

        @media (prefers-reduced-motion: reduce) {
            transition-duration: 0s;
        }
    }

    .accordion-entry__disclosure:not([open]) > .accordion-entry__answer {
        /* `minmax(0, …)`, since a bare `fr` keeps the height of what it holds as its minimum and
           the closed row would stand as tall as the room around the answer. */
        grid-template-rows: minmax(0, 0fr);
        visibility: hidden;
    }

    .accordion-entry__answer-text {
        overflow: hidden;
        min-block-size: 0;
    }
}