/*
 * GRO Form
 *
 * The markup every surface renders a GRO form with — the WordPress block and
 * shortcodes (FormRenderer.php), the HQ preview and the GRO landing page — so
 * a form looks the same everywhere. Keep them in step.
 *
 * .gl-form                  the wrapper, one per form, with modifiers:
 *   --signup | --save-to-email | --content-gate    the config's kind;
 *   --popup                                         a popup's form, in the
 *                                                   card of the popup
 *                                                   (assets/blocks/popup)
 *   --stacked | --inline | --split | --compact     design.layout
 *   --boxed | --plain                               design.appearance
 *   --icon                                          design.showIcon
 *   --banner    the form has a banner (design.bannerUrl), the creator's own
 *               image across its top
 *   --image-avatar | --image-logo
 *               the form's picture (design.image, at design.imageUrl): the
 *               creator's profile photo or their logo. None when the form
 *               has no picture or GRO has no http(s) URL for it.
 *               Neither --banner nor --image-* is ever on a popup's form,
 *               whose banner and picture are the popup's
 *               (assets/blocks/popup), on a content gate's own form, or on
 *               any form in a content gate, which shows neither
 *   --brand     brand colours are on (design.useBrandColors). The wrapper's
 *               style attribute then sets --gl-form-accent (the button and
 *               the icon; design.accentColor when set, else brand.accent),
 *               --gl-form-accent-text (the button's text),
 *               --gl-form-background and --gl-form-text (a boxed form's
 *               colours). --gl-form-accent-text is brand.buttonText on
 *               brand.accent, and otherwise (on design.accentColor, or
 *               when brand.buttonText is null or not hex) #fff when
 *               1.05 / (L + 0.05) >= (L + 0.05) / 0.05, else #000, L being
 *               the accent's WCAG 2 relative luminance: #fff up to about
 *               L = 0.1791 (docs/FORMS.md has the whole formula). Without
 *               --brand none is set: the button is near-black (#1e1e1e)
 *               with white text, or the theme's own pair with --theme-pair,
 *               and the icon takes the title's colour
 *   --theme-pair
 *               the theme's palette has both a base and a contrast colour
 *               (ThemePalette.php). What brand colours leave unset is then
 *               the theme's: the button's fill, border and focus ring its
 *               contrast, the button's text and the picture's ring its
 *               base. Both or neither: one taken without the other can be
 *               dark text on a dark button (a dark style variation's base,
 *               #111, on #1e1e1e). The modifier's own rule is the only one
 *               to read the presets, into --gl-form-theme-base and
 *               --gl-form-theme-contrast (no settings), which every other
 *               rule falls back through to #fff and #1e1e1e
 * .gl-form__header          the banner and the picture, before the <form>
 *                           (the wrapper's first child) in every layout;
 *                           only on a form with either
 *   .gl-form__header--banner  it holds a banner
 * .gl-form__banner          the banner, an <img> across the form, cropped
 *                           to a 3:1 strip from its centre (a browser
 *                           without aspect-ratio gets the strip from the
 *                           header's padding). On a boxed form it runs to
 *                           the box's edges and takes its top corners (the
 *                           box's padding moves onto the <form>)
 * .gl-form__picture         the picture, an <img> after the banner. With a
 *                           banner, a 72px circle over the banner's bottom
 *                           left corner, half on it, ringed in the box's
 *                           colour, or the page's on a plain form (a logo
 *                           contained in it, on that colour); without one,
 *                           centred above the copy: the photo in a 72px
 *                           circle, the logo at its own shape, at most 200
 *                           by 48px
 * .gl-form__form            the <form>. The view script sets aria-busy on
 *                           it while it submits and adds .gl-form--done once
 *                           it has.
 * .gl-form__copy            the title and the description
 * .gl-form__title           a <p>, so a form adds nothing to the page
 *                           outline; holds .gl-form__icon, an <svg> drawn
 *                           per kind (envelope, heart, lock), and
 *                           .gl-form__title-text
 * .gl-form__description     plain text, line breaks kept; left out of the
 *                           compact layout
 * .gl-form__fields          the row and the opt-in
 * .gl-form__row             the inputs and the button
 * .gl-form__field           a <label> round one input:
 *   .gl-form__field--name   the first name, when the form asks for one
 *   .gl-form__field--email  the email address
 * .gl-form__submit          the button, with no class of the theme's
 * .gl-form__optin           the form's checkbox and its label
 *                           (design.optIn): the optional opt-in on Save to
 *                           Email, the required consent on signup and content
 *                           gate forms. At least 24px tall; with --brand the
 *                           box takes --gl-form-accent (accent-color)
 * .gl-form__status          the result line (role=status)
 * .gl-form__success         a <template> holding the success message
 * .gl-form__hp              the honeypot, clipped in place. The rendered
 *                           element repeats this rule inline, so an
 *                           optimizer that drops this stylesheet cannot show
 *                           a reader the field
 * .gl-form-notice           what editors see where a form cannot show
 *
 * Layouts:
 *   stacked  the copy, then each input and the button on a full-width line
 *   inline   the copy, then the inputs and the button in one row, which
 *            wraps only when it runs out of room
 *   split    the copy beside the inputs while both fit, one column after
 *   compact  one slim bar: the icon and title, then the input and button
 *
 * GRO draws the form. The theme supplies the font family, which every part
 * inherits, and the page behind a plain form; the type, the button, the
 * inputs, the checkbox and the icon are this sheet's, whatever the theme
 * does to paragraphs, labels, inputs, buttons and svgs. So every rule but
 * the sentinel, the wrapper's own two and the keyframes is at least three
 * classes, (0,3,0), past a theme's .entry-content input[type=email] or
 * .site-main .entry-content p (0,2,1): a part inside the <form> through
 * .gl-form .gl-form__form, the wrapper and its direct children through
 * .gl-form named twice. Each part's rule sets what a theme commonly sets on
 * that element (a size, a weight, capitals, letter spacing, an indent, a
 * float, a fill), and the button's and the inputs' every state too. A theme
 * rule of four classes, an id or !important still wins. The popup's and the
 * content gate's rules for a form's parts are one class more
 * (assets/blocks/popup, assets/blocks/content-gate), so they win wherever
 * their sheet lands. blocks/tests/theme-proof.test.ts holds the three
 * sheets to this; blocks/tests/harness/hostile.html shows the forms under a
 * hostile theme. The box, the inputs and the spacing can be tuned through
 * the --gl-form-* custom properties below.
 *
 * Within this sheet, a layout's or a modifier's rule is mostly as deep as
 * the rule it changes and wins by coming after it: --boxed's box before
 * --compact's and --banner's, a part's own rule before its layout's or its
 * picture's. The order is part of the cascade: put a new rule after the
 * one it changes.
 *
 * --gl-form-css, set to 1 on .gl-form by the first rule, is no setting but
 * the sheet's sentinel: the view script reads it off the page's first form
 * and, when it is not there (an optimizer took the inline copy away, or a
 * theme threw away the render that printed it), loads this file itself
 * (docs/FORMS.md, "The stylesheets"). Keep it the first rule, and plain.
 * --gl-form-css-states, set by the second rule on a <form> the view script
 * marked done, is a second one: no page is served with one, so an optimizer
 * that keeps only the rules the page's HTML uses drops it with the rules for
 * the states the view script sets (--done, aria-busy), and keeps the first.
 * The view script reads it off a probe of its own. Keep it the second rule.
 */

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

