/* ===== collapsible styles ===== */

:root {
    --collapse-speed: 280ms;
    --collapse-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Grid-based height animation — no JS height calculation */
.collapsible-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--collapse-speed) var(--collapse-ease);
}

.collapsible-body[data-collapsed="true"] {
    grid-template-rows: 0fr;
}

/* This clips the content */
.collapsible-inner {
    overflow: hidden;
    min-height: 0;
}

/* Chevron rotation */
.collapsible-toggle-icon {
    transition: transform var(--collapse-speed) var(--collapse-ease);
    flex-shrink: 0;
}

.collapsible[data-state="collapsed"] .collapsible-toggle-icon {
    transform: rotate(-90deg);
}

/* Trigger interactivity */
.collapsible-trigger {
    cursor: pointer;
    user-select: none;
}

.collapsible-trigger:focus-visible {
    outline: 2px solid #e8a035;
    outline-offset: -2px;
    border-radius: 4px;
}

/* Optional left accent bar */
.collapsible:not([data-accent-bar="false"])::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background var(--collapse-speed) var(--collapse-ease);
}

.collapsible[data-state="expanded"]:not([data-accent-bar="false"])::before {
    background: #e8a035;
}

.collapsible span:first-child {
    margin-bottom: 5px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .collapsible-body,
    .collapsible-toggle-icon,
    .collapsible-inner {
        transition: none !important;
    }
}