/* ==========================================================================
   COMPONENTS · ACCORDION — an editorial disclosure list on native
   <details>/<summary>: a hairline-ruled group of question rows that open to a
   reading-voice answer. Zero JS. The default triangle is removed for a mono
   +/- register mark that swaps to a rubric minus when [open]. Serves the FAQ
   and help-centre pages.
   ========================================================================== */

.op-accordion {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  overflow: hidden;            /* keep dividers + hover wash inside the radius */
}

/* — Each disclosure row is a <details>; dividers sit between items — */
.op-accordion__item { border-top: 1px solid var(--rule); }
.op-accordion__item:first-child { border-top: 0; }

/* — The question: a <summary> styled as a pressable editorial row — */
.op-accordion__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  cursor: pointer;
  list-style: none;            /* strip the default disclosure triangle */
  transition: var(--transition-ink);
}
.op-accordion__summary::-webkit-details-marker { display: none; }

/* hover tints the row toward the rubric wash and shifts ink to the link hover */
.op-accordion__summary:hover {
  background: var(--accent-wash);
  color: var(--link-hover);
}
.op-accordion__summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* — The register mark: a mono "+" that swaps to a rubric "−" when open — */
.op-accordion__summary::after {
  content: "+";
  flex: none;
  align-self: center;
  font-family: var(--font-data);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--text-muted);
  transition: var(--transition-ink);
}
.op-accordion__summary:hover::after { color: var(--accent); }
.op-accordion__item[open] > .op-accordion__summary::after {
  content: "\2212";            /* minus sign — the open-state swap */
  color: var(--accent);
}

/* — The answer: reading voice, set quieter than the question — */
.op-accordion__panel {
  padding: var(--space-2xs) var(--space-md) var(--space-md);
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
.op-accordion__panel > * + * { margin-top: var(--space-sm); }

/* — Flush variant: no outer frame, only the inter-item dividers — */
.op-accordion--flush {
  border: 0;
  border-radius: var(--radius-none);
  background: none;
}