/* Rules that set display carry a .x[hidden] { display: none } companion, since
   an author display value beats the browser's [hidden] rule. */

html {
  overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-background);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  overscroll-behavior: none;
}

/* 16px down from the tab bar, as on Domain and Calendar. */
.page-content {
  padding: 64px 48px;
  padding-top: 16px;
}

/* box-shadow overflow doesn't extend scrollable height, so a tall card's shadow
   would otherwise be clipped below the max scroll position. */
.page-content--flush-bottom {
  padding-bottom: 32px;
}

/* Exactly the space below the tab bar, so the calendar can take what's left. */
.page-content--fill {
  box-sizing: border-box;
  height: calc(100vh - var(--tab-bar-h));
  display: flex;
  flex-direction: column;
}

/* Fixed, so it never adds scrollable height. */
.page-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 12px;
  margin: 0;
  font-size: 12px;
  color: var(--color-gray-dark);
  text-align: center;
  pointer-events: none;
}

/* The footer is pointer-events: none so its full-width strip never blocks
   clicks; this re-enables it for the link. */
.page-footer-link {
  pointer-events: auto;
  border: none;
  background: none;
  padding: 0;
  margin-left: 2px;
  font: inherit;
  font-size: 12px;
  color: var(--color-gray-dark);
  text-decoration: underline;
  cursor: pointer;
}

.placeholder-card {
  max-width: 480px;
  background: var(--color-surface);
  border-radius: calc(20px * var(--squircle-scale));
  corner-shape: squircle;
  padding: 32px;
  box-shadow: var(--shadow-card);
}

.placeholder-card h2 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: var(--fw-class-name);
  color: var(--color-text-primary);
}

.placeholder-card p {
  margin: 0;
  font-size: 16px;
  color: var(--color-gray-dark);
}

/* Each tab's content arrives with a slight rise as it fades in: 6px over
   0.32s, easing out so it settles rather than stops. On whole blocks, not
   card by card, so it reads as one calm movement. Blocks that start hidden
   (the admin pages' until sign-in confirms, the Calendar's until its data
   is in) play it when they're revealed, since an animation restarts when
   an element goes from display: none to shown. On the Calendar, everything
   but its loading spinner, which is pinned to the window's middle and
   would be carried off it by the rise's transform. */
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.classes-container,
.domain-card-nav,
.my-courses-calendar-box > :not(.assessment-calendar-loading),
.calendar-side,
.gpa-layout,
.admin-calendar-layout,
.suggestions-card,
.posts-admin-panel {
  animation: page-enter 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .classes-container,
  .domain-card-nav,
  .my-courses-calendar-box > :not(.assessment-calendar-loading),
.calendar-side,
  .gpa-layout,
  .admin-calendar-layout,
  .suggestions-card,
  .posts-admin-panel {
    animation: none;
  }
}