/* panes.css — Shared scroll panes that every full-page panel sits in.
   Split from app.module.css; load order in app.html preserves the original cascade. */

/* ---------- shared scroll panes ---------- */
/* A border reserves the status-bar area outside the scrollport. Padding
   alone scrolls away, allowing headings to move behind the iPhone controls.
   UIKit supplies --safe-area-inset-* in the native app; env() is the web
   fallback. Pane headers use ordinary spacing so the inset is counted once. */
#today,
#home,
#practice,
#learn,
#cards,
#settings {
  border-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) solid var(--paper);
}

#home,
#practice,
#learn,
#cards,
#settings {
  position: fixed;
  inset: 0;
  background: var(--paper);
  overflow-y: auto;
  display: none;
  padding: 20px 16px calc(34px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}

#home {
  z-index: 25;
  border-top-color: var(--brand-soft-2);
}

#practice {
  z-index: 26;
}

#learn {
  z-index: 27;
}

#cards {
  z-index: 28;
}

#home.show,
#practice.show,
#learn.show,
#cards.show,
#settings.show {
  display: block;
}

#settings {
  z-index: 29;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

#home.show .hinner > *,
#practice.show .pinner > *,
#learn.show .linner > *,
#cards.show .cinner > *,
#settings.show .setinner > * {
  animation: rise-in 0.34s var(--ease) backwards;
}

#home.show .hinner > :nth-child(2),
#practice.show .pinner > :nth-child(2),
#learn.show .linner > :nth-child(2),
#cards.show .cinner > :nth-child(2) {
  animation-delay: 0.05s;
}

#home.show .hinner > :nth-child(3),
#practice.show .pinner > :nth-child(3),
#learn.show .linner > :nth-child(3),
#cards.show .cinner > :nth-child(3) {
  animation-delay: 0.1s;
}

#home.show .hinner > :nth-child(4),
#practice.show .pinner > :nth-child(4),
#learn.show .linner > :nth-child(4),
#cards.show .cinner > :nth-child(4) {
  animation-delay: 0.15s;
}

#home.show .hinner > :nth-child(n + 5),
#practice.show .pinner > :nth-child(n + 5),
#learn.show .linner > :nth-child(n + 5),
#cards.show .cinner > :nth-child(n + 5) {
  animation-delay: 0.2s;
}

#home .hinner,
#practice .pinner,
#learn .linner,
#cards .cinner {
  max-width: 540px;
  margin: 0 auto;
}

#home h1 {
  font-size: clamp(1.5rem, 6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 12px 0 6px;
  text-wrap: balance;
}

#practice h1,
#learn h1,
#cards h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 12px 0 4px;
}

#home .sub,
#practice .sub,
#learn .sub,
#cards .sub {
  margin: 0 0 20px;
  max-width: 44ch;
  line-height: 1.5;
}

/* Every page arrives the same way. Opacity only, deliberately: these panels are
   position: fixed, and animating a transform on one would make it the
   containing block for any fixed thing inside it. Learn keeps its own
   today-enter, which already lifts and fades its content. */
#home.show,
#practice.show,
#learn.show,
#cards.show,
#settings.show {
  animation: panel-enter 0.26s ease both;
}

@keyframes panel-enter {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #home.show,
  #practice.show,
  #learn.show,
  #cards.show,
  #settings.show {
    animation: none;
  }
}