/* ═══════════════════════════════════════════════════════════════
   ACCORDION-UI + ACCORDION-ITEM-UI

   Two-element component. Each gets its own @scope block —
   accordion-item-ui is co-located in accordion.js but is a real
   custom element and must follow the two-block @scope pattern.
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ── */
@scope (accordion-ui) {
  :where(:scope) {
    --accordion-gap: 0;
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--accordion-gap);
  }
}

/* ── Item ── */
@scope (accordion-item-ui) {
  :where(:scope) {
    /* ── Colors ── */
    --accordion-item-border:          var(--a-border-subtle);
    --accordion-item-header-fg:       var(--a-fg-subtle);
    --accordion-item-header-fg-hover: var(--a-fg-strong);
    --accordion-item-header-bg-hover: var(--a-bg-muted);
    --accordion-item-caret-fg:        var(--a-fg-muted);
    --accordion-item-caret-fg-hover:  var(--a-fg-subtle);

    /* ── Layout ── */
    --accordion-item-radius:          var(--a-radius-md);
    --accordion-item-px:              var(--a-space-3);
    --accordion-item-py:              var(--a-space-2);
    --accordion-item-header-gap:      var(--a-space-2);

    /* ── Typography ── */
    --accordion-item-header-font:     var(--a-ui-size);
    --accordion-item-header-weight:   var(--a-weight-medium);

    /* ── Transition ── */
    --accordion-item-duration-fast:   var(--a-duration-fast);
    --accordion-item-duration:        var(--a-duration);
    --accordion-item-easing:          var(--a-easing);

    /* ── State ── */
    --accordion-item-focus-ring:      var(--a-focus-ring);
  }

  :scope {
    box-sizing: border-box;
    display: block;
    border-bottom: 1px solid var(--accordion-item-border);
  }

  :scope:last-child {
    border-bottom: none;
  }

  /* ── Header ── */
  :scope [slot="header"] {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--accordion-item-header-gap);
    padding: var(--accordion-item-py) var(--accordion-item-px);
    border-radius: var(--accordion-item-radius);
    cursor: pointer;
    user-select: none;
    font-size: var(--accordion-item-header-font);
    font-weight: var(--accordion-item-header-weight);
    color: var(--accordion-item-header-fg);
    background: transparent;
    transition:
      color var(--accordion-item-duration-fast) var(--accordion-item-easing),
      background var(--accordion-item-duration-fast) var(--accordion-item-easing);
    outline: none;
  }

  :scope [slot="header"]:hover {
    color: var(--accordion-item-header-fg-hover);
    background: var(--accordion-item-header-bg-hover);
  }

  :scope [slot="header"]:hover [slot="caret"] {
    color: var(--accordion-item-caret-fg-hover);
  }

  :scope [slot="header"]:focus-visible {
    box-shadow: var(--accordion-item-focus-ring);
  }

  :scope[open] [slot="header"] {
    color: var(--accordion-item-header-fg-hover);
  }

  /* ── Header text ── */
  :scope [slot="header-text"] {
    flex: 1;
    min-width: 0;
  }

  /* ── Caret icon ── */
  :scope [slot="caret"] {
    flex-shrink: 0;
    color: var(--accordion-item-caret-fg);
    transition:
      transform var(--accordion-item-duration) var(--accordion-item-easing),
      color var(--accordion-item-duration-fast) var(--accordion-item-easing);
    transform: rotate(0deg);
  }

  :scope[open] [slot="caret"] {
    color: var(--accordion-item-caret-fg-hover);
    transform: rotate(180deg);
  }

  /* ── Body content ── */
  :scope [slot="body"] {
    display: none;
  }

  :scope[open] [slot="body"] {
    display: block;
    padding: 0 var(--accordion-item-px) var(--accordion-item-py);
  }
}
