.asy-acc__summary {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    padding: var(--asy-space-sm);
    gap: var(--asy-space-md);
    border: 1px solid var(--asy-color-muted);
    align-items: center;
}

.asy-acc__icon {
    border-radius: var(--asy-r-md);
    background-color: var(--asy-color-primary);
    padding: var(--asy-space-xs);
}

.asy-acc__icon i {
    color: var(--asy-color-text-white);
}

.asy-acc__panel {
    padding: var(--asy-space-md);
    background-color: #eeeeee;
}

/* EN: Smooth open/close for <details> panel using grid rows */
.asy-accordion .asy-acc__panel{
  display: grid;
  grid-template-rows: 0fr;                 /* collapsed */
  transition: grid-template-rows .28s ease;
}
.asy-accordion details[open] .asy-acc__panel{
  grid-template-rows: 1fr;                 /* expanded */
}
/* EN: Hide overflow while animating height */
.asy-accordion .asy-acc__panel-inner{ overflow: hidden; }

/* EN: Optional: animate summary background/icon state */
.asy-accordion .asy-acc__summary{ transition: background-color .2s ease; }
.asy-accordion details[open] .asy-acc__summary{ background: #f0f4ff; }
.asy-accordion .asy-acc__icon{ transition: transform .2s ease, opacity .2s ease; }
.asy-accordion details[open] .asy-acc__icon{ transform: rotate(90deg); }

/* EN: Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .asy-accordion .asy-acc__panel{ transition: none; }
  .asy-accordion .asy-acc__summary,
  .asy-accordion .asy-acc__icon{ transition: none; }
}