/*
Accordion

<div class="accordion [is-bordered]" data-orientation>
  <div class="accordion-item" data-value data-state>
    <div class="accordion-header" role="heading">
      <button class="accordion-trigger">
        <span class="accordion-trigger-label">
        <svg class="accordion-chevron">
    <div class="accordion-content" [hidden] [data-animating]>
      <div class="accordion-content-inner">

Items are separated by a rule; is-bordered frames them. The content's
height animates through --content-height (the disclosure motion shared
with Collapsible). The chevron turns with transform, so opening never
changes the trigger's box.
*/

@layer components {

.accordion {
  display:        flex;
  flex-direction: column;
  width:          100%;
}

.accordion-item {
  border-bottom: var(--surface-border-width) solid var(--surface-border);
}

.accordion-item:last-child {
  border-bottom: 0;
}

.accordion-header {
  display: flex;
  margin:  0;
}

.accordion-trigger {
  display:         flex;
  flex:            1;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--space-4);
  width:           100%;
  min-height:      var(--control-height);
  margin:          0;
  padding:         var(--space-4) 0;
  border:          0;
  border-radius:   var(--radius-control);
  background:      transparent;
  box-shadow:      none;
  color:           var(--ink);
  font-family:     var(--font-ui);
  font-size:       var(--text-ui);
  font-weight:     var(--weight-ui);
  letter-spacing:  var(--tracking-ui);
  line-height:     var(--leading-snug);
  text-align:      start;
  text-decoration: none;
  cursor:          pointer;
  -webkit-tap-highlight-color: transparent;
}

.accordion-trigger:hover:not(:disabled) .accordion-trigger-label {
  text-decoration:       underline;
}

.accordion-trigger:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.accordion-trigger:disabled {
  cursor:  not-allowed;
  opacity: var(--opacity-disabled);
}

/* The open item that cannot close: it reads as a normal heading. */
.accordion-trigger[aria-disabled="true"]:not(:disabled) {
  cursor:     default;
  opacity:    1;
  color:      var(--ink);
  background: transparent;
}

.accordion-trigger-label {
  display:     inline-flex;
  align-items: center;
  gap:         var(--control-gap);
  min-width:   0;
}

.accordion-trigger-label svg,
.accordion-chevron {
  flex:   none;
  width:  var(--icon-size);
  height: var(--icon-size);
}

.accordion-chevron {
  /* Align with the first line of the label. */
  margin-top: calc((1lh - var(--icon-size)) / 2);
  color:      var(--ink-dim);
  transition: transform var(--duration-enter) var(--ease-enter);
}

.accordion-trigger[data-state="open"] .accordion-chevron {
  transform: rotate(180deg);
}

.accordion-content {
  font-size:   var(--text-ui);
  line-height: var(--leading-body);
  color:       var(--ink-soft);
}

.accordion-content-inner {
  padding-bottom: var(--space-4);
}

.accordion-content-inner > :first-child { margin-top: 0; }
.accordion-content-inner > :last-child  { margin-bottom: 0; }

/* Before the page attaches: items do not know the root's value yet, so
   every panel is hidden here and the root's generated style shows the open
   ones. The behavior sets data-state and takes over. */
.accordion-item:not([data-state]) > .accordion-content {
  display: none;
}

/* Bordered */

.accordion.is-bordered {
  border:        var(--surface-border-width) solid var(--surface-border);
  border-radius: var(--radius-surface);
  background:    var(--surface-bg);
}

.accordion.is-bordered > .accordion-item > .accordion-header > .accordion-trigger,
.accordion.is-bordered > .accordion-item > .accordion-content > .accordion-content-inner {
  padding-inline: var(--surface-padding-sm);
}

/* Motion */

.accordion-content[data-animating] {
  overflow: hidden;
}

.accordion-content[data-animating][data-state="open"] {
  animation: accordion-down var(--duration-enter) var(--ease-enter);
}

.accordion-content[data-animating][data-state="closed"] {
  animation: accordion-up var(--duration-exit) var(--ease-exit) forwards;
}

@keyframes accordion-down {
  from { height: 0; }
  to   { height: var(--content-height); }
}

@keyframes accordion-up {
  from { height: var(--content-height); }
  to   { height: 0; }
}

}