/*
 * CN-10 Accordion — app/components/ui/accordion_component.rb
 *
 * `.ui-accordion__body` overrides the UA stylesheet's `details:not([open])
 * > :not(summary) { display: none }` rule with `display: grid` at author
 * specificity, keeping closed content laid out (at zero height) instead
 * of removed outright — that's what lets `grid-template-rows` transition
 * from 0fr to 1fr instead of the browser's native instant show/hide.
 * `--border-hairline` sits between items only, never around the whole
 * accordion — spec §1.8 scopes it to row rules.
 */

.ui-accordion__item {
  border-bottom: var(--border-hairline);
}

.ui-accordion__item:last-child {
  border-bottom: none;
}

.ui-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--space-12);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: 500;
  color: var(--color-ink);
}

.ui-accordion__header::-webkit-details-marker {
  display: none;
}

.ui-accordion__chevron {
  flex-shrink: 0;
  color: var(--color-ink-muted);
  transition: transform var(--duration-base) var(--ease-out);
}

.ui-accordion__item[open] .ui-accordion__chevron {
  transform: rotate(180deg);
}

.ui-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--duration-base) var(--ease-out);
}

.ui-accordion__item[open] .ui-accordion__body {
  grid-template-rows: 1fr;
}

.ui-accordion__body-inner {
  min-height: 0;
  overflow: hidden;
  padding-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}