.app {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 24px 20px 32px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-6);
}

.utility-bar {
  display: flex;
  justify-content: flex-end;
}

.hero {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: 12px 0;
}

.todo-dock {
  width: min(760px, 100%);
  margin: 0 auto;
}

.auth-locked .app {
  grid-template-rows: 1fr;
  max-width: 560px;
}

.auth-locked .hero {
  min-height: calc(100vh - 64px);
  align-content: center;
}

.auth-locked .utility-bar,
.auth-locked .todo-dock,
.auth-locked #clock,
.auth-locked .date-text {
  display: none !important;
}

.auth-ready .auth-card {
  display: none !important;
}

@media (max-width: 720px) {
  .app {
    padding: 18px 12px 24px;
    gap: var(--space-5);
  }

  .auth-locked .hero {
    min-height: calc(100vh - 32px);
  }
}