/* brain-ux-polish.css — UX Polish Sprint additions
   Created: UX-010 score animation, UX-013 motion budget enforcement
   Zero hardcoded values — all --mr-* tokens.
   Owned by: UX Polish Sprint (mr-brain-ux-polish spec)
*/

/* ==========================================================================
   SCORE COUNTER ANIMATION (UX-010)
   Triggered by _renderBrainHealthCard() — adds .mr-brain-score--animate class
   on scoreEl while requestAnimationFrame loop runs.
   ========================================================================== */

/* Fade-in accompanies the JS counter (opacity only — no layout shift) */
@keyframes mr-brain-score-fadein {
  from { opacity: 0.3; }
  to   { opacity: 1;   }
}

.mr-brain-score--animate {
  animation: mr-brain-score-fadein 600ms ease-out forwards;
  will-change: opacity;
}

/* Layout stability: pre-size score element to prevent shift during count */
.mr-brain-health-score {
  min-width: 3ch;
  display: inline-block;
}

/* ==========================================================================
   VISUAL STABILITY (UX-014)
   ========================================================================== */

/* Morning Brief dismiss: height-collapse transition before DOM removal */
.mr-brain-brief-card--dismissing {
  overflow: hidden;
  max-height: 500px;    /* generous upper bound — actual height will be less */
  transition: max-height var(--mr-transition), opacity var(--mr-transition);
}

.mr-brain-brief-card--dismissing.mr-brain-brief-card--collapsed {
  max-height: 0;
  opacity: 0;
}

/* Explain Drawer: smooth max-height expansion to prevent jarring snap */
.mr-brain-explain-body {
  overflow: hidden;
}

details[open] > .mr-brain-explain-body {
  animation: mr-brain-drawer-open 200ms ease-out forwards;
}

@keyframes mr-brain-drawer-open {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mr-brain-brief-card--dismissing {
    transition: none;
  }
  details[open] > .mr-brain-explain-body {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mr-brain-score--animate {
    animation: none;
    opacity: 1;
  }

  /* Suppress all other Brain Dashboard transitions/animations */
  .mr-brain-explain-toggle::before,
  .mr-brain-score-notes-toggle::before {
    transition: none !important;
  }
}