.collapse-block {
    margin-bottom: var(--space-s);
}

.collapse-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-2xs);
    border-bottom: var(--border-md) solid var(--primary-color);
    font-size: var(--step-1);
    color:var(--heading-color);
    line-height:1.1;
}

.collapse-content {
    height: 0;
    opacity: 0;
    overflow: hidden;
    will-change: height, opacity;
    transition:
            height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s ease-in-out;
    color: var(--text-color);
}

.collapse-content.open {
    opacity: 1;
}

/* FAQ */
.faq-content div p {
    color:var(--paragraph-color);
    line-height: 1.4;
}

.faq-content div ol,
.faq-content div ul,
.faq-content div p {
    margin-bottom: var(--space-xs);
    font-size: var(--step--1);
}

.faq-content div {
    margin: var(--space-2xs) var(--space-m) 0 var(--space-m);
    color:var(--paragraph-color);
}

/*
 * Scoped under .faq-content so it beats the generic `.faq-content div` rules
 * above — those are a class deeper, so neither the margin reset nor .tt-text-muted
 * would win from the utility classes alone.
 */
.faq-content .faq-permalink {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3xs);
    /* No horizontal inset: the row lines up with the collapse header and its
       toggle icon, so the rule spans the same width as the header's border. */
    margin: var(--space-xs) 0 0;
    padding-top: var(--space-2xs);
    border-top: var(--border-thin) solid var(--border-muted);
    color: var(--text-muted);
    /* Absolute FAQ urls are long; let them wrap rather than widen the accordion. */
    overflow-wrap: anywhere;
}

/* Same reason: the copy control's own wrapper must not pick the inset or the
   paragraph colour back up. */
.faq-content .faq-permalink div {
    margin: 0;
    color: inherit;
}