/* 2ranq Forms, the look of the form on the site.

   Everything that can be changed sits as a custom property. The Design tab only
   writes other values into those properties, so the live preview is free and the
   file stays one and small. The defaults are here, so a form with no settings at
   all still looks decent.

   The rule: this file stays under 10 KB. */

.ranq-form {
	/* the form */
	--ranq-form-bg: transparent;
	--ranq-form-bg-image: none;
	--ranq-form-padding: 0px;
	--ranq-form-border-width: 0px;
	--ranq-form-border-color: #e3e5ea;
	--ranq-form-radius: 0px;
	--ranq-form-shadow: none;
	--ranq-form-max-width: 640px;
	--ranq-field-gap: 16px;

	/* the fields */
	--ranq-field-bg: #fff;
	--ranq-field-text: #16181d;
	--ranq-field-placeholder: #8c92a0;
	--ranq-field-height: 44px;
	--ranq-field-padding: 12px;
	--ranq-field-font-size: 16px;
	--ranq-field-border-width: 1px;
	--ranq-field-border-color: #c9ccd4;
	--ranq-field-border-style: solid;
	--ranq-field-shape: var(--ranq-field-border-width);
	--ranq-field-radius: 6px;
	--ranq-field-focus-color: #5b4be0;
	--ranq-field-focus-ring: 3px;
	--ranq-field-error-color: #dc2626;

	/* the labels */
	--ranq-label-color: #16181d;
	--ranq-label-size: 15px;
	--ranq-label-weight: 600;
	--ranq-label-gap: 6px;
	--ranq-label-transform: none;
	--ranq-label-tracking: normal;
	--ranq-desc-color: #5c6270;
	--ranq-desc-size: 13px;
	--ranq-required-color: #dc2626;

	/* the button */
	--ranq-button-bg: #16181d;
	--ranq-button-text: #fff;
	--ranq-button-bg-hover: #2b2b2b;
	--ranq-button-text-hover: #fff;
	--ranq-button-border-width: 0px;
	--ranq-button-border-color: #16181d;
	--ranq-button-radius: 6px;
	--ranq-button-font-size: 16px;
	--ranq-button-padding-y: 12px;
	--ranq-button-padding-x: 24px;
	--ranq-button-width: auto;
	--ranq-button-align: start;

	/* the choices */
	/* The colour of text that lies on the form ground and not inside a field: the
	   text next to a checkbox, next to a radio, and the like. It follows the
	   field label by default. */
	--ranq-on-form: var(--ranq-label-color);

	--ranq-choice-accent: #5b4be0;
	--ranq-choice-size: 18px;
	--ranq-choice-gap: 8px;
	--ranq-choice-layout: grid;

	/* the file upload */
	--ranq-file-bg: transparent;
	--ranq-file-border-color: #c9ccd4;
	--ranq-file-height: 96px;

	/* the steps */
	--ranq-step-color: #c9ccd4;
	--ranq-step-current: #16181d;
	--ranq-step-done: #16181d;
	--ranq-step-text: #5c6270;

	display: grid;
	gap: var(--ranq-field-gap);
	box-sizing: border-box;
	max-width: var(--ranq-form-max-width);
	padding: var(--ranq-form-padding);
	border: var(--ranq-form-border-width) solid var(--ranq-form-border-color);
	border-radius: var(--ranq-form-radius);
	background-color: var(--ranq-form-bg);
	background-image: var(--ranq-form-bg-image);
	background-position: center;
	background-size: cover;
	box-shadow: var(--ranq-form-shadow);
}

.ranq-form *,
.ranq-form *::before,
.ranq-form *::after {
	box-sizing: inherit;
}

/* ---------- the field ---------- */

.ranq-form .ranq-field {
	display: grid;
	gap: var(--ranq-label-gap);
	min-width: 0;
}

.ranq-form .ranq-field__label {
	color: var(--ranq-label-color);
	font-size: var(--ranq-label-size);
	font-weight: var(--ranq-label-weight);
	letter-spacing: var(--ranq-label-tracking);
	line-height: 1.3;
	text-transform: var(--ranq-label-transform);
}

.ranq-form .ranq-field__required {
	color: var(--ranq-required-color);
}

.ranq-form .ranq-field__description {
	color: var(--ranq-desc-color);
	font-size: var(--ranq-desc-size);
	line-height: 1.4;
}

