/*
 * Submission_Screen.
 *
 * Loaded only on the /insturen page, see itwt_enqueue_assets() in functions.php.
 *
 * ONE COLUMN, AT EVERY WIDTH
 * There is no second column and no media query that introduces one. A field is a
 * label, one sentence and one control, stacked, full width, from 320px upwards
 * (Requirements 10.5, 23.3). Nothing here can overflow horizontally: every control
 * is `width: 100%` with `box-sizing: border-box`, so the padding is inside the
 * width rather than added to it, and the textarea's default `resize: horizontal`
 * behaviour is limited to vertical.
 *
 * TAP TARGETS AND TYPE
 * base.css already gives every control and every button `min-height:
 * var(--itwt-tap-min)` (44px) and `font-size: var(--itwt-size-body)` (17px). This
 * sheet does not restate the floor, it raises it where the design asks: the two
 * buttons are 48px tall and full width, so they are unmissable and unmissed
 * (Requirements 10.4, 23.1, 23.2).
 *
 * THE ACCENT IS NOT USED HERE
 * A field that needs attention is marked with a heavier ink border and a bolder
 * message, not with the red-brown accent: that colour means "termijn verstreken"
 * and nothing else on this platform (Requirement 22.2). Colour is never the only
 * signal either — the message itself is the signal, and it is text.
 *
 * NO JAVASCRIPT IS INVOLVED. There is nothing to reveal, nothing to collapse and
 * nothing to validate client-side, so there is nothing to style for those states.
 *
 * Requirements: 10.3, 10.4, 10.5, 22.2, 23.1, 23.2, 23.3
 */

/* ---------------------------------------------------------------------------
 * The framing and the instruction above the fields
 * ------------------------------------------------------------------------ */

.itwt-submission-intro {
	max-width: var(--itwt-measure);
}

.itwt-submission-intro > * + * {
	margin-block-start: var(--itwt-space-xs);
}

/* ---------------------------------------------------------------------------
 * The form
 * ------------------------------------------------------------------------ */

.itwt-submission {
	max-width: 34rem;
	margin: 0;
}

.itwt-field + .itwt-field {
	margin-block-start: var(--itwt-space-l);
}

.itwt-field__label {
	display: block;
	font-family: var(--itwt-font-head);
	font-size: var(--itwt-size-h3);
	font-weight: var(--itwt-weight-head);
	line-height: var(--itwt-line-head);
}

.itwt-field__explanation {
	margin-block: var(--itwt-space-2xs) var(--itwt-space-xs);
	max-width: var(--itwt-measure);
	color: var(--itwt-ink-soft);
	font-size: var(--itwt-size-small);
}

/*
 * The message that belongs to a field. Ink, bold, above the control, with a rule
 * beside it so it reads as attached to this field and not to the page.
 */
.itwt-field__message {
	margin-block: 0 var(--itwt-space-xs);
	border-inline-start: var(--itwt-rule-width-strong) solid var(--itwt-ink);
	padding-inline-start: var(--itwt-space-xs);
	max-width: var(--itwt-measure);
	font-weight: var(--itwt-weight-strong);
}

.itwt-field__control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	/* Never below 16px: iOS zooms the page for anything smaller. */
	font-size: var(--itwt-size-body);
}

textarea.itwt-field__control {
	min-height: calc(var(--itwt-tap-min) * 5);
	resize: vertical;
}

.itwt-field--attention .itwt-field__control {
	border-width: var(--itwt-rule-width-strong);
	border-color: var(--itwt-ink);
}

input[type="file"].itwt-field__control {
	padding-block: var(--itwt-space-s);
}

.itwt-submission__hint,
.itwt-submission__resume {
	max-width: var(--itwt-measure);
	margin-block: var(--itwt-space-l) 0;
	color: var(--itwt-ink-soft);
}

