/* Ehopto disclosures: one quiet chevron vocabulary across the public shell,
   member Home and registry pages. Native <details> keeps keyboard/touch
   semantics; custom JS menus keep their own aria-expanded state. */

/* Keep author-supplied icon-bearing summary controls in charge of their own
   glyphs. The low-specificity fallback covers ordinary native disclosures. */
:where(details:not([data-ehopto-chevron="custom"]):not(.dr-sites)) > summary {
    list-style: none;
    cursor: pointer;
}
:where(details:not([data-ehopto-chevron="custom"]):not(.dr-sites)) > summary::-webkit-details-marker {
    display: none;
}
:where(details:not([data-ehopto-chevron="custom"]):not(.dr-sites)) > summary:not(:has(svg, [class*="chevron"], [class*="caret"]))::after {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    inline-size: 9px;
    block-size: 9px;
    margin-inline-start: 11px;
    flex: none;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    border-radius: 1px;
    vertical-align: middle;
    opacity: .75;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease;
}
:where(details[open]:not([data-ehopto-chevron="custom"]):not(.dr-sites)) > summary:not(:has(svg, [class*="chevron"], [class*="caret"]))::after {
    transform: translateY(2px) rotate(225deg);
    opacity: 1;
}

/* Dedicated chevrons for disclosure buttons managed by existing scripts. */
[data-ehopto-chevron] {
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease;
    transform-origin: center;
    flex-shrink: 0;
}
[aria-expanded="true"] [data-ehopto-chevron],
details[open] > summary [data-ehopto-chevron] {
    transform: rotate(180deg);
}
:where(details.home-optional, details.say-place) > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
:where(details.home-optional, details.say-place, details.home-create) > summary {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
:where(details.home-optional, details.say-place, details.home-create) > summary:focus-visible {
    outline: 2px solid var(--e-accent, #4f8cff);
    outline-offset: 3px;
}

/* Native disclosure contents grow and fade only where the browser supports
   animating to auto. Everywhere else details still open normally, with no JS. */
@supports (interpolate-size: allow-keywords) {
    :where(details.home-create, details.home-optional, details.say-place) {
        interpolate-size: allow-keywords;
    }
    :where(details.home-create, details.home-optional, details.say-place)::details-content {
        block-size: 0;
        opacity: 0;
        overflow: clip;
        transition: block-size 240ms cubic-bezier(.2,.8,.2,1),
            opacity 180ms ease, content-visibility 240ms allow-discrete;
    }
    :where(details.home-create, details.home-optional, details.say-place)[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    :where(details) > summary::after,
    [data-ehopto-chevron],
    :where(details.home-create, details.home-optional, details.say-place) > summary,
    :where(details.home-create, details.home-optional, details.say-place)::details-content {
        transition: none !important;
    }
}