/* =====================================================================
   Collapsible card - shared by Today's check-in, Insights and Edge.

   The collapsed/expanded state is one class, `.is-collapsed`, on the card
   element itself. Because that element is the one node a data refresh never
   replaces (only [data-*-body]/[data-*-list] inside it is patched - see hard
   rule 11), the collapsed state survives every such refresh for free and
   only resets on a genuine full re-render.

   The animation runs on the Web Animations API
   (TJ.Components.UI.bindCollapsible/animateCollapse in ui-kit.js), not a CSS
   `transition`. Two CSS-only approaches were tried and both failed in this
   app's test environment for the same underlying reason - re-triggering an
   animated size change on an element that has already completed one layout
   pass got permanently stuck at the collapsed size on the very next attempt
   to re-expand: first `grid-template-rows: 1fr -> 0fr` (no effect at all,
   even set as `!important` inline), then a `transition: max-height`
   (collapsed correctly, but going back to expanded stayed stuck at 0 even
   with `!important`). WAAPI's `element.animate()` sidesteps CSS transition
   state entirely - each call is an independent, disposable Animation
   object - so it does not accumulate whatever state the transition-based
   attempt got stuck in. `.is-collapsed` alone still renders the correct
   collapsed state on the very first paint with no JS needed for that part.
   ================================================================== */
.collapsible-body {
  overflow: hidden;
}

.is-collapsed .collapsible-body {
  height: 0;
}

.collapsible-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.collapsible-toggle__title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-title3);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.collapsible-toggle__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  transition: transform var(--dur-base) var(--ease-standard);
}

.is-collapsed .collapsible-toggle__chevron {
  transform: rotate(-90deg);
}