.gl-form .gl-form__form.gl-form--done {
  --gl-form-css-states: 1;
}

.gl-form {
  box-sizing: border-box;
  max-width: 100%;
}

/* Zero specificity: a theme's block spacing wins. This only keeps the form
   off its neighbours in themes that space nothing, as many classic themes do. */
:where(.gl-form) {
  margin: 1.5em 0;
}

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

/* The padding shrinks with the space around it: recipe card templates can
   leave the box only a few hundred pixels on a phone. Brand colours set the
   background and text; without them the box tints whatever it sits on. */
.gl-form.gl-form.gl-form--boxed {
  background: var(--gl-form-background, rgba(127, 127, 127, 0.08));
  color: var(--gl-form-text, currentColor);
  border: var(--gl-form-border, 1px solid rgba(127, 127, 127, 0.25));
  border-radius: var(--gl-form-radius, 12px);
  padding: var(--gl-form-padding, clamp(0.75em, 5%, 1.25em));
}

.gl-form.gl-form--boxed.gl-form--compact {
  padding: var(--gl-form-padding, 0.625em 0.75em);
}

/* Whatever a theme gives forms: a margin, a box, a type size. */
.gl-form.gl-form .gl-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--gl-form-gap, 0.75em);
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  color: inherit;
}

.gl-form .gl-form__form .gl-form__copy {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: start;
}

