/* Direct body children: no transformed container may move these viewport edges. */
body[data-page-edges] {
  position: relative;
  isolation: isolate;
  --edge-top-height: max(12px, env(safe-area-inset-top, 0px));
  --edge-bottom-height: max(12px, env(safe-area-inset-bottom, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
body[data-page-edges="glass"] {
  --edge-fallback-background: var(--glass-background);
  padding-top: var(--edge-top-height);
  padding-bottom: var(--edge-bottom-height);
}
body[data-page-edges="paper"] { --edge-fallback-background: var(--paper); }
.page-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--reading-background);
}
html[data-edge-colors] { background: var(--edge-top-background); }
html[data-edge-colors] body[data-page-edges] { background: var(--edge-bottom-background); }
.edge-top, .edge-bottom {
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: -1;
}
.edge-top { top: var(--edge-viewport-top, 0px); height: var(--edge-top-height); }
.edge-bottom { bottom: var(--edge-viewport-bottom, 0px); height: var(--edge-bottom-height); }
.edge-top::after, .edge-bottom::after { content: ''; position: absolute; inset: 0; }
.edge-top::after { background: var(--edge-top-background, var(--edge-fallback-background)); }
.edge-bottom::after { background: var(--edge-bottom-background, var(--edge-fallback-background)); }
/* A solid browser tint needs a gradual handoff to the varied wall beneath it.
   Keep the safe-area strips thin; fade only the backdrop, below readable content. */
body[data-page-edges="glass"] :is(.edge-top,.edge-bottom)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
}
body[data-page-edges="glass"] .edge-top::before {
  top: 100%;
  background: linear-gradient(to bottom, var(--edge-top-background), transparent);
}
body[data-page-edges="glass"] .edge-bottom::before {
  bottom: 100%;
  background: linear-gradient(to top, var(--edge-bottom-background), transparent);
}
[data-page-edges] .skip:focus {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: calc(env(safe-area-inset-left, 0px) + 20px);
}
@media print {
  .edge-top, .edge-bottom, .page-background { display: none; }
  body[data-page-edges] { padding: 0; }
  html[data-edge-colors], html[data-edge-colors] body[data-page-edges] { background: white; }
}