/* YCK-GAMES-AUTOHIDE-HEADER-20260916.1
   Shared motion and layout rules for Young CEO Kids game navigation chrome. */

[data-yck-autohide-header] {
  transform: translate3d(0, 0, 0);
  transition: transform 180ms cubic-bezier(.2, .75, .3, 1);
  will-change: transform;
  backface-visibility: hidden;
}

[data-yck-autohide-header][data-yck-header-state="hidden"] {
  transform: translate3d(0, calc(-100% - 2px), 0);
  pointer-events: none;
}

/* Hubs and language lessons use normal-flow or sticky .top bars rather than
   a grid row. Collapse their own height, padding, and margin when hidden so
   the lesson/problem gains the space instead of leaving a blank strip. */
html[data-yck-autohide-direct] [data-yck-autohide-header] {
  box-sizing: border-box;
  max-height: var(--yck-direct-header-height, 84px);
  overflow: hidden;
  transition:
    transform 180ms cubic-bezier(.2, .75, .3, 1),
    max-height 180ms cubic-bezier(.2, .75, .3, 1),
    margin 180ms cubic-bezier(.2, .75, .3, 1),
    padding 180ms cubic-bezier(.2, .75, .3, 1);
}

html[data-yck-autohide-direct] [data-yck-autohide-header][data-yck-header-state="hidden"] {
  max-height: 0 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Standard Math wrappers reserve one grid row for .bar.  Collapse the row,
   rather than merely translating the bar, so the child game gains the space. */
.shell[data-yck-autohide-wrapper] {
  grid-template-rows: var(--yck-wrapper-header-height, 44px) minmax(0, 1fr) !important;
}

.shell[data-yck-autohide-wrapper][data-yck-header-state="hidden"] {
  grid-template-rows: 0px minmax(0, 1fr) !important;
}

.shell[data-yck-autohide-wrapper] > [data-yck-autohide-header] {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.shell[data-yck-autohide-wrapper] > iframe {
  height: 100% !important;
  min-height: 0;
}

/* Root /learning/ module shell is another real layout row above Math. */
#moduleView.active[data-yck-autohide-root] {
  display: grid;
  grid-template-rows: var(--yck-module-header-height, 48px) minmax(0, 1fr);
}

#moduleView.active[data-yck-autohide-root][data-yck-header-state="hidden"] {
  grid-template-rows: 0px minmax(0, 1fr);
}

/* Languages intentionally suppress the outer /learning/ chrome. Respect that
   existing mode immediately, before any resize/load callback runs. */
body.chinese-mode #moduleView.active[data-yck-autohide-root] {
  grid-template-rows: 0px minmax(0, 1fr) !important;
}

#moduleView.active[data-yck-autohide-root] > .module-topbar {
  box-sizing: border-box;
  height: 100% !important;
  min-height: 0;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transition: transform 180ms cubic-bezier(.2, .75, .3, 1);
  will-change: transform;
  backface-visibility: hidden;
}

#moduleView.active[data-yck-autohide-root][data-yck-header-state="hidden"] > .module-topbar {
  transform: translate3d(0, calc(-100% - 2px), 0);
  pointer-events: none;
}

#moduleView.active[data-yck-autohide-root] > .module-frame {
  height: 100% !important;
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-yck-autohide-header],
  #moduleView.active[data-yck-autohide-root] > .module-topbar {
    transition: none !important;
  }
}