.ranq-form .ranq-field__input {
	width: 100%;
	min-height: var(--ranq-field-height);
	padding: 0 var(--ranq-field-padding);
	border-color: var(--ranq-field-border-color);
	border-style: var(--ranq-field-border-style);

	/* The thickness goes through "shape", so that "bottom line only" is one choice
	   rather than four separate settings. */
	border-width: var(--ranq-field-shape);
	border-radius: var(--ranq-field-radius);
	background: var(--ranq-field-bg);
	color: var(--ranq-field-text);
	font-family: inherit;
	font-size: var(--ranq-field-font-size);
	line-height: 1.4;
}

.ranq-form textarea.ranq-field__input {
	min-height: 0;
	padding: var(--ranq-field-padding);
	resize: vertical;
}

.ranq-form select.ranq-field__input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: calc(var(--ranq-field-padding) + 18px);

	/* The arrow is drawn with two gradients, not with an image. That way it takes
	   the text colour out of the custom property, works on any ground, and needs
	   no extra file. The dashboard style sheet repeats its arrow when the field
	   grows, this one does not. */
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ranq-field-text) 50%),
		linear-gradient(135deg, var(--ranq-field-text) 50%, transparent 50%);
	background-position:
		right calc(var(--ranq-field-padding) + 6px) center,
		right var(--ranq-field-padding) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.ranq-form .ranq-field__input::placeholder {
	color: var(--ranq-field-placeholder);
	opacity: 1;
}

.ranq-form .ranq-field__input:focus {
	border-color: var(--ranq-field-focus-color);
	outline: none;
	box-shadow: 0 0 0 var(--ranq-field-focus-ring) color-mix(in srgb, var(--ranq-field-focus-color) 28%, transparent);
}

/* A browser that does not know color-mix still has to show that a field is focused. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.ranq-form .ranq-field__input:focus {
		box-shadow: 0 0 0 var(--ranq-field-focus-ring) var(--ranq-field-focus-color);
	}
}

/* ---------- the error ---------- */

.ranq-form .ranq-field.has-error .ranq-field__input {
	border-color: var(--ranq-field-error-color);
}

.ranq-form .ranq-field__error {
	color: var(--ranq-field-error-color);
	font-size: var(--ranq-desc-size);
	line-height: 1.4;
}

/* ---------- the choices ---------- */

.ranq-form .ranq-field__group {
	display: grid;
	gap: var(--ranq-label-gap);
	margin: 0;
	padding: 0;
	border: 0;
}

/* A `legend` is NOT a grid item, so the grid gap does not act on it. That is why
   the label "Your name" sat glued to its field while the other labels had air
   around them. It is given its spacing as a margin. */
.ranq-form .ranq-field__group > .ranq-field__label {
	margin-bottom: var(--ranq-label-gap);
	padding: 0;
}

.ranq-form .ranq-field__choices {
	display: var(--ranq-choice-layout);
	flex-wrap: wrap;
	gap: var(--ranq-choice-gap);
}

/* 🔴 The text next to a checkbox and next to a radio lies on the FORM ground,
   not inside a field. So it follows the LABEL colour, not the colour of the text
   inside a field. It used to take the field text colour, so on a dark form it
   was dark on dark: measured at 1.2 to 1 on the Navy band section, which is
   invisible. The label is white, 14.5 to 1. */
.ranq-form .ranq-field__choice {
	display: flex;
	gap: .5rem;
	align-items: center;
	color: var(--ranq-on-form);
	font-size: var(--ranq-field-font-size);
	line-height: 1.3;
}

.ranq-form .ranq-field__choice input {
	width: var(--ranq-choice-size);
	height: var(--ranq-choice-size);
	margin: 0;
	accent-color: var(--ranq-choice-accent);
	flex: 0 0 auto;
}

/* ---------- the button ---------- */

