/*
 * disclosure.css
 * Expand/collapse built on native <details>/<summary> — keyboard, focus,
 * and toggle state all platform-provided (Principle 4: native over reinvention).
 *
 *   <details class="disclosure" open>
 *     <summary class="disclosure-summary">
 *       <span>To Do</span>
 *       <span class="text-muted">(1 / 3)</span>
 *     </summary>
 *     <div class="disclosure-body">
 *       … content …
 *     </div>
 *   </details>
 *
 * The chevron is a CSS-drawn caret that rotates on open — no icon needed.
 *
 * ── Opening is animated, and that used to be impossible ───────────
 *
 * `height: 0` to `height: auto` is the animation CSS could not do for
 * twenty years, which is why every accordion in every framework measures
 * scrollHeight in JavaScript and writes a pixel value back. Two features
 * remove all of it: `interpolate-size: allow-keywords` lets a keyword be
 * interpolated, and `::details-content` gives the open panel a box to put
 * it on. `content-visibility` rides along as a discrete transition so the
 * content is not hidden until the collapse has finished.
 */

.disclosure {
  border:        var(--border-width) solid var(--rule);
  border-radius: var(--card-radius);
  overflow:      hidden;
}

.disclosure-summary {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-sm);
  padding:         var(--space-md) var(--space-xl);
  font-weight:     600;
  cursor:          pointer;
  user-select:     none;
  list-style:      none;          /* kill default disclosure triangle (FF) */
}
.disclosure-summary::-webkit-details-marker {
  display: none;                  /* kill default disclosure triangle (WebKit) */
}
/* Focus ring: focus.css, in the inset set — the summary fills its
   bordered box edge to edge, so an outward ring would be clipped. */
.disclosure-summary:hover {
  background: var(--surface-sunken);
}

/*
 * The panel. `interpolate-size` is declared at the root in tokens.css —
 * it inherits, and a keyword animation needs it on the element being
 * animated, not on the rule that animates it.
 */
.disclosure::details-content {
  block-size:         0;
  overflow:           hidden;
  transition:
    block-size         var(--overlay-time, var(--motion-enter)) var(--overlay-ease, var(--motion-ease-enter)),
    content-visibility var(--overlay-time, var(--motion-enter)) allow-discrete;
}

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

/* CSS caret — points right when collapsed, down when open */
.disclosure-summary::after {
  content:       "";
  width:         0.45rem;
  height:        0.45rem;
  border-right:  2px solid var(--ink-mute);
  border-bottom: 2px solid var(--ink-mute);
  transform:     rotate(-45deg);
  transition:    transform var(--motion-base) var(--motion-ease);
  flex-shrink:   0;
}
.disclosure[open] .disclosure-summary::after {
  transform: rotate(45deg);
}

.disclosure-body {
  padding:    var(--space-xl);
  border-top: var(--border-width) solid var(--rule);
}

/* When the caret sits beside content that itself ends in a value (like a
   count), keep them apart: summary uses space-between, so wrap the left
   side in its own element if you need the caret hugged to the right. */