.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);
}

/* tt-list's own 1rem margin and roomy items are for open page layouts; inside an
   answer it should keep the same rhythm as the paragraphs around it. */
.faq-content .tt-list {
    margin: 0 0 var(--space-xs);
    line-height: 1.4;
}

.faq-content .tt-list li {
    margin-bottom: 0;
}

.faq-content h4 {
    margin: var(--space-s) 0 var(--space-2xs);
    font-size: var(--step-0);
}

/* Wide tables scroll on their own rather than being clipped by the column. */
@media (max-width: 40rem) {
    .faq-content table {
        display: block;
        overflow-x: auto;
    }
}

/*
 * The answer's permalink (.tt-permalink, layout.css). Scoped under .faq-content so it
 * beats the generic `.faq-content div` rules above — those would give the row and the
 * copy control's wrapper the paragraph inset and colour.
 * 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.
 */
.faq-content .tt-permalink {
    margin: var(--space-xs) 0 0;
    color: var(--text-muted);
}

.faq-content .tt-permalink div {
    margin: 0;
    color: inherit;
}