/* One reading surface for the entire route, shared by Angular and legacy.
   Keep overflow visible and avoid transforms: frames and fixed drawers extend
   beyond the page without being clipped or gaining a new containing block. */
:root {
  --page-surface: #fffdfd;
  --page-surface-border: #f0e3e7;
  --page-surface-shadow: 0 4px 12px #65374b05, 0 18px 48px #65374b0d;
}

body[data-theme="dark"] {
  --page-surface: #261b22;
  --page-surface-border: #49343f;
  --page-surface-shadow: 0 4px 12px #00000012, 0 18px 48px #00000030;
}

body .layout > .content.content,
body main.page-content.page-content {
  box-sizing: border-box;
  min-width: 0;
  width: calc(100% - 48px);
  max-width: 1600px;
  min-height: calc(100dvh - 122px);
  margin: 24px auto;
  padding: 32px clamp(20px, 3vw, 46px) 48px;
  border: 1px solid var(--page-surface-border);
  border-radius: 24px;
  background: var(--page-surface);
  box-shadow: var(--page-surface-shadow);
}

@media (max-width: 760px) {
  body .layout > .content.content,
  body main.page-content.page-content {
    width: calc(100% - 24px);
    min-height: calc(100dvh - 100px);
    margin: 12px auto;
    padding: 24px 16px 36px;
    border-radius: 18px;
  }
}

@media (max-width: 400px) {
  body .layout > .content.content,
  body main.page-content.page-content {
    width: calc(100% - 16px);
    margin-inline: 8px;
    padding-inline: 12px;
  }
}