/* ─────────────────────────────────────────────────────────────
   rf-acc — the platform accordion / disclosure (design-system component)
   Full-width stacked items, +/- toggle, native <details>.
   Add data-accordion on the group for one-open-at-a-time (JS in nav.html).

   Markup:
     <div class="rf-acc" data-accordion>
       <details class="rf-acc-item">
         <summary class="rf-acc-q">Question</summary>
         <div class="rf-acc-a">Answer…</div>
       </details>
     </div>
   Theme-agnostic via tokens (works in light + dark).
   ───────────────────────────────────────────────────────────── */
.rf-acc { display: flex; flex-direction: column; gap: 10px; }
.rf-acc-item { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius); padding: 0 18px; transition: border-color 0.15s; }
.rf-acc-item[open] { border-color: rgba(255, 180, 0, 0.35); }

.rf-acc-q { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 15px 0; font-size: 13px; font-weight: 600; color: var(--text); transition: color 0.15s; }
.rf-acc-q::-webkit-details-marker { display: none; }
.rf-acc-q:hover { color: #FFB400; }

/* +/- toggle: '+' collapsed, '−' expanded (real minus sign U+2212) */
.rf-acc-q::after { content: "+"; margin-left: auto; flex-shrink: 0; width: 16px; text-align: center; font-family: var(--font-mono); font-size: 17px; font-weight: 400; line-height: 1; color: var(--text-muted); transition: color 0.15s; }
.rf-acc-item[open] .rf-acc-q::after { content: "\2212"; color: #FFB400; }
.rf-acc-q:hover::after { color: #FFB400; }

.rf-acc-a { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; padding: 0 0 16px; }
.rf-acc-a > :first-child { margin-top: 0; }
.rf-acc-a > :last-child { margin-bottom: 0; }