/*
 * Design › Popup layout "Overlay": the comparison covers the
 * page on a solid layer and scrolls as one page (no dialog box).
 * The close button stays in the top corner; the table header sticks to
 * the top of the overlay.
 */
.pcfw-popup--overlay {
  padding: 0;
}

.pcfw-popup--overlay .pcfw-popup__backdrop {
  background: var(--_surface);
}

.pcfw-popup--overlay .pcfw-popup__dialog {
  --_inset: 0px;

  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  padding: 0 max(24px, calc((100% - 1320px) / 2));
  overflow: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Slim tools row; the title sits in the table corner (TableHeading). */
.pcfw-popup--overlay .pcfw-popup__header {
  align-items: center;
  padding: 24px 64px 16px 0;
  border-bottom: 0;
}

.pcfw-popup--overlay
  .pcfw-popup__body
  > .pcfw-table__heading
  .pcfw-table__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

.pcfw-popup--overlay .pcfw-popup__body > .pcfw-table__heading {
  margin-bottom: 16px;
}

.pcfw-popup--overlay .pcfw-popup__close {
  position: fixed;
  z-index: 6;
  top: 20px;
  inset-inline-end: 24px;
  background: transparent;
}

.pcfw-popup-host .pcfw-popup--overlay .pcfw-popup__close {
  width: 48px;
  height: 48px;
  background: transparent;
}

.pcfw-popup--overlay .pcfw-popup__close svg {
  width: 26px;
  height: 26px;
}

.pcfw-popup-host .pcfw-popup--overlay .pcfw-popup__close:hover {
  background: color-mix(in srgb, var(--_text) 7%, transparent);
}

.pcfw-popup--overlay .pcfw-popup__body {
  overflow: visible;
  padding-bottom: 64px;
}

.pcfw-popup--overlay .pcfw-popup__body .pcfw-table th,
.pcfw-popup--overlay .pcfw-popup__body .pcfw-table td {
  background: transparent;
}

.pcfw-popup--overlay
  .pcfw-popup__body
  .pcfw-table.has-sticky-header
  thead
  > tr
  > *,
.pcfw-popup--overlay
  .pcfw-popup__body
  .pcfw-table.has-sticky-labels
  .pcfw-table__label,
.pcfw-popup--overlay
  .pcfw-popup__body
  .pcfw-table.has-sticky-labels
  .pcfw-table__corner {
  background: var(--_surface);
}

.pcfw-popup--overlay .pcfw-popup__body .pcfw-table__row.is-different > *,
.pcfw-popup--overlay
  .pcfw-popup__body
  .pcfw-table.has-sticky-labels
  .pcfw-table__row.is-different
  > .pcfw-table__label {
  background: var(--_diff);
}

.pcfw-popup--overlay .pcfw-popup__body .pcfw-related {
  margin-inline: 0;
}

@media (max-width: 600px) {
  .pcfw-popup--overlay .pcfw-popup__dialog {
    padding: 0 16px;
  }

  .pcfw-popup--overlay .pcfw-popup__header {
    padding: 16px 52px 12px 0;
  }

  .pcfw-popup--overlay
    .pcfw-popup__body
    > .pcfw-table__heading
    .pcfw-table__title {
    font-size: 22px;
  }

  .pcfw-popup--overlay .pcfw-popup__close {
    top: 10px;
    inset-inline-end: 8px;
  }

  .pcfw-popup--overlay .pcfw-cards__head,
  .pcfw-popup--overlay .pcfw-cards__foot {
    margin-inline: -16px;
    padding-inline: 16px;
  }
}