@charset "UTF-8";
/* ==========================================================================
   The opt-in form — context overrides
   --------------------------------------------------------------------------
   The form's base skin lives in main.css §12, alongside the rest of the
   design's tokens. This file carries only what changes per CONTEXT, and is
   enqueued after main.css so these win on source order.

   The MARKUP and the submit/validation logic are unchanged — every class,
   name, id and data attribute the handler and optin-form.js rely on is the
   same — so this only restyles what is already there.

   Contexts:
     - the sidebar panel        (.panel)
     - the newsletter band      (.newsletter-band__form)
     - the modal                (.st-modal)
     - page content, via [st_optin_form]
   ========================================================================== */

/* The default (page content) instance is centred on a readable measure rather
   than stretching the full width of an article. */
.entry-content .st-optin {
	max-width: 420px;
	margin-inline: auto;
	padding: 1.25rem;
	border: 1px solid var(--rule-strong);
	background: #fff;
}

/* In the narrow sidebar the consent text and the footer are the first things
   to become noise, so both are taken down a step. */
.panel .st-optin__consent-text { font-size: .72rem; }
.panel .st-optin__footer { font-size: .64rem; }

/* The band instance sits on its own white plate, which already supplies the
   padding and border — the form must not draw a second one. */
.newsletter-band__form .st-optin {
	padding: 0;
	border: 0;
	background: none;
}

/* The modal is the one place the form is the entire content of its box, so
   the submit control carries a little more weight. */
.st-modal .st-optin__submit { padding: .85rem 1rem; }

/* Success state: once the handler confirms, the fields are no longer
   actionable, so they recede and the message carries the panel. */
.st-optin.is-done .st-optin__field,
.st-optin.is-done .st-optin__submit {
	display: none;
}

.st-optin.is-done .st-optin__message {
	font-size: .9rem;
	text-align: center;
	padding: .5rem 0;
}

/* While a submission is in flight. The button disables itself, so this only
   has to signal that something is happening. */
.st-optin.is-loading { opacity: .75; }
.st-optin.is-loading .st-optin__submit { cursor: progress; }

/* A field the validator rejected, and the note it inserts after it. */
.st-optin__input.has-error {
	border-color: var(--neg);
	box-shadow: 0 0 0 3px rgba(215, 40, 47, .12);
}

.st-optin__field-error {
	display: block;
	margin-top: .3rem;
	font-size: .72rem;
	color: var(--neg);
}