/*
 * Accordion — structure.
 *
 * Built on native <details>/<summary>. That gives keyboard operation, the
 * open/closed state announced correctly, and — critically — content that is
 * still FOUND BY CTRL+F and by search engines when collapsed. A div-and-JS
 * accordion hides its content from both.
 *
 * There is no JavaScript in this element. The one thing JS adds is
 * single-open behaviour, and `name=` on <details> now does that natively.
 *
 * DO NOT edit this file to re-skin — override tokens in the .tokens.css file.
 */

.sp-accordion {
  font-family: var(--font-ui, "SF Pro Text", -apple-system, sans-serif);
  letter-spacing: var(--tracking-ui, -0.15px);
  border-top: 1px solid var(--border, #e5e5e5);
}

.sp-accordion__item {
  border-bottom: 1px solid var(--border, #e5e5e5);
}

.sp-accordion__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 4px;
  color: var(--ink, #292929);
  font-size: var(--text-md, 14px);
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-instant, 150ms) var(--ease-out, ease-out);
}

/* Safari draws its own triangle unless both of these are cleared. */
.sp-accordion__summary::-webkit-details-marker { display: none; }
.sp-accordion__summary::marker { content: ""; }

.sp-accordion__summary:hover { color: var(--sp-accordion-hover, var(--ink-muted, #5d5d5d)); }

.sp-accordion__summary:focus-visible {
  outline: 2px solid var(--sp-accordion-focus, var(--accent, #3b82f6));
  outline-offset: -2px;
  border-radius: var(--radius-nav, 8px);
}

.sp-accordion__title { flex: 1 1 auto; }

/* Chevron. Rotating one glyph beats swapping plus for minus — the movement
   tells you which way the panel is going. */
.sp-accordion__chevron {
  flex: 0 0 auto;
  width: var(--icon-nav, 14px);
  height: var(--icon-nav, 14px);
  color: var(--ink-faint, #9e9e9e);
  transition: transform var(--dur-quick, 200ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.sp-accordion__item[open] > .sp-accordion__summary .sp-accordion__chevron {
  transform: rotate(180deg);
  color: var(--ink, #292929);
}

.sp-accordion__panel {
  padding: 0 4px 16px;
  color: var(--ink-muted, #5d5d5d);
  font-size: var(--text-sm, 13px);
  line-height: 1.6;
}

.sp-accordion__panel > :first-child { margin-top: 0; }
.sp-accordion__panel > :last-child { margin-bottom: 0; }

.sp-accordion__panel a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Opening animation. interpolate-size lets height:auto animate, which is the
   thing that has always needed JS. Where it is unsupported the panel simply
   appears — correct, just not animated. */
@supports (interpolate-size: allow-keywords) {
  .sp-accordion { interpolate-size: allow-keywords; }

  .sp-accordion__item::details-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      height var(--dur-quick, 200ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
      opacity var(--dur-quick, 200ms) var(--ease-out, ease-out),
      content-visibility var(--dur-quick, 200ms) allow-discrete;
  }

  .sp-accordion__item[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

/* Boxed variant — separate cards rather than a ruled list. For an FAQ sitting
   on a page canvas rather than inside a panel. */
.sp-accordion--boxed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 0;
}

.sp-accordion--boxed .sp-accordion__item {
  padding: 0 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: var(--radius-card, 16px);
}

@media (prefers-reduced-motion: reduce) {
  .sp-accordion__chevron,
  .sp-accordion__item::details-content { transition: none; }
}