/* A list page's extra block behind a button in its search row (COMMAND-665, public/page-panel): a popup on the shared shell
   (modal.js) over a dimmed page; at the bottom on a phone, in the middle on a wide screen. Loaded by index.html after
   app.css, so it uses the app's colours. */

.page-panel-back {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, 0.45);
}
@media (min-width: 900px) { .page-panel-back { align-items: center; } }
.page-panel { border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 8px 28px rgb(0 0 0 / 25%); }
.page-panel .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.page-panel h2 { margin: 0; font-size: 1.05rem; }
.page-panel-close { flex: none; font-size: 1.4rem; line-height: 1; }
/* A block that was a card on the page keeps its own look inside the popup, without a second frame. */
.page-panel .modal-body > .card { margin: 0; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
.page-panel-btn.on { background: var(--surface-2); }