/*
 * Accordion — functional-only skeleton of styling hooks
 * =====================================================
 *
 * This file is deliberately EMPTY of cosmetics. It exists as a documented
 * skeleton: every class the component produces and every state/ARIA selector it
 * toggles is listed below as a (mostly empty) rule block, so a design system can
 * see exactly which hooks exist and drop its own values in. There are no
 * borders, no spacing, no colours, no fonts, no markers here — the component
 * falls back entirely to the browser's default rendering.
 *
 * Why empty is enough:
 *  - Show / hide is driven by JS setting the native `hidden` attribute on the
 *    panel; the UA stylesheet's `[hidden] { display: none }` does the hiding.
 *  - The keyboard focus indicator is the browser's default focus ring.
 *  - Expand / collapse and the disabled-header behaviour are ARIA state on the
 *    trigger, applied by JS; none of it depends on CSS.
 * So removing the cosmetic CSS cannot break functionality.
 *
 * IMPORTANT — do not reintroduce these:
 *  - Never set `display` on `.accordion__panel`. The component shows/hides
 *    panels via the native `hidden` attribute; a `display` rule here would
 *    override `[hidden]` and break hiding. `[hidden] { display: none }` from the
 *    UA stylesheet must always win.
 *  - Never remove the focus indicator (e.g. `outline: 0` / `outline: none` on
 *    the trigger or its `:focus-visible`). The browser default now provides the
 *    focus ring; suppressing it would make keyboard use inaccessible.
 */

/* ---------------------------------------------------------------------------
 * Element hooks — one placeholder per class the component emits.
 * ------------------------------------------------------------------------- */

.accordion {
}

.accordion__heading {
}

.accordion__trigger {
}

.accordion__panel {
}

/* First trigger sits at the top of the container — style hook for the edge case
   where the first header needs to differ from the rest. */
.accordion__heading:first-child .accordion__trigger {
}

/* ---------------------------------------------------------------------------
 * State / ARIA hooks — the important ones. These mirror the attributes the JS
 * toggles, so styling always matches what assistive tech announces.
 * ------------------------------------------------------------------------- */

/* Trigger whose panel is open. */
.accordion__trigger[aria-expanded='true'] {
}

/* Trigger whose panel is closed. */
.accordion__trigger[aria-expanded='false'] {
}

/* Locked-open header (single-open + no-toggle): cannot be collapsed. */
.accordion__trigger[aria-disabled='true'] {
}

/* Keyboard focus. Leave empty so the browser default focus ring stands; never
   suppress it. */
.accordion__trigger:focus-visible {
}

/* Collapsed panel. Hidden by the native `hidden` attribute — never add a
   `display` here (see header note). */
.accordion__panel[hidden] {
}