/* Shared page-edge fades. Keep the controls outside the fading layer. */
.topbar::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 112px;
  opacity: 0;
  transition: opacity 160ms ease-out;
  pointer-events: none;
  background: var(--bg);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .972) 10%, rgb(0 0 0 / .896) 20%, rgb(0 0 0 / .784) 30%, rgb(0 0 0 / .648) 40%, rgb(0 0 0 / .5) 50%, rgb(0 0 0 / .352) 60%, rgb(0 0 0 / .216) 70%, rgb(0 0 0 / .104) 80%, rgb(0 0 0 / .028) 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .972) 10%, rgb(0 0 0 / .896) 20%, rgb(0 0 0 / .784) 30%, rgb(0 0 0 / .648) 40%, rgb(0 0 0 / .5) 50%, rgb(0 0 0 / .352) 60%, rgb(0 0 0 / .216) 70%, rgb(0 0 0 / .104) 80%, rgb(0 0 0 / .028) 90%, transparent 100%);
}
.sheet-actions {
  background: none;
  isolation: isolate;
}
.sheet-actions::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: calc(100% + 112px);
  z-index: -1;
  pointer-events: none;
  background: var(--bg);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / .028) 8%, rgb(0 0 0 / .104) 16%, rgb(0 0 0 / .216) 24%, rgb(0 0 0 / .352) 32%, rgb(0 0 0 / .5) 40%, rgb(0 0 0 / .648) 48%, rgb(0 0 0 / .784) 56%, rgb(0 0 0 / .896) 64%, rgb(0 0 0 / .972) 72%, #000 80%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / .028) 8%, rgb(0 0 0 / .104) 16%, rgb(0 0 0 / .216) 24%, rgb(0 0 0 / .352) 32%, rgb(0 0 0 / .5) 40%, rgb(0 0 0 / .648) 48%, rgb(0 0 0 / .784) 56%, rgb(0 0 0 / .896) 64%, rgb(0 0 0 / .972) 72%, #000 80%);
}
@media (width <= 560px) {
  .topbar::after { height: 72px; }
  .sheet-actions::before { height: calc(100% + 88px); }
}

html.has-scrolled .topbar::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .topbar::after { transition: none; } }

/* On desktop the summary is stationary; fade only the scrolling column. */
@media (width > 900px) {
  body:has(.case-rail) .topbar::after,
  body:has(.case-rail) .sheet-actions::before {
    left: calc(max(24px, (100% - var(--content)) / 2) + 288px);
  }
}

/* Keep the desktop summary below the header even at the end of the page. */
@media (width > 900px) {
  .case > .case-rail {
    position: fixed;
    top: 92px;
    width: 264px;
    max-height: calc(100dvh - 116px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .case > .case-main { grid-column: 2; }
}

/* Anchor the header with the summary during native elastic overscroll. */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.app { padding-top: 68px; }

@media (width > 900px) {
  .case > .case-rail {
    box-sizing: border-box;
    padding-bottom: 24px;
    scrollbar-width: thin;
  }
}