/* The theme's paragraph styles (a size, a line height, capitals, spacing,
   an indent, a colour) stop here. The title and the description take the
   copy's alignment, which the popup and the content gate centre. */
.gl-form .gl-form__form .gl-form__title,
.gl-form .gl-form__form .gl-form__title-text,
.gl-form .gl-form__form .gl-form__description,
.gl-form .gl-form__form .gl-form__status {
  max-width: none;
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: inherit;
  text-indent: 0;
  text-transform: none;
  text-shadow: none;
  color: inherit;
  overflow-wrap: anywhere;
}

.gl-form .gl-form__form .gl-form__title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--gl-form-title-size, 1.125em);
  font-weight: 700;
  line-height: 1.3;
}

.gl-form .gl-form__form .gl-form__description {
  display: block;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  white-space: pre-line;
}

.gl-form .gl-form__form .gl-form__status {
  display: block;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  text-align: start;
}

/* A theme's ornaments on paragraphs, and its drop cap. */
.gl-form .gl-form__form .gl-form__title::before,
.gl-form .gl-form__form .gl-form__title::after,
.gl-form .gl-form__form .gl-form__description::before,
.gl-form .gl-form__form .gl-form__description::after,
.gl-form .gl-form__form .gl-form__status::before,
.gl-form .gl-form__form .gl-form__status::after {
  content: none;
}

.gl-form .gl-form__form .gl-form__title::first-letter,
.gl-form .gl-form__form .gl-form__description::first-letter,
.gl-form .gl-form__form .gl-form__status::first-letter {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* 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-form .gl-form__form .gl-form__icon {
  display: block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--gl-form-accent, currentColor);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  opacity: 1;
  filter: none;
  transform: none;
}

.gl-form .gl-form__form .gl-form__icon * {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none;
  opacity: 1;
  filter: none;
  transform: none;
}

/* The picture sits in the header, over the banner's edge when there is one. */
.gl-form.gl-form .gl-form__header {
  position: relative;
  margin: 0 0 16px;
  padding: 0;
}

/* Whatever the theme puts round its images: a shadow too, which would spill
   past a banner's edges onto the box's, rounded corners and a backdrop. */