.ranq-form .ranq-form__submit {
	justify-self: var(--ranq-button-align);
	width: var(--ranq-button-width);
	padding: var(--ranq-button-padding-y) var(--ranq-button-padding-x);
	border: var(--ranq-button-border-width) solid var(--ranq-button-border-color);
	border-radius: var(--ranq-button-radius);
	background: var(--ranq-button-bg);
	color: var(--ranq-button-text);
	font-family: inherit;
	font-size: var(--ranq-button-font-size);
	font-weight: var(--ranq-button-weight, 600);
	line-height: 1.2;
	box-shadow: var(--ranq-button-shadow, none);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.ranq-form .ranq-form__submit:hover,
.ranq-form .ranq-form__submit:focus-visible {
	background: var(--ranq-button-bg-hover);
	color: var(--ranq-button-text-hover);
}

.ranq-form .ranq-form__submit:focus-visible {
	outline: 2px solid var(--ranq-field-focus-color);
	outline-offset: 2px;
}

.ranq-form .ranq-form__submit[disabled] {
	opacity: .6;
	cursor: default;
}

/* Whoever turned motion off in their system does not get it from us either. */
@media (prefers-reduced-motion: reduce) {
	.ranq-form .ranq-form__submit {
		transition: none;
	}
}

/* ---------- the width of a field in a row ----------

   The form is a grid of six columns. An ordinary field takes all six, a half
   takes three, a third takes two. That way two fields fit into a row without a
   single extra box. */

.ranq-form {
	/* The form is its own yardstick. The image choice field shrinks when the form
	   is narrow, whatever the screen width, because the same form goes both
	   across a whole page and into a narrow side column. */
	container: ranq-form / inline-size;
	grid-template-columns: repeat(6, 1fr);
}

.ranq-form > * {
	grid-column: span 6;
}

.ranq-form .ranq-field--half {
	grid-column: span 3;
}

.ranq-form .ranq-field--third {
	grid-column: span 2;
}

@media (max-width: 600px) {
	.ranq-form .ranq-field--half,
	.ranq-form .ranq-field--third {
		grid-column: span 6;
	}
}

/* ---------- fields made of several parts: name, address ---------- */

.ranq-form .ranq-field__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ranq-choice-gap);
}

.ranq-form .ranq-field__columns--address {
	grid-template-columns: 1fr 1fr;
}

.ranq-form .ranq-field__column.is-wide {
	grid-column: 1 / -1;
}

.ranq-form .ranq-field__sublabel {
	display: block;
	margin-top: .25rem;
	color: var(--ranq-desc-color);
	font-size: var(--ranq-desc-size);
	line-height: 1.3;
}

@media (max-width: 480px) {
	.ranq-form .ranq-field__columns {
		grid-template-columns: 1fr;
	}
}

/* ---------- the star rating ----------

   The radio buttons are moved off the screen but stay in the document, so the
   rating is still picked with the keyboard and a screen reader reads it. The
   stars are plain text, with no image. */

.ranq-form .ranq-rating {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: .15rem;
}

.ranq-form .ranq-rating__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ranq-form .ranq-rating__star {
	color: #c9ccd4;
	font-size: calc(var(--ranq-field-font-size) * 1.7);
	line-height: 1;
	cursor: pointer;
	transition: color 100ms ease;
}

/* The star under the pointer and everything before it. Hence the reversed row
   above. */
.ranq-form .ranq-rating__star:hover,
.ranq-form .ranq-rating__star:hover ~ .ranq-rating__star,
.ranq-form .ranq-rating__input:checked ~ .ranq-rating__star,
.ranq-form .ranq-rating__input:focus-visible + .ranq-rating__star {
	color: var(--ranq-choice-accent);
}

.ranq-form .ranq-rating__input:focus-visible + .ranq-rating__star {
	outline: 2px solid var(--ranq-field-focus-color);
	outline-offset: 2px;
}

/* ---------- heading, text and divider ---------- */

.ranq-form .ranq-content__heading {
	margin: 0 0 .25rem;
	color: var(--ranq-label-color);
	font-size: calc(var(--ranq-label-size) * 1.25);
	font-weight: 700;
	line-height: 1.3;
}

.ranq-form .ranq-content__text {
	color: var(--ranq-desc-color);
	font-size: var(--ranq-field-font-size);
	line-height: 1.5;
	white-space: pre-line;
}

.ranq-form .ranq-divider__title {
	margin: 0 0 .35rem;
	color: var(--ranq-label-color);
	font-size: var(--ranq-label-size);
	font-weight: 700;
}

.ranq-form .ranq-divider__line {
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--ranq-field-border-color);
}

@media (prefers-reduced-motion: reduce) {
	.ranq-form .ranq-rating__star {
		transition: none;
	}
}

/* ---------- a field hidden by a condition ---------- */

.ranq-form .ranq-hidden {
	display: none;
}

/* ---------- the file upload ---------- */

.ranq-form .ranq-file {
	position: relative;
}

