/* ═══════════════════════════════════════════════════════════════
   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) {
    /* Normal block-flow gap between items — the same ambient stack gap
       col-ui/row-ui/grid-ui read (`--a-gap`, base `--a-gap-md`). Items now
       separate by this gap rather than by flush hairline dividers, so the
       item @scope below carries no inter-item border. */
    --accordion-gap: var(--a-gap);
  }

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

/* ── Item ── */
@scope (accordion-item-ui) {
  :where(:scope) {
    /* ── Surface (variant) ──
       Flat-pixel-exact defaults (SPEC-R2/AC-2): transparent bg, no border,
       no header/body divider, zero body top-padding — byte-identical to the
       pre-variant item. Re-pointed by :scope[variant="contained"] below
       (SPEC-R1/AC-1); consumer-overridable in BOTH postures (SPEC-R3/AC-3). */
    --accordion-item-bg:      transparent;
    --accordion-item-border:  none;
    --accordion-item-divider: none;
    --accordion-item-body-pt: 0;

    /* ── Colors ── */
    --accordion-item-header-fg:       var(--md-sys-color-neutral-on-surface-variant);
    --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(--md-sys-color-neutral-on-surface-variant);

    /* ── 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);

    /* Header-scoped surface tokens — flat defaults keep today's look; contained
       re-points them (pill flush + inner ring off, ring relocates to the item).
       Kept as tokens (not [slot="header"] rules under an accordion-ui-led selector)
       so slot-vocab-vs-css attributes the header slot to accordion-item.yaml. */
    --accordion-item-header-radius:        var(--accordion-item-radius);
    --accordion-item-header-focus-shadow:  var(--accordion-item-focus-ring);
  }

  :scope {
    box-sizing: border-box;
    display: block;
    background: var(--accordion-item-bg);
    border: var(--accordion-item-border);
    border-radius: var(--accordion-item-radius);   /* invisible in flat: no border/bg */
  }

  /* ═══════ Variant: contained (token-only re-point + sanctioned layout exception) ═══════
     Own variant OR inherited from a contained host. CHILD combinator (`>`) so a FLAT
     accordion nested inside a contained one does NOT leak contained styling to the inner
     items (Finding 4); items are canonically direct children. Per-item opt-out: [variant="flat"].
     Two layout touches (overflow clip + surface focus-ring relocation) are documented
     exceptions in component-token-contract.md's sanctioned-exception table; bg/border/divider/
     body-pt AND the header pill-radius / inner-ring (via --accordion-item-header-*) stay pure
     token re-points.
     NB: the inherited form MUST use `:scope` (not a literal `accordion-item-ui`) — under
     @scope, only `:scope` may reference the `accordion-ui` ancestor to its LEFT; a literal
     tag is confined to the scope donut and would not match the outside ancestor. */
  :scope[variant="contained"],
  :where(accordion-ui[variant="contained"]) > :scope:not([variant="flat"]) {
    --accordion-item-bg:                  var(--a-bg-subtle);
    --accordion-item-border:              1px solid var(--md-sys-color-neutral-outline-variant);
    --accordion-item-divider:             1px solid var(--md-sys-color-neutral-outline-variant);
    --accordion-item-body-pt:             var(--a-space-2);
    --accordion-item-header-radius:       0;      /* pill corners flush to the surface (Finding 8) */
    --accordion-item-header-focus-shadow: none;   /* inner ring off; surface ring below (Finding 2) */
  }

  :scope[variant="contained"],
  :where(accordion-ui[variant="contained"]) > :scope:not([variant="flat"]) {
    overflow: hidden;                              /* pill + body clip to --accordion-item-radius */
  }

  /* Focus ring follows the SURFACE radius (AC-4); the item's own box-shadow is NOT clipped by
     its own overflow:hidden. `:has(> :focus-visible)` fires when the header — the item's only
     focusable DIRECT child (a body-nested control is a grandchild) — is focused, WITHOUT naming
     [slot="header"] in an accordion-ui-led selector. Covers BOTH own-variant and host-inherited
     forms; the inner ring is suppressed via --accordion-item-header-focus-shadow → none, so no
     double ring in the attribute-less-item case (Finding 2). */
  :scope[variant="contained"]:has(> :focus-visible),
  :where(accordion-ui[variant="contained"]) > :scope:not([variant="flat"]):has(> :focus-visible) {
    box-shadow: var(--accordion-item-focus-ring);
  }

  /* ── 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-header-radius);   /* flat: = --accordion-item-radius; contained: 0 */
    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);
  }

  /* Hover highlight paints the ITEM's own box (TKT-0016), not just the
     header slot — so an expanded item's body is inside the highlight
     too, not sitting outside it on the plain background. Trigger stays
     the header (only child that's ever :hover-targeted here); paint
     target moves to :scope, which already carries the item's own
     border-radius, so header + body read as one continuous shape. */
  :scope:has(> [slot="header"]: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-header-focus-shadow);   /* flat: = --accordion-item-focus-ring; contained: none (surface ring instead) */
  }

  :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: var(--accordion-item-body-pt) var(--accordion-item-px) var(--accordion-item-py);
    border-top: var(--accordion-item-divider);   /* default `none` in flat → invisible, zero layout (Finding 3) */
  }
}
