/* ==========================================================================
   Newsletter opt-in — v10 "Clinical"
   --------------------------------------------------------------------------
   The form's BEHAVIOUR is unchanged: same fields, same honeypot, same time
   trap, same consent checkbox, same double opt-in, same handler. Only its
   appearance is redesigned.

   What changed, and why:

   The field and the button are now ONE joined control — a single bordered
   row with the button sitting inside its right edge — instead of a rounded
   pill with a second pill floating under it. A newsletter form is one
   action, and drawing it as one object is both truer and considerably
   harder to ignore. On the panel and in the modal it is the widest thing
   in its column, which is what a form asking for the only input on the page
   should be.

   Corners follow the rest of the design: the joined control is a 10px tile,
   not a pill, because it is an input rather than a button. The submit inside
   it keeps a pill, so the part that is clickable still looks clickable.

   Three contexts, one component:
     default          on the ground or a white panel (the sidebar)
     --on-accent      on the navy closing panel — white on navy
     inside .st-modal the dialog's own plate

   The consent checkbox is drawn rather than native: a native box cannot be
   given a radius or an accent that matches this palette across browsers,
   and it is the last thing a reader looks at before subscribing.
   ========================================================================== */

.st-optin {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	width: 100%;
}

/* ── The joined field ─────────────────────────────────────────────────
   The input and the submit share one border. The submit is positioned
   inside the row's right edge, and the input reserves room for it with
   padding rather than by being a grid cell — so a long email scrolls under
   the button instead of resizing it. */
.st-optin__field {
	display: block;
	width: 100%;
}

.st-optin__field:has(.st-optin__input) {
	position: relative;
}

.st-optin__input {
	width: 100%;
	padding: 0.95rem 1.1rem;
	border: 1px solid var(--line-firm);
	border-radius: var(--r-card);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	line-height: 1.4;
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.st-optin__input::placeholder {
	color: var(--ink-500);
}

.st-optin__input:focus {
	outline: none;
	border-color: var(--signal);
	box-shadow: 0 0 0 3px var(--signal-tint);
}

/* The browser's own invalid styling fires while the field is still being
   typed into, so it is scoped to a field the reader has already left. */
.st-optin__input:not(:placeholder-shown):invalid {
	border-color: var(--flag);
}

/* ── Consent ──────────────────────────────────────────────────────────
   Required, and deliberately not pre-ticked: this is the record that the
   reader agreed, and a pre-ticked box is not consent. */
.st-optin__consent-label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
}

/* The native input is kept in the DOM and focusable — it is what carries the
   `required` validation and what a screen reader announces — but drawn off
   under the custom box. `opacity:0` rather than `display:none`, which would
   remove it from the tab order and from constraint validation. */
.st-optin__checkbox {
	position: absolute;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.st-optin__consent-text {
	position: relative;
	padding-left: 1.7rem;
	color: var(--ink-400);
	font-size: var(--fs-micro);
	line-height: 1.5;
}

/* The drawn box. A 4px corner — the smallest radius in the design, because
   at 18px square anything more reads as a circle. */
.st-optin__consent-text::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.05rem;
	width: 1.1rem;
	height: 1.1rem;
	border: 1px solid var(--line-firm);
	border-radius: 4px;
	background: var(--surface);
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

/* The tick. Drawn as two borders on a rotated box rather than as an SVG or a
   glyph, so it inherits the accent and needs no second asset. */
.st-optin__consent-text::after {
	content: "";
	position: absolute;
	left: 0.38rem;
	top: 0.22rem;
	width: 0.28rem;
	height: 0.55rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transform-origin: center;
	transition: transform 160ms var(--ease);
}

.st-optin__checkbox:checked + .st-optin__consent-text::before {
	background: var(--signal);
	border-color: var(--signal);
}

.st-optin__checkbox:checked + .st-optin__consent-text::after {
	transform: rotate(45deg) scale(1);
}

.st-optin__checkbox:focus-visible + .st-optin__consent-text::before {
	outline: 2px solid var(--signal);
	outline-offset: 2px;
}

.st-optin__consent-text a {
	color: var(--signal);
	text-decoration-color: var(--signal-tint);
	text-decoration-thickness: 1.5px;
}

.st-optin__consent-text a:hover {
	text-decoration-color: currentColor;
}

/* ── Submit ───────────────────────────────────────────────────────────── */
.st-optin__submit {
	align-self: flex-start;
	padding: 0.85rem 1.75rem;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--signal);
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0;
	cursor: pointer;
	transition: background var(--speed) var(--ease);
}

.st-optin__submit:hover,
.st-optin__submit:focus-visible {
	background: var(--signal-deep);
}

