/* kit v1.9.0 — generated by sync-kit; edit kit/ and re-sync */
/* kit/ui/accordion — expand/collapse Q&A list on native <details>/<summary>.
 *
 * NEW WORK (kit 1.4.0), not an extraction — kit.json's `planned` block records why: the theme's
 * component-accordion.css is a Dawn styling layer over variables and icons that do not exist
 * here, and details-disclosure.js is Dawn's dropdown, not an accordion. What was worth taking
 * is the PATTERN both pages already proved page-locally (XERF and Stellar M22 each authored
 * their own FAQ): <details> as the disclosure primitive.
 *
 * WHEN A PAGE USES THIS (operator rule, 2026-08-23): if the page has FAQs, it uses this
 * component — no more page-local accordions. See docs/accordion.md §When to use.
 *
 * THERE IS NO JAVASCRIPT AT ALL, by design. Stellar M22's migration finding
 * (page.json → followups.ui_accordion) set the requirement: a kit accordion must be openable
 * without script. <details> satisfies that natively — summary is a real button to every
 * browser and screen reader, so arm A is not a fallback, it is the component. The two things
 * pages used JS for are both native now:
 *   - exclusive open: the `name` attribute on <details> (one open per name group). Browsers
 *     without it (pre-2024) simply allow several open at once — a soft degradation.
 *   - open/close animation: interpolate-size + a ::details-content transition, scoped to
 *     .lp-acc below. Browsers without it get an instant toggle, which is what both pages
 *     shipped for years.
 */

.lp-acc {
  display: flex;
  flex-direction: column;
  /* Opt in to animating to/from block-size: auto. Inherits down the subtree; no effect in
   * browsers that do not know it. */
  interpolate-size: allow-keywords;
}

.lp-acc__item {
  border-bottom: 1px solid var(--border);
}

/* NOT flex: a flex summary splits mixed content (text + <em>/<strong>/<code>) into separate
 * flex items and space-between scatters the question across the row. The marker is absolutely
 * positioned instead, so the question stays ordinary wrapped prose. */
.lp-acc__q {
  position: relative;
  display: block;
  padding-block: var(--acc-pad, 18px);
  padding-right: calc(22px + var(--space-s));
  color: var(--text-c);
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none; /* the marker is ours (.lp-acc__icon), not the UA triangle */
}

.lp-acc__q::-webkit-details-marker {
  display: none;
}

/* Focus ring: --btn-outline-border, never --primary — a summary is a control boundary and
 * --primary vanishes in dark sections on three of five brands (ROLE-TIER.md §Findings 5). */
.lp-acc__q:focus-visible {
  outline: 2px solid var(--btn-outline-border);
  outline-offset: 4px;
}

/* The marker: a "+" the author writes as text inside the span, rotating to "×" when open.
 * Text, not an SVG, so it costs nothing and inherits color. aria-hidden it in the markup —
 * the summary's text is the accessible name and the marker is decoration. */
.lp-acc__icon {
  position: absolute;
  top: 50%;
  right: 0;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform var(--dur-fast) var(--ease);
}

.lp-acc__item[open] > .lp-acc__q .lp-acc__icon {
  transform: translateY(-50%) rotate(45deg);
}

.lp-acc__a {
  max-width: var(--measure);
  padding-bottom: var(--acc-pad, 18px);
  color: var(--text-muted);
  font-size: var(--text-s);
  line-height: 1.65;
}

.lp-acc__a > :first-child { margin-top: 0; }
.lp-acc__a > :last-child { margin-bottom: 0; }

/* Height animation on the native toggle. ::details-content is the UA wrapper around
 * everything after the summary; transitioning its block-size needs interpolate-size above.
 * content-visibility participates so the content stays discoverable (find-in-page,
 * fragment navigation) while closed. --dur collapses to 1ms under prefers-reduced-motion
 * via roles.css, so this needs no reduced-motion block of its own. */
.lp-acc__item::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size var(--dur) var(--ease),
    content-visibility var(--dur) allow-discrete;
}

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

/* Print: show every answer. A printed FAQ with 8 of 9 answers missing is the no-JS defect
 * in another medium. */
@media print {
  .lp-acc__item::details-content {
    block-size: auto;
    content-visibility: visible;
  }
}