.gl-form .gl-form__header .gl-form__banner,
.gl-form .gl-form__header .gl-form__picture {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Across the form, cropped to a 3:1 strip from its centre. */
.gl-form .gl-form__header .gl-form__banner {
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

/* The same strip in a browser without aspect-ratio (Safari before 15, on an
   iPad that stopped updating): the header is a third of its width tall, and
   the banner fills it. */
@supports not (aspect-ratio: 1 / 1) {
  .gl-form.gl-form .gl-form__header--banner {
    padding-top: calc(100% / 3);
  }

  .gl-form .gl-form__header .gl-form__banner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}

/* Without a banner, the picture is centred above the copy. */
.gl-form--image-avatar .gl-form__header .gl-form__picture {
  width: 72px;
  max-width: none;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.gl-form--image-logo .gl-form__header .gl-form__picture {
  width: auto;
  max-width: min(200px, 100%);
  height: auto;
  max-height: 48px;
  margin: 0 auto;
}

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

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

/* A plain form paints no background, so its ring and a logo's circle are the
   page's colour, white or the theme's base: the brand's would be a disc of it
   on the page. Each rule is the one above with .gl-form--plain added, so it
   outranks it. */
.gl-form.gl-form--plain .gl-form__header--banner .gl-form__picture {
  box-shadow: 0 0 0 4px var(--gl-form-theme-base, #fff);
}

.gl-form--plain.gl-form--image-logo .gl-form__header--banner .gl-form__picture {
  background: var(--gl-form-theme-base, #fff);
}

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

/* A banner runs to the edges of a boxed form: the box's padding, the same
   as .gl-form--boxed's, moves onto the form under the header, and the banner
   takes the box's top corners. A negative margin could not undo the
   padding: its 5% would be of the box's width, not of what the box holds. */
.gl-form.gl-form--boxed.gl-form--banner {
  padding: 0;
}

.gl-form--boxed.gl-form--banner .gl-form__form {
  padding: var(--gl-form-padding, clamp(0.75em, 5%, 1.25em));
  padding-top: 0;
}

.gl-form--boxed.gl-form--compact.gl-form--banner .gl-form__form {
  padding: var(--gl-form-padding, 0.625em 0.75em);
  padding-top: 0;
}

.gl-form--boxed.gl-form--banner .gl-form__banner {
  border-radius: var(--gl-form-radius, 12px) var(--gl-form-radius, 12px) 0 0;
}

.gl-form .gl-form__form .gl-form__fields {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.gl-form .gl-form__form .gl-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0;
  padding: 0;
}

/* The inputs share the row and the button keeps its own width beside them,
   stretching only once it wraps onto a line of its own. A first name, an
   email and the button still fit one row in a ~640px column. A theme's
   label style (small capitals, a float) stops here. */
.gl-form .gl-form__form .gl-form__field {
  display: block;
  flex: 999 1 10em;
  float: none;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: start;
  text-transform: none;
  color: inherit;
}

/* The button is GRO's, in every state: the form's accent with brand colours
   on, else near-black with white text, or the theme's pair. */
.gl-form .gl-form__form .gl-form__submit {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  flex: 1 0 auto;
  float: none;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0.6em 1.2em;
  overflow: visible;
  border: 1px solid
    var(--gl-form-accent, var(--gl-form-theme-contrast, #1e1e1e));
  border-radius: 6px;
  outline: none;
  background: var(--gl-form-accent, var(--gl-form-theme-contrast, #1e1e1e));
  box-shadow: none;
  color: var(--gl-form-accent-text, var(--gl-form-theme-base, #fff));
  font: inherit;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 1;
  filter: none;
  transform: none;
  transition: filter 0.15s ease-out;
  cursor: pointer;
}

.gl-form .gl-form__form .gl-form__submit::before,
.gl-form .gl-form__form .gl-form__submit::after {
  content: none;
}

.gl-form .gl-form__form .gl-form__submit:hover,
.gl-form .gl-form__form .gl-form__submit:focus,
.gl-form .gl-form__form .gl-form__submit:active {
  border-color: var(--gl-form-accent, var(--gl-form-theme-contrast, #1e1e1e));
  background: var(--gl-form-accent, var(--gl-form-theme-contrast, #1e1e1e));
  color: var(--gl-form-accent-text, var(--gl-form-theme-base, #fff));
  text-decoration: none;
}

.gl-form--brand .gl-form__form .gl-form__submit:hover {
  filter: brightness(0.92);
}

/* A keyboard focus rings it in its fill, a click does not: the ring is on
   :focus and :not(:focus-visible) takes it off, so a browser without
   :focus-visible (Safari before 15.4), which drops that rule, still shows
   it. */
.gl-form .gl-form__form .gl-form__submit:focus {
  outline: 2px solid
    var(--gl-form-accent, var(--gl-form-theme-contrast, #1e1e1e));
  outline-offset: 2px;
}

.gl-form .gl-form__form .gl-form__submit:focus:not(:focus-visible) {
  outline: none;
}

.gl-form .gl-form__form[aria-busy='true'] .gl-form__submit {
  opacity: 0.6;
  pointer-events: none;
}

.gl-form--stacked .gl-form__form .gl-form__row {
  flex-direction: column;
}

/* A flex basis would be a height in a column. */
.gl-form--stacked .gl-form__form .gl-form__field,
.gl-form--stacked .gl-form__form .gl-form__submit {
  flex: none;
}

.gl-form .gl-form__form .gl-form__field input[type='email'],
.gl-form .gl-form__form .gl-form__field input[type='text'] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  float: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: var(--gl-form-input-padding, 0.6em 0.8em);
  font: inherit;
  /* 16px stops iOS Safari zooming the page when the field takes focus. */
  font-size: max(16px, 1em);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: start;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  color: var(--gl-form-input-color, #1e1e1e);
  -webkit-text-fill-color: currentColor;
  background: var(--gl-form-input-background, #fff);
  border: var(--gl-form-input-border, 1px solid rgba(127, 127, 127, 0.6));
  border-radius: var(--gl-form-input-radius, 6px);
  box-shadow: none;
  opacity: 1;
  transition: none;
}

.gl-form .gl-form__form .gl-form__field input[type='email']:hover,
.gl-form .gl-form__form .gl-form__field input[type='text']:hover,
.gl-form .gl-form__form .gl-form__field input[type='email']:focus,
.gl-form .gl-form__form .gl-form__field input[type='text']:focus {
  color: var(--gl-form-input-color, #1e1e1e);
  background: var(--gl-form-input-background, #fff);
  border: var(--gl-form-input-border, 1px solid rgba(127, 127, 127, 0.6));
  box-shadow: none;
}

/* A field rings on any focus: it takes typing however it was focused, so
   every browser with :focus-visible shows a ring on a click too, and one
   without (Safari before 15.4) still gets this one. */
.gl-form .gl-form__form .gl-form__field input[type='email']:focus,
.gl-form .gl-form__form .gl-form__field input[type='text']:focus {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* The field's own colour, faded: the plain value is the fallback for a
   browser without color-mix(). */
.gl-form .gl-form__form .gl-form__field input[type='email']::placeholder,
.gl-form .gl-form__form .gl-form__field input[type='text']::placeholder {
  color: #737373;
  color: color-mix(in srgb, currentColor 62%, transparent);
  -webkit-text-fill-color: currentColor;
  opacity: 1;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
}

/* At least 24px tall, a target size WCAG 2.2 counts (2.5.8, the box and its
   label being one target): a one-line label sits centred in it, and a longer
   one keeps the box beside its first line. */
.gl-form .gl-form__form .gl-form__optin {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  align-content: center;
  gap: 0.5em;
  float: none;
  width: auto;
  min-height: 24px;
  max-width: none;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 0.875em;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: start;
  text-transform: none;
  color: inherit;
  overflow-wrap: anywhere;
  cursor: pointer;
}

/* A theme that draws its own checkboxes on a label's ::before, or on the
   text after the box, would put a second box beside the real one. */
.gl-form .gl-form__form .gl-form__field::before,
.gl-form .gl-form__form .gl-form__field::after,
.gl-form .gl-form__form .gl-form__optin::before,
.gl-form .gl-form__form .gl-form__optin::after,
.gl-form .gl-form__form .gl-form__optin span::before,
.gl-form .gl-form__form .gl-form__optin span::after {
  content: none;
}

/* The opt-in's text, the span after the box: the room a theme pads before
   that text to draw its own box in would stand empty beside the real one.
   Its type is the label's. */
.gl-form .gl-form__form .gl-form__optin span {
  display: block;
  position: static;
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-indent: 0;
  text-transform: inherit;
  text-shadow: none;
  color: inherit;
}

/* The browser's own box: a theme that hides checkboxes to draw its own
   leaves this one looking unticked, or not there at all, and a required
   consent box nobody can see. Its 1em is the label's size, not a theme's
   for inputs. Visibility inherits rather than shows, so a form inside
   something the theme hides stays hidden whole. */
.gl-form .gl-form__form .gl-form__optin input[type='checkbox'] {
  -webkit-appearance: checkbox;
  appearance: auto;
  display: block;
  visibility: inherit;
  position: static;
  flex: none;
  float: none;
  width: 1em;
  height: 1em;
  min-width: 0;
  min-height: 0;
  margin: 0.2em 0 0;
  padding: 0;
  clip-path: none;
  font: inherit;
  opacity: 1;
  transform: none;
  transition: none;
}

/* The box wears the form's accent, as the button does; without brand
   colours it stays the theme's, or the browser's. */
.gl-form--brand .gl-form__form .gl-form__optin input[type='checkbox'] {
  accent-color: var(--gl-form-accent);
}

.gl-form .gl-form__form .gl-form__status:empty {
  display: none;
}

/* The view script focuses the status so screen readers read the result; it is
   not a control, so it gets no focus ring. */
.gl-form .gl-form__form .gl-form__status:focus {
  outline: none;
}

.gl-form .gl-form__form.gl-form--done .gl-form__status {
  font-weight: 600;
}

/* Clipped in place rather than moved off-screen: a left offset makes a
   right-to-left page scroll sideways. FormRenderer::HONEYPOT_STYLE repeats
   this declaration inline, for a page whose optimizer dequeued or deferred
   this stylesheet; keep the two the same. */
.gl-form .gl-form__form .gl-form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* For themes that ship no .screen-reader-text of their own. */
.gl-form .gl-form__form .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Split: the copy beside the inputs while both fit, one column once they do
   not. Flex-wrap alone, on purpose: an inline-size container query would make
   the same choice from the box's own width, but containment leaves the box no
   intrinsic width, and a shrink-to-fit parent (a core Row or Stack, a recipe
   card column, a table cell) then sizes it to its padding (GL-2508). The two
   flex bases and the gap add up to 24em, which a post's content column clears
   and a phone does not; min-width: 0 on the copy and the fields keeps that
   sum the breakpoint. The status line always takes a line of its own, and
   fields without copy fill theirs. Each input's label is centred on the line
   it shares with the button: stretched, it would leave its input at the top.
   The button still stretches to match a taller input. */
.gl-form.gl-form--split .gl-form__form {
  flex-flow: row wrap;
  align-items: center;
  column-gap: 1.5em;
}

.gl-form--split .gl-form__form .gl-form__copy {
  flex: 1 1 10.5em;
}

.gl-form--split .gl-form__form .gl-form__fields {
  flex: 1 1 12em;
}

.gl-form--split .gl-form__form .gl-form__status {
  flex: 1 1 100%;
}

.gl-form--split .gl-form__form .gl-form__field {
  align-self: center;
}

/* Compact: one slim bar, the icon and title then the field and button,
   which wraps onto more lines only when it has to. */
.gl-form.gl-form--compact .gl-form__form {
  flex-flow: row wrap;
  align-items: center;
  gap: 0.5em 0.75em;
}

.gl-form--compact .gl-form__form .gl-form__copy {
  flex: 0 1 auto;
}

.gl-form--compact .gl-form__form .gl-form__title {
  font-size: var(--gl-form-title-size, 1em);
}

.gl-form--compact .gl-form__form .gl-form__fields {
  flex: 1 1 16em;
}

/* A shorter field keeps the button on the bar beside it. */
.gl-form--compact .gl-form__form .gl-form__field {
  flex-basis: 8em;
}

.gl-form--compact .gl-form__form .gl-form__status {
  flex: 1 1 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .gl-form .gl-form__form.gl-form--done .gl-form__status {
    animation: gl-form-done 300ms ease-out;
  }

  @keyframes gl-form-done {
    from {
      opacity: 0;
      transform: translateY(0.25em);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}