/* Page scaffold */
@layer components {

.page { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.5rem calc(5rem + env(safe-area-inset-bottom)); }
.page--wide { max-width: 64rem; }
/* The staff chamber is a console, not a column of prose: it wants the
   whole window, because the alternative is a ledger that scrolls
   sideways. */
.page--console { max-width: 96rem; }
.page__header { margin-bottom: 2rem; }
.page__header p { color: var(--ink-dim); margin: 0; }

/* Cards & forms — one measure for every card, the staff console's
   included: a second .card in another sheet would win or lose by the
   alphabet. */
.card {
  background: var(--paper-high);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}

/* Settings, and the door out */
.page__header--home { position: relative; padding-right: 2.75rem; }
/* The way out of a sheet is the native title bar's, not the page's — this
   element is only the bridge's script for it. */
.page__done { display: none; }
.account-link { margin-top: 2.5rem; text-align: center; }

.page__back { margin: 0 0 1.25rem; font-size: 0.92rem; }
.page__back a { color: var(--ink-dim); }
@media (hover: hover) {
  .page__back a:hover { color: var(--gold); }
}

/* An edit affordance in a header line: pencil-led, quiet until wanted. */
.page__edit {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-inline-start: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-dim);
}
@media (hover: hover) {
  .page__edit:hover { color: var(--gold); text-decoration: none; }
}
.page__edit .icon { --icon-size: 0.95em; }

@media (max-width: 760px) {
  .page {
    padding: 1.8rem 1rem calc(4rem + env(safe-area-inset-bottom));
  }
  .page__header { margin-bottom: 1.5rem; }
}

}