/*
 * GRO Popup
 *
 * The creator's GRO popup (PopupRenderer.php): their POPUP form, printed in
 * the footer of every page its page rules allow and opened over the page by
 * the view script (blocks/src/form/popup.ts) — a card in the middle of a
 * wide screen, a sheet along the bottom of a phone. The HQ preview draws the
 * same markup with these classes; keep the two in step. Enqueued only on a
 * page that prints a popup.
 *
 * .gl-popup               the <dialog>, printed with hidden, which the view
 *                         script removes as it opens it with showModal().
 *                         Its style attribute carries the form's brand
 *                         colours as the form's own --gl-form-* custom
 *                         properties (assets/blocks/form/style.css), so the
 *                         card and the close button wear them; without them
 *                         the card is white with near-black text, or the
 *                         theme's base and contrast with --theme-pair. What
 *                         the browser decides on, it carries as data-gl-popup
 *                         (<hash>.<version>), data-gl-audience (everyone |
 *                         not_subscribed), data-gl-trigger (time | scroll),
 *                         data-gl-delay (seconds), data-gl-scroll (percent of
 *                         the page) and data-gl-dismiss-days
 *   --banner              the popup has a banner (the form's
 *                         design.bannerUrl), across the top of the card
 *   --image-avatar | --image-logo | --image-none
 *                         the picture (popup.image, at popup.imageUrl): the
 *                         creator's profile photo, their logo, or none (as
 *                         when the one picked has no URL)
 *   --theme-pair          the theme's palette has both a base and a contrast
 *                         colour, as on the popup's form (the form sheet's
 *                         --theme-pair): its rule reads them into
 *                         --gl-form-theme-base and --gl-form-theme-contrast,
 *                         which the card's colours fall back through to #fff
 *                         and #1e1e1e
 * .gl-popup__close        the close button, over the card's top right corner;
 *                         a 44px target. Over a banner it wears the card's
 *                         background, so it shows on any banner
 * .gl-popup__card         the card: the form's box, scrolling inside itself
 *                         when the form is taller than the screen allows
 * .gl-popup__image        without a banner, the picture above the form: the
 *                         photo in a 72px circle, the logo at its own shape,
 *                         at most 200 by 48px
 * .gl-popup__header       with a banner, in its place: the banner and the
 *                         picture
 *   .gl-popup__header--banner  it holds a banner (always, on a popup)
 * .gl-popup__banner       the banner, an <img> across the top of the card to
 *                         its edges, taking its top corners, cropped to a 3:1
 *                         strip from its centre
 * .gl-popup__picture      the picture, an <img> after the banner: a 72px
 *                         circle over the banner's bottom left corner, half
 *                         on it, ringed in the card's colour (a logo
 *                         contained in it)
 * html.gl-popup-open      the page while the popup is open: it does not
 *                         scroll behind it. The view script sets the same
 *                         overflow inline, which holds where a CSS optimizer
 *                         has left this rule out
 *
 * The form in the card is a GRO form (.gl-form--popup, stacked and plain),
 * styled by assets/blocks/form/style.css, whose own box gives way to the
 * card's. This sheet's rules for the form's parts are one class past the
 * form sheet's rules for the same part (.gl-popup .gl-form .gl-form__form
 * .gl-form__copy against .gl-form .gl-form__form .gl-form__copy), so they
 * win wherever either sheet lands; blocks/tests/theme-proof.test.ts holds
 * them to it. The close button and its icon, the picture and the banner are
 * GRO's to draw too, whatever the theme does to buttons, svgs and images.
 *
 * --gl-popup-css, set to 1 on .gl-popup by the first rule, is the sheet's
 * sentinel: the view script reads it off the dialog and, when it is not
 * there, loads this file itself (docs/FORMS.md, "The stylesheets"). Keep it
 * the first rule, and plain. --gl-popup-css-states, set by the second rule
 * on the open popup, is a second one: no page is served with the popup
 * open, so an optimizer that keeps only the rules the page's HTML uses drops
 * it with the [open] rules and html.gl-popup-open, and keeps the first. The
 * view script reads it off a probe of its own. Keep it the second rule.
 */

.gl-popup {
  --gl-popup-css: 1;
}

.gl-popup[open] {
  --gl-popup-css-states: 1;
}

