/* The Sabbath adventure occupies the viewport in every lesson step. */
@media screen {
  #lesson.modal {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }
  #lesson[open] { display: flex; flex-direction: column; }
  body:has(#lesson[open]) { overflow: hidden; }
  #lesson > .modal-top {
    position: sticky;
    top: 0;
    z-index: 5;
    flex-shrink: 0;
    background: var(--cream);
    padding-top: max(14px, env(safe-area-inset-top));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-left: max(20px, env(safe-area-inset-left));
  }
  #lesson .close { width: 44px; height: 44px; flex-shrink: 0; }
  #lesson > .lesson-layout { flex: 1 0 auto; min-height: 0; }
  #lesson .lesson-content {
    min-width: 0;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
  #lesson .steps { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  @media (max-width: 650px) {
    #lesson > .lesson-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    #lesson .steps {
      display: flex;
      gap: 5px;
      padding: 10px;
      border-right: 0;
      border-bottom: 1px solid var(--line);
      overflow-x: auto;
    }
    #lesson .step { flex: 1; min-width: 53px; margin: 0; padding: 8px 3px; text-align: center; font-size: 10px; }
    #lesson .step span { display: grid; margin: 0 auto 5px; }
  }
}