/* Track Mishnah UI 2.18.2
 * Responsive memorial sizing, durable bottom footer, and taller dashboard work
 * surfaces when the desktop viewport has enough room.
 */

/* Give the flex column a definite viewport height. The footer stays in normal
 * document flow: short pages push it to the bottom, while long pages scroll to
 * it naturally. */
html {
  height: 100%;
  min-height: 100%;
}

body.app-theme-jewel {
  min-height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

body.app-theme-jewel > main {
  flex: 1 0 auto;
}

body.app-theme-jewel > .site-footer {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  margin-block-start: auto !important;
}

body.app-theme-jewel .release-notes-scope {
  width: fit-content;
  margin: 0 0 2px;
  padding: 5px 9px;
  color: var(--app-text-muted);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  background: var(--app-surface-muted);
  font-size: .62rem;
  font-weight: 750;
}

@media (min-width: 1220px) {
  /* Let the supplied antique artwork use the complete rail width instead of a
   * fixed inset. Its internal engraved margin remains part of the asset. */
  body.app-theme-jewel .tm-sidebar-memorial-fixed {
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
  }

  body.app-theme-jewel .tm-sidebar-memorial-art {
    width: 100%;
    max-width: none;
    height: auto;
  }
}

@media (min-width: 1220px) and (min-height: 880px) {
  /* Taller screens can hold substantially more learning without compromising
   * the compact layout used by ordinary laptop-height windows. */
  body.app-theme-jewel .dashboard-primary-workspace {
    --tm-dashboard-workspace-height: clamp(760px, calc(100dvh - 120px), 940px);
  }
}

@media (max-width: 640px) {
  body.app-theme-jewel .release-notes-scope {
    border-radius: 7px;
  }
}