/* Page sidebar: on a desktop (60rem up) the part of a page that buys — the
   event's tickets, the checkout's order — becomes a panel fixed to the
   window's right edge, the window's full height and always in view. Its
   panel (.page-sidebar__panel) scrolls inside, its foot (.page-sidebar__foot)
   holds to the bottom. The header, the page, its footer and the preview
   banner keep to the left of it, and the page is at least a window tall, so
   the footer starts below the first screen. A header link to the sidebar
   (data-page-sidebar-link) steps aside, the sidebar being in view. The seat
   picker builds the same panel into its own grid.

   Below 60rem it is nothing of its own: the element keeps its usual look (a
   card in the column) and its foot is hidden, a phone using the dock. */
.page-sidebar__foot {
  display: none;
}

@media (min-width: 60rem) {
  body:has(.page-sidebar) > .site-header {
    inline-size: auto;
    margin-inline-end: var(--sidebar-width);
  }

  body:has(.page-sidebar) .site-header [data-page-sidebar-link] {
    display: none;
  }

  body:has(.page-sidebar) > .site-main {
    --wrapper-width: none;

    min-block-size: calc(100dvh - var(--header-height));
    padding-inline-end: calc(var(--sidebar-width) + var(--gutter));
  }

  body:has(.page-sidebar) > .site-footer {
    padding-inline-end: var(--sidebar-width);
  }

  body:has(.page-sidebar) > .preview-banner {
    inset-inline-end: var(--sidebar-width);
  }

  .page-sidebar {
    background: var(--color-surface-1);
    border-inline-start: var(--border-width) solid var(--color-subtle);
    border-radius: 0;
    box-shadow: none;
    inline-size: var(--sidebar-width);
    inset: 0 0 0 auto;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: var(--z-raised);
  }

  .page-sidebar__panel {
    block-size: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-m) var(--space-m) 0;
    /* A focused control scrolls clear of the foot (WCAG 2.4.11) */
    scroll-padding-block-end: 9rem;
  }

  .page-sidebar__foot {
    background: var(--color-surface-1);
    border-block-start: var(--border-width) solid var(--color-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    inset-block-end: 0;
    margin: auto calc(-1 * var(--space-m)) 0;
    padding: var(--space-s) var(--space-m) var(--space-m);
    position: sticky;
  }
}