.itwt-submission-open {
	max-width: var(--itwt-measure);
	margin-block-end: var(--itwt-space-l);
	border: var(--itwt-rule-width) solid var(--itwt-rule);
	border-radius: var(--itwt-radius);
	background-color: var(--itwt-paper-raised);
	padding: var(--itwt-space-m);
}

.itwt-submission-open__title {
	margin: 0;
	font-size: var(--itwt-size-h3);
}

.itwt-submission-open__list {
	margin: var(--itwt-space-s) 0 0;
	padding: 0;
	list-style: none;
}

.itwt-submission-open__list li + li {
	margin-block-start: var(--itwt-space-xs);
}

.itwt-submission-open__state {
	color: var(--itwt-ink-soft);
	font-size: var(--itwt-size-small);
}

.itwt-submission-done__next {
	margin-block-start: var(--itwt-space-m);
}

.itwt-submission-done__next a {
	display: inline-flex;
	align-items: center;
	min-height: var(--itwt-tap-min);
}

/* ---------------------------------------------------------------------------
 * The two buttons
 *
 * Full width and stacked, so neither can be mistaken for the smaller of the two
 * and neither needs aiming at. 48px, above the 44px floor.
 * ------------------------------------------------------------------------ */

.itwt-submission__actions {
	display: flex;
	flex-direction: column;
	gap: var(--itwt-space-s);
	margin-block-start: var(--itwt-space-m);
}

