/*
 * The newsletter, in the footer.
 *
 * SES Mailer owns the markup; this sheet owns how it looks. Every selector is
 * scoped under `.dcv-news`, so the plugin's own stylesheet stays intact for any
 * other surface the shortcode is ever dropped on, and nothing here is a global
 * rule wearing a plugin's class name.
 *
 * IT IS NOT A CARD. The house grammar for a form is a micro-label over a control
 * over a single hairline (the Contact form is the same grammar), and it is the
 * grammar here too — on olive rather than on canvas, so the rule and the field's
 * type are the on-olive cuts. A boxed, rounded, shadowed subscribe widget
 * dropped into a footer is the pattern this replaces.
 *
 * THE ANTI-BOT WIDGET IS THE LAST THING IN THE FORM, AND IT COSTS NOTHING UNTIL
 * IT EXISTS. Turnstile is deferred: Cloudflare is called at the first focus
 * inside the form, so the widget arrives while the reader's hands are on it.
 * Two consequences, both of them designed for rather than discovered:
 *
 *   - The action is never beside the field. Field, then action, then widget.
 *     Whatever the widget does when it mounts, it happens BELOW the button the
 *     reader is about to press, so nothing moves under the pointer.
 *   - The plugin reserves 73px for it up front, which is right when the widget
 *     sits above the action and wrong here: it would be a permanent hole in the
 *     footer of every page on the site, paid by every reader for a form most of
 *     them will never open. The reservation is released, and the space is taken
 *     at the moment the widget is real.
 */

/*
 * The column is a SIZE CONTAINER, and that is the whole trick.
 *
 * The same viewport hands this column two very different widths — 320px as the
 * footer's fifth track, 578px as a half-row under the wrapped one — so a media
 * query would be answering a question about the window when the question is
 * about the column. `container-type: inline-size` lets the wrapper below ask the
 * element that actually knows.
 */
.dcv-news {
	container-type: inline-size;
	align-content: start;
}

.dcv-news__inner {
	display: grid;
	gap: var(--dcv-space-sm);
	align-content: start;
}

.dcv-news__pitch {
	display: grid;
	gap: var(--dcv-space-2xs);
}

.dcv-news__line {
	margin: 0;
	max-width: 34ch;
	font-size: var(--dcv-text-sm);
	line-height: var(--dcv-leading-ui);
	color: var(--dcv-on-olive-muted);
}

/* --- the form --------------------------------------------------------------- */

/*
 * The plugin's stacked layout centres itself and caps its own width. In a footer
 * column the column already decides both, so both are handed back.
 */
.dcv-news .sesm-form {
	display: grid;
	gap: var(--dcv-space-xs);
	max-width: 26rem;
	margin: 0;
	text-align: left;
}

.dcv-news .sesm-form__body {
	display: grid;
	gap: var(--dcv-space-2xs);
}

/* The field over the action, with the action given room of its own. */
.dcv-news .sesm-form__row {
	display: grid;
	gap: var(--dcv-space-sm);
}

/* --- the field: a rule, not a box ------------------------------------------- */

