/* Accordion
 * The panel that opens beneath the stat row.
 *
 * Lifted from the prototype's single stylesheet, unchanged apart from
 * indentation. Every colour resolves through a token in tokens.css.
 */

/* ---------- accordion (opens below the tapped circle) ---------- */
#accordionPane { margin-top: 18px; }
.accordion-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--surface-2); color: var(--ink-soft); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 3;
}
@keyframes accordionPop {
  0%   { opacity: 0; transform: translateY(-10px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.accordion-enter { animation: accordionPop .45s cubic-bezier(.34,1.56,.64,1); }
@media (prefers-reduced-motion: reduce) { .accordion-enter { animation: none; } }