/* ==============================================================
   Shared accordion layer

   Three accordions ship here — §8 specs, §17 starter guide, §20 FAQ.
   They already shared a JS contract (disclosure.js). This is the CSS
   half of the same idea: what every accordion does regardless of how
   it looks. Sections add their own block class alongside and override
   type, padding, rules and layout freely.

   Extracted at the THIRD instance, not the second, on purpose. With
   two examples the axes that vary are a guess; with three they are
   known — indicator, rule direction, and header arrangement. Only the
   first of those turned out to belong in here.

   Loaded before the section stylesheets, so a section always wins on
   equal specificity.
   ============================================================== */

/* The h3 exists for the document outline, not for its type — the
   button inside carries the weight. This was written out three times,
   identically, in three files. */
.accordion__heading {
  margin: 0;
  font: inherit;
}

.accordion__trigger {
  width: 100%;
  text-align: left;
  line-height: var(--leading-tight);
}


/* --- Indicator ---------------------------------------------------
   §17 has none, so it simply never matches these. Sections set the
   icon's box; only the stroke and the state swap live here.
   ------------------------------------------------------------------ */

.accordion__sign {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.accordion__icon {
  stroke-width: var(--icon-stroke);
}

/* Plus at rest, minus once expanded. Keyed off the ARIA state, which
   is already correct in the rendered markup and stays correct after
   the controller toggles it — a second is-open class would be a
   second source of truth to keep in sync. */
.accordion__icon--minus { display: none; }
.accordion__trigger[aria-expanded='true'] .accordion__icon--plus  { display: none; }
.accordion__trigger[aria-expanded='true'] .accordion__icon--minus { display: block; }