/* ── Screen system ── */

.screen {
  display: none;
  flex-direction: column;
  min-height: 100dvh;
}

#screen-reader {
  max-height: 100dvh;
  overflow: hidden;
}

.screen.active {
  display: flex;
  animation: screen-enter var(--duration-normal) var(--ease-out) both;
}

@keyframes screen-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Header ── */

.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  padding-top: calc(0.75rem + var(--safe-top));
  padding-left: calc(1rem + var(--safe-left));
  padding-right: calc(1rem + var(--safe-right));
  position: sticky;
  top: 0;
  background:
    linear-gradient(var(--surface-tint-strong), var(--surface-tint)),
    color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 10;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 8%, var(--border));
  min-height: 56px;
}

.screen-header h1 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Body ── */

.screen-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  padding-left: calc(1.25rem + var(--safe-left));
  padding-right: calc(1.25rem + var(--safe-right));
  padding-bottom: calc(1.25rem + var(--safe-bottom));
}

/* ── Desktop layout ── */

@media (min-width: 768px) {
  .screen-header {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .screen-body {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .screen-header {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .screen-body {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}