/* ============================================
   Expansion panel — collapsible disclosure with a rotating chevron.

   <xm-expansion-panel> is a framed disclosure: a header button +
   a collapsible body. The chevron rotates short4 / standard easing
   on toggle (no spring, bounce, or scale-in; NFR-19).

   Sits on one surface family (AD-13): surface-container-low frame,
   ink --md-sys-color-on-surface, hairline 1px outline-variant
   separators. No severity hue (AD-11). The chevron inherits ink via
   currentColor.
   ============================================ */

.expansion-panel {
  display: block;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  overflow: hidden;
}

.expansion-panel__header {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  box-sizing: border-box;
  padding: var(--s-3) var(--s-4);
  border: none;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  text-align: start;
  cursor: pointer;
  font-family: var(--md-sys-typescale-title-small-font);
  font-size: var(--md-sys-typescale-title-small-size);
  font-weight: 500;
  line-height: 1.3;
  transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.expansion-panel__header:hover {
  background: color-mix(in oklab, var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity), transparent);
}
.expansion-panel__header:focus { outline: none; }
/* Inset focus ring so the accent halo stays inside the frame's rounded clip
   rather than being cut off by overflow: hidden. Same 3px weight + coral
   primary-container as --xm-state-focus-ring, just drawn inset. */
.expansion-panel__header:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--md-sys-color-primary-container);
}

.expansion-panel__heading {
  flex: 1;
  min-width: 0;
}

.expansion-panel__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--md-sys-color-on-surface-variant);
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.expansion-panel--open .expansion-panel__chevron {
  transform: rotate(180deg);
}

/* Body — hidden when collapsed. A hairline separates it from the header
   only while open. */
/* Animated reveal: the body is a 1-row grid that transitions 1fr→0fr; the inner
   wrapper has min-height:0 + overflow:hidden so the auto-height content can be
   clipped to zero. This animates a content-sized body (which a plain
   height/max-height can't) with short4 standard easing — no spring/scale. */
.expansion-panel__body {
  display: grid;
  grid-template-rows: 1fr;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  transition:
    grid-template-rows var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.expansion-panel__body-inner {
  min-height: 0;
  overflow: hidden;
  padding: var(--s-3) var(--s-4) var(--s-4);
}
.expansion-panel__body.is-collapsed {
  grid-template-rows: 0fr;
  border-top-color: transparent;
}
.expansion-panel__body.is-collapsed .expansion-panel__body-inner {
  /* Drop the vertical padding while collapsed so it doesn't hold the row open. */
  padding-block: 0;
}

@media (prefers-reduced-motion: reduce) {
  .expansion-panel__body {
    transition: none;
  }
}

/* Disabled — shared reduced emphasis, non-interactive. The chevron carries its
   own color, so mute it too or it stays at full emphasis on a disabled panel. */
.expansion-panel--disabled .expansion-panel__header {
  cursor: not-allowed;
  color: var(--xm-color-on-surface-disabled);
}
.expansion-panel--disabled .expansion-panel__chevron {
  color: var(--xm-color-on-surface-disabled);
}
.expansion-panel--disabled .expansion-panel__header:hover {
  background: transparent;
}