@layer components {
  .collapsible {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: var(--foreground);

    /* Two gotchas, both required for the panel to glide:
       1. `::details-content` must attach to the compound (`&::details-content`,
          NOT `& ::details-content` - the descendant form never matches, the
          pseudo's originating element is the subject itself).
       2. `block-size: auto` is a keyword - without interpolate-size the
          0→auto pair is non-interpolable and the transition silently snaps. */
    &::details-content {
      block-size: 0;
      overflow-y: clip;
      interpolate-size: allow-keywords;
      transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
    }

    &[open]::details-content {
      block-size: auto;
    }
  }

  @starting-style {
    .collapsible[open]::details-content {
      block-size: 0;
    }
  }

  /* -- Density --------------------------------------------------
     data-density on the .collapsible root scales the padding between text
     and the outer border (trigger + content), ratio 0.75 / 1 / 1.25;
     comfortable matches the unsized default. */
  .collapsible:where([data-density="compact"]) {
    & .collapsible-trigger { padding: 0.5rem 0.75rem; }
    & .collapsible-content  { padding: 0 0.75rem 0.5rem; }
  }
  .collapsible:where([data-density="comfortable"]) {
    & .collapsible-trigger { padding: 0.75rem 1rem; }
    & .collapsible-content  { padding: 0 1rem 0.75rem; }
  }
  .collapsible:where([data-density="spacious"]) {
    & .collapsible-trigger { padding: 1rem 1.25rem; }
    & .collapsible-content  { padding: 0 1.25rem 1rem; }
  }

  .collapsible-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    color: inherit;
    list-style: none;

    /* a tint of the text color - reads on any surface, custom colors included */
    &:hover {
      background-color: color-mix(in oklch, currentColor 7%, transparent);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }

    &::-webkit-details-marker {
      display: none;
    }
  }

  .collapsible-chevron {
    width: 1rem;
    height: 1rem;
    margin-inline-start: auto;
    color: color-mix(in oklch, currentColor 60%, transparent);
    transition: transform 200ms ease;
    flex-shrink: 0;

    details[open] > summary > & {
      transform: rotate(180deg);
    }
  }

  .collapsible-content {
    padding: 0 1rem 0.75rem;
    font-size: 0.875rem;
    color: color-mix(in oklch, currentColor 72%, transparent);
    line-height: 1.6;
  }

  /* -- Leading icon / emoji ----------------------------------------
     .collapsible-icon in front of the heading: an svg or an emoji in a
     fixed 1.1em box, so headings line up whatever the glyph. */
  .collapsible-icon {
    display: inline-grid;
    place-items: center;
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    font-style: normal;
    line-height: 1;

    & svg { width: 1em; height: 1em; }
  }

  /* -- Sizes: the heading's scale and weight (md == default) ------- */
  .collapsible {
    &[data-size="sm"] .collapsible-trigger { font-size: 0.8125rem; }
    &[data-size="md"] .collapsible-trigger { font-size: 0.875rem; }
    &[data-size="lg"] .collapsible-trigger { font-size: 1rem; font-weight: 600; }
    &[data-size="xl"] .collapsible-trigger { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }

    /* -- Variants: the surface (content follows its text color) ---- */
    &[data-variant="ghost"] { border-color: transparent; }
    &[data-variant="muted"] { background-color: var(--muted); border-color: transparent; }
    &[data-variant="primary"] {
      background-color: var(--primary);
      color: var(--primary-foreground);
      border-color: transparent;
    }
    &[data-variant="neutral"] {
      background-color: color-mix(in oklch, var(--foreground) 78%, var(--background));
      color: var(--background);
      border-color: transparent;
    }
    /* highlight: plain while closed, the primary surface once open */
    &[data-variant="highlight"] {
      transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;

      &[open] {
        background-color: var(--primary);
        color: var(--primary-foreground);
        border-color: transparent;
      }
    }
  }

  /* -- Markers: a CSS-drawn open/close sign at the end of the heading -
     data-marker="arrow" (a chevron that turns up) or "plus" (+ that
     becomes -); data-marker-position="start" puts it before the text.
     For your own glyph use .collapsible-chevron (turns 180°, or 90° with
     data-turn="quarter") or swap two elements with .collapsible-when-open /
     .collapsible-when-closed. */
  .collapsible:is([data-marker="arrow"], [data-marker="plus"]) > .collapsible-trigger::after {
    content: '';
    flex-shrink: 0;
    margin-inline-start: auto;
    color: color-mix(in oklch, currentColor 65%, transparent);
    transition: rotate 200ms ease, translate 200ms ease, background-size 200ms ease;
  }
  .collapsible[data-marker="arrow"] > .collapsible-trigger::after {
    width: 0.45em;
    height: 0.45em;
    margin-inline-end: 0.2em;
    /* physical: a down/up arrow is the same in RTL */
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -0.15em;
  }
  .collapsible[data-marker="arrow"][open] > .collapsible-trigger::after {
    rotate: -135deg;
    translate: 0 0.1em;
  }
  .collapsible[data-marker="plus"] > .collapsible-trigger::after {
    width: 0.8em;
    height: 0.8em;
    background:
      linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
      linear-gradient(currentColor 0 0) center / 2px 100% no-repeat;
  }
  .collapsible[data-marker="plus"][open] > .collapsible-trigger::after {
    background-size: 100% 2px, 2px 0;
    rotate: 180deg;
  }
  .collapsible[data-marker-position="start"] > .collapsible-trigger::after {
    order: -1;
    margin-inline-start: 0;
    margin-inline-end: 0.25em;
  }

  .collapsible-chevron[data-turn="quarter"] {
    details[open] > summary > & { transform: rotate(90deg); }
    /* RTL: a quarter-turned chevron-right points the other way */
    &:dir(rtl) { scale: -1 1; }
    details[open] > summary > &:dir(rtl) { transform: rotate(-90deg); }
  }

  /* swap two glyphs (📁 / 📂, "Show" / "Hide") instead of turning one */
  .collapsible:not([open]) > .collapsible-trigger .collapsible-when-open,
  .collapsible[open] > .collapsible-trigger .collapsible-when-closed {
    display: none;
  }
  .collapsible-trigger > :is(.collapsible-when-open, .collapsible-when-closed) {
    margin-inline-start: auto;
  }

}

/* Accessibility: suppress motion for users who request it (REQUIRED for all
   components - AGENTS.md "Accessibility CSS"). Near-zero duration instead of
   `none` keeps transitionend/animationend (and discrete display flips)
   firing so JS state machines that await them keep working. */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .collapsible,
    .collapsible *,
    .collapsible::before,
    .collapsible::after,
    .collapsible *::before,
    .collapsible *::after,
    .collapsible::backdrop,
    .collapsible::details-content,
    .collapsible-chevron,
    .collapsible-chevron *,
    .collapsible-chevron::before,
    .collapsible-chevron::after,
    .collapsible-chevron *::before,
    .collapsible-chevron *::after,
    .collapsible-chevron::backdrop,
    .collapsible-content,
    .collapsible-content *,
    .collapsible-content::before,
    .collapsible-content::after,
    .collapsible-content *::before,
    .collapsible-content *::after,
    .collapsible-content::backdrop,
    .collapsible-trigger,
    .collapsible-trigger *,
    .collapsible-trigger::before,
    .collapsible-trigger::after,
    .collapsible-trigger *::before,
    .collapsible-trigger *::after,
    .collapsible-trigger::backdrop {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}