/* The real input is moved off the screen but STAYS in the document, so it is
   reached with the keyboard and a screen reader sees it. A click on the box
   below opens it, because that box is its label. */
.ranq-form .ranq-file__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.ranq-form .ranq-file__drop {
	display: grid;
	gap: 4px;
	place-content: center;
	min-height: var(--ranq-file-height);
	padding: var(--ranq-field-padding);
	border: var(--ranq-field-border-width) dashed var(--ranq-file-border-color);
	border-radius: var(--ranq-field-radius);
	background: var(--ranq-file-bg);
	color: var(--ranq-field-text);
	font-size: var(--ranq-field-font-size);
	text-align: center;
	cursor: pointer;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.ranq-form .ranq-file__drop:hover,
.ranq-form .ranq-file__input:focus-visible + .ranq-file__drop {
	border-color: var(--ranq-field-focus-color);
}

.ranq-form .ranq-file__input:focus-visible + .ranq-file__drop {
	outline: 2px solid var(--ranq-field-focus-color);
	outline-offset: 2px;
}

.ranq-form .ranq-file.is-over .ranq-file__drop {
	border-color: var(--ranq-field-focus-color);
	border-style: solid;
}

.ranq-form .ranq-file.has-file .ranq-file__drop {
	border-style: solid;
	border-color: var(--ranq-choice-accent);
}

.ranq-form .ranq-file__text {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
}

.ranq-form .ranq-file__hint {
	color: var(--ranq-desc-color);
	font-size: var(--ranq-desc-size);
}

/* ---------- the page break and the steps ---------- */

.ranq-form .ranq-field--pagebreak {
	gap: 4px;
}

.ranq-form .ranq-pagebreak__line {
	height: 0;
	margin: 0;
	border: 0;
	border-top: 2px dashed var(--ranq-field-border-color);
}

.ranq-form .ranq-pagebreak__title {
	margin: 0;
	color: var(--ranq-label-color);
	font-size: var(--ranq-label-size);
	font-weight: 700;
}

/* The progress bar. It shows only once the script has built the steps. */
.ranq-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
}

/* A step with no name gets its number HERE, out of the style sheet, and not out
   of the script. The script used to write it in as text, so in the look with
   circles the number showed twice, once in the circle and once under it. This
   way every look draws it its own way, and a step that HAS a name prints the
   name. */
.ranq-steps {
	counter-reset: ranq-korak;
}

.ranq-steps__step {
	counter-increment: ranq-korak;
	flex: 1 1 auto;
	padding: 6px 0 0;
	border-top: 3px solid var(--ranq-step-color);
	color: var(--ranq-step-text);
	font-size: var(--ranq-desc-size);
	font-weight: 600;
	transition: border-color 140ms ease, color 140ms ease;
}

.ranq-steps__step:empty::before {
	content: counter(ranq-korak);
}

.ranq-steps__step.is-done {
	border-top-color: var(--ranq-step-done);
}

.ranq-steps__step.is-current {
	border-top-color: var(--ranq-step-current);
	color: var(--ranq-label-color);
}

.ranq-steps__nav {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: var(--ranq-button-align);
}

.ranq-form .ranq-form__submit--ghost {
	background: transparent;
	color: var(--ranq-button-bg);
	border: var(--ranq-field-border-width) solid var(--ranq-button-bg);
}

.ranq-form .ranq-form__submit--ghost:hover,
.ranq-form .ranq-form__submit--ghost:focus-visible {
	background: var(--ranq-button-bg);
	color: var(--ranq-button-text);
}

@media (prefers-reduced-motion: reduce) {
	.ranq-form .ranq-file__drop,
	.ranq-steps__step {
		transition: none;
	}
}

/* ---------- hidden is hidden ----------

   Our style sheet sets `display: grid` on a field, which is a stronger selector
   than the rule the browser ties to the `hidden` attribute. Without this a field
   from another step stays on the screen even though it is marked as hidden. */

.ranq-form [hidden] {
	display: none !important;
}

/* ---------- the messages after sending ---------- */

.ranq-form .ranq-form__notice {
	padding: var(--ranq-field-padding);
	border-radius: var(--ranq-field-radius);
	font-size: var(--ranq-field-font-size);
	line-height: 1.5;
}

.ranq-form .ranq-form__notice p,
.ranq-form .ranq-form__notice ul {
	margin: 0;
}

.ranq-form .ranq-form__notice ul {
	padding-left: 1.2em;
	margin-top: .4em;
}

