/* ============================================================
   Screen container — manages active screen visibility.
   Each .screen[data-active] is shown; others are hidden.
   ============================================================ */

/* .app is locked to 100dvh and is a flex column; .screens flex:1 fills it
   (the bottom nav is position:fixed, so it doesn't consume flow height). */
.screens {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.screen[data-active] {
  display: flex;
}

/* Placeholder used by screens that aren't built yet. */
.screen__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--space-6);
  padding-bottom: calc(var(--nav-height) + var(--space-6));
  font-size: var(--font-size-base);
  color: var(--color-text-tertiary);
  text-align: center;
}