/* HYPERPART: accordion */
/*
 * dz-accordion — native <details> disclosure group.
 *
 * Zero JS. Single-open exclusivity is the HTML `name=` attribute: items
 * sharing a name auto-close their siblings (the shadcn `type="single"`
 * behaviour, with no controller). Drop `name` for an independent
 * (multi-open) group. Keyboard + AT semantics are the browser's own
 * <details>/<summary> — nothing to re-implement.
 */

.dz-accordion {
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-surface);
  overflow: hidden;
}

.dz-accordion__item + .dz-accordion__item {
  border-block-start: 1px solid var(--colour-border);
}

.dz-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--colour-text);
  cursor: pointer;
  list-style: none;
  transition: background var(--duration-fast) var(--ease-out);
}

.dz-accordion__trigger::-webkit-details-marker { display: none; }

.dz-accordion__trigger:hover {
  background: var(--colour-surface-muted);
}

.dz-accordion__trigger:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  /* inset: the accordion clips its corners (overflow:hidden), so an
     outward offset ring would be cropped at the item edges. */
  outline-offset: calc(var(--focus-ring-offset) * -1);
}

/* CSS chevron — inherits currentColor, rotates when the item is open. */
.dz-accordion__trigger::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  opacity: 0.55;
  mask: center / contain no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
  transition: transform var(--duration-base) var(--ease-out);
}

.dz-accordion__item[open] .dz-accordion__trigger::after {
  transform: rotate(180deg);
}

.dz-accordion__panel {
  padding: 0 var(--space-lg) var(--space-md);
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  line-height: var(--leading-normal);
}

@media (prefers-reduced-motion: reduce) {
  .dz-accordion__trigger,
  .dz-accordion__trigger::after {
    transition: none;
  }
}