.ranq-form .ranq-form__notice--good {
	background: color-mix(in srgb, var(--ranq-choice-accent) 12%, transparent);
	color: var(--ranq-field-text);
	box-shadow: inset 3px 0 0 var(--ranq-choice-accent);
}

.ranq-form .ranq-form__notice--bad {
	background: color-mix(in srgb, var(--ranq-field-error-color) 10%, transparent);
	color: var(--ranq-field-text);
	box-shadow: inset 3px 0 0 var(--ranq-field-error-color);
}

/* A browser that does not know color-mix still has to tell a good message from a bad one. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.ranq-form .ranq-form__notice--good {
		background: #eef8f1;
	}

	.ranq-form .ranq-form__notice--bad {
		background: #fdecec;
	}
}

/* ---------- the bot trap ----------

   `display: none` is not used, because a robot that reads the style sheet
   recognises it. The field stays in the document but off the screen, takes no
   focus and a screen reader skips it because of `aria-hidden`. */

.ranq-form .ranq-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}



/* ---------- the image choice field ---------- */

/* Every measurement comes out of the form style, so the field looks like all the
   others. The defaults sit here, once. */
.ranq-form .ranq-field--imagechoice {
	--ranq-pick-photo: 100px;
	--ranq-pick-gap: 16px;
	--ranq-pick-pad: 14px 16px;
}

.ranq-form .ranq-pick {
	display: grid;
	gap: 0;
	border: var(--ranq-field-border-width) solid var(--ranq-field-border-color);
	border-radius: var(--ranq-field-radius);
	background: var(--ranq-field-bg);
	overflow: hidden;
}

/* The cards side by side. How many fit in a row is decided by the WIDTH OF THE
   CONTAINER, not by the screen, because the same field goes both across a whole
   page and into a narrow side column. */
.ranq-form .ranq-field--pick-grid .ranq-pick {
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: var(--ranq-pick-gap);
	border: 0;
	background: none;
	overflow: visible;
}

.ranq-form .ranq-pick__item {
	position: relative;
	min-width: 0;
}

.ranq-form .ranq-pick__item + .ranq-pick__item .ranq-pick__card {
	border-top: var(--ranq-field-border-width) solid var(--ranq-field-border-color);
}

.ranq-form .ranq-field--pick-grid .ranq-pick__item + .ranq-pick__item .ranq-pick__card {
	border-top: var(--ranq-field-border-width) solid var(--ranq-field-border-color);
}

/* The radio itself is not seen, but it EXISTS. That is why the field works
   without the script, can be stepped through with the keyboard and a screen
   reader says what is chosen. `opacity: 0` rather than `display: none`, because
   a hidden field takes no focus. */
.ranq-form .ranq-pick__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.ranq-form .ranq-pick__card {
	display: flex;
	gap: var(--ranq-pick-gap);
	align-items: center;
	padding: var(--ranq-pick-pad);
	cursor: pointer;
	color: var(--ranq-field-text);
	font-size: var(--ranq-field-font-size);
	line-height: 1.35;
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ranq-form .ranq-field--pick-grid .ranq-pick__card {
	flex-direction: column;
	align-items: flex-start;
	border: var(--ranq-field-border-width) solid var(--ranq-field-border-color);
	border-radius: var(--ranq-field-radius);
	background: var(--ranq-field-bg);
}

.ranq-form .ranq-pick__card:hover {
	background: color-mix( in srgb, var(--ranq-field-focus-color) 6%, transparent );
}

/* A chosen card shows it by its edge and by its ground, not only by colour,
   because colour alone falls away for a person who cannot tell it apart. */
.ranq-form .ranq-pick__input:checked + .ranq-pick__card {
	border-color: var(--ranq-field-focus-color);
	background: color-mix( in srgb, var(--ranq-field-focus-color) 10%, transparent );
	box-shadow: inset 0 0 0 1px var(--ranq-field-focus-color);
}

.ranq-form .ranq-pick__input:focus-visible + .ranq-pick__card {
	outline: 2px solid var(--ranq-field-focus-color);
	outline-offset: 2px;
}

.ranq-form .ranq-pick__photo {
	width: var(--ranq-pick-photo);
	height: var(--ranq-pick-photo);
	flex: 0 0 auto;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
}

.ranq-form .ranq-field--pick-grid .ranq-pick__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
}

