/* The per-symbol FAQ, shown on a phone only — see the partial for why.
   The boxes themselves are `shared/faq-item`'s; this is the card around them. */

.symbol-faq {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  background-color: var(--gray-0);
}

/* 21px, and 24px of air under it: the legacy accordion's own `.title`. Its 36px
   override lives behind `min-width: 1000px`, which this accordion never reaches
   — it is gone by then. The 24px is spelled as padding rather than the legacy's
   margin; nothing here collapses, so it draws the same. */
.symbol-faq-title {
  padding-bottom: 24px;
  color: var(--gray-900);
  font-size: 21px;
  font-weight: 700;
}

/* The site FAQ's boxes carry their own bottom margin; the last one here would
   leave a gap inside the card. */
.symbol-faq .faq-box:last-child {
  margin-bottom: 0;
}

/* Above 1000px the site-wide FAQ takes over in the main column — above, not at:
   the legacy hides this one on `max-width: 1000px`, so at exactly 1000px it is
   still the per-symbol accordion showing. Hence 1001. */
@media (min-width: 1001px) {
  .symbol-faq {
    display: none;
  }
}