/**
 * Collapsible content (FAQ accordion): a numbered register.
 *
 * A hairline-ruled list rather than a stack of boxed cards - the questions
 * are a reading list, and boxing each one turns a page of prose into a page
 * of chrome. Each row carries three things in a fixed grammar: an 01/02
 * index in the heading face (the quiet structure the theme's rails and
 * chips use everywhere), the question, and a drawn circular +/- toggle
 * pinned to the row's end. The toggle is the state made visible: outlined
 * and muted while closed, filled with the brand colour while open, its
 * vertical bar folding down into the horizontal so + becomes - as motion
 * rather than a glyph swap.
 *
 * The native ::marker is suppressed (list-style: none on the summary plus
 * the -webkit prefix for older Safari) and replaced by that toggle. What
 * the browser guarantees about <details> - keyboard toggling, exposed
 * open state, find-in-page opening a collapsed answer - rides on the
 * elements, not the marker, and none of it is touched. Unlike a styled
 * ::marker, the drawn toggle renders identically in every browser.
 *
 * The summary is the click target and must therefore be a comfortable
 * height on touch: padding-block gives it ~56px at the theme's h5 size.
 */
.section-collapsible-content {
  /* Opening is deliberately slower than closing - see the animation block
     at the foot of this file. */
  --faq-open: 620ms;
  --faq-close: 420ms;
  --faq-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Index column width + row gap: the answer indents by the same sum so it
     opens flush under its question's first word, not under its number. */
  --faq-indent: calc(28px + var(--space-4));
  padding-block: var(--space-9);
}

.collapsible__inner--medium {
  max-width: 80ch;
  margin-inline: auto;
}

.collapsible__head {
  margin-bottom: var(--space-6);
}

.collapsible__heading {
  margin: 0 0 var(--space-2);
}

.collapsible__subheading {
  margin: 0;
  color: var(--color-muted);
}

.collapsible__list {
  border-top: 1px solid var(--color-line);
}

.collapsible__item {
  border-bottom: 1px solid var(--color-line);
}

.collapsible__question {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  list-style: none;
  cursor: pointer;
  outline-offset: 4px;
}

/* Older Safari draws its triangle through a prefixed pseudo-element rather
   than ::marker; both routes are closed or the row gets two affordances. */
.collapsible__question::-webkit-details-marker {
  display: none;
}

/* The register index. Numbered by rendered position (see the liquid), set
   in the heading face like every rail label in the theme; it takes the
   brand colour while its answer is open, so a scan down the list shows
   which entries are unfolded. */
.collapsible__index {
  flex: 0 0 auto;
  width: 28px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.collapsible__item[open] > .collapsible__question .collapsible__index {
  color: var(--color-brand);
}

.collapsible__question-text {
  margin: 0;
  min-width: 0;
  text-transform: none;
}

/* The drawn toggle: a quiet outlined circle whose two bars form the +.
   While open it takes the solid brand fill - the one decided element in a
   hairline row - and the vertical bar lies down into the horizontal. */
.collapsible__toggle {
  flex: 0 0 auto;
  position: relative;
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
}

.collapsible__toggle::before,
.collapsible__toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background-color: currentColor;
  transform: translate(-50%, -50%);
}

.collapsible__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.collapsible__question:hover .collapsible__toggle,
.collapsible__question:focus-visible .collapsible__toggle {
  border-color: color-mix(in srgb, var(--color-ink) 35%, var(--color-line));
  color: var(--color-ink);
}

.collapsible__item[open] > .collapsible__question .collapsible__toggle {
  border-color: var(--color-brand);
  background-color: var(--color-brand);
  color: var(--color-bg);
}

.collapsible__item[open] > .collapsible__question .collapsible__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* An accordion question is a line of ink text on white. Nothing to invert
   and nowhere darker to go, so the affordance is the rule under it. */
.collapsible__question:hover .collapsible__question-text,
.collapsible__question:focus-visible .collapsible__question-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .collapsible__toggle {
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }

  .collapsible__toggle::after {
    transition: transform 0.3s var(--faq-ease);
  }

  .collapsible__index {
    transition: color 0.2s ease;
  }
}

.collapsible__answer {
  padding-bottom: var(--space-5);
  /* Flush with the question's first word - the number stays a gutter. */
  padding-left: var(--faq-indent);
  /* And clear of the toggle column, so a long last line never slides under
     the circle above it. */
  padding-right: calc(28px + var(--space-4));
  color: var(--color-muted);
}

.collapsible__answer a {
  color: var(--color-ink);
}

@media screen and (min-width: 990px) {
  .section-collapsible-content {
    padding-block: var(--space-10);
  }
}

/* ------------------------------------------------------------------ */
/* Open/close animation                                                */
/* ------------------------------------------------------------------ */
/* Animating <details> is awkward because a closed answer has no height to
   animate from - the browser hides its content outright. Two mechanisms are
   layered here, and BOTH are progressive: if neither is supported the panel
   still opens and closes instantly, which is the native behaviour and is
   perfectly usable.

   1. ::details-content (Chrome 131+, Safari 18.4+). The modern, correct
      answer: it targets the generated wrapper around the content, and with
      interpolate-size the browser will interpolate to and from `auto` - so
      the panel animates to its real height, whatever that is, with no
      measurement and no JavaScript. content-visibility needs
      transition-behavior: allow-discrete, or the content pops in at the start
      of the open transition instead of revealing with it.

   2. Where ::details-content is not supported, the answer still fades and
      rises on open. That is a one-way entry animation only - there is no
      closing counterpart, because the element is gone the instant the
      attribute is removed. Better a graceful open than a janky both-ways
      hack built on max-height guesses.

   The height alone is not enough to read as motion: a box that is only
   getting taller looks like a reflow, not an animation. The answer therefore
   also travels down into place behind the question, which is what makes it
   look like the panel is opening rather than the page jumping. Opening is
   slower than closing on purpose - an opening panel is content arriving and
   wants to be watched, a closing one is content leaving and only needs to get
   out of the way. */
@media (prefers-reduced-motion: no-preference) {
  .collapsible__item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    translate: 0 -12px;
    transition: block-size var(--faq-close) var(--faq-ease),
      translate var(--faq-close) var(--faq-ease),
      content-visibility var(--faq-close) allow-discrete,
      opacity calc(var(--faq-close) * 0.6) ease-in;
  }

  .collapsible__item[open]::details-content {
    block-size: auto;
    opacity: 1;
    translate: 0 0;
    transition: block-size var(--faq-open) var(--faq-ease),
      translate var(--faq-open) var(--faq-ease),
      content-visibility var(--faq-open) allow-discrete,
      opacity calc(var(--faq-open) * 0.75) ease-out;
  }

  /* Only the panel's own height interpolates; nothing else on the page needs
     keyword interpolation, so this stays scoped to the section. */
  .section-collapsible-content {
    interpolate-size: allow-keywords;
  }

  /* Fallback entry for browsers without ::details-content. Harmless where the
     rule above already runs: the answer is already at opacity 1 by the time
     this finishes. */
  @supports not selector(::details-content) {
    .collapsible__item[open] .collapsible__answer {
      animation: collapsible-answer-in var(--faq-open) var(--faq-ease) both;
    }
  }
}

@keyframes collapsible-answer-in {
  from {
    opacity: 0;
    translate: 0 -12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}