@charset "UTF-8";
/* ==========================================================================
   The opt-in form — context overrides
   --------------------------------------------------------------------------
   The form's base skin lives in main.css §13, 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, inverted as .panel--dark)
     - the newsletter band      (.newsletter-band__form)
     - the modal                (.st-modal)
     - page content, via [st_optin_form]
   ========================================================================== */

/* The default (page content) instance is boxed on a readable measure rather
   than stretching the full width of an article. */
.entry-content .st-optin {
	max-width: 440px;
	margin-inline: auto;
	padding: 1.75rem;
	border: 2px solid var(--ink);
	background: var(--paper);
}

/* ── The inverted sidebar panel ─────────────────────────────────────────
   The panel is a black plate, so the field has to draw its own edge against
   it rather than inheriting the black border that would vanish. */

.panel--dark .st-optin__input {
	background: var(--plate-2);
	border-color: var(--fog-dark);
	color: var(--paper);
}
.panel--dark .st-optin__input::placeholder { color: var(--ink-3); }

/* On the black plate the focus ring is drawn in paper rather than ink, for
   the same reason it is not drawn in red: see main.css §13. */
.panel--dark .st-optin__input:focus {
	border-color: var(--paper);
	box-shadow: 0 0 0 3px rgba(242, 240, 237, .2);
}

.panel--dark .st-optin__consent-text {
	color: #a5a29c;
	font-size: .74rem;
}
.panel--dark .st-optin__consent-text a { color: var(--paper); }
.panel--dark .st-optin__consent-text a:hover { color: var(--red); }

.panel--dark .st-optin__submit:hover:not(:disabled) {
	background: var(--paper);
	color: var(--ink);
}

.panel--dark .st-optin__footer {
	border-top-color: var(--fog-dark);
	color: var(--ink-3);
	font-size: .64rem;
}

.panel--dark .st-optin__message.is-success { color: #23c47f; }
.panel--dark .st-optin__message.is-error { color: #ff6b62; }

/* ── The band ───────────────────────────────────────────────────────────
   The band instance sits on its own paper plate, which already supplies the
   padding and the border — the form must not draw a second one. */

.newsletter-band__form .st-optin {
	padding: 0;
	border: 0;
	background: none;
}

/* ── The modal ──────────────────────────────────────────────────────────
   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: 1.1rem 1.2rem; }

/* ── States ─────────────────────────────────────────────────────────────
   Once the handler confirms, the fields are no longer actionable, so they
   go and the message carries the panel on its own. */

.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: .92rem;
	font-weight: 600;
	padding: .75rem 0 .25rem;
	border-left: 4px solid var(--green);
	padding-left: .9rem;
}

/* 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: .7; }
.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(--red);
	box-shadow: inset 0 0 0 2px rgba(224, 38, 28, .18);
}

.st-optin__field-error {
	display: block;
	margin-top: .4rem;
	font-size: .74rem;
	font-weight: 600;
	color: var(--red);
}
.panel--dark .st-optin__field-error { color: #ff6b62; }