.st-optin__submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ── The status line ──────────────────────────────────────────────────
   role="status", so it is announced when the handler writes into it. Empty
   until then, and it takes no space while empty — an always-reserved line
   under the button is a permanent gap for a message most readers never see.

   Both states carry a left rule in their own colour rather than a full tint
   wash: at this size a filled block reads as a second button. */
.st-optin__message {
	margin: 0;
	padding: 0.65rem 0.9rem;
	border-left: 3px solid var(--ink-600);
	border-radius: 0 4px 4px 0;
	background: var(--surface-sink);
	color: var(--ink-300);
	font-size: var(--fs-meta);
	line-height: 1.5;
}

.st-optin__message:empty {
	display: none;
}

.st-optin__message.is-success {
	border-left-color: var(--moss);
	background: var(--signal-wash);
	color: var(--moss);
}

.st-optin__message.is-error {
	border-left-color: var(--flag);
	background: var(--flag-tint);
	color: var(--flag);
}

/* The compliance footer that printed the sender's name, postal address and
   support address under every form is gone — see the note in render.php. That
   identity belongs on the email, where email-template.php still carries all
   three. */

/* The honeypot. Hidden from sight and from assistive tech, but present in
   the DOM and fillable, which is the entire point — a bot that fills it is
   rejected. Not `display:none`: some bots skip those. */
.st-optin__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── On the navy panel ────────────────────────────────────────────────
   White on navy. The input goes to a translucent well so the navy reads
   through it, and the submit inverts to white — the only way a filled
   button reads on a filled panel. */
.st-optin--on-accent .st-optin__input {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.st-optin--on-accent .st-optin__input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.st-optin--on-accent .st-optin__input:focus {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}

.st-optin--on-accent .st-optin__consent-text {
	color: rgba(255, 255, 255, 0.72);
}

.st-optin--on-accent .st-optin__consent-text::before {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.1);
}

.st-optin--on-accent .st-optin__checkbox:checked + .st-optin__consent-text::before {
	background: #fff;
	border-color: #fff;
}

/* The tick knocks out in navy against the white box. */
.st-optin--on-accent .st-optin__consent-text::after {
	border-color: var(--ink);
}

.st-optin--on-accent .st-optin__checkbox:focus-visible + .st-optin__consent-text::before {
	outline-color: #fff;
}

.st-optin--on-accent .st-optin__consent-text a {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.45);
}

.st-optin--on-accent .st-optin__submit {
	background: #fff;
	color: var(--ink);
}

.st-optin--on-accent .st-optin__submit:hover,
.st-optin--on-accent .st-optin__submit:focus-visible {
	background: var(--signal-tint);
	color: var(--ink);
}

.st-optin--on-accent .st-optin__message {
	border-left-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.st-optin--on-accent .st-optin__message.is-success,
.st-optin--on-accent .st-optin__message.is-error {
	border-left-color: #fff;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

/* ── The modal ────────────────────────────────────────────────────────
   Opened by any [href="#formPopup"]. The dialog is a white plate on a navy
   scrim, entering with one short rise — the only non-hover motion on the
   site. */
.st-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: var(--gutter);
}

.st-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 27, 51, 0.62);
	backdrop-filter: blur(3px);
}

.st-modal__dialog {
	position: relative;
	width: min(30rem, 100%);
	max-height: 90vh;
	overflow-y: auto;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	border-radius: var(--r-panel);
	background: var(--surface);
	box-shadow: var(--shade-panel);
	animation: st-modal-rise 220ms var(--ease) both;
}

@keyframes st-modal-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.st-modal__dialog { animation: none; }
}

.st-modal__close {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--surface);
	color: var(--ink-300);
	font-size: 1.25rem;
	line-height: 1;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

.st-modal__close:hover,
.st-modal__close:focus-visible {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

/* The modal's label, carrying the same leading rule as every other section
   label on the site. */
.st-modal__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.6rem;
	color: var(--ink-400);
	font-size: var(--fs-meta);
	font-weight: 600;
	letter-spacing: 0;
}

.st-modal__kicker::before {
	content: "";
	width: 1.5rem;
	height: 3px;
	flex: none;
	background: var(--signal);
}

.st-modal__title {
	margin: 0;
	max-width: 18ch;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-size: clamp(1.6rem, 3.5vw, 2rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: var(--track-tight);
	color: var(--ink);
	text-wrap: balance;
}

.st-modal__title em {
	font-style: italic;
	font-weight: 400;
}

.st-modal__sub {
	margin: 0.75rem 0 1.5rem;
	color: var(--ink-400);
	font-size: var(--fs-small);
	line-height: 1.55;
}