/* <Accordion /> — default styling, lm-accordion-* convention */
.lm-accordion {
    display: block;
    border: 1px solid var(--lm-border-color, #e4e4e7);
    border-radius: var(--lm-radius, 6px);
    overflow: hidden;
    font: 14px/1.5 system-ui, sans-serif;
}

.lm-accordion .lm-accordion-panel {
    border-top: 1px solid var(--lm-border-color, #e4e4e7);
    background: var(--lm-background-color, #fff);
}

.lm-accordion .lm-accordion-panel:first-child {
    border-top: 0;
}

.lm-accordion .lm-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    margin: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.lm-accordion .lm-accordion-header:hover {
    background: var(--lm-background-color-header, #f8fafc);
}

.lm-accordion .lm-accordion-header:focus-visible {
    outline: 2px solid var(--lm-border-outline, #2563eb);
    outline-offset: -2px;
}

.lm-accordion .lm-accordion-header:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.lm-accordion .lm-accordion-title {
    font-weight: 500;
}

/* The chevron: a CSS-drawn arrow that rotates when its panel opens */
.lm-accordion .lm-accordion-chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--lm-font-grayout, #64748b);
    border-bottom: 2px solid var(--lm-font-grayout, #64748b);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -4px;
}

.lm-accordion .lm-accordion-chevron[data-open='true'] {
    transform: rotate(225deg);
    margin-top: 4px;
}

/*
 * The body element NEVER leaves the DOM, so panel content keeps its state
 * across toggles. Collapse animates grid-template-rows 0fr -> 1fr, which
 * transitions to the content's EXACT height — no max-height guess, no dead
 * time, no height cap — so it opens/closes smoothly with any amount of
 * content. The CLIP child (overflow:hidden + min-height:0) is the element
 * sized by the row track — it must be padding-free so the panel collapses
 * fully to 0 (padding on the clip would leave a stuck sliver); the padding
 * lives on the inner content instead.
 */
.lm-accordion .lm-accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    /* Closed bodies leave the Tab order and the accessibility tree:
       inert is set by the template, and visibility:hidden backs it up for
       engines without inert — delayed by the collapse duration so the
       fold animation still shows the content on its way out. */
    visibility: hidden;
    transition:
        grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.28s;
}

.lm-accordion .lm-accordion-body[data-open='true'] {
    grid-template-rows: 1fr;
    visibility: visible;
    transition:
        grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s;
}

.lm-accordion .lm-accordion-clip {
    overflow: hidden;
    min-height: 0;
}

.lm-accordion .lm-accordion-content {
    padding: 4px 16px 16px;
    color: var(--lm-font-color, #334155);
}

@media (prefers-reduced-motion: reduce) {
    .lm-accordion .lm-accordion-body {
        transition: none;
    }
}