dialog.gl-popup {
  box-sizing: border-box;
  inset: 0;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--gl-form-text, var(--gl-form-theme-contrast, #1e1e1e));
}

/* The theme's pair (the header's --theme-pair). Brand colours on the dialog
   still win: each colour reads these as its own fallback. */
.gl-popup.gl-popup--theme-pair {
  --gl-form-theme-base: var(--wp--preset--color--base);
  --gl-form-theme-contrast: var(--wp--preset--color--contrast);
}

.gl-popup::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

html.gl-popup-open {
  overflow: hidden;
}

.gl-popup__card {
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 24px;
  border-radius: 16px;
  background: var(--gl-form-background, var(--gl-form-theme-base, #fff));
  color: inherit;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 24px 64px -16px rgba(0, 0, 0, 0.45);
  /* The footer it is printed in may be centred by the theme; start, not
     left, for a site written right to left. */
  text-align: start;
}

/* Over the corner of the card, whatever the theme does to buttons. */
.gl-popup .gl-popup__close {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  box-sizing: border-box;
  width: 44px;
  min-width: 0;
  max-width: none;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
  cursor: pointer;
}

.gl-popup .gl-popup__close::before,
.gl-popup .gl-popup__close::after {
  content: none;
}

.gl-popup .gl-popup__close:hover {
  background: rgba(127, 127, 127, 0.16);
  color: inherit;
}

.gl-popup .gl-popup__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

/* The shapes' fill and stroke are the <svg>'s attributes, which any theme
   rule for an svg or a path outranks, so they are set here too. */
.gl-popup .gl-popup__close svg {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  opacity: 1;
  filter: none;
  transform: none;
}

.gl-popup .gl-popup__close svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none;
  opacity: 1;
  filter: none;
  transform: none;
}

/* Whatever the theme puts round its images: a frame, rounded corners, a
   shadow, a backdrop. The photo's circle, next, comes after this rule at its
   depth, which it needs to win. */
.gl-popup .gl-popup__image {
  display: block;
  margin: 0 auto 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.gl-popup--image-avatar .gl-popup__image {
  width: 72px;
  max-width: none;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.gl-popup--image-logo .gl-popup__image {
  width: auto;
  max-width: 200px;
  height: auto;
  max-height: 48px;
}

/* The picture sits in the header, over the banner's edge. */
.gl-popup .gl-popup__header {
  position: relative;
}

/* Over the card's padding (24px) to its edges. */
.gl-popup .gl-popup__header--banner {
  margin: -24px -24px 16px;
}

/* Whatever the theme puts round its images, a shadow and a backdrop
   included. The rules after this one, at its depth, draw the banner's
   corners, the picture's circle and ring, and a logo's backdrop. */
.gl-popup .gl-popup__banner,
.gl-popup .gl-popup__picture {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* Across the card, round its top corners, cropped to a 3:1 strip from its
   centre. */
.gl-popup .gl-popup__banner {
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 1;
  border-radius: 16px 16px 0 0;
  object-fit: cover;
}

/* A 72px circle over the banner's bottom left corner, half on it, ringed in
   the card's colour; a logo is contained in its circle, on that colour. The
   copy clears it by 12px. */
.gl-popup .gl-popup__picture {
  position: absolute;
  bottom: -36px;
  left: 16px;
  box-sizing: border-box;
  width: 72px;
  max-width: none;
  height: 72px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px
    var(--gl-form-background, var(--gl-form-theme-base, #fff));
  object-fit: cover;
}

.gl-popup--image-logo .gl-popup__picture {
  padding: 8px;
  background: var(--gl-form-background, var(--gl-form-theme-base, #fff));
  object-fit: contain;
}

.gl-popup--image-avatar .gl-popup__header--banner,
.gl-popup--image-logo .gl-popup__header--banner {
  margin-bottom: 48px;
}

/* Over a banner, the close button wears the card's background, hover tint
   and all. */
.gl-popup--banner .gl-popup__close,
.gl-popup--banner .gl-popup__close:hover {
  background-color: var(--gl-form-background, var(--gl-form-theme-base, #fff));
}

.gl-popup--banner .gl-popup__close:hover {
  background-image: linear-gradient(
    rgba(127, 127, 127, 0.16),
    rgba(127, 127, 127, 0.16)
  );
}

/* The card is the form's box: one class past the form's own box,
   .gl-form.gl-form.gl-form--boxed. */
.gl-popup .gl-popup__card .gl-form.gl-form {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
}

/* Centred under the picture, and clear of the close button either side. */
.gl-popup .gl-form .gl-form__form .gl-form__copy {
  align-items: center;
  padding: 0 32px;
  text-align: center;
}

.gl-popup .gl-form .gl-form__form .gl-form__title {
  justify-content: center;
}

.gl-popup .gl-form .gl-form__form .gl-form__status {
  text-align: center;
}

/* A field's ring in the card's text colour: the form's own is the field's
   dark text, which a dark brand background swallows. */
.gl-popup .gl-form .gl-form__form .gl-form__field input[type='email']:focus,
.gl-popup .gl-form .gl-form__form .gl-form__field input[type='text']:focus {
  outline-color: var(--gl-form-text, var(--gl-form-theme-contrast, #1e1e1e));
}

/* A phone: a sheet along the bottom of the screen, as wide as it is. */
@media (max-width: 639px) {
  dialog.gl-popup {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
  }

  .gl-popup__card {
    width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .gl-popup[open] {
    animation: gl-popup-in 200ms ease-out;
  }

  .gl-popup[open]::backdrop {
    animation: gl-popup-fade 200ms ease-out;
  }

  @keyframes gl-popup-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes gl-popup-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
  .gl-popup[open] {
    animation-name: gl-popup-up;
  }

  @keyframes gl-popup-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: none;
    }
  }
}

@media (forced-colors: active) {
  .gl-popup__card {
    border: 1px solid CanvasText;
  }
}