.dcv-news .sesm-form__input {
	width: 100%;
	padding: var(--dcv-space-2xs) 0;
	border: 0;
	border-bottom: 1px solid var(--dcv-on-olive-line);
	border-radius: 0;
	background: none;
	color: var(--dcv-on-olive);
	font-family: var(--dcv-font-ui);
	font-size: var(--dcv-text-prose);
	line-height: var(--dcv-leading-ui);
	transition: border-color var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-news .sesm-form__input::placeholder {
	color: var(--dcv-on-olive-muted);
	opacity: 1;
}

/* Hover and focus produce the same affordance; focus additionally rings. */
.dcv-news .sesm-form__input:hover { border-bottom-color: var(--dcv-cat-glow); }

.dcv-news .sesm-form__input:focus,
.dcv-news .sesm-form__input:focus-visible {
	border-bottom-color: var(--dcv-cat-glow);
	outline-offset: var(--dcv-focus-offset);
}

/* --- the action ------------------------------------------------------------- */

/*
 * The house action, on a button whose class belongs to the plugin.
 *
 * The declarations are the same ones `.dcv-action` resolves to on an olive
 * ground — the terracotta fill at rest, the gold plate on hover, cream and
 * olive-deep as the two label cuts — written out rather than aliased, because
 * the markup is a plugin's and a class cannot be added to it. Hover INVERTS the
 * surface rather than darkening it by a step, which is both the gesture and the
 * reason the label goes from 4.9:1 to 12:1.
 */
.dcv-news .sesm-form__btn {
	justify-self: start;
	width: auto;
	padding: 0.7em 1.4em;
	border: 1px solid var(--dcv-accent-action);
	border-radius: var(--dcv-radius);
	background: var(--dcv-accent-action);
	color: var(--dcv-on-olive);
	font-family: var(--dcv-font-ui);
	font-size: var(--dcv-text-xs);
	font-weight: var(--dcv-label-weight);
	letter-spacing: var(--dcv-label-tracking);
	text-transform: uppercase;
	line-height: 1.3;
	cursor: pointer;
	transition: background var(--dcv-duration) var(--dcv-ease),
	            border-color var(--dcv-duration) var(--dcv-ease),
	            color var(--dcv-duration-fast) var(--dcv-ease),
	            transform var(--dcv-duration-fast) var(--dcv-ease);
}

.dcv-news .sesm-form__btn:hover,
.dcv-news .sesm-form__btn:focus-visible {
	background: var(--dcv-cat-glow);
	border-color: var(--dcv-cat-glow);
	color: var(--dcv-olive-deep);
	opacity: 1;
}

.dcv-news .sesm-form__btn:active { transform: translateY(1px); }

.dcv-news .sesm-form__btn[disabled] {
	cursor: progress;
	opacity: 0.62;
}

/* --- what the form says back ------------------------------------------------ */

/*
 * On a ground that is olive in both themes there is no red that clears AA and no
 * green that reads as anything but noise, so the two states are told apart by
 * their sentence and separated by tone: the answer that needs reading is lifted
 * to full cream, the confirmation settles into the gold the band already uses.
 * Colour is never the only signal here, and never has to be.
 */
.dcv-news .sesm-form__msg,
.dcv-news__outcome {
	margin: 0;
	min-height: 0;
	font-size: var(--dcv-text-sm);
	line-height: var(--dcv-leading-ui);
	color: var(--dcv-on-olive-muted);
}

.dcv-news .sesm-form__msg.is-ok,
.dcv-news__outcome--ok { color: var(--dcv-cat-glow); }

.dcv-news .sesm-form__msg.is-err,
.dcv-news__outcome--err {
	color: var(--dcv-on-olive);
	font-weight: var(--dcv-label-weight);
}

.dcv-news__outcome { margin-bottom: var(--dcv-space-2xs); }

/* --- the anti-bot widget ---------------------------------------------------- */

.dcv-news .tsg-field {
	margin: 0;
	max-width: 100%;
}

/*
 * The reservation is released: below the action, an empty 73px is a hole in the
 * footer rather than a guard against one. See the note at the head of this file.
 */
.dcv-news .tsg-field--deferred .tsg-widget {
	min-height: 0;
	max-width: 100%;
}

/* Space is taken once the widget is real, and not a moment before. */
.dcv-news .tsg-widget:not(:empty) { margin-top: var(--dcv-space-xs); }

/* --- the small print -------------------------------------------------------- */

.dcv-news__note {
	margin: 0;
	max-width: 40ch;
	font-size: var(--dcv-text-xs);
	line-height: var(--dcv-leading-ui);
	color: var(--dcv-on-olive-muted);
}

.dcv-news__note a { color: var(--dcv-on-olive); }

/* --- where the column stands ------------------------------------------------ */

/*
 * TWO SHAPES, CHOSEN BY THE COLUMN'S OWN WIDTH.
 *
 * A form has a floor the link lists beside it do not: Turnstile's flexible
 * widget will not render below 300px, so the form column needs 20rem to itself
 * whatever else happens. Below 40rem the column therefore stacks — heading,
 * promise, field, action — because a pitch squeezed into whatever is left of
 * 34rem after the form has taken its share is a heading broken over two lines
 * and a promise broken over three. Above it, both halves have room and the
 * pitch stands beside the form.
 */
@container (min-width: 40rem) {
	.dcv-news__inner {
		grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
		gap: var(--dcv-space-lg);
		align-items: start;
	}

	.dcv-news__line { font-size: var(--dcv-text-base); }
}

/*
 * And where the column stands in the footer's grid.
 *
 * Full width on a phone. From the width at which the footer's own auto-fit grid
 * wraps its last list onto a second row, HALF that row — which is the space that
 * wrap leaves empty, so the invitation costs the footer no extra height at the
 * commonest desktop width. The fifth track above 82rem is assigned by the
 * footer's own grid in `shell.css`.
 */
.dcv-news {
	grid-column: 1 / -1;
	padding-top: var(--dcv-space-lg);
	border-top: 1px solid var(--dcv-on-olive-line);
}

@media (min-width: 62rem) {
	.dcv-news { grid-column: span 2; }
}

@media (min-width: 82rem) {
	.dcv-news {
		padding-top: 0;
		border-top: 0;
	}
}