.itwt-submission__actions .itwt-button--wide {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * The confirmation panel and the no-access notice
 * ------------------------------------------------------------------------ */

.itwt-submission-done,
.itwt-submission-notice {
	max-width: var(--itwt-measure);
	border: var(--itwt-rule-width-strong) solid var(--itwt-ink);
	border-radius: var(--itwt-radius);
	background-color: var(--itwt-paper-raised);
	padding: var(--itwt-space-l);
}

.itwt-submission-done__title {
	margin: 0;
	font-size: var(--itwt-size-h2);
}

.itwt-submission-done__recap {
	margin-block-start: var(--itwt-space-m);
	border-block-start: var(--itwt-rule-width) solid var(--itwt-rule);
	padding-block-start: var(--itwt-space-m);
}

/* ---------------------------------------------------------------------------
 * The cap request screen
 *
 * The same sheet, because it is the same form: one column, one task, labels above
 * controls, a message beside the field that needs it. Only two things differ, and
 * both are below.
 * ------------------------------------------------------------------------ */

/*
 * The decoy field.
 *
 * `display: none` would be the short way and the wrong one: a bot that parses the
 * stylesheet skips a hidden field, and so the decoy would catch nothing. Moving it
 * off-screen leaves it a real field in the document with a real label, so it looks
 * like the rest of the form to anything reading the markup.
 *
 * Nobody who uses the site meets it. It is out of the tab order (`tabindex="-1"`)
 * and out of the accessibility tree (`aria-hidden` on the wrapper), so a screen
 * reader never announces it and a keyboard never lands on it. That combination is
 * what makes the decoy honest: it costs a visitor nothing and a bot a request.
 *
 * Requirement 26.9.
 */
.itwt-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * The three sentences the request screen says before it asks anything: no payment
 * here, what happens with the address, and how many requests today can still take.
 * Boxed rather than loose, because a visitor who is about to type an address should
 * not be able to scroll past them by accident.
 */
.itwt-shop-intro {
	max-width: var(--itwt-measure);
	border-inline-start: var(--itwt-rule-width-strong) solid var(--itwt-ink);
	padding-inline-start: var(--itwt-space-m);
}

.itwt-shop-intro > * + * {
	margin-block-start: var(--itwt-space-xs);
}

/* The remaining count. Mono, like every other number on this site, and no colour:
 * it is information, not a warning. */
.itwt-shop-intro__remaining {
	font-family: var(--itwt-font-mono);
	font-size: var(--itwt-size-small);
}

/* ---------------------------------------------------------------------------
 * Cap request: product choice and a calmer form on a raised surface
 * ------------------------------------------------------------------------ */

.itwt-shop-head {
	max-width: 40rem;
	padding-block-end: var(--itwt-space-xl);
	border-block-end: var(--itwt-rule-width-strong) solid var(--itwt-brand);
}

.itwt-shop-head .itwt-page-title {
	margin-block-start: var(--itwt-space-xs);
}

.itwt-shop-head .itwt-lede {
	margin-block-start: var(--itwt-space-m);
	max-width: 42ch;
	color: var(--itwt-ink-soft);
}

.itwt-shop-intro {
	background-color: var(--itwt-paper-raised);
	border: var(--itwt-rule-width) solid var(--itwt-rule);
	border-radius: var(--itwt-radius);
	padding: var(--itwt-space-l);
}

.itwt-shop-form {
	max-width: 40rem;
	background-color: var(--itwt-paper-raised);
	border: var(--itwt-rule-width) solid var(--itwt-rule);
	border-radius: var(--itwt-radius);
	padding: var(--itwt-space-l);
}

.itwt-shop-picks,
.itwt-shop-qty {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.itwt-shop-picks__grid {
	display: flex;
	flex-direction: column;
	gap: var(--itwt-space-m);
}

@media (min-width: 36em) {
	.itwt-shop-picks__grid {
		flex-direction: row;
		align-items: stretch;
	}

	.itwt-shop-pick {
		flex: 1 1 0;
	}
}

.itwt-shop-pick {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var(--itwt-tap-min);
	background-color: var(--itwt-paper);
	border: var(--itwt-rule-width-strong) solid var(--itwt-rule);
	border-radius: var(--itwt-radius);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--itwt-motion) var(--itwt-ease),
	            box-shadow var(--itwt-motion) var(--itwt-ease);
}

.itwt-shop-pick:hover {
	border-color: var(--itwt-brand);
}

.itwt-shop-pick:has(:checked) {
	border-color: var(--itwt-brand);
	box-shadow: var(--itwt-shadow-m);
}

.itwt-shop-pick:focus-within {
	outline: var(--itwt-focus-width) solid var(--itwt-focus);
	outline-offset: 3px;
}

.itwt-shop-pick__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.itwt-shop-pick__frame {
	aspect-ratio: 1;
	background-color: var(--itwt-paper);
}

.itwt-shop-pick__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

.itwt-shop-pick__name {
	padding: var(--itwt-space-s) var(--itwt-space-xs);
	font-family: var(--itwt-font-head);
	font-weight: var(--itwt-weight-head);
	text-align: center;
}

.itwt-shop-qty__grid {
	display: flex;
	gap: var(--itwt-space-s);
}

.itwt-shop-qty__pick {
	position: relative;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border: var(--itwt-rule-width-strong) solid var(--itwt-rule);
	border-radius: var(--itwt-radius);
	background-color: var(--itwt-paper);
	cursor: pointer;
	font-family: var(--itwt-font-head);
	font-size: var(--itwt-size-h3);
	font-weight: var(--itwt-weight-head);
	transition: background-color var(--itwt-motion) var(--itwt-ease),
	            color var(--itwt-motion) var(--itwt-ease),
	            border-color var(--itwt-motion) var(--itwt-ease);
}

.itwt-shop-qty__pick:hover {
	border-color: var(--itwt-brand);
}

.itwt-shop-qty__pick:has(:checked) {
	background-color: var(--itwt-brand);
	border-color: var(--itwt-brand);
	color: var(--itwt-paper-raised);
}

.itwt-shop-qty__pick:focus-within {
	outline: var(--itwt-focus-width) solid var(--itwt-focus);
	outline-offset: 3px;
}

.itwt-shop-qty__pick input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

@media (max-width: 47.999em) {
	.itwt-shop-form,
	.itwt-shop-intro {
		padding: var(--itwt-space-m);
	}

	.itwt-shop-picks__grid {
		gap: var(--itwt-space-s);
	}
}