/*
 * accordion.css — Components.Accordion
 * Canopy v2 component. Consumes only --v2-* tokens.
 * Spec: docs/design/accordion-component-spec.md
 *
 * DOM contract:
 *   <div class="acc" data-accordion-id="<id>">
 *     <button class="acc-trigger" aria-expanded="false" aria-controls="acc-panel-<id>">
 *       <svg class="acc-icon">…</svg>
 *       <span class="acc-label">Label</span>
 *       <svg class="acc-chevron">…</svg>
 *     </button>
 *     <div class="acc-panel" id="acc-panel-<id>" role="region" aria-labelledby="…" hidden>
 *       <div class="acc-panel-inner">…content…</div>
 *     </div>
 *   </div>
 */

.acc {
  border-top: 1px solid var(--v2-border-soft);
  border-bottom: 1px solid var(--v2-border-soft);
  background: var(--v2-bg-card);
}

.acc + .acc {
  border-top: none;
}

.acc-trigger {
  display: flex;
  align-items: center;
  gap: var(--v2-space-sm);
  width: 100%;
  min-height: var(--v2-space-touch);
  padding: var(--v2-space-sm) var(--v2-space-md);
  background: transparent;
  border: 0;
  color: var(--v2-text-primary);
  font: var(--v2-type-body);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--v2-transition-fast) var(--v2-ease-out);
}

.acc-trigger:hover {
  background: var(--v2-hover-overlay);
}

.acc-trigger:active {
  background: var(--v2-press-overlay);
}

.acc-trigger:focus-visible {
  outline: 2px solid var(--v2-focus-ring);
  outline-offset: -2px;
}

.acc-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--v2-text-secondary);
}

.acc-label {
  flex: 1;
  min-width: 0;
}

.acc-chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--v2-text-tertiary);
  transition: transform var(--v2-transition-base) var(--v2-ease-out);
}

.acc-trigger[aria-expanded="true"] .acc-chevron {
  transform: rotate(90deg);
}

/* Grid-template-rows expand: compositor-friendly, no JS height measurement.
   0fr → 1fr lets the panel animate from collapsed to its natural height. */
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--v2-transition-base) var(--v2-ease-out);
}

.acc-panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.acc-panel-inner {
  overflow: hidden;
  min-height: 0;
}

.acc-panel[data-open="true"] .acc-panel-inner {
  padding: 0 var(--v2-space-md) var(--v2-space-md);
}

@media (prefers-reduced-motion: reduce) {
  .acc-chevron,
  .acc-panel {
    transition-duration: 0ms;
  }
}