@layer plugins {
@layer shortcodes {
  /* NOTE ON @layer: this file is injected via wrap_style_blocks_in_layer,
     which double-wraps it in `@layer plugins{…}` → effective sub-layer
     `plugins.shortcodes`, which OUTRANKS site.css's top-level `shortcodes`
     layer. So a declaration here beats the same-specificity declaration in
     site.css. That is why the footer subscribe form's right-anchor
     (`margin-inline-start: auto`) MUST live here, not in site.css. */

  /* Every moss-hosted subscribe form is now the `:::subscribe` shortcode
     shape — `<div class="moss-subscribe"><form data-position="inline">` —
     whether auto-injected into the footer or authored in body/footer.md.
     Card container for the in-page (non-footer) case. Token-only. */
  .moss-subscribe {
    max-width: 32rem;
    margin: var(--moss-space-lg) 0;
    padding: var(--moss-space-md) var(--moss-space-lg);
    border: 1px solid var(--moss-border-light);
    border-radius: var(--moss-radius-md, 0.5rem);
  }

  /* In a footer, the subscribe form (auto-injected OR authored `:::subscribe`)
     reads borderless + compact — not the in-page card above — and is
     right-anchored on desktop. The footer becomes a flex row via
     `footer.container:has(> .moss-subscribe)` in site.css; `margin-inline-start:
     auto` (declared HERE so it wins the @layer cascade over the base
     `.moss-subscribe` margin) pushes the form to the inline-end edge — which is
     why it and the block margin below are the two logical `margin-inline`/
     `margin-block` shorthands, not a physical `margin` shorthand: physical
     `margin-left: auto` only coincides with `margin-inline-start: auto` under
     horizontal-tb, and sets block-end 0 (so it doesn't inherit the base
     `space-lg` block margin) and `min-width: 0` lets the form shrink below its
     content width beside a verbose link list instead of wrapping early. */
  footer .moss-subscribe {
    max-width: 24rem;
    min-width: 0;
    margin-block: var(--moss-space-sm) 0;
    margin-inline: auto 0;
    padding: 0;
    border: none;
    border-radius: 0;
  }

  /* Mobile: drop the right-anchor and let the form read full-width from the
     start edge (email input stacks above the button via the inline rules). */
  @media (max-width: 32rem) {
    footer .moss-subscribe {
      margin-inline-start: 0;
    }
  }

  .moss-subscribe-form[data-position="inline"] {
    display: flex;
    gap: var(--moss-space-sm);
    align-items: baseline;
  }
  /* The success circle has no text to share a baseline with: centre the row
     it shares with the confirmation. Specific enough to outrank the footer's
     mobile row below. */
  .moss-subscribe .moss-subscribe-form[data-position="inline"][data-state="success"] {
    align-items: center;
  }

  .moss-subscribe-form[data-position="inline"] .moss-input {
    flex: 1;
    min-width: 0;
  }

  @media (max-width: 32rem) {
    .moss-subscribe-form[data-position="inline"] {
      flex-direction: column;
      align-items: stretch;
    }
    /* :not([data-state="success"]) on both width rules: this file's layer
       (plugins.shortcodes) outranks site.css's shortcodes layer, so an
       unscoped width here would beat the success state's 2.25rem circle
       (site.css) and stretch the checkmark into a full-width oval. */
    .moss-subscribe-form[data-position="inline"]:not([data-state="success"]) .moss-btn {
      width: 100%;
    }

    /* Footer subscribe form keeps the email input + button on ONE row on
       mobile (input flexes, button hugs its label) — matching the default
       auto-injected footer's pre-consolidation behavior. Only the in-page
       `:::subscribe` card stacks to a column (it has full width to spare). */
    footer .moss-subscribe .moss-subscribe-form[data-position="inline"] {
      flex-direction: row;
      align-items: baseline;
    }
    footer .moss-subscribe .moss-subscribe-form[data-position="inline"]:not([data-state="success"]) .moss-btn {
      width: auto;
    }

    /* Stacked, the confirmation takes the input's row above the circle, as
       tall as the form's own 2.5rem row so the copy centres on that line.
       The footer form stays on one row (see above) and needs no height. */
    .moss-subscribe-form[data-position="inline"] .moss-subscribe-status {
      min-height: 2.5rem;
    }
    footer .moss-subscribe .moss-subscribe-form[data-position="inline"] .moss-subscribe-status {
      min-height: 0;
    }
  }
}

}