/* Reshape90 lightweight motion + rendering performance system v3 */
:root{
  --r90-motion-fast:120ms;
  --r90-motion-base:180ms;
  --r90-motion-slow:220ms;
  --r90-ease:cubic-bezier(.2,.72,.25,1);
}

/* Native details hide closed bodies. Keep interactive course headers at their real size. */
.learning-module,
.r90-learning-module,
.learning-phase{
  content-visibility:visible;
  contain-intrinsic-size:none;
}
.learning-module>summary,.learning-phase>summary,.learning-lesson,.learning-complete-button{
  touch-action:manipulation;
}
/* Skip paint/layout work for long off-screen histories and galleries. */
.learning-workout-wrap{
  content-visibility:auto;
  contain-intrinsic-size:auto 68px;
}
.r90p-history-item{
  content-visibility:auto;
  contain-intrinsic-size:auto 108px;
}
.r90p-photo-group{
  content-visibility:auto;
  contain-intrinsic-size:auto 190px;
}
.history-item{
  content-visibility:auto;
  contain-intrinsic-size:auto 118px;
}
.client-photo-day{
  content-visibility:auto;
  contain-intrinsic-size:auto 126px;
}

@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}

  .r90-learning-modal,
  .r90portal-modal,
  .r90p-submodal,
  .r90p-lightbox{
    animation:r90-overlay-in var(--r90-motion-base) ease both;
  }
  .r90-learning-modal__card,
  .r90portal-modal__card,
  .r90p-submodal__card,
  .r90p-lightbox__card{
    animation:r90-sheet-in var(--r90-motion-slow) var(--r90-ease) both;
  }
  .r90-learning-modal.is-closing,
  .r90portal-modal.is-closing{
    animation:r90-overlay-out var(--r90-motion-fast) ease both;
  }
  .r90-learning-modal.is-closing .r90-learning-modal__card,
  .r90portal-modal.is-closing .r90portal-modal__card{
    animation:r90-sheet-out var(--r90-motion-fast) ease both;
  }

  .r90-motion-view-in{
    animation:r90-view-in var(--r90-motion-base) var(--r90-ease) both;
    will-change:transform,opacity;
  }
  .r90-motion-card-in{
    animation:r90-card-in var(--r90-motion-base) var(--r90-ease) both;
    will-change:transform,opacity;
  }
  .client-hub-tabs button,
  .r90p-button,
  .r90p-pager button,
  .primary-button,
  .text-button,
  .learning-tool-card,
  .learning-lesson,
  .learning-workout,
  .history-item,
  .photo-card,
  .r90p-history-item,
  .r90p-photo-card{
    transition:
      transform var(--r90-motion-fast) ease,
      background-color var(--r90-motion-fast) ease,
      border-color var(--r90-motion-fast) ease,
      color var(--r90-motion-fast) ease,
      opacity var(--r90-motion-fast) ease;
  }

  @media(hover:hover){
    .learning-tool-card:hover,
    .learning-lesson:hover,
    .learning-workout:hover,
    .history-item:hover,
    .photo-card:hover,
    .r90p-history-item:hover,
    .r90p-photo-card:hover{
      transform:translate3d(0,-2px,0);
    }
  }

  .client-hub-tabs button:active,
  .r90p-button:active,
  .r90p-pager button:active,
  .primary-button:active,
  .learning-tool-card:active{
    transform:scale(.985);
  }

  .learning-progress-track>i,
  .r90p-progress-track>span,
  .client-chart-line,
  .client-chart-fill{
    transition:
      width 360ms var(--r90-ease),
      opacity 220ms ease,
      transform 220ms var(--r90-ease);
  }
}

/* Clip the full details box while its measured height is in flight. */
.r90-motion-details[data-r90-motion-busy="1"]{
  box-sizing:border-box!important;
  overflow:hidden!important;
}

html.r90-page-hidden *,
html.r90-page-hidden *::before,
html.r90-page-hidden *::after{
  animation-play-state:paused!important;
}

@keyframes r90-overlay-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes r90-overlay-out{
  from{opacity:1}
  to{opacity:0}
}
@keyframes r90-sheet-in{
  from{opacity:0;transform:translate3d(0,10px,0) scale(.994)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes r90-sheet-out{
  from{opacity:1;transform:translate3d(0,0,0) scale(1)}
  to{opacity:0;transform:translate3d(0,5px,0) scale(.997)}
}
@keyframes r90-view-in{
  from{opacity:0;transform:translate3d(0,6px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes r90-card-in{
  from{opacity:0;transform:translate3d(0,4px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* Performance tier for phones / smaller GPUs: keep structure, drop expensive live blur. */
@media(max-width:700px){
  .client-hub-tabs,
  .learning-lesson-page__nav,
  .client-chart-tooltip,
  .r90p-entry-detail__card .r90p-submodal__heading,
  .r90p-entry-detail__actions,
  .r90portal-modal__backdrop{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  .client-hub-tabs,
  .learning-lesson-page__nav{
    background:var(--card)!important;
  }

  .r90portal-modal__backdrop{
    background:rgba(8,5,6,.62)!important;
  }

  .r90p-entry-detail__card .r90p-submodal__heading,
  .r90p-entry-detail__actions{
    background:var(--r90p-bg-elevated)!important;
  }
}

/* Keep the portal's compact navigation usable with keyboard and on narrow screens. */
.client-hub-tabs[role="tablist"] button[role="tab"]:focus-visible{
  outline:3px solid var(--pink,#ff4d8b);
  outline-offset:2px;
}
.learning-progress-card[aria-busy="true"],
.learning-loading[role="status"][aria-busy="true"]{
  cursor:progress;
}
.learning-loading[role="status"]{min-height:110px;display:grid;place-items:center}

@media(max-width:420px){
  .client-hub-tabs[role="tablist"]{gap:3px;padding:4px}
  .client-hub-tabs[role="tablist"] button[role="tab"]{min-height:40px;gap:5px;padding-inline:6px;font-size:11px}
  .client-hub-tabs[role="tablist"] button[role="tab"] svg{width:16px;height:16px}
}