/* Shared page chrome for full-screen phone pages.
   Keep phone layouts as-is; at desktop widths they become centered panels. */

.page-shell {
  position: fixed;
  inset: 0;
  z-index: 30;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.page-shell[hidden] { display: none; }

:root { --page-max: 640px; }

@media (min-width: 720px) {
  .page-shell {
    inset: 8vh 0 auto;
    margin-inline: auto;
    width: min(var(--page-max), 100%);
    height: auto;
    max-height: 84dvh;
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
      0 0 0 100vmax rgba(44, 36, 27, .4),
      0 20px 60px rgba(44, 36, 27, .3);
  }

  /* The reader carries long-form text, so it is the one page that fills the
     window instead of sitting in the centered panel. */
  .story-reader.page-shell {
    inset: 0;
    width: auto;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }

  .search-page { width: min(var(--page-max), 100%); }

  .add-sheet-overlay { align-items: center; }
  .add-sheet {
    width: min(100%, 560px);
    margin-inline: auto;
    border-radius: 22px;
  }
}