.ranq-form .ranq-pick__photo--empty {
	display: block;
	background: color-mix( in srgb, var(--ranq-field-text) 8%, transparent );
}

.ranq-form .ranq-pick__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ranq-form .ranq-pick__name {
	font-weight: 600;
}

.ranq-form .ranq-pick__meta {
	color: var(--ranq-desc-color);
	font-size: .85em;
}

/* An option that is currently unavailable: it is seen, but cannot be picked. The
   grey image says the same thing as the transparency, to a person who does not
   notice the transparency. */
.ranq-form .ranq-pick__item--off .ranq-pick__card {
	cursor: not-allowed;
	opacity: .45;
}

.ranq-form .ranq-pick__item--off .ranq-pick__photo {
	filter: grayscale( 1 );
}

.ranq-form .ranq-pick__off {
	flex: 0 0 auto;
	padding: 5px 12px;
	border-radius: 20px;
	background: color-mix( in srgb, #e74c3c 12%, transparent );
	color: #e74c3c;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* A narrow container: the image shrinks, as on the original below 600. */
@container ranq-form ( max-width: 600px ) {

	.ranq-form .ranq-field--imagechoice {
		--ranq-pick-photo: 72px;
		--ranq-pick-gap: 12px;
		--ranq-pick-pad: 12px 12px;
	}

	.ranq-form .ranq-pick__off {
		padding: 4px 9px;
		font-size: 10px;
	}
}

/* ---------- the signature ---------- */

.ranq-form .ranq-sign {
	border: var(--ranq-field-border-width) solid var(--ranq-field-border-color);
	border-radius: var(--ranq-field-radius);
	background: var(--ranq-field-bg);
	overflow: hidden;
}

.ranq-form .ranq-sign__pad {
	display: block;
	width: 100%;
	cursor: crosshair;
	touch-action: none;
}

.ranq-form .ranq-sign__bar {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-top: 1px dashed var(--ranq-field-border-color);
}

.ranq-form .ranq-sign__hint {
	color: var(--ranq-desc-color);
	font-size: var(--ranq-desc-size);
}

.ranq-form .ranq-sign__clear {
	padding: 4px 10px;
	border: 1px solid var(--ranq-field-border-color);
	border-radius: 6px;
	background: none;
	color: var(--ranq-field-text);
	font-family: inherit;
	font-size: var(--ranq-desc-size);
	cursor: pointer;
}

.ranq-form .ranq-sign.is-missing {
	border-color: var(--ranq-field-error-color);
}

/* ---------- ranking ---------- */

.ranq-form .ranq-rank {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mesto;
}

.ranq-form .ranq-rank__item {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px 12px;
	border: var(--ranq-field-border-width) solid var(--ranq-field-border-color);
	border-radius: var(--ranq-field-radius);
	background: var(--ranq-field-bg);
	color: var(--ranq-field-text);
	font-size: var(--ranq-field-font-size);
	cursor: grab;
}

.ranq-form .ranq-rank__item.is-dragging {
	opacity: .5;
}

.ranq-form .ranq-rank__grip {
	color: var(--ranq-desc-color);
	letter-spacing: -2px;
}

.ranq-form .ranq-rank__name {
	flex: 1;
	min-width: 0;
}

.ranq-form .ranq-rank__input {
	width: 62px;
	padding: 4px 6px;
	border: 1px solid var(--ranq-field-border-color);
	border-radius: 6px;
	background: none;
	color: inherit;
	font-family: inherit;
	text-align: center;
}

/* ==================================================================
   PHONE: the dialling code and the per country check
   Here and only here goes the style of the phone field.
   ------------------------------------------------------------------ */

/* The country picker and the number sit in the same row. Both carry
   `.ranq-field__input`, so they take the height, the border, the corner radius
   and the colour a person picked in the Design tab. Only the layout is added
   here, nothing else, so the look of the field stays theirs. */
.ranq-form .ranq-phone {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

/* The picker must not take the whole width, because `.ranq-field__input` gives
   everything `width: 100%`. The width is measured so that the country mark and
   the dialling code are always visible, while the country name is read when the
   picker is opened. */
.ranq-form .ranq-phone__country {
	flex: 0 0 auto;
	width: 9.5em;
	max-width: 45%;
}

/* `min-width: 0` is required: without it a field in a row may not shrink below
   its own content, so the row breaks out of the form and the page gets sideways
   scrolling. */
.ranq-form .ranq-phone__number {
	flex: 1 1 auto;
	min-width: 0;
}

/* In a very narrow place, for example a half width field on a phone, the row
   wraps instead of squeezing into two unusable fields. */
@media (max-width: 380px) {

	.ranq-form .ranq-phone {
		flex-wrap: wrap;
	}

	.ranq-form .ranq-phone__country {
		width: 100%;
		max-width: none;
	}
}
/* == END: PHONE == */

/* ==================================================================
   PAGE BREAK: the step bar
   Here and only here goes the style of the page break and the step bar.

   FIVE READY MADE LOOKS, each written on its own:

     line     a line above the step name   the default, and what used to be
     bar      one bar that fills up
     numbers  numbers in circles
     tabs     tabs with names
     dots     dots

   How a look reaches the bar at all. The bar is built by `assets/js/form.js`,
   which always gives it the same class names, and the marker of the form itself
   is printed by the shortcode. Neither is a place where the chosen look can be
   written. So the name of the look is carried by the PAGE BREAK FIELD, as
   `data-step-look`, and the style sheet reaches for it through `:has()` on the
   form. The break is the only part that knows the form has steps at all, so it
   is the only one that marker belongs on.

   The same holds for the preview in the builder: `assets/js/builder.js` prints
   the same marker in the same place, so the dashboard and the site draw by the
   SAME rules. One source, two places, no second copy of the style.

   Without JavaScript there is NO bar: every step is seen at once and the form is
   sent as a plain one. So the choice of bar look can never be the reason a form
   does not work. The same holds for a browser that does not know `:has()`: the
   `line` look stays, that is, what the bar did before the choice existed.
   ------------------------------------------------------------------ */

.ranq-form {

	/* The colour of the number and the name that lie ON a filled step. It sits here,
	   next to the bar it alone belongs to. It is picked because the fill colour
	   is picked too: on a dark bar white reads, on a yellow or lime one only
	   black does. */
	--ranq-step-on: #ffffff;
}

/* ---------- 1. line: a line above the name ----------

   It has no rules of its own and it will not get any. That is the look the bar
   has had from the start, written above next to `.ranq-steps`. Only a note
   stands here, so nobody goes looking. */

/* ---------- 2. bar: one bar that fills up ----------

   The steps join into ONE bar, with no gaps, so the filled part reads as
   progress and not as five separate dashes. The step name sits under its part of
   the bar, small, because the bar carries the main meaning. */

.ranq-form:has([data-ranq-pagebreak][data-step-look="bar"]) .ranq-steps {
	gap: 0;
	align-items: start;
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="bar"]) .ranq-steps__step {
	position: relative;
	flex: 1 1 0;
	padding: 15px 10px 0 0;
	border-top: 0;
	color: var(--ranq-step-text);
	font-size: var(--ranq-desc-size);
	font-weight: 500;
	line-height: 1.3;
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="bar"]) .ranq-steps__step::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 8px;
	background: var(--ranq-step-color);
	transition: background-color 140ms ease;
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="bar"]) .ranq-steps__step:first-child::before {
	border-radius: 999px 0 0 999px;
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="bar"]) .ranq-steps__step:last-child::before {
	border-radius: 0 999px 999px 0;
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="bar"]) .ranq-steps__step.is-done::before {
	background: var(--ranq-step-done);
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="bar"]) .ranq-steps__step.is-current::before {
	background: var(--ranq-step-current);
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="bar"]) .ranq-steps__step.is-current {
	color: var(--ranq-label-color);
	font-weight: 600;
}

