/* =============================================================================
   FYSH — Listing form accordion
   CR: fysh-form-accordion-2026-09-28
   Independent, gracefully sliding panels. The body animates grid-template-rows
   0fr -> 1fr (no max-height overshoot, so no sticking), padding lives on the inner
   so a closed row collapses to a true zero, and each head carries its own gentle
   tint that darkens when open.
============================================================================= */

/* ── Per-head tints (cycled by form-accordion.js) ──────────────────────────── */
.prop-accordion--t0 { --acc-tint: #EEF2F8; --acc-tint-open: #E0E8F2; }
.prop-accordion--t1 { --acc-tint: #EAF1FA; --acc-tint-open: #DAE8F6; }
.prop-accordion--t2 { --acc-tint: #EBF3EF; --acc-tint-open: #DCEAE3; }
.prop-accordion--t3 { --acc-tint: #F1EEF6; --acc-tint-open: #E5E0F0; }
.prop-accordion--t4 { --acc-tint: #F4F1EA; --acc-tint-open: #ECE5D9; }
.prop-accordion--t5 { --acc-tint: #ECF1F3; --acc-tint-open: #DDE8EC; }

/* ── Head ──────────────────────────────────────────────────────────────────── */
.prop-accordion__header {
    position: relative;
    cursor: pointer;
    padding-right: 44px;
    background: var(--acc-tint, #EEF2F8);
    border-radius: 4px;
    border-bottom: 0;                 /* no divider when closed; added back on open */
    user-select: none;
    transition: background 0.2s ease;
}
.prop-accordion__header:hover { background: var(--acc-tint-open, #E4EBF3); }
.prop-accordion__header:focus-visible {
    outline: 2px solid var(--blue, #1E5BA8);
    outline-offset: -2px;
}
.prop-accordion.is-open .prop-accordion__header {
    background: var(--acc-tint-open, #E4EBF3);   /* gently darker when open */
    border-bottom: 1px solid var(--border, #E2E8F0);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.prop-accordion__header .prop-form-section__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy, #0F2340);
    letter-spacing: 0.01em;
}

/* ── Chevron ───────────────────────────────────────────────────────────────── */
.prop-accordion__chev {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--muted, #6B7A8D);
    font-size: 18px;
    line-height: 1;
    transition: transform 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), color 0.2s ease;
}
.prop-accordion.is-open .prop-accordion__chev {
    transform: translateY(-50%) rotate(180deg);
    color: var(--navy, #0F2340);
}

/* ── Body ────────────────────────────────────────────────────────────────────────
   Closed means the body is not rendered at all, so there is no box and no padding
   under the head, which makes an air gap structurally impossible. Opening shows the
   body and eases it in with a composited fade and slide (opacity and transform), so
   there is nothing to stutter on. The body keeps its base 20px padding when open. */
.prop-accordion > .prop-accordion__body { display: none; }

.prop-accordion.is-open > .prop-accordion__body {
    display: block;
    animation: prop-acc-open 0.26s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

@keyframes prop-acc-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .prop-accordion.is-open > .prop-accordion__body { animation: none; }
    .prop-accordion__chev,
    .prop-accordion__header { transition: none; }
}