/* ============================================================
   CARD ACCORDION — cards, one open at a time (site/src/components/CardAccordion.astro).
   One component, two modes (a mode is a parameter, not a second component):
     by click (default) — the /manage AI bento;
     auto — the open card moves on by itself every 6 s and a bar under its text fills meanwhile (the /ai and /mcp
            use-case blocks); a click opens that card and restarts the count.
   Each card is a .card (its fill follows the page) with a heading that holds a button: the button opens its text,
   the whole card takes the click; the open card fills the list and its text sits on the card's bottom. The list
   keeps the tallest open state as its height (script), so switching never jumps. The card grows, its text opens
   (grid rows 0fr → 1fr) and fades on one duration and curve. Text — Birch/Body.
   Requires: tokens.css, surface.css (.card)
   ============================================================ */

.card-accordion-list { display: flex; flex-direction: column; gap: var(--grid-gap); }
.card-accordion {
  /* the Toggle character; --motion-* so the review tool's Motion panel can tune it */
  --motion-dur: var(--duration-toggle);
  --motion-ease: var(--ease-toggle);
  --acc-dur: var(--motion-dur);
  --acc-ease: var(--motion-ease);
  position: relative;
  display: flex;
  flex: 1 1 auto; /* basis auto in both states: only flex-grow changes, so it animates (0 ↔ auto basis would snap) */
  flex-direction: column;
  justify-content: space-between;
  transition: flex-grow var(--acc-dur) var(--acc-ease);
}
.card-accordion:has([aria-expanded="false"]) { flex-grow: 0; justify-content: flex-start; }
.card-accordion__title { margin: 0; }
/* the button covers the whole card (::after), so the card takes the click */
.card-accordion__toggle { padding: 0; border: 0; background: none; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.card-accordion__toggle::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-accordion__toggle:focus-visible { outline: none; }
.card-accordion:has(.card-accordion__toggle:focus-visible) { outline: var(--border-thick) solid var(--color-accent-indigo); outline-offset: var(--border-thin); }
.card-accordion__body {
  display: grid;
  grid-template-rows: 1fr;
  padding-top: var(--gap-heading-small); /* H4 title → text */
  color: var(--color-text-grey-on-grey);
  transition: grid-template-rows var(--acc-dur) var(--acc-ease), padding-top var(--acc-dur) var(--acc-ease), opacity var(--acc-dur) var(--acc-ease);
}
.card-accordion__inner { display: grid; gap: var(--space-sm); min-height: 0; overflow: hidden; }
.card-accordion:has([aria-expanded="false"]) .card-accordion__body { grid-template-rows: 0fr; padding-top: 0; opacity: 0; }

/* auto: the progress bar of the open card (Accent/Green by default; --acc-color sets another) */
.card-accordion__bar { height: var(--border-thick); overflow: hidden; border-radius: var(--radius-sm); background: color-mix(in srgb, currentColor 15%, transparent); }
.card-accordion__bar-fill { width: 0; height: 100%; border-radius: inherit; background: var(--acc-color, var(--color-accent-green)); }
.card-accordion:has([aria-expanded="true"]) .card-accordion__bar-fill { animation: card-accordion-fill var(--acc-interval, 6s) linear forwards; }
@keyframes card-accordion-fill { to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .card-accordion, .card-accordion__body { transition: none; }
  .card-accordion__bar { display: none; } /* no auto-cycle with reduced motion, so no count to show */
}