/* ---------- 3. numbers: numbers in circles ----------

   The number is drawn by the STYLE SHEET, with a counter, not by the script.
   That way a circle has its number even when the step carries a name, which is
   the whole point of this look: the order and the name at once. The line between
   the circles runs from the middle of the previous circle to the middle of this
   one, so it holds even when the names are of different lengths. */

.ranq-form:has([data-ranq-pagebreak][data-step-look="numbers"]) .ranq-steps {
	counter-reset: ranq-step;
	gap: 0;
	align-items: start;
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="numbers"]) .ranq-steps__step {
	position: relative;
	flex: 1 1 0;
	counter-increment: ranq-step;
	padding: 34px 6px 0;
	border-top: 0;
	color: var(--ranq-step-text);
	font-size: var(--ranq-desc-size);
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
}

/* The line to the previous circle. */
.ranq-form:has([data-ranq-pagebreak][data-step-look="numbers"]) .ranq-steps__step::before {
	content: "";
	position: absolute;
	top: 12px;
	right: 50%;
	left: -50%;
	height: 2px;
	background: var(--ranq-step-color);
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="numbers"]) .ranq-steps__step:first-child::before {
	display: none;
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="numbers"]) .ranq-steps__step.is-done::before,
.ranq-form:has([data-ranq-pagebreak][data-step-look="numbers"]) .ranq-steps__step.is-current::before {
	background: var(--ranq-step-done);
}

