/* FAQ accordion — The Color of Time.
   Native <details>/<summary> disclosures. The chevron rotation and its reduced-motion
   override live in motion.css (details[open] > summary .disclosure-chevron). */

.faq-list details {
  border-top: 1px solid rgba(34, 29, 23, .14);
}

/* Summary is the always-visible toggle: the mono tag sits full-width on its own line
   above the question + chevron row (flex-wrap), so the eyebrow reads in both states. */
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 18px;
  padding: 22px 0;
}
.faq-list summary::-webkit-details-marker { display: none; }

.faq-list details[open] > summary { padding-bottom: 12px; }

.faq-list summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius:8px;
}

/* The intro column (title/lede/open-lab button) is `position:sticky` inline so it stays
   pinned beside the question list on wide screens. Below ~800px the <main> flex row wraps
   and this column stacks above the list instead of sitting beside it — sticky then pins
   it over the questions as they scroll underneath, overlapping the heading with the list.
   Measured breakpoint (headless Chrome, faq.html): wraps at <800px, side-by-side at
   >=800px. Desktop and tablet-width screens above that are untouched.
   !important is required to beat the inline `position:sticky` style attribute. */
@media (max-width: 799px) {
  .faq-sidebar {
    position: static !important;
    top: auto !important;
  }
}