/* The circle with the number itself. */
.ranq-form:has([data-ranq-pagebreak][data-step-look="numbers"]) .ranq-steps__step::after {
	content: counter(ranq-step);
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	display: flex;
	width: 26px;
	height: 26px;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--ranq-step-color);
	border-radius: 50%;
	background: var(--ranq-field-bg);
	color: var(--ranq-step-text);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	transform: translateX(-50%);
	transition: background-color 140ms ease, border-color 140ms ease;
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="numbers"]) .ranq-steps__step.is-done::after {
	border-color: var(--ranq-step-done);
	background: var(--ranq-step-done);
	color: var(--ranq-step-on);
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="numbers"]) .ranq-steps__step.is-current::after {
	border-color: var(--ranq-step-current);
	background: var(--ranq-step-current);
	color: var(--ranq-step-on);
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="numbers"]) .ranq-steps__step.is-current {
	color: var(--ranq-label-color);
	font-weight: 600;
}

/* ---------- 4. tabs: tabs with names ----------

   The step name is the main thing here, so it gets a box of its own. A step not
   yet reached is only an outline, the current one is filled. The corner radius
   is taken from the field, so a tab and the field below it are the same shape. */

.ranq-form:has([data-ranq-pagebreak][data-step-look="tabs"]) .ranq-steps {
	gap: 6px;
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="tabs"]) .ranq-steps__step {
	flex: 1 1 auto;
	padding: 8px 12px;
	border: 1px solid var(--ranq-step-color);
	border-radius: var(--ranq-field-radius);
	background: transparent;
	color: var(--ranq-step-text);
	font-size: var(--ranq-desc-size);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="tabs"]) .ranq-steps__step.is-done {
	border-color: var(--ranq-step-done);
	color: var(--ranq-step-done);
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="tabs"]) .ranq-steps__step.is-current {
	border-color: var(--ranq-step-current);
	background: var(--ranq-step-current);
	color: var(--ranq-step-on);
}

/* ---------- 5. dots: dots ----------

   The quietest a bar can be: how many steps there are and which one you are on.
   The step name is moved off the screen but STAYS in the page, so a screen
   reader still says it. That is why it is moved by indenting, not with
   `display: none`. */

.ranq-form:has([data-ranq-pagebreak][data-step-look="dots"]) .ranq-steps {
	gap: 10px;
	justify-content: center;
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="dots"]) .ranq-steps__step {
	overflow: hidden;
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ranq-step-color);
	text-indent: 110%;
	white-space: nowrap;
	transition: background-color 140ms ease, transform 140ms ease;
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="dots"]) .ranq-steps__step.is-done {
	background: var(--ranq-step-done);
}

.ranq-form:has([data-ranq-pagebreak][data-step-look="dots"]) .ranq-steps__step.is-current {
	background: var(--ranq-step-current);
	transform: scale(1.6);
}

/* ---------- a narrow screen ----------

   Below 480 pixels five names side by side are no longer names but smudges. The
   bar is squeezed then: the circles and the tabs stay, and with the circles the
   name is moved off the screen but stays in the page, because a screen reader
   still needs it. */

@media (max-width: 480px) {

	.ranq-form:has([data-ranq-pagebreak][data-step-look="numbers"]) .ranq-steps__step {
		overflow: hidden;
		height: 26px;
		padding: 0;
		text-indent: 110%;
		white-space: nowrap;
	}

	.ranq-form:has([data-ranq-pagebreak][data-step-look="tabs"]) .ranq-steps__step {
		padding: 7px 6px;
		font-size: calc(var(--ranq-desc-size) - 1px);
	}
}

@media (prefers-reduced-motion: reduce) {

	.ranq-form .ranq-steps__step,
	.ranq-form .ranq-steps__step::before,
	.ranq-form .ranq-steps__step::after {
		transition: none;
	}
}
/* == END: PAGE BREAK == */