/* 2ranq Forms, the dashboard.

   Loaded only on our own screens. Never on the page list, never on the home
   screen.

   ==================================================================
   THE SYSTEM. This is the ONLY list of tokens in the plugin and all
   nine screens spend from it. If some screen needs something that is
   not here, it is added HERE and then used. A rule of its own per
   screen is not written.

   One rule holds the whole plugin together: in the body of the builder
   WHITE IS THE FORM AND NOTHING ELSE, and colour exists only where
   something really means something. Everything else is three depths of
   grey and one line.

   The accent rule: ink is what YOU do, the Live colour is what is
   chosen or what has just changed on the form. That is why the main
   button is not purple, so that purple always means the same thing.
   ================================================================== */

/* The tokens sit on the body of the builder page as well, because the ground
   and the edges are drawn on WordPress's own wrappers, which are ABOVE our
   class. There used to be a `var(--ranq-page)` there with no definition above
   it, so the rule quietly fell away and the ground stayed WordPress's. */
body.ranq-fullscreen,
.ranq-admin,
.ranq-builder-wrap {

	/* ---- the typeface. The system one, never an outside font ---- */
	--ranq-font: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
	/* the monospaced face carries what is a VALUE rather than a sentence: a
	   shortcode, a hex colour, the numbers on the tabs, a field key */
	--ranq-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

	/* ---- the letters ---- */
	--ranq-ink: #14171c;       /* the main text and the main action */
	--ranq-ink-2: #3a414d;     /* panel headings, field labels, a group name */
	--ranq-ink-soft: #3a414d;  /* the old name for the same role, existing usage */
	--ranq-muted: #626b7b;     /* helper text, always next to something, never on its own */
	--ranq-faint: #8b94a3;     /* marks and icons, NEVER text that gets read */

	/* ---- the surfaces, three depths and nothing more ---- */
	--ranq-paper: #ffffff;     /* the head of the screen and the form, the only white in the body */
	--ranq-panel: #eef1f6;     /* the body of the tool: the left and right columns, the tables */
	--ranq-desk: #d7dee8;      /* the work surface, what the paper lies on */
	--ranq-inset: #e6eaf0;     /* a field that is not touched: unavailable, inherited */
	/* the old names, the same roles, so existing rules do not break */
	--ranq-bg: var(--ranq-paper);
	--ranq-page: var(--ranq-panel);
	--ranq-sunken: var(--ranq-panel);

	/* ---- the lines ---- */
	--ranq-line: #cfd6e0;      /* the border between two parts of the desk */
	--ranq-line-soft: #e2e7ee; /* a line inside one part, between rows */
	--ranq-line-field: #c3cbd8;/* the edge of a field, it has to read as an edge */

	/* ---- colour, for state only ---- */
	--ranq-live: #4f46e5;      /* chosen, focused, a change that landed on the form */
	--ranq-live-soft: #ecebfc; /* the ground of the chosen item */
	--ranq-ok: #15803d;        /* saved, sent, the link works */
	--ranq-ok-soft: #eef8f1;   /* the ground of a success message */
	--ranq-warn: #b45309;      /* unsaved, a setting is missing */
	--ranq-danger: #b3261e;    /* an error in a field and a deletion that does not come back */
	--ranq-danger-soft: #fdf5f4;/* the ground of a field in error */
	--ranq-danger-line: #e3bdb9;/* the edge of a dangerous button while it rests */
	/* the old accent names, the same role as Live */
	--ranq-accent: var(--ranq-live);
	--ranq-accent-press: #4338ca;
	--ranq-accent-soft: var(--ranq-live-soft);
	--ranq-good: var(--ranq-ok);

	/* ---- spacing, one ladder, without exceptions ----
	   1 a mark and its label, 2 buttons in a row, 3 small boxes and rows
	   inside a panel, 4 the inner spacing of a panel, 5 the tabs and the work
	   surface, 6 the inner spacing of the paper, 7 the space between parts of
	   the page */
	--ranq-1: 4px;
	--ranq-2: 8px;
	--ranq-3: 12px;
	--ranq-4: 16px;
	--ranq-5: 24px;
	--ranq-6: 32px;
	--ranq-7: 40px;

	/* ---- shape ---- */
	--ranq-r-sm: 4px;          /* badges, icon squares, small insets */
	--ranq-r: 6px;             /* buttons, fields, small boxes */
	--ranq-r-lg: 10px;         /* the paper and the large blocks */
	--ranq-control: 36px;      /* the smallest height of anything that can be clicked */

	/* ---- the frame measurements, they hold the builder grid ---- */
	--ranq-adminbar: 32px;     /* the black WordPress bar */
	--ranq-head: 64px;         /* the head of the builder */
	--ranq-tabs: 44px;         /* the row of tabs */

	/* ---- shadows, only on what floats or what is an object ---- */
	--ranq-lift: 0 1px 2px rgba(16, 20, 30, .08), 0 12px 28px rgba(16, 20, 30, .14);
	--ranq-pop: 0 8px 24px rgba(16, 20, 30, .16);
	/* the old names, the soft card shadows outside the builder */
	--ranq-shadow-1: 0 1px 2px rgba(20, 22, 26, .04), 0 1px 3px rgba(20, 22, 26, .06);
	--ranq-shadow-2: 0 2px 4px rgba(20, 22, 26, .04), 0 6px 16px rgba(20, 22, 26, .08);
	--ranq-shadow-3: var(--ranq-pop);

	/* ---- the transition, never longer than 200 milliseconds ---- */
	--ranq-t: 140ms cubic-bezier(.2, 0, .2, 1);
}

/* The builder runs edge to edge. The head, the row of tabs and the three
   columns are ONE body, so they must not float in WordPress's padding: the head
   then stops being the edge of the screen and everything looks like a sketch on
   grey. */
body.ranq-fullscreen #wpcontent,
body.ranq-fullscreen #wpbody-content {
	padding: 0;
	background: var(--ranq-panel);
}

body.ranq-fullscreen .ranq-builder-wrap {
	margin: 0;
	max-width: none;
}

/* WordPress's own notices sit above the head and they do need the padding. */
body.ranq-fullscreen #wpbody-content > .notice,
body.ranq-fullscreen #wpbody-content > .updated,
body.ranq-fullscreen #wpbody-content > .error {
	margin: var(--ranq-3) var(--ranq-4);
}

body.ranq-fullscreen #wpfooter {
	display: none;
}

.ranq-admin {
	color: var(--ranq-ink);
}

.ranq-admin *:focus-visible {
	outline: 2px solid var(--ranq-accent);
	outline-offset: 2px;
}

/* ---------- the page header ---------- */

.ranq-page__head {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin: 24px 0 8px;
}

.ranq-page__title {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.ranq-page__lead {
	max-width: 46rem;
	margin: 0 0 24px;
	color: var(--ranq-muted);
	font-size: 14px;
	line-height: 1.55;
}

.ranq-note {
	margin: 16px 0;
	padding: 12px 16px;
	border-radius: var(--ranq-r);
	background: var(--ranq-accent-soft);
	box-shadow: inset 3px 0 0 var(--ranq-accent);
	font-size: 14px;
}

.ranq-note--good {
	background: #eef8f1;
	box-shadow: inset 3px 0 0 var(--ranq-good);
}

/* ---------- the empty state ---------- */

.ranq-empty {
	max-width: 34rem;
	margin: 64px auto;
	padding: 48px 32px;
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-bg);
	box-shadow: var(--ranq-shadow-2);
	text-align: center;
}

.ranq-empty h2 {
	margin: 0 0 8px;
	font-size: 22px;
	letter-spacing: -.01em;
}

.ranq-empty p {
	margin: 0 0 24px;
	color: var(--ranq-muted);
	line-height: 1.55;
}

/* ---------- the table ---------- */

.ranq-admin .ranq-table {
	margin-top: 16px;
	border: 0;
	border-radius: var(--ranq-r);
	background: var(--ranq-bg);
	box-shadow: var(--ranq-shadow-1);
	overflow: hidden;
}

.ranq-admin .ranq-table thead th {
	padding: 14px 16px;
	border-bottom: 1px solid var(--ranq-line);
	background: var(--ranq-sunken);
	color: var(--ranq-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ranq-admin .ranq-table td {
	padding: 16px;
	border-bottom: 1px solid var(--ranq-line-soft);
	vertical-align: middle;
}

.ranq-admin .ranq-table tbody tr:last-child td {
	border-bottom: 0;
}

.ranq-admin .ranq-table tbody tr:hover {
	background: var(--ranq-sunken);
}

.ranq-admin .ranq-table code {
	padding: 4px 8px;
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-inset);
	color: var(--ranq-ink-2);
	font-size: 12px;
}

/* ==================================================================
   THE FRAME OF THE BUILDER

   The head, the row of tabs and the three columns are ONE body, not
   three cards floating on grey. The head runs edge to edge and says
   which form is open, how it gets placed and whether it is saved. The
   columns touch and are parted only by a line, and each has its own
   scrolling and its own sticky head, so neither pushes the other.
   ================================================================== */

/* The dashboard has NO global `border-box`, so every measurement out of the
   system would be a lie: a head of 64 would become 89, and a column of 248
   would become 281. The frame measurements are counted edge to edge, so the
   frame has to be `border-box`.
   🔴 `.ranq-builder__col *` is deliberately not targeted: inside the column
   sits the real form, which inherits its `box-sizing` from `form.css` and stays
   the user's. */
.ranq-builder__bar,
.ranq-builder__bar > *,
.ranq-builder__tabs,
.ranq-builder__tablist,
.ranq-tab,
.ranq-builder__cols,
.ranq-builder__col,
.ranq-builder__heading,
.ranq-canvas__note,
.ranq-canvas__paper {
	box-sizing: border-box;
}

/* ---------- the head ---------- */

.ranq-builder__bar {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--ranq-3);
	align-items: center;
	min-height: var(--ranq-head);
	margin: 0;
	padding: var(--ranq-3) var(--ranq-4);
	border-radius: 0;
	border-bottom: 1px solid var(--ranq-line);
	background: var(--ranq-paper);
	box-shadow: none;
}

.ranq-builder__back {
	display: inline-flex;
	gap: var(--ranq-2);
	align-items: center;
	height: var(--ranq-control);
	flex: 0 0 auto;
	padding: 0 var(--ranq-3);
	border-radius: var(--ranq-r);
	color: var(--ranq-muted);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ranq-t), color var(--ranq-t);
}

.ranq-builder__back::before {
	content: "\2190";
}

.ranq-builder__back:hover {
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
}

/* The form name is a HEADING, not a white box. The box appears only once it is
   touched.
   🔴 WordPress targets `input[type=text]`, which is stronger than one class of
   ours, so the input name has to be in the selector. This has already cost us
   time twice. */
.ranq-builder__bar input.ranq-builder__title {
	min-width: 0;
	max-width: 30ch;
	flex: 1 1 auto;
	height: var(--ranq-control);
	margin: 0;
	padding: 0 var(--ranq-2);
	border: 1px solid transparent;
	border-radius: var(--ranq-r);
	background: transparent;
	box-shadow: none;
	color: var(--ranq-ink);
	font: 600 18px/1.2 var(--ranq-font);
	letter-spacing: -.01em;
	transition: background-color var(--ranq-t), border-color var(--ranq-t);
}

.ranq-builder__bar input.ranq-builder__title:hover {
	border-color: var(--ranq-line);
	background: var(--ranq-panel);
}

.ranq-builder__bar input.ranq-builder__title:focus {
	border-color: var(--ranq-line);
	background: var(--ranq-paper);
	outline: 2px solid var(--ranq-live);
	outline-offset: 2px;
	box-shadow: none;
}

/* The shortcode is a BUTTON that copies, because it gets copied and not read. */
.ranq-builder__bar button.ranq-builder__shortcode {
	display: inline-flex;
	gap: var(--ranq-2);
	align-items: center;
	height: var(--ranq-control);
	flex: 0 0 auto;
	margin-left: auto;
	padding: 0 var(--ranq-2) 0 var(--ranq-3);
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r);
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
	font: 12px/1 var(--ranq-mono);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ranq-t), border-color var(--ranq-t);
}

.ranq-builder__bar button.ranq-builder__shortcode:hover {
	border-color: var(--ranq-line-field);
	background: var(--ranq-inset);
}

.ranq-builder__shortcode-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-paper);
	color: var(--ranq-faint);
	box-shadow: inset 0 0 0 1px var(--ranq-line-soft);
}

/* Copied: the confirmation sits on the button itself, with no popup. */
.ranq-builder__bar button.ranq-builder__shortcode.is-copied {
	border-color: var(--ranq-ok);
	background: var(--ranq-ok-soft);
	color: var(--ranq-ok);
}

.ranq-builder__bar button.ranq-builder__shortcode.is-copied .ranq-builder__shortcode-icon {
	color: var(--ranq-ok);
}

.ranq-builder__status {
	display: inline-flex;
	gap: var(--ranq-2);
	align-items: center;
	flex: 0 0 auto;
	color: var(--ranq-muted);
	font-size: 12px;
	white-space: nowrap;
}

/* The state dot: unsaved is a warning, saved is a success, saving in progress
   is Live. An empty status has no dot. */
.ranq-builder__status:not(:empty)::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--ranq-warn);
}

.ranq-builder__status.is-saved::before {
	background: var(--ranq-ok);
}

.ranq-builder__status.is-saving::before {
	background: var(--ranq-live);
}

/* The main button is INK, not colour. Purple on this screen means only "chosen
   or just changed", so it must not also be a button. */
.ranq-builder__bar .button.ranq-builder__save,
.ranq-builder__bar .button-primary.ranq-builder__save {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ranq-control);
	min-height: var(--ranq-control);
	flex: 0 0 auto;
	padding: 0 var(--ranq-4);
	border: 1px solid transparent;
	border-radius: var(--ranq-r);
	background: var(--ranq-ink);
	color: #fff;
	font: 600 13px/1 var(--ranq-font);
	box-shadow: none;
	text-shadow: none;
	transition: background-color var(--ranq-t);
}

.ranq-builder__bar .button.ranq-builder__save:hover,
.ranq-builder__bar .button.ranq-builder__save:focus {
	background: #000;
	color: #fff;
	box-shadow: none;
}

/* ---------- the row of tabs ---------- */

.ranq-builder__tabs {
	display: flex;
	gap: var(--ranq-4);
	align-items: center;
	justify-content: space-between;
	min-width: 0;
	min-height: var(--ranq-tabs);
	margin: 0;
	padding: 0 var(--ranq-4);
	border-radius: 0;
	border-bottom: 1px solid var(--ranq-line);
	background: var(--ranq-paper);
}

.ranq-builder__tablist {
	display: flex;
	gap: var(--ranq-1);
	align-items: center;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.ranq-builder__tablist::-webkit-scrollbar {
	display: none;
}

.ranq-tab {
	position: relative;
	display: inline-flex;
	gap: var(--ranq-2);
	align-items: center;
	height: var(--ranq-tabs);
	padding: 0 var(--ranq-3);
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ranq-muted);
	font: 500 13px/1 var(--ranq-font);
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--ranq-t);
}

/* The tab you are standing on carries a rule at the bottom of the row, because
   the rule belongs to the row. A pill would be one more card that floats, and
   nothing floats here. */
.ranq-tab::after {
	content: "";
	position: absolute;
	right: var(--ranq-3);
	bottom: 0;
	left: var(--ranq-3);
	height: 2px;
	background: transparent;
}

.ranq-tab:hover {
	color: var(--ranq-ink-2);
}

.ranq-tab:hover::after {
	background: var(--ranq-line);
}

.ranq-tab.is-active {
	background: none;
	color: var(--ranq-ink);
	font-weight: 700;
	box-shadow: none;
}

.ranq-tab.is-active::after {
	background: var(--ranq-ink);
}

/* The number on a tab is a value, so it carries the monospaced face. The colour
   is helper text and not faint: faint falls to about 3 to 1 on the eye, and the
   lower limit for text is 4.5. */
.ranq-tab__count {
	padding: 2px 6px;
	border-radius: 999px;
	background: var(--ranq-panel);
	color: var(--ranq-muted);
	font: 11px/1 var(--ranq-mono);
}

.ranq-tab.is-active .ranq-tab__count {
	background: var(--ranq-ink);
	color: #fff;
}

/* ---------- three columns, one body ---------- */

.ranq-builder__cols {
	display: flex;
	align-items: stretch;
	gap: 0;
	/* Two pixels are two lines: the bottom edge of the head and the bottom edge
	   of the row of tabs. Without them the page gets 2 pixels of scrolling that
	   nobody can use. */
	height: calc(100vh - var(--ranq-adminbar) - var(--ranq-head) - var(--ranq-tabs) - 2px);
	min-height: 560px;
}

.ranq-builder__col {
	display: block;
	min-width: 0;
	padding: 0 var(--ranq-4) var(--ranq-6);
	border-radius: 0;
	background: var(--ranq-panel);
	box-shadow: none;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ranq-builder__palette {
	flex: 0 0 248px;
	border-right: 1px solid var(--ranq-line);
}

.ranq-builder__settings {
	flex: 0 0 328px;
	border-left: 1px solid var(--ranq-line);
}

/* The middle is the WORK SURFACE, what the paper lies on. That is why it is the
   only one that is not a panel, and why the form on it is the only white
   object. */
.ranq-builder__canvas {
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--ranq-5) var(--ranq-5) var(--ranq-7);
	background: var(--ranq-desk);
	box-shadow: none;
}

/* In the Design tab there is no field list. The whole screen is given over to
   the look. */
.ranq-builder__cols.is-design .ranq-builder__settings {
	flex: 0 0 384px;
}

/* The head of a column stays put while the column scrolls, so you always know
   what you are looking at. The negative side spacing is there so the ground of
   the head covers the whole width of the column and not only its content. */
.ranq-builder__heading {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	/* a minimum height, not a set one: otherwise a heading over two lines runs
	   out of its box and lies across the first row of the list */
	min-height: 40px;
	margin: 0 calc(var(--ranq-4) * -1) var(--ranq-3);
	padding: var(--ranq-2) var(--ranq-4);
	border-bottom: 1px solid var(--ranq-line-soft);
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ---------- the frame on narrower screens ---------- */

/* A narrow computer: all three columns stay, only the side rails are squeezed,
   because the preview of the form matters more here than the width of the
   list. */
@media (max-width: 1440px) {
	.ranq-builder__palette {
		flex: 0 0 216px;
	}

	.ranq-builder__settings {
		flex: 0 0 296px;
	}

	.ranq-builder__canvas {
		padding: var(--ranq-4) var(--ranq-4) var(--ranq-6);
	}
}

@media (max-width: 900px) {
	.ranq-builder__bar {
		flex-wrap: wrap;
		row-gap: var(--ranq-2);
	}

	.ranq-builder__canvas {
		padding: var(--ranq-4);
	}

	.ranq-canvas__paper {
		padding: var(--ranq-5);
	}
}

@media (max-width: 560px) {
	.ranq-builder__bar,
	.ranq-builder__tabs {
		padding-left: var(--ranq-3);
		padding-right: var(--ranq-3);
	}

	.ranq-builder__bar input.ranq-builder__title {
		max-width: 100%;
		flex: 1 1 100%;
	}

	.ranq-builder__bar button.ranq-builder__shortcode {
		order: 3;
		width: 100%;
		margin-left: 0;
		justify-content: space-between;
	}

	/* The number on a tab comes off, because with it the fifth tab falls out of
	   sight and nobody sees that it exists. The name of the tab matters more
	   than the number. */
	.ranq-tab__count {
		display: none;
	}

	.ranq-tab {
		padding: 0 var(--ranq-2);
	}

	.ranq-tab::after {
		right: var(--ranq-2);
		left: var(--ranq-2);
	}

	.ranq-builder__col {
		padding-left: var(--ranq-3);
		padding-right: var(--ranq-3);
	}

	.ranq-builder__heading {
		margin-left: calc(var(--ranq-3) * -1);
		margin-right: calc(var(--ranq-3) * -1);
		padding-left: var(--ranq-3);
		padding-right: var(--ranq-3);
	}

	.ranq-canvas__paper {
		padding: var(--ranq-4);
	}
}

/* ---------- on the left, the fields on offer ---------- */

/* A group name is text that gets read, so it must not be faint: faint on the
   panel ground falls to about 3 to 1, and the lower limit for text is 4.5 to
   1. */
.ranq-palette__group {
	margin: var(--ranq-4) 0 var(--ranq-2);
	color: var(--ranq-ink-2);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ranq-palette__group:first-child {
	margin-top: 0;
}

.ranq-palette__list {
	display: grid;
	gap: 4px;
}

.ranq-palette__item {
	display: flex;
	gap: 10px;
	align-items: center;
	width: 100%;
	min-height: 40px;
	padding: 8px 10px;
	border: 0;
	border-radius: var(--ranq-r-sm);
	background: transparent;
	color: var(--ranq-ink-2);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	cursor: grab;
	transition: background-color var(--ranq-t), color var(--ranq-t), transform var(--ranq-t);
}

.ranq-palette__item:hover,
.ranq-palette__item:focus-visible {
	background: var(--ranq-accent-soft);
	color: var(--ranq-accent);
	outline: none;
	transform: translateX(2px);
}

.ranq-palette__item:active {
	cursor: grabbing;
	transform: scale(.98);
}

/* An icon in a small square, so the list is not a heap of text. */
.ranq-palette__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-inset);
	color: var(--ranq-muted);
	font-size: 16px;
	transition: background-color var(--ranq-t), color var(--ranq-t);
}

.ranq-palette__item:hover .ranq-palette__icon,
.ranq-palette__item:focus-visible .ranq-palette__icon {
	background: var(--ranq-bg);
	color: var(--ranq-accent);
}

/* ---------- in the middle, the real form ---------- */

/* The mark that the preview is live. Not a band pasted over it, but one line
   above the paper, in the Live colour, the same width as the paper. */
.ranq-canvas__note {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	max-width: 680px;
	margin: 0 auto var(--ranq-3);
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--ranq-live);
	font: 11px/1.4 var(--ranq-mono);
	font-weight: 400;
	letter-spacing: .04em;
}

.ranq-canvas__note::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--ranq-live);
}

.ranq-canvas__empty {
	margin: 0;
	padding: 56px var(--ranq-5);
	border: 2px dashed var(--ranq-line-field);
	border-radius: var(--ranq-r);
	color: var(--ranq-muted);
	font-size: 14px;
	text-align: center;
}

/* THE PAPER. The shadow, the width and the centring are ours. The ground, the
   border and the corner radius of the form itself are the user's choice out of
   the Design tab, so the paper carries them instead of the form: if the user
   picks a transparent form, the shadow still has something to stand on, and the
   preview stays truthful. */
.ranq-canvas__paper {
	/* The dashboard has NO global `border-box`, so without this the paper would
	   be 680 wide plus 64 of padding, that is 744, and the measurement out of
	   the system would not hold. */
	box-sizing: border-box;
	max-width: 680px;
	margin: 0 auto;
	padding: var(--ranq-6);
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-paper);
	box-shadow: var(--ranq-lift);
}

/* 🔴 The form is NOT touched. There used to be `background: #fff` and
   `padding: 32px` right here, which overwrote the user's choice out of the
   Design tab, so the preview was not truthful. That now sits on the paper, and
   the form is a bare form. */
.ranq-preview-form.is-empty {
	min-height: 18rem;
}

/* The drop target is marked with an outline, not with a shadow, because the
   shadow of the form is the user's value and must not be overridden. */
.ranq-preview-form.is-over {
	outline: 2px solid var(--ranq-live);
	outline-offset: 6px;
}

/* The fields in the preview are not typed into, a click picks the field. */
.ranq-canvas__item .ranq-field__input,
.ranq-canvas__item input,
.ranq-canvas__item select,
.ranq-canvas__item textarea,
.ranq-canvas__item label {
	pointer-events: none;
}

.ranq-canvas__item {
	position: relative;
	padding: 12px;
	margin: -4px;
	border-radius: var(--ranq-r);
	cursor: grab;
	transition: background-color var(--ranq-t), box-shadow var(--ranq-t);
}

.ranq-canvas__item::before {
	position: absolute;
	top: 14px;
	left: -2px;
	color: var(--ranq-faint);
	content: "\22EE\22EE";
	font-size: 11px;
	letter-spacing: -3px;
	opacity: 0;
	transition: opacity var(--ranq-t);
}

.ranq-canvas__item:hover {
	background: var(--ranq-sunken);
}

.ranq-canvas__item:hover::before {
	opacity: 1;
}

.ranq-canvas__item.is-selected {
	background: var(--ranq-bg);
	box-shadow: 0 0 0 2px var(--ranq-accent), var(--ranq-shadow-2);
}

.ranq-canvas__item.is-dragging {
	opacity: .35;
}

.ranq-canvas__item.is-over {
	box-shadow: inset 0 3px 0 var(--ranq-accent);
}

.ranq-canvas__actions {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	display: flex;
	gap: 2px;
	padding: 3px;
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-bg);
	box-shadow: var(--ranq-shadow-2);
	opacity: 0;
	transform: translateY(-2px);
	transition: opacity var(--ranq-t), transform var(--ranq-t);
}

.ranq-canvas__item:hover .ranq-canvas__actions,
.ranq-canvas__item:focus-within .ranq-canvas__actions,
.ranq-canvas__item.is-selected .ranq-canvas__actions {
	opacity: 1;
	transform: none;
}

.ranq-canvas__action {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--ranq-r-sm);
	background: transparent;
	color: var(--ranq-muted);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
	transition: background-color var(--ranq-t), color var(--ranq-t);
}

.ranq-canvas__action:hover:not(:disabled),
.ranq-canvas__action:focus-visible:not(:disabled) {
	background: var(--ranq-inset);
	color: var(--ranq-ink);
}

.ranq-canvas__action:last-child:hover:not(:disabled) {
	background: #fdecec;
	color: var(--ranq-danger);
}

.ranq-canvas__action:disabled {
	opacity: .25;
	cursor: default;
}

/* The width of a field inside the builder. */
.ranq-preview-form .ranq-canvas__item.ranq-field--half {
	grid-column: span 3;
}

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

.ranq-preview__hidden {
	margin: 0;
	padding: 8px 12px;
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-inset);
	color: var(--ranq-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
}

/* ---------- on the right, the settings ---------- */

/* The stickiness and the maximum height are gone: the column is part of one
   body, it has its height from the grid and its own scrolling. Those rules sit
   above, next to the columns themselves. */

.ranq-settings__empty {
	margin: 0;
	padding: 32px 8px;
	color: var(--ranq-faint);
	font-size: 13px;
	text-align: center;
}

.ranq-settings__group {
	margin-bottom: 24px;
}

.ranq-settings__group-title {
	margin: 0 0 12px;
	color: var(--ranq-faint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ranq-settings__row {
	margin-bottom: 16px;
}

.ranq-settings__label {
	display: flex;
	gap: 8px;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 6px;
	color: var(--ranq-ink-2);
	font-size: 13px;
	font-weight: 600;
}

.ranq-settings__readout {
	color: var(--ranq-faint);
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.ranq-admin .ranq-settings__input,
.ranq-admin .ranq-choices__input {
	width: 100%;
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-bg);
	box-shadow: none;
	color: var(--ranq-ink);
	font-size: 13px;
	transition: border-color var(--ranq-t), box-shadow var(--ranq-t);
}

.ranq-admin .ranq-settings__input:focus,
.ranq-admin .ranq-choices__input:focus {
	border-color: var(--ranq-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--ranq-accent-soft);
}

.ranq-settings__help {
	margin: 6px 0 0;
	color: var(--ranq-faint);
	font-size: 12px;
	line-height: 1.45;
}

/* A switch instead of an ordinary checkbox. */
.ranq-settings__toggle {
	display: flex;
	gap: 10px;
	align-items: center;
	min-height: 36px;
	color: var(--ranq-ink-2);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.ranq-admin .ranq-settings__toggle input[type="checkbox"] {
	position: relative;
	flex: 0 0 auto;
	width: 36px;
	height: 20px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: var(--ranq-line);
	appearance: none;
	cursor: pointer;
	transition: background-color var(--ranq-t);
}

.ranq-admin .ranq-settings__toggle input[type="checkbox"]::before {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--ranq-shadow-1);
	content: "";
	margin: 0;
	transition: transform var(--ranq-t);
}

.ranq-admin .ranq-settings__toggle input[type="checkbox"]:checked {
	background: var(--ranq-accent);
}

.ranq-admin .ranq-settings__toggle input[type="checkbox"]:checked::before {
	transform: translateX(16px);
}

/* ---------- the Design tab ---------- */

.ranq-design__group {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ranq-line-soft);
}

.ranq-design__group:last-child {
	border-bottom: 0;
}

.ranq-design__summary {
	margin-bottom: 12px;
	color: var(--ranq-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.ranq-design__summary::-webkit-details-marker {
	display: none;
}

.ranq-design__summary::before {
	display: inline-block;
	width: 14px;
	color: var(--ranq-faint);
	content: "\25BE";
	transition: transform var(--ranq-t);
}

.ranq-design__group:not([open]) .ranq-design__summary::before {
	transform: rotate(-90deg);
}

.ranq-design__reset {
	min-height: 30px;
	padding: 5px 10px;
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-bg);
	color: var(--ranq-muted);
	font-size: 12px;
	cursor: pointer;
	transition: border-color var(--ranq-t), color var(--ranq-t);
}

.ranq-design__reset:hover {
	border-color: var(--ranq-accent);
	color: var(--ranq-accent);
}

.ranq-color {
	display: flex;
	gap: 6px;
	align-items: center;
}

.ranq-admin .ranq-color__picker {
	width: 36px;
	height: 36px;
	padding: 3px;
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-bg);
	cursor: pointer;
}

.ranq-admin .ranq-color__text {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-sm);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
}

.ranq-range {
	width: 100%;
	height: 20px;
	margin: 0;
	accent-color: var(--ranq-accent);
}

/* ---------- the list of ready made styles ---------- */

.ranq-styles__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 12px;
}

.ranq-styles__item {
	display: grid;
	gap: 6px;
	padding: 6px;
	border: 1px solid var(--ranq-line-soft);
	border-radius: var(--ranq-r);
	background: var(--ranq-bg);
	cursor: pointer;
	transition: border-color var(--ranq-t), box-shadow var(--ranq-t), transform var(--ranq-t);
}

.ranq-styles__item:hover,
.ranq-styles__item:focus-visible {
	border-color: var(--ranq-accent);
	outline: none;
	box-shadow: var(--ranq-shadow-2);
	transform: translateY(-2px);
}

.ranq-styles__mini {
	display: grid;
	gap: 4px;
	align-content: center;
	height: 56px;
	padding: 8px;
	border-radius: max(var(--ranq-form-radius, 4px), 4px);
	background-color: var(--ranq-form-bg, #f7f8fa);
}

.ranq-styles__mini-label {
	width: 45%;
	height: 4px;
	border-radius: 2px;
	background: var(--ranq-label-color, #16181d);
	opacity: .7;
}

.ranq-styles__mini-field {
	height: 14px;
	border-color: var(--ranq-field-border-color, #c9ccd4);
	border-style: var(--ranq-field-border-style, solid);
	border-width: var(--ranq-field-shape, var(--ranq-field-border-width, 1px));
	border-radius: min(var(--ranq-field-radius, 6px), 7px);
	background: var(--ranq-field-bg, #fff);
}

.ranq-styles__mini-button {
	width: 42%;
	height: 10px;
	margin-top: 2px;
	border-radius: min(var(--ranq-button-radius, 6px), 5px);
	background: var(--ranq-button-bg, #16181d);
}

.ranq-styles__name {
	overflow: hidden;
	color: var(--ranq-muted);
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranq-styles__item:hover .ranq-styles__name {
	color: var(--ranq-accent);
}

.ranq-image__buttons {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}

/* ---------- the choice editor ---------- */

.ranq-choices__row {
	display: flex;
	gap: 4px;
	margin-bottom: 4px;
}

.ranq-choices__input {
	flex: 1 1 auto;
	min-width: 0;
}

.ranq-choices__input--value {
	flex: 0 1 5.5rem;
}

.ranq-choices__remove {
	flex: 0 0 auto;
	width: 32px;
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-bg);
	color: var(--ranq-muted);
	cursor: pointer;
	transition: border-color var(--ranq-t), color var(--ranq-t), background-color var(--ranq-t);
}

.ranq-choices__remove:hover {
	border-color: var(--ranq-danger);
	background: #fdecec;
	color: var(--ranq-danger);
}

.ranq-choices__add {
	margin-top: 6px;
}

/* ---------- the template list ---------- */

.ranq-templates {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.ranq-template {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-bg);
	box-shadow: var(--ranq-shadow-1);
	color: var(--ranq-ink);
	text-decoration: none;
	transition: box-shadow var(--ranq-t), transform var(--ranq-t);
}

.ranq-template:hover,
.ranq-template:focus-visible {
	color: var(--ranq-ink);
	box-shadow: var(--ranq-shadow-3);
	outline: none;
	transform: translateY(-3px);
}

.ranq-template__count {
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ranq-inset);
	color: var(--ranq-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: background-color var(--ranq-t), color var(--ranq-t);
}

.ranq-template:hover .ranq-template__count {
	background: var(--ranq-accent-soft);
	color: var(--ranq-accent);
}

.ranq-template__name {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.ranq-template__desc {
	color: var(--ranq-muted);
	font-size: 13px;
	line-height: 1.5;
}

.ranq-template__preview {
	display: grid;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--ranq-line-soft);
}

.ranq-template__row {
	display: grid;
	gap: 4px;
}

.ranq-template__label {
	width: 35%;
	height: 5px;
	border-radius: 2px;
	background: #dcdee3;
}

.ranq-template__box {
	height: 14px;
	border-radius: 4px;
	background: var(--ranq-inset);
}

.ranq-template__box--textarea {
	height: 28px;
}

.ranq-template__box--checkbox,
.ranq-template__box--radio {
	width: 60%;
	height: 9px;
}

/* ---------- the settings cards ---------- */

.ranq-settings-form {
	max-width: 44rem;
}

.ranq-card {
	margin: 16px 0;
	padding: 24px;
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-bg);
	box-shadow: var(--ranq-shadow-1);
}

.ranq-card h2 {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.ranq-card .ranq-settings__input {
	max-width: 24rem;
}

.ranq-entries__filter {
	margin: 0;
}

/* ---------- the main button in our colour ---------- */

.ranq-admin .button-primary,
.ranq-builder__bar .button-primary {
	min-height: 36px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-accent);
	color: #fff;
	font-weight: 600;
	box-shadow: none;
	text-shadow: none;
	transition: background-color var(--ranq-t), transform var(--ranq-t);
}

.ranq-admin .button-primary:hover,
.ranq-admin .button-primary:focus,
.ranq-builder__bar .button-primary:hover,
.ranq-builder__bar .button-primary:focus {
	background: var(--ranq-accent-press);
	color: #fff;
	box-shadow: none;
}

.ranq-admin .button-primary:active,
.ranq-builder__bar .button-primary:active {
	transform: scale(.97);
}

.ranq-admin .button-hero {
	min-height: 46px;
	padding: 0 26px;
	font-size: 15px;
}

.ranq-admin .button:not(.button-primary) {
	min-height: 36px;
	border-color: var(--ranq-line);
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-bg);
	color: var(--ranq-ink-2);
	box-shadow: none;
}

.ranq-admin .button:not(.button-primary):hover {
	border-color: var(--ranq-accent);
	background: var(--ranq-bg);
	color: var(--ranq-accent);
}

/* ---------- the preview has to look like the site, even when disabled ---------- */

.ranq-preview-form .ranq-field__input:disabled,
.ranq-preview-form select.ranq-field__input:disabled,
.ranq-preview-form textarea.ranq-field__input:disabled {
	border-color: var(--ranq-field-border-color);
	background-color: var(--ranq-field-bg);
	color: var(--ranq-field-text);
	opacity: 1;
	-webkit-text-fill-color: var(--ranq-field-text);
}

.ranq-preview-form .ranq-field__choice input:disabled {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ranq-admin *,
	.ranq-builder-wrap * {
		transition: none !important;
	}

	.ranq-template:hover,
	.ranq-styles__item:hover,
	.ranq-palette__item:hover {
		transform: none;
	}
}

/* ---------- the conditional logic editor ---------- */

.ranq-cond {
	display: grid;
	gap: 6px;
}

.ranq-cond__rule {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 4px;
	align-items: center;
	padding: 8px;
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-sunken);
}

.ranq-cond__rule .ranq-settings__input {
	min-width: 0;
}

/* The third element, the value, goes onto a new line across the full width. */
.ranq-cond__rule .ranq-settings__input:nth-of-type(3) {
	grid-column: 1 / 3;
}

.ranq-cond__add {
	justify-self: start;
}

/* ---------- the page break in the builder ---------- */

.ranq-canvas__item .ranq-field--pagebreak {
	padding: 4px 0;
}

.ranq-preview-form .ranq-pagebreak__line {
	border-top-color: var(--ranq-accent);
}

/* ==========================================================================
   Fixes after the visual check, 26 August 2026
   ========================================================================== */

/* --- The settings panel was cutting the content off ---

   It had a set maximum height and stuck to the top. On a shorter screen that cut
   the settings in half and the conditional logic could not be seen at all.

   The stickiness no longer exists and is not needed: the column is part of one
   body, it has its own height and its own scrolling, so it has nothing to cut.
   All that is left is a scrollbar that gets in nobody's way. */

.ranq-builder__settings::-webkit-scrollbar,
.ranq-builder__palette::-webkit-scrollbar {
	width: 8px;
}

.ranq-builder__settings::-webkit-scrollbar-thumb,
.ranq-builder__palette::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: var(--ranq-line);
}

/* --- On a phone the form comes first, then the settings, then the field list ---

   The field list used to come first, so the settings panel ended up after 2600
   pixels of scrolling and looked like a leftover at the bottom. */

/* Below 1300 the columns go into a VERTICAL stack. They then have no scrolling
   of their own and the whole page scrolls instead, because three separate
   scrolling areas one under the other are unusable. */
@media (max-width: 1300px) {
	.ranq-builder__cols {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 0;
	}

	/* 🔴 In a vertical stack the main axis is HEIGHT, so `flex: 0 0 248px` from
	   the wide screen would become a height of 248 pixels here and the field
	   list would fall out of its box. The basis goes back to the content. */
	.ranq-builder__col,
	.ranq-builder__cols.is-design .ranq-builder__settings {
		flex: 0 0 auto;
	}

	.ranq-builder__col {
		overflow: visible;
		border: 0;
		border-bottom: 1px solid var(--ranq-line);
	}

	.ranq-builder__canvas {
		order: 1;
	}

	.ranq-builder__settings {
		order: 2;
	}

	.ranq-builder__palette {
		order: 3;
	}

	/* In a vertical stack the list of field types is not a narrow column but
	   spreads across the width, so it is not 23 rows one under the other. */
	.ranq-builder__palette .ranq-palette__list {
		grid-template-columns: 1fr 1fr;
		display: grid;
	}

	.ranq-canvas__note,
	.ranq-canvas__paper {
		max-width: 100%;
	}
}

/* --- The black ground of the left menu stopped halfway down a long page --- */

/* The menu ground stretches to the bottom, because in full screen there is no
   footer to carry it further.

   THE MENU WRAPPER IS NOT TOUCHED. It used to get `bottom: 0` as well, and
   WordPress can set `position: fixed` on it with its own script. The menu then
   hooks onto the BOTTOM of the window and, since it is tall, runs off the top
   under the black bar, so the first item cannot be seen. Reported from a
   screenshot, 26 August 2026. */
body.ranq-fullscreen #adminmenuback {
	min-height: 100%;
}

/* --- The form preview sat against the left edge, the right third empty --- */

.ranq-preview-form {
	margin-left: auto;
	margin-right: auto;
}

/* --- The field tools were lying across the label ---

   The box with the buttons sat in the top right corner, over the text. It now
   sits above the field, in the space made for it. */

.ranq-canvas__item {
	padding-top: 26px;
}

.ranq-canvas__actions {
	top: 2px;
	right: 2px;
}

/* --- The helper text was too light to be read --- */

.ranq-settings__help,
.ranq-template__desc,
.ranq-page__lead {
	color: #5b6270;
}

.ranq-settings__readout,
.ranq-styles__name {
	color: #5b6270;
}

/* --- The drop down on the entries screen had the system look --- */

.ranq-admin .ranq-entries__filter select {
	min-height: 36px;
	padding: 6px 30px 6px 10px;
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-sm);
	background-color: var(--ranq-bg);
	box-shadow: none;
	font-size: 13px;
}

/* --- An empty template looked as if the preview had not rendered --- */

.ranq-template__preview:empty::before {
	display: block;
	padding: 14px 0;
	color: #9aa1ac;
	content: "\2014";
	font-size: 18px;
	text-align: center;
}

/* --- The table on a phone ---

   A table with five columns falls apart at 390 pixels. The WHOLE mobile view is
   written here rather than added on top of WordPress's, because mixing the two
   turned out worse than either on its own: the header stayed and the cells
   overlapped.

   Every row becomes a card, every cell gets its label out of the `data-colname`
   attribute, which is the same one WordPress uses anyway. */

@media screen and (max-width: 782px) {

	.ranq-admin table.ranq-table,
	.ranq-admin table.ranq-table tbody,
	.ranq-admin table.ranq-table tr,
	.ranq-admin table.ranq-table td {
		display: block !important;
		width: auto !important;
	}

	.ranq-admin table.ranq-table {
		background: transparent;
		box-shadow: none;
		table-layout: auto !important;
	}

	.ranq-admin table.ranq-table thead {
		display: none !important;
	}

	.ranq-admin table.ranq-table tbody tr {
		margin-bottom: 12px;
		padding: 14px 16px;
		border: 0;
		border-radius: var(--ranq-r);
		background: var(--ranq-bg) !important;
		box-shadow: var(--ranq-shadow-1);
	}

	.ranq-admin table.ranq-table tbody td {
		display: flex !important;
		gap: 12px;
		align-items: baseline;
		justify-content: space-between;
		padding: 8px 0 !important;
		border-bottom: 1px solid var(--ranq-line-soft);
		text-align: right;
	}

	.ranq-admin table.ranq-table tbody td:last-child {
		border-bottom: 0;
	}

	.ranq-admin table.ranq-table tbody td::before {
		/* WordPress positions its label absolutely, so it overlapped the value.
		   Here it goes back into the normal flow of the row. */
		position: static !important;
		left: auto !important;
		top: auto !important;
		flex: 0 0 auto;
		width: auto !important;
		padding: 0 !important;
		color: #5b6270;
		content: attr(data-colname);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .04em;
		text-align: left;
		text-transform: uppercase;
	}

	/* The first cell is the form name, it carries its own actions and needs no
   label. */
	.ranq-admin table.ranq-table tbody td:first-child {
		display: block !important;
		padding-bottom: 12px !important;
		text-align: left;
	}

	.ranq-admin table.ranq-table tbody td:first-child::before {
		display: none;
	}

	.ranq-admin table.ranq-table .row-actions {
		position: static !important;
		left: auto !important;
		padding: 6px 0 0 !important;
		font-size: 12px;
	}

	.ranq-admin table.ranq-table .row-actions span {
		display: inline;
	}

	.ranq-admin table.ranq-table code {
		font-size: 11px;
		word-break: break-all;
	}
}

/* --- Small touch targets ---

   On a screen touched with a finger nothing may be smaller than 24 pixels. */

@media (pointer: coarse) {

	.ranq-canvas__action {
		width: 36px;
		height: 36px;
	}

	.ranq-admin .ranq-color__picker,
	.ranq-admin .ranq-settings__input,
	.ranq-admin .ranq-choices__input {
		min-height: 42px;
	}

	.ranq-choices__remove {
		width: 42px;
	}
}

/* --- The link to an attached file --- */

.ranq-file-link {
	font-weight: 600;
	text-decoration: none;
}

.ranq-file-link:hover {
	text-decoration: underline;
}

.ranq-file-size {
	color: #5b6270;
	font-size: 11px;
}

/* --- The field width, picked by picture ---

   It used to be a drop down called "Width", in the advanced settings. Nobody
   ever found it. Now it is three buttons that show how the field sits in a
   row. */

.ranq-width {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}

.ranq-width__item {
	display: grid;
	gap: 6px;
	justify-items: center;
	padding: 10px 6px;
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-bg);
	cursor: pointer;
	transition: border-color var(--ranq-t), background-color var(--ranq-t);
}

.ranq-width__item:hover {
	border-color: var(--ranq-accent);
}

.ranq-width__item.is-on {
	border-color: var(--ranq-accent);
	background: var(--ranq-accent-soft);
}

/* A tiny picture of the row: a full bar, a half, a third. */
.ranq-width__bar {
	display: block;
	height: 8px;
	border-radius: 2px;
	background: #c9ccd4;
}

.ranq-width__item.is-on .ranq-width__bar {
	background: var(--ranq-accent);
}

.ranq-width__bar--full {
	width: 40px;
}

.ranq-width__bar--half {
	width: 20px;
}

.ranq-width__bar--third {
	width: 13px;
}

.ranq-width__name {
	color: var(--ranq-muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

.ranq-width__item.is-on .ranq-width__name {
	color: var(--ranq-accent);
}

/* --- The field list has its own scrolling, it does not stretch to the bottom ---

   The column of fields used to run as long as the whole form, so on a long form
   it was left empty at the bottom. The finding still holds, but the answer is no
   longer stickiness: the column is part of one body, it has its own height and
   its own scrolling. Those rules sit above, next to the columns themselves. */

/* --- Colour: transparency and clearing --- */

.ranq-color__clear {
	flex: 0 0 auto;
	width: 32px;
	height: 36px;
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-bg);
	color: var(--ranq-muted);
	cursor: pointer;
	transition: border-color var(--ranq-t), color var(--ranq-t), background-color var(--ranq-t);
}

.ranq-color__clear:hover {
	border-color: var(--ranq-danger);
	background: #fdecec;
	color: var(--ranq-danger);
}

.ranq-alpha {
	display: grid;
	gap: 2px;
	margin-top: 6px;
}

.ranq-alpha__name {
	display: flex;
	justify-content: space-between;
	color: var(--ranq-muted);
	font-size: 11px;
	font-weight: 600;
}

.ranq-alpha__value {
	font-variant-numeric: tabular-nums;
}

/* --- The image: the picture itself is seen, not its address --- */

.ranq-image {
	display: grid;
	gap: 6px;
}

.ranq-image__preview {
	display: grid;
	place-items: center;
	height: 92px;
	overflow: hidden;
	border: 1px dashed var(--ranq-line);
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-inset);
}

.ranq-image__preview.has-image {
	border-style: solid;
	border-color: var(--ranq-accent);
	background:
		linear-gradient(45deg, #eceef1 25%, transparent 25%, transparent 75%, #eceef1 75%) 0 0 / 16px 16px,
		linear-gradient(45deg, #eceef1 25%, transparent 25%, transparent 75%, #eceef1 75%) 8px 8px / 16px 16px,
		#fff;
}

.ranq-image__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ranq-image__empty {
	color: var(--ranq-faint);
	font-size: 12px;
}

/* ------------------------------------------------------------------
   The Settings tab, per form

   It runs ACROSS THE WHOLE PAGE. It used to sit in a narrow white box, so it
   looked like one more form inside a form, which makes no sense: these are not
   fields somebody fills in but settings that get read.
   ------------------------------------------------------------------ */

.ranq-builder__cols.is-plain {
	display: block;
	overflow-y: auto;
	background: var( --ranq-bg, #f5f6f8 );
}

.ranq-builder__wide {
	max-width: none;
	margin: 0;
	padding: 28px 32px 72px;
}

/* The groups sit side by side when there is room, because that way everything is
   seen without scrolling. */
.ranq-fset__groups {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 340px, 1fr ) );
	gap: 22px;
	align-items: start;
	margin-top: 18px;
}

.ranq-fset__group {
	margin: 0;
	padding: 24px 26px 26px;
	background: #fff;
	border: 1px solid var( --ranq-line, #e2e4ea );
	border-radius: 14px;
}

.ranq-fset__group .ranq-design__summary {
	margin-bottom: 6px;
	font-size: 13px;
}

.ranq-fset__help {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.55;
	color: var( --ranq-ink-soft, #5b6070 );
}

.ranq-builder__wide > .ranq-canvas__note {
	max-width: 900px;
	margin: 0;
}

.ranq-toggle {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin-bottom: 8px;
	font-size: 13px;
	line-height: 1.45;
	cursor: pointer;
}

.ranq-toggle input {
	margin: 2px 0 0;
}

.ranq-toggle__text {
	flex: 1;
}

/* ------------------------------------------------------------------
   The Contact widget tab
   ------------------------------------------------------------------ */

/* Step one: the picker across the whole page */

.ranq-wchooser__title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	color: var( --ranq-ink, #16181d );
}

.ranq-wchooser .ranq-fset__help {
	max-width: 760px;
}

.ranq-wgallery__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 210px, 1fr ) );
	gap: 14px;
	margin-top: 18px;
	align-items: stretch;
}

.ranq-wtile {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	text-align: left;
	background: #fff;
	border: 1px solid var( --ranq-line, #e2e4ea );
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.ranq-wtile:hover {
	transform: translateY( -2px );
	border-color: var( --ranq-accent, #5b4be0 );
	box-shadow: 0 8px 20px rgba( 16, 18, 26, .09 );
}

.ranq-wtile.is-active {
	border-color: var( --ranq-accent, #5b4be0 );
	box-shadow: 0 0 0 2px rgba( 91, 75, 224, .22 );
}

.ranq-wtile__shot {
	position: relative;
	display: block;

	/* Always the same aspect ratio, as with real pictures. Every tile is then the
	   same height and the row looks calm. */
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: #fff;
	border-bottom: 1px solid var( --ranq-line, #e2e4ea );
}

/* The section is rendered at the full width of the page and then scaled down.
   Were it squeezed by width, the columns would fall one under the other and the
   tile would show the phone layout rather than the one a person actually gets. */
.ranq-wtile__scale {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 1400px;

	/* The starting measure. The real one is worked out by the script, from the
	   width and height of that very tile, so the picture covers the whole frame
	   with no white edges. */
	transform: scale( .16 );
	transform-origin: top left;
	pointer-events: none;
}

.ranq-wtile__scale .alignfull {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* There is no form in a tile, so a drawing of a form goes in its place. An empty
   grey slab looked like a hole, so the tile felt unfinished. */
.ranq-wtile__scale .ranq-widget__slot {
	display: block;
	min-height: 300px;
}

.ranq-sketch {
	display: block;
}

.ranq-sketch__label {
	display: block;
	height: 16px;
	margin-bottom: 10px;
	background: #c8cede;
	border-radius: 4px;
}

.ranq-sketch__field {
	display: block;
	height: 52px;
	margin-bottom: 24px;
	background: #fff;
	border: 2px solid #d7dce7;
	border-radius: 8px;
}

.ranq-sketch__button {
	display: block;
	width: 150px;
	height: 54px;
	background: #2b2f3a;
	border-radius: 8px;
}

.ranq-wtile__none {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	font-size: 13px;
	text-align: center;
	color: var( --ranq-ink-soft, #5b6070 );
	background: repeating-linear-gradient( 45deg, #f6f7f9, #f6f7f9 8px, #eef0f4 8px, #eef0f4 16px );
}

.ranq-wtile__name {
	display: -webkit-box;

	/* Always two lines, even when the name fits on one. Otherwise tiles in the
	   same row come out different heights, which looked sloppy. */
	height: calc( 2 * 1.35em + 20px );
	padding: 9px 11px 11px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var( --ranq-ink, #16181d );
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
}

/* Step two: editing */

.ranq-wchosen {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var( --ranq-line, #e2e4ea );
}

.ranq-wchosen__name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --ranq-ink, #16181d );
}

.ranq-wpart.is-active {
	color: #fff;
	background: var( --ranq-accent, #5b4be0 );
	border-color: var( --ranq-accent, #5b4be0 );
}

.ranq-wpart.is-active .ranq-palette__label {
	color: #fff;
}

/* The item being edited right now. */
.ranq-widget__marked {
	outline: 2px solid var( --ranq-accent, #5b4be0 );
	outline-offset: 4px;
	border-radius: 4px;
}

.ranq-builder__canvas--widget {
	padding: 0 0 40px;
	background: #fff;
}

.ranq-builder__canvas--widget .ranq-canvas__note {
	max-width: none;
	margin: 0;
	padding: 12px 20px;
	border-bottom: 1px solid var( --ranq-line, #e2e4ea );
}

.ranq-widget-shell {
	overflow-x: hidden;
}

/* A section in the preview is as wide as the whole page, so inside the builder
   it has to be kept within bounds. */
.ranq-widget-shell .alignfull {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.ranq-widget__slot > .ranq-form {
	margin: 0;
}

.ranq-builder__widget .ranq-builder__shortcode {
	display: block;
	margin-bottom: 12px;
	padding: 7px 10px;
	font-size: 12px;
	background: #f4f5f8;
	border-radius: 6px;
}

/* A heading that is not a lid over a group has neither an arrow nor a pointing
   hand. */
.ranq-design__summary--plain {
	cursor: default;
}

.ranq-design__summary--plain::before {
	content: none;
}

/* The same collision that has already cost us time with the form: our `display`
   out of the block style sheet beats the `hidden` attribute, so a switched off
   row of detail stays on the screen even though it is marked hidden. */
.ranq-widget-shell [hidden],
.ranq-wtile__scale [hidden] {
	display: none !important;
}

/* The trade group heading in the picker. */
.ranq-wgroup {
	margin: 28px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --ranq-ink-soft, #5b6070 );
}

.ranq-wgroup:first-of-type {
	margin-top: 18px;
}

.ranq-wgroup + .ranq-wgallery__grid {
	margin-top: 10px;
}

/* ------------------------------------------------------------------
   The row of tabs with a right hand side

   In the Full Widgets tab, on the right of the same row, sit the device switch
   and the button back to the picker. They are there because they act on the
   WHOLE preview below, not on one setting in the side panel.
   ------------------------------------------------------------------ */

/* The row of tabs itself and the list inside it sit above, in the frame. What
   stays here is only what the Full Widgets tab added, so the same rules are not
   written twice. */

.ranq-builder__tabsright {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-left: auto;
}

/* The device switch */

.ranq-devices {
	display: flex;
	gap: 2px;
	padding: 3px;
	background: #eceef3;
	border-radius: 10px;
}

.ranq-device {
	display: flex;
	gap: 7px;
	align-items: center;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var( --ranq-ink-soft, #5b6070 );
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}

.ranq-device:hover {
	color: var( --ranq-ink, #16181d );
}

.ranq-device.is-active {
	color: var( --ranq-ink, #16181d );
	background: #fff;
	box-shadow: 0 1px 3px rgba( 16, 18, 26, .14 );
}

.ranq-device__mark {
	font-size: 15px;
	line-height: 1;
}

@media ( max-width: 1200px ) {

	.ranq-device__name {
		display: none;
	}
}

/* The frame the section preview sits in. The width is real, not drawn, so the
   columns split by themselves when it narrows. */

/* The frame holds the space, the preview inside it stands at the real device
   width and is then scaled down to fit. That is why "computer" here really means
   1280 pixels, and not however wide the middle column of the builder is. */
.ranq-frame {
	display: flex;
	justify-content: center;
	overflow: hidden;
}

/* `margin: 0 auto` does not centre a child that is WIDER than its parent: it
   sticks to the left and spills to the right, so scaling down cuts off the right
   hand side. Aligning through `flex` centres even what is wider, so the scaling
   lands exactly in the middle. */
.ranq-stage {
	flex: none;
	background: #fff;
}

.ranq-frame.is-tablet .ranq-stage,
.ranq-frame.is-phone .ranq-stage {
	border-left: 1px solid var( --ranq-line, #e2e4ea );
	border-right: 1px solid var( --ranq-line, #e2e4ea );
}

/* ------------------------------------------------------------------
   The Ready made forms tab
   ------------------------------------------------------------------ */

.ranq-tpl__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 14px;
	margin-top: 10px;
}

.ranq-tpl {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 18px 16px;
	text-align: left;
	background: #fff;
	border: 1px solid var( --ranq-line, #e2e4ea );
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.ranq-tpl:hover {
	transform: translateY( -2px );
	border-color: var( --ranq-accent, #5b4be0 );
	box-shadow: 0 8px 20px rgba( 16, 18, 26, .09 );
}

.ranq-tpl__name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --ranq-ink, #16181d );
}

.ranq-tpl__desc {
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --ranq-ink-soft, #5b6070 );
}

.ranq-tpl__meta {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 2px;
}

.ranq-tpl__badge {
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var( --ranq-accent, #5b4be0 );
	border-radius: 999px;
}

.ranq-tpl__count {
	font-size: 11.5px;
	color: var( --ranq-faint, #8c92a0 );
}

/* The field sketch: how long the form is and where it breaks into steps. */
.ranq-tpl__sketch {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid var( --ranq-line, #e2e4ea );
}

.ranq-tpl__line {
	display: block;
	width: 100%;
	height: 8px;
	background: #e4e7ee;
	border-radius: 3px;
}

.ranq-tpl__line.is-half {
	width: calc( 50% - 2px );
}

.ranq-tpl__line.is-tall {
	height: 20px;
}

.ranq-tpl__line.is-break {
	height: 2px;
	background: var( --ranq-accent, #5b4be0 );
}

/* The export button, next to the page heading. */
.ranq-entries__export {
	margin-left: auto;
}

/* Everything in the preview that can be clicked shows that it can. Without this
   a person clicked around the preview and did not know whether anything worked. */
.ranq-widget-shell .ranq-widget__clickable {
	cursor: pointer;
	transition: outline-color .12s ease;
	outline: 1px dashed transparent;
	outline-offset: 3px;
}

.ranq-widget-shell .ranq-widget__clickable:hover {
	outline-color: var( --ranq-accent, #5b4be0 );
}

.ranq-widget-shell .ranq-canvas__item {
	cursor: pointer;
}

.ranq-widget-shell .ranq-canvas__item:hover {
	outline: 1px dashed var( --ranq-accent, #5b4be0 );
	outline-offset: 3px;
}

/* A slider with a number, for the measurements in a pattern. */
.ranq-size {
	display: flex;
	gap: 10px;
	align-items: center;
}

.ranq-size .ranq-range {
	flex: 1;
	min-width: 0;
}

.ranq-size__value {
	flex: none;
	min-width: 48px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var( --ranq-ink-soft, #5b6070 );
}

/* ---------- the instructions next to an outside service key ---------- */

/* The client enters their own key, so next to every field stands where that key
   is taken from, in three steps, and a button that leads straight there. */
.ranq-howto {
	padding: 12px 14px;
	border: 1px solid var( --ranq-line, #e2e4ea );
	border-radius: 10px;
	margin-top: 8px;
	background: #f7f8fb;
}

.ranq-howto__title {
	margin: 6px 0 4px;
	color: var( --ranq-ink, #16181d );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.ranq-howto__steps {
	margin: 0 0 10px;
	padding-left: 18px;
	color: var( --ranq-ink-soft, #5c6270 );
	font-size: 13px;
	line-height: 1.6;
}

.ranq-howto__steps li + li {
	margin-top: 4px;
}

.ranq-howto__link {
	margin-top: 2px;
}

/* The signature in the builder: an empty slab, because it is not drawn in the
   preview. */
.ranq-sign__fake {
	background:
		repeating-linear-gradient( 45deg, #f4f5f8 0 8px, #eef0f5 8px 16px );
	border-radius: 6px;
}


/* 🔴 On a screen narrower than 1300 the columns go into a VERTICAL stack, but
   `align-items: start` was left over from the grid, which there means "shrink to
   the width of the content". The form preview was about 140 pixels wide at a
   width of 900 because of it. This is NOT a look but a fault, so it stays even
   after the old look was restored. */
@media (max-width: 1300px) {

	.ranq-builder__cols {
		align-items: stretch;
	}
}

/* ==================================================================
   THE DESK: THE FIELDS AND READY MADE FORMS TABS
   Tasks 2 and 3. Here and only here goes the style of those two screens.
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   SHARED BY BOTH SCREENS

   The counter next to a column head. The number is a VALUE, not a sentence, so
   it carries the monospaced face and a faint colour: it is not read, it is
   glanced at.
   ------------------------------------------------------------------ */

.ranq-builder__count {
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--ranq-faint);
	font: 11px/1 var(--ranq-mono);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* ==================================================================
   THE FIELDS TAB

   Four decisions, and all four are about the same thing: where the eye is.
   1. A list of 23 types is not 23 rows. At the top are the six types that
      really get added, and those are white tiles. The other seventeen are
      quiet rows. The search sits above the list and does not leave when it
      scrolls.
   2. The field tools no longer sit across the label but above the frame, and
      in the same black bar they carry the name of the chosen field.
   3. That same word sits in the header of the right hand panel. A chosen
      field is one thing in two places, not two things.
   4. An empty right hand panel is not a sentence about what you have not
      done, but a list of this form's fields, and it can be clicked.
   ================================================================== */

/* ---------- the left column: the search ---------- */

.ranq-builder__palette .ranq-palette__search {
	position: sticky;
	/* exactly under the sticky column head: 40 of height and 1 line */
	top: 41px;
	z-index: 3;
	display: flex;
	align-items: center;
	margin: calc(var(--ranq-3) * -1) calc(var(--ranq-4) * -1) var(--ranq-3);
	padding: var(--ranq-3) var(--ranq-4);
	border-bottom: 1px solid var(--ranq-line-soft);
	background: var(--ranq-panel);
}

.ranq-palette__search-icon {
	position: absolute;
	left: calc(var(--ranq-4) + 9px);
	width: 16px;
	height: 16px;
	color: var(--ranq-faint);
	font-size: 16px;
	line-height: 1;
	pointer-events: none;
}

/* 🔴 WordPress targets `input[type=search]`, which is stronger than one class
   of ours, so the input name has to be in the selector. */
.ranq-builder__palette input.ranq-palette__search-input {
	box-sizing: border-box;
	width: 100%;
	height: var(--ranq-control);
	min-height: var(--ranq-control);
	margin: 0;
	padding: 0 var(--ranq-3) 0 32px;
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	box-shadow: none;
	color: var(--ranq-ink);
	font: 13px/1 var(--ranq-font);
}

.ranq-builder__palette input.ranq-palette__search-input::placeholder {
	color: var(--ranq-faint);
}

.ranq-builder__palette input.ranq-palette__search-input:focus {
	border-color: var(--ranq-live);
	box-shadow: none;
	outline: 2px solid var(--ranq-live);
	outline-offset: 1px;
}

/* ---------- the left column: groups and types ---------- */

.ranq-builder__palette .ranq-palette__list {
	gap: 2px;
}

/* A group name stays put while the list scrolls, so you always know which group
   you are looking at. The number beside it stays faint, because it is a counter
   and not text. */
.ranq-builder__palette .ranq-palette__group {
	position: sticky;
	/* the head 41 plus the search bar 61 */
	top: 102px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--ranq-2);
	margin: var(--ranq-4) 0 var(--ranq-2);
	padding: var(--ranq-1) 0;
	background: var(--ranq-panel);
}

.ranq-builder__palette .ranq-palette__group:first-child {
	margin-top: 0;
}

.ranq-palette__group-count {
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--ranq-faint);
	font: 11px/1 var(--ranq-mono);
	font-style: normal;
	letter-spacing: 0;
}

/* Layout is four items that are not fields but parts of a page, and they get
   looked for once in a lifetime, so the group sits folded. One click opens it. */
.ranq-builder__palette button.ranq-palette__group--fold {
	width: 100%;
	min-height: var(--ranq-control);
	margin-bottom: 0;
	padding: var(--ranq-1) 0;
	border: 0;
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.ranq-palette__arrow {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: var(--ranq-faint);
	font-size: 16px;
	line-height: 1;
	transition: transform var(--ranq-t);
}

.ranq-palette__group--fold.is-open .ranq-palette__arrow {
	transform: rotate(90deg);
}

/* A field type. The same height and the same spacing for all 23, only the ground
   differs: a common type is a white tile, the rest is a quiet row. The
   difference is in WEIGHT, not in colour, so the list still reads as one list. */
.ranq-builder__palette .ranq-palette__item {
	gap: var(--ranq-2);
	min-height: var(--ranq-control);
	padding: 0 var(--ranq-2) 0 var(--ranq-1);
	border: 1px solid transparent;
	border-radius: var(--ranq-r);
	background: none;
	color: var(--ranq-ink-2);
	font-size: 13px;
	font-weight: 400;
}

.ranq-builder__palette .ranq-palette__item:hover,
.ranq-builder__palette .ranq-palette__item:focus-visible {
	border-color: var(--ranq-line-field);
	background: var(--ranq-paper);
	color: var(--ranq-ink);
	transform: none;
}

.ranq-builder__palette .ranq-palette__item.is-common {
	border-color: var(--ranq-line);
	background: var(--ranq-paper);
	color: var(--ranq-ink);
	font-weight: 600;
}

.ranq-builder__palette .ranq-palette__icon {
	width: 24px;
	height: 24px;
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-inset);
	box-shadow: inset 0 0 0 1px var(--ranq-line-soft);
	color: var(--ranq-muted);
	font-size: 16px;
	line-height: 1;
}

.ranq-builder__palette .ranq-palette__item:hover .ranq-palette__icon,
.ranq-builder__palette .ranq-palette__item:focus-visible .ranq-palette__icon {
	background: var(--ranq-live-soft);
	box-shadow: inset 0 0 0 1px #d8d5fa;
	color: var(--ranq-live);
}

.ranq-palette__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The plus sign appears only on hover and on focus, so the list is clean at
   rest. */
.ranq-palette__add {
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--ranq-faint);
	font-size: 15px;
	line-height: 1;
	opacity: 0;
	transition: opacity var(--ranq-t);
}

.ranq-palette__item:hover .ranq-palette__add,
.ranq-palette__item:focus-visible .ranq-palette__add {
	opacity: 1;
}

.ranq-palette__hint {
	margin: var(--ranq-3) 0 0;
	color: var(--ranq-muted);
	font-size: 11px;
	line-height: 1.6;
}

/* ---------- the middle: the head, the paper, a field in the preview ---------- */

/* The middle gets a head of its own, the same as the two side columns, so the
   three columns read as one body. The head runs edge to edge of the column. */
.ranq-builder__canvas--fields {
	padding-top: 0;
}

.ranq-builder__canvas--fields > .ranq-builder__heading {
	margin: 0 calc(var(--ranq-5) * -1) var(--ranq-4);
	padding: var(--ranq-2) var(--ranq-5);
	border-bottom: 1px solid var(--ranq-line);
	background: var(--ranq-desk);
}

/* The tools no longer lie IN the field but stand above its frame, so the space
   that used to be made for them inside the field (26 pixels at the top) has
   nothing left to serve and only pushed the field label down. */
.ranq-builder__canvas--fields .ranq-canvas__item {
	padding-top: var(--ranq-3);
}

/* The ring while the form is a drop target is carried by the PAPER, not by the
   form itself: the frame of the form is the user's choice out of the Design tab
   and must not be overridden. */
.ranq-builder__canvas .ranq-canvas__paper.is-over {
	box-shadow: var(--ranq-lift), 0 0 0 2px var(--ranq-live);
}

.ranq-builder__canvas .ranq-preview-form.is-over {
	outline: 0;
}

/* The chosen field: the ring is the only difference in the preview, because
   inside the ring is the user's form. The white ground is gone, it was
   overriding the choice out of the Design tab. */
.ranq-builder__canvas .ranq-canvas__item.is-selected {
	background: none;
	box-shadow: 0 0 0 2px var(--ranq-live);
}

/* The tools sit ABOVE the frame, not across the field label, and in the same bar
   they carry the name of the chosen field, so the bar reads as the heading of
   the selection. */
.ranq-builder__canvas .ranq-canvas__actions {
	top: -13px;
	right: var(--ranq-2);
	left: var(--ranq-2);
	z-index: 3;
	align-items: center;
	gap: var(--ranq-1);
	height: 26px;
	padding: 0 var(--ranq-1) 0 var(--ranq-2);
	border-radius: var(--ranq-r);
	background: var(--ranq-ink);
	box-shadow: var(--ranq-pop);
}

/* The type mark is the same as the mark in the header of the right hand panel.
   That is the tie: the same mark, the same number, the same colour. */
.ranq-canvas__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-live);
	color: #fff;
	font-size: 12px;
	line-height: 1;
}

.ranq-canvas__title {
	min-width: 0;
	overflow: hidden;
	color: #fff;
	font: 600 11px/1 var(--ranq-font);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranq-canvas__place {
	flex: 0 0 auto;
	color: #8c93a3;
	font: 11px/1 var(--ranq-mono);
	font-style: normal;
}

.ranq-canvas__gap {
	flex: 1 1 auto;
}

.ranq-builder__canvas .ranq-canvas__action {
	width: 22px;
	height: 22px;
	color: #cfd4de;
	font-size: 12px;
}

.ranq-builder__canvas .ranq-canvas__action:hover:not(:disabled),
.ranq-builder__canvas .ranq-canvas__action:focus-visible:not(:disabled) {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.ranq-builder__canvas .ranq-canvas__action:last-child {
	color: #ffb4ae;
}

.ranq-builder__canvas .ranq-canvas__action:last-child:hover:not(:disabled) {
	background: rgba(255, 120, 110, .24);
	color: #fff;
}

.ranq-builder__canvas .ranq-canvas__action:disabled {
	color: #5b6270;
	opacity: 1;
}

/* The place a field is dropped into carries the NAME of the type being dragged,
   so the row is not missed. Today the whole form is marked, so there is no
   telling where the field will land. */
.ranq-builder__canvas .ranq-canvas__item.is-over {
	box-shadow: inset 0 2px 0 var(--ranq-live);
}

.ranq-builder__canvas .ranq-canvas__item.is-over::after {
	content: attr(data-ranq-drop);
	position: absolute;
	top: -8px;
	left: var(--ranq-3);
	z-index: 4;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--ranq-live);
	color: #fff;
	font: 600 11px/1 var(--ranq-font);
	white-space: nowrap;
	pointer-events: none;
}

/* ---------- the right column: the header of the chosen field ---------- */

.ranq-settings__field {
	display: flex;
	align-items: center;
	gap: var(--ranq-2);
	margin: 0 0 var(--ranq-4);
	padding: 0 0 var(--ranq-3);
	border-bottom: 1px solid var(--ranq-line-soft);
}

.ranq-settings__field-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-live-soft);
	color: var(--ranq-live);
	font-size: 16px;
	line-height: 1;
}

.ranq-settings__field-name {
	min-width: 0;
	overflow: hidden;
	font-size: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranq-settings__field-place {
	margin-left: auto;
	flex: 0 0 auto;
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--ranq-live-soft);
	color: var(--ranq-live);
	font: 11px/1 var(--ranq-mono);
}

/* ---------- the right column: the folding sections ---------- */

.ranq-settings__fold {
	border-top: 1px solid var(--ranq-line-soft);
}

.ranq-builder__settings button.ranq-settings__fold-head {
	display: flex;
	width: 100%;
	align-items: center;
	gap: var(--ranq-2);
	min-height: var(--ranq-control);
	padding: 0;
	border: 0;
	background: none;
	color: var(--ranq-ink-2);
	font: 700 11px/1 var(--ranq-font);
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.ranq-settings__fold-arrow {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: var(--ranq-faint);
	font-size: 16px;
	line-height: 1;
	transition: transform var(--ranq-t);
}

.ranq-settings__fold.is-open .ranq-settings__fold-arrow {
	transform: rotate(90deg);
}

.ranq-settings__fold-count {
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--ranq-faint);
	font: 11px/1 var(--ranq-mono);
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
}

.ranq-settings__fold-body {
	padding: var(--ranq-2) 0 var(--ranq-3);
}

/* ---------- the right column: the footer ---------- */

/* Deleting and duplicating are actions on the WHOLE field, not settings, so they
   sit apart, at the bottom, and with a name rather than with a symbol. */
.ranq-builder__settings .ranq-settings__foot {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex;
	gap: var(--ranq-2);
	margin: var(--ranq-4) calc(var(--ranq-4) * -1) calc(var(--ranq-6) * -1);
	padding: var(--ranq-3) var(--ranq-4);
	border-top: 1px solid var(--ranq-line);
	background: var(--ranq-panel);
}

.ranq-builder__settings .ranq-settings__act {
	box-sizing: border-box;
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: var(--ranq-2);
	min-width: 0;
	height: var(--ranq-control);
	padding: 0 var(--ranq-2);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
	font: 600 13px/1 var(--ranq-font);
	cursor: pointer;
	transition: background-color var(--ranq-t), border-color var(--ranq-t), color var(--ranq-t);
}

.ranq-builder__settings .ranq-settings__act:hover {
	border-color: var(--ranq-muted);
	background: var(--ranq-inset);
}

.ranq-builder__settings .ranq-settings__act--danger {
	border-color: var(--ranq-danger-line);
	color: var(--ranq-danger);
}

.ranq-builder__settings .ranq-settings__act--danger:hover {
	border-color: var(--ranq-danger);
	background: var(--ranq-danger-soft);
}

/* ---------- the right column: the empty state ---------- */

/* An empty panel does not say what you have not done but what the form HAS. The
   rows are both the contents of the form and a shortcut to every field. */
.ranq-builder__settings .ranq-settings__empty {
	margin: 0;
	padding: var(--ranq-2) 0 0;
	color: var(--ranq-ink);
	font-size: 13px;
	text-align: left;
}

.ranq-settings__empty-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-bottom: var(--ranq-3);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	box-shadow: inset 0 0 0 1px var(--ranq-line);
	color: var(--ranq-faint);
	font-size: 20px;
	line-height: 1;
}

.ranq-settings__empty-title {
	margin: 0 0 var(--ranq-1);
	font-size: 15px;
	font-weight: 600;
}

.ranq-settings__empty-text {
	margin: 0 0 var(--ranq-4);
	color: var(--ranq-muted);
	font-size: 12px;
	line-height: 1.6;
}

.ranq-settings__list-title {
	display: flex;
	align-items: baseline;
	gap: var(--ranq-2);
	margin: 0 0 var(--ranq-2);
	color: var(--ranq-faint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ranq-settings__list-title em {
	margin-left: auto;
	font: 11px/1 var(--ranq-mono);
	font-style: normal;
	letter-spacing: 0;
}

.ranq-builder__settings .ranq-settings__jump {
	display: flex;
	width: 100%;
	align-items: center;
	gap: var(--ranq-2);
	min-height: var(--ranq-control);
	padding: 0 var(--ranq-2) 0 var(--ranq-1);
	border: 1px solid transparent;
	border-radius: var(--ranq-r);
	background: none;
	color: var(--ranq-ink-2);
	font: 13px/1.3 var(--ranq-font);
	text-align: left;
	cursor: pointer;
	transition: background-color var(--ranq-t), border-color var(--ranq-t);
}

.ranq-builder__settings .ranq-settings__jump:hover {
	border-color: var(--ranq-line-field);
	background: var(--ranq-paper);
}

.ranq-settings__jump-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-inset);
	box-shadow: inset 0 0 0 1px var(--ranq-line-soft);
	color: var(--ranq-muted);
	font-size: 16px;
	line-height: 1;
}

.ranq-settings__jump-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranq-settings__jump-size {
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--ranq-faint);
	font: 11px/1 var(--ranq-mono);
	font-style: normal;
}

.ranq-settings__unknown {
	margin: 0;
	color: var(--ranq-muted);
	font: 12px/1.6 var(--ranq-mono);
}

/* ==================================================================
   THE READY MADE FORMS TAB

   A wall of 29 tiles is not solved with smaller tiles but by not drawing a
   tile until it is asked for. The screen is a list of JOBS, every job is one
   row, and a row holds the names of all its forms. Every name is seen at
   once, and the drawings only in the job that is open.
   ================================================================== */

.ranq-builder__wide.ranq-tpl {
	display: block;
	min-height: 100%;
	padding: var(--ranq-5) var(--ranq-5) var(--ranq-7);
	border: 0;
	border-radius: 0;
	background: var(--ranq-desk);
	box-shadow: none;
	cursor: auto;
	transform: none;
}

.ranq-builder__wide.ranq-tpl:hover {
	border: 0;
	box-shadow: none;
	transform: none;
}

.ranq-tpl > * {
	max-width: 1180px;
}

/* ---------- the head of the screen ---------- */

.ranq-tpl__head {
	display: flex;
	align-items: flex-end;
	gap: var(--ranq-5);
	margin-bottom: var(--ranq-4);
}

.ranq-tpl__title {
	margin: 0 0 var(--ranq-1);
	font: 700 22px/1.2 var(--ranq-font);
	letter-spacing: -.02em;
}

.ranq-tpl__lead {
	margin: 0;
	max-width: 62ch;
	color: var(--ranq-muted);
	font-size: 13px;
	line-height: 1.55;
}

.ranq-tpl__tools {
	display: flex;
	flex-direction: column;
	gap: var(--ranq-2);
	margin-left: auto;
	flex: 0 0 auto;
	width: 340px;
}

/* Searching by name and by description is the path for someone who knows
   exactly what they want and does not care to look at any group. */
.ranq-tpl__search {
	position: relative;
	display: flex;
	align-items: center;
}

.ranq-tpl__search-icon {
	position: absolute;
	left: 10px;
	width: 16px;
	height: 16px;
	color: var(--ranq-faint);
	font-size: 16px;
	line-height: 1;
	pointer-events: none;
}

/* 🔴 WordPress targets `input[type=search]`, so the input name has to be in the
   selector. */
.ranq-tpl input.ranq-tpl__search-input {
	box-sizing: border-box;
	width: 100%;
	height: var(--ranq-control);
	min-height: var(--ranq-control);
	margin: 0;
	padding: 0 var(--ranq-3) 0 32px;
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	box-shadow: none;
	color: var(--ranq-ink);
	font: 13px/1 var(--ranq-font);
}

.ranq-tpl input.ranq-tpl__search-input::placeholder {
	color: var(--ranq-faint);
}

.ranq-tpl input.ranq-tpl__search-input:focus {
	border-color: var(--ranq-live);
	box-shadow: none;
	outline: 2px solid var(--ranq-live);
	outline-offset: 1px;
}

.ranq-tpl__filters {
	display: flex;
	align-items: center;
	gap: var(--ranq-2);
	flex-wrap: wrap;
}

.ranq-tpl__filter {
	display: inline-flex;
	align-items: center;
	gap: var(--ranq-2);
	height: 30px;
	padding: 0 var(--ranq-3);
	border: 1px solid var(--ranq-line);
	border-radius: 999px;
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
	font: 500 12px/1 var(--ranq-font);
	cursor: pointer;
	transition: background-color var(--ranq-t), border-color var(--ranq-t), color var(--ranq-t);
}

.ranq-tpl__filter:hover {
	border-color: var(--ranq-line-field);
}

.ranq-tpl__filter.is-on {
	border-color: var(--ranq-ink);
	background: var(--ranq-ink);
	color: #fff;
}

.ranq-tpl__filter.is-on .ranq-tpl__steps i {
	background: rgba(255, 255, 255, .45);
}

.ranq-tpl__filter.is-on .ranq-tpl__steps i:first-child {
	background: #fff;
}

/* ---------- a warning, part of the screen and not a popup ---------- */

/* The question about deleting starts here, as a state of the screen, and ends in
   the tile itself. Nowhere is there a popup pasted over the top. */
.ranq-tpl__warn {
	display: flex;
	align-items: flex-start;
	gap: var(--ranq-3);
	margin: 0 0 var(--ranq-5);
	padding: var(--ranq-3) var(--ranq-4);
	border-left: 3px solid var(--ranq-warn);
	border-radius: 0 var(--ranq-r) var(--ranq-r) 0;
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
	font-size: 12px;
	line-height: 1.6;
}

.ranq-tpl__warn b {
	color: var(--ranq-ink);
}

.ranq-tpl__warn-mark {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--ranq-warn);
	font-size: 18px;
	line-height: 1;
}

/* ---------- the start: the recommendation and the blank form ---------- */

.ranq-tpl__start {
	display: grid;
	gap: var(--ranq-4);
	grid-template-columns: 1.9fr 1fr;
	margin-bottom: var(--ranq-6);
	align-items: stretch;
}

.ranq-tpl__card {
	display: flex;
	gap: var(--ranq-5);
	padding: var(--ranq-5);
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-panel);
}

.ranq-tpl__card-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.ranq-tpl__flag {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	margin-bottom: var(--ranq-2);
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--ranq-ink);
	color: #fff;
	font: 700 11px/1.4 var(--ranq-font);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ranq-tpl__card-name {
	margin: 0 0 var(--ranq-1);
	font: 600 18px/1.2 var(--ranq-font);
	letter-spacing: -.01em;
}

.ranq-tpl__card-desc {
	margin: 0 0 var(--ranq-3);
	color: var(--ranq-muted);
	font-size: 13px;
	line-height: 1.55;
}

.ranq-tpl__card-foot {
	display: flex;
	align-items: center;
	gap: var(--ranq-3);
	margin-top: auto;
}

.ranq-tpl__card--blank {
	flex-direction: column;
	gap: var(--ranq-3);
	border-style: dashed;
	background: transparent;
}

.ranq-tpl__card--blank .ranq-tpl__card-desc {
	margin-bottom: 0;
}

/* An empty card is vertical, so the `flex-basis` of the sketch would be its
   HEIGHT rather than its width, and the card would grow to 208 pixels for no
   reason. */
.ranq-tpl__card--blank .ranq-tpl__sketch.is-big {
	flex: 0 0 auto;
	align-self: stretch;
}

.ranq-tpl__use {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ranq-control);
	padding: 0 var(--ranq-4);
	border: 1px solid transparent;
	border-radius: var(--ranq-r);
	background: var(--ranq-ink);
	color: #fff;
	font: 600 13px/1 var(--ranq-font);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ranq-t), border-color var(--ranq-t);
}

.ranq-tpl__use:hover {
	background: #000;
}

.ranq-tpl__use--quiet {
	border-color: var(--ranq-line-field);
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
}

.ranq-tpl__use--quiet:hover {
	border-color: var(--ranq-muted);
	background: var(--ranq-inset);
}

.ranq-tpl__meta {
	display: inline-flex;
	align-items: center;
	gap: var(--ranq-2);
	color: var(--ranq-faint);
	font: 11px/1.3 var(--ranq-mono);
	white-space: nowrap;
}

/* ---------- a job: one row per group ---------- */

.ranq-tpl__jobs {
	display: grid;
	gap: var(--ranq-2);
}

.ranq-tpl__job {
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-panel);
	overflow: hidden;
}

/* The whole head of the row is a target for opening, while the form names above
   it are buttons of their own. That way there is no button inside a button, and
   the row still clicks whole. */
.ranq-tpl__job-head {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ranq-3);
	min-height: 52px;
	padding: var(--ranq-2) var(--ranq-4);
}

.ranq-tpl__job-toggle {
	display: flex;
	align-items: center;
	gap: var(--ranq-3);
	flex: 0 0 15.5rem;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.ranq-tpl__job-toggle::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.ranq-tpl__job-head:hover {
	background: #e6eaf1;
}

.ranq-tpl__job-arrow {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: var(--ranq-faint);
	font-size: 16px;
	line-height: 1;
	transition: transform var(--ranq-t);
}

.ranq-tpl__job.is-open .ranq-tpl__job-arrow {
	color: var(--ranq-ink);
	transform: rotate(90deg);
}

.ranq-tpl__job-name {
	min-width: 0;
	color: var(--ranq-ink);
	font: 600 14px/1.3 var(--ranq-font);
}

.ranq-tpl__job-name small {
	display: block;
	color: var(--ranq-muted);
	font: 400 12px/1.4 var(--ranq-font);
}

.ranq-tpl__chips {
	position: relative;
	z-index: 1;
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: var(--ranq-1) var(--ranq-2);
}

/* A form name is already a button. Someone who knows what they are after clicks
   the name and never sees a single tile. */
.ranq-tpl__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ranq-2);
	height: 30px;
	padding: 0 var(--ranq-2) 0 var(--ranq-3);
	border: 1px solid var(--ranq-line-soft);
	border-radius: 999px;
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
	font: 12px/1 var(--ranq-font);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--ranq-t), background-color var(--ranq-t);
}

.ranq-tpl__chip:hover {
	border-color: var(--ranq-line-field);
}

.ranq-tpl__chip-count {
	color: var(--ranq-faint);
	font: 11px/1 var(--ranq-mono);
	font-style: normal;
}

/* The ladder: as many rungs as there are steps, the first one full because that
   is where the visitor stands. The same shape sits at the top of the sketch, so
   the mark is learned once. */
.ranq-tpl__steps {
	display: inline-flex;
	gap: 2px;
	flex: 0 0 auto;
}

.ranq-tpl__steps i {
	width: 7px;
	height: 3px;
	border-radius: 999px;
	background: var(--ranq-line-field);
}

.ranq-tpl__steps i:first-child {
	background: var(--ranq-ink);
}

.ranq-tpl__job-count {
	position: relative;
	z-index: 0;
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--ranq-faint);
	font: 11px/1 var(--ranq-mono);
	white-space: nowrap;
}

.ranq-tpl__job-body {
	padding: var(--ranq-4);
	border-top: 1px solid var(--ranq-line);
	background: #e7ebf2;
}

/* ---------- the tile ---------- */

.ranq-tpl__grid {
	display: grid;
	gap: var(--ranq-3);
	margin-top: 0;
	align-items: start;
	grid-template-columns: repeat(auto-fill, minmax(258px, 320px));
	justify-content: start;
}

.ranq-tpl__tile {
	display: flex;
	flex-direction: column;
	gap: var(--ranq-3);
	padding: var(--ranq-3);
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-panel);
	text-align: left;
	cursor: pointer;
	transition: background-color var(--ranq-t), border-color var(--ranq-t);
}

.ranq-tpl__tile:hover {
	border-color: #aab2c0;
	background: #f4f6fa;
}

.ranq-tpl__tile.is-asked {
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--ranq-live);
	cursor: auto;
}

.ranq-tpl__tile-text {
	display: block;
}

.ranq-tpl__tile-name {
	display: block;
	margin-bottom: 2px;
	color: var(--ranq-ink);
	font: 600 14px/1.3 var(--ranq-font);
}

.ranq-tpl__tile-desc {
	display: block;
	color: var(--ranq-muted);
	font-size: 12px;
	line-height: 1.5;
}

.ranq-tpl__tile .ranq-tpl__meta {
	margin-top: var(--ranq-1);
	font-size: 11px;
}

.ranq-tpl__tile .ranq-tpl__steps i {
	width: 9px;
	height: 4px;
}

/* ---------- the sketch: a small but truthful picture of the form ---------- */

/* An icon would repeat the name. The sketch says what the name does not: how
   long the form is, whether it has a long message box, whether two fields share
   a row and where the form breaks into steps. */
.ranq-tpl__sketch {
	display: block;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--ranq-line-soft);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
}

.ranq-tpl__sketch.is-big {
	flex: 0 0 208px;
	align-self: flex-start;
}

.ranq-tpl__sketch.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	border-style: dashed;
	border-color: var(--ranq-line-field);
	color: var(--ranq-faint);
	font-size: 12px;
}

.ranq-tpl__sketch-steps {
	display: flex;
	gap: 3px;
	margin-bottom: 9px;
}

.ranq-tpl__sketch-steps i {
	flex: 1 1 0;
	height: 4px;
	border-radius: 999px;
	background: #dbe1ea;
}

.ranq-tpl__sketch-steps i:first-child {
	background: var(--ranq-ink);
}

.ranq-tpl__sketch-row {
	display: block;
	margin-bottom: 8px;
}

.ranq-tpl__sketch-row:last-child {
	margin-bottom: 0;
}

.ranq-tpl__sketch-row.is-pair {
	display: flex;
	gap: 6px;
}

.ranq-tpl__sketch-row.is-pair > .ranq-tpl__sketch-cell {
	flex: 1 1 0;
	min-width: 0;
}

.ranq-tpl__sketch-cell {
	display: block;
}

.ranq-tpl__sketch-label {
	display: block;
	width: 42%;
	height: 4px;
	margin-bottom: 4px;
	border-radius: 999px;
	background: #b0b8c5;
}

.ranq-tpl__sketch-label.is-short {
	width: 30%;
}

.ranq-tpl__sketch-label.is-long {
	width: 58%;
}

.ranq-tpl__sketch-field {
	display: block;
	height: 15px;
	border: 1px solid #cdd4de;
	border-radius: 3px;
	background: #fbfcfe;
}

.ranq-tpl__sketch-field.is-tall {
	height: 34px;
}

.ranq-tpl__sketch.is-big .ranq-tpl__sketch-field {
	height: 18px;
}

.ranq-tpl__sketch.is-big .ranq-tpl__sketch-field.is-tall {
	height: 42px;
}

.ranq-tpl__sketch-button {
	display: block;
	width: 62px;
	height: 15px;
	border-radius: 3px;
	background: #2a3038;
}

/* ---------- the question before deleting, inside the tile itself ---------- */

.ranq-tpl__ask {
	padding: var(--ranq-3);
	border: 1px solid var(--ranq-danger-line);
	border-radius: var(--ranq-r);
	background: var(--ranq-danger-soft);
}

.ranq-tpl__ask-title {
	display: block;
	margin-bottom: var(--ranq-1);
	color: var(--ranq-danger);
	font-size: 13px;
}

/* The reckoning says what is lost and what is gained, with a number rather than
   with words. */
.ranq-tpl__sum {
	display: flex;
	align-items: center;
	gap: var(--ranq-2);
	margin-bottom: var(--ranq-3);
	padding: var(--ranq-2) var(--ranq-3);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
	font: 11px/1.3 var(--ranq-mono);
}

.ranq-tpl__sum s {
	color: var(--ranq-danger);
}

.ranq-tpl__sum b {
	color: var(--ranq-ok);
}

.ranq-tpl__sum span {
	color: var(--ranq-faint);
}

.ranq-tpl__ask-text {
	margin: 0 0 var(--ranq-3);
	color: var(--ranq-ink-2);
	font-size: 12px;
	line-height: 1.5;
}

.ranq-tpl__ask-buttons {
	display: flex;
	gap: var(--ranq-2);
	flex-wrap: wrap;
}

.ranq-tpl__yes,
.ranq-tpl__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ranq-control);
	padding: 0 var(--ranq-3);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
	font: 600 13px/1 var(--ranq-font);
	cursor: pointer;
	transition: background-color var(--ranq-t), border-color var(--ranq-t);
}

.ranq-tpl__yes {
	border-color: var(--ranq-danger-line);
	color: var(--ranq-danger);
}

.ranq-tpl__yes:hover {
	border-color: var(--ranq-danger);
	background: #fbe9e7;
}

.ranq-tpl__no:hover {
	border-color: var(--ranq-muted);
	background: var(--ranq-inset);
}

/* ---------- the search result ---------- */

.ranq-tpl__found {
	max-width: 720px;
	padding: var(--ranq-2);
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-paper);
	box-shadow: var(--ranq-pop);
}

.ranq-tpl__found-head {
	margin: 0;
	padding: var(--ranq-1) var(--ranq-3) var(--ranq-2);
	color: var(--ranq-faint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ranq-tpl__found-row {
	display: flex;
	width: 100%;
	align-items: center;
	gap: var(--ranq-3);
	padding: var(--ranq-2) var(--ranq-3);
	border: 0;
	border-radius: var(--ranq-r);
	background: none;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--ranq-t);
}

.ranq-tpl__found-row:hover {
	background: var(--ranq-live-soft);
}

.ranq-tpl__found-text {
	min-width: 0;
	flex: 1 1 auto;
}

.ranq-tpl__found-name {
	display: block;
	color: var(--ranq-ink);
	font-size: 13px;
	font-weight: 600;
}

.ranq-tpl__found-desc {
	display: block;
	color: var(--ranq-muted);
	font-size: 11px;
	line-height: 1.5;
}

.ranq-tpl__found-row mark {
	background: #fde68a;
	color: inherit;
}

.ranq-tpl__found-row .ranq-tpl__meta {
	margin-left: auto;
}

/* ==================================================================
   NARROWER SCREENS
   ================================================================== */

@media (max-width: 1440px) {

	.ranq-builder__canvas--fields > .ranq-builder__heading {
		margin-right: calc(var(--ranq-4) * -1);
		margin-left: calc(var(--ranq-4) * -1);
		padding-right: var(--ranq-4);
		padding-left: var(--ranq-4);
	}
}

/* Below 1300 the columns go into a VERTICAL stack and no longer have scrolling
   of their own, the whole page scrolls instead. Nothing inside them may then be
   sticky: the glue would take hold of the window, so the search bar and the
   panel footer would float over somebody else's content. */
@media (max-width: 1300px) {

	.ranq-builder__palette .ranq-palette__search,
	.ranq-builder__palette .ranq-palette__group,
	.ranq-builder__settings .ranq-settings__foot {
		position: static;
	}

	.ranq-builder__settings .ranq-settings__foot {
		margin-bottom: 0;
		border-top: 1px solid var(--ranq-line-soft);
		background: none;
	}

	/* In a vertical stack the list of types spreads across the width, so the
	   group name and the instruction have to take a whole row, otherwise they
	   land in a single grid cell. */
	.ranq-builder__palette .ranq-palette__group,
	.ranq-palette__hint {
		grid-column: 1 / -1;
	}

	.ranq-builder__palette .ranq-palette__list {
		gap: var(--ranq-1) var(--ranq-3);
	}

	.ranq-tpl__job-toggle {
		flex-basis: 13rem;
	}
}

@media (max-width: 1100px) {

	.ranq-tpl__head {
		display: block;
	}

	.ranq-tpl__tools {
		width: 100%;
		margin: var(--ranq-4) 0 0;
	}

	.ranq-tpl__start {
		grid-template-columns: 1fr;
	}

	.ranq-tpl__job-head {
		flex-wrap: wrap;
		row-gap: var(--ranq-2);
	}

	.ranq-tpl__job-toggle {
		flex: 1 1 auto;
	}

	.ranq-tpl__chips {
		flex: 1 1 100%;
		order: 3;
		padding-left: 28px;
	}
}

@media (max-width: 900px) {

	.ranq-builder__canvas--fields > .ranq-builder__heading {
		margin-right: calc(var(--ranq-4) * -1);
		margin-left: calc(var(--ranq-4) * -1);
		padding-right: var(--ranq-4);
		padding-left: var(--ranq-4);
	}

	.ranq-tpl__card {
		flex-direction: column;
		gap: var(--ranq-4);
	}

	.ranq-tpl__sketch.is-big {
		flex: 0 0 auto;
		align-self: stretch;
	}
}

@media (max-width: 560px) {

	.ranq-builder__palette .ranq-palette__search {
		margin-right: calc(var(--ranq-3) * -1);
		margin-left: calc(var(--ranq-3) * -1);
		padding-right: var(--ranq-3);
		padding-left: var(--ranq-3);
	}

	.ranq-palette__search-icon {
		left: calc(var(--ranq-3) + 9px);
	}

	.ranq-builder__canvas--fields > .ranq-builder__heading {
		margin-right: calc(var(--ranq-3) * -1);
		margin-left: calc(var(--ranq-3) * -1);
		padding-right: var(--ranq-3);
		padding-left: var(--ranq-3);
	}

	.ranq-builder__settings .ranq-settings__foot {
		margin-right: calc(var(--ranq-3) * -1);
		margin-left: calc(var(--ranq-3) * -1);
		padding-right: var(--ranq-3);
		padding-left: var(--ranq-3);
	}

	/* On a phone the tools do not fit above the frame with a name and four
	   buttons, so the name stays and the position marker drops out. */
	.ranq-builder__canvas .ranq-canvas__actions {
		right: var(--ranq-1);
		left: var(--ranq-1);
	}

	.ranq-canvas__place {
		display: none;
	}

	.ranq-builder__wide.ranq-tpl {
		padding: var(--ranq-3) var(--ranq-3) var(--ranq-6);
	}

	.ranq-tpl__title {
		font-size: 19px;
	}

	.ranq-tpl__job-head {
		padding: var(--ranq-2) var(--ranq-3);
	}

	.ranq-tpl__chips {
		padding-left: 0;
	}

	.ranq-tpl__job-body {
		padding: var(--ranq-3);
	}

	.ranq-tpl__grid {
		grid-template-columns: 1fr;
	}

	.ranq-tpl__card {
		padding: var(--ranq-4);
	}
}

/* == END: FIELDS AND TEMPLATES == */

/* ==================================================================
   THE DESK: FORM SETTINGS, DESIGN AND FULL WIDGETS
   Tasks 4, 5 and 6. Here and only here goes the style of those three screens.
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   TASK 4: THE FORM SETTINGS TAB

   One rule holds the whole screen: this is READ, not filled in. That is
   why every setting has a value even when that value comes from
   somewhere else, and an empty field does not exist.

   The three groups are not equal and so they do not look alike. The
   email is the subject of the screen and gets paper with a shadow. After
   sending is a tool and gets a box with a line, without a shadow. Who
   may send is background, a list of rows lying on the work surface. The
   same three levels the frame already uses.
   ------------------------------------------------------------------ */

.ranq-builder__wide.ranq-fset {
	min-height: 100%;
	padding: 0;
	background: var(--ranq-desk);
}

/* ---------- the summary, the whole page in one sentence ---------- */

.ranq-fset__sum {
	display: flex;
	gap: var(--ranq-4);
	align-items: baseline;
	padding: var(--ranq-3) var(--ranq-4);
	border-bottom: 1px solid var(--ranq-line);
	background: var(--ranq-paper);
}

.ranq-fset__sum p {
	min-width: 0;
	flex: 1 1 auto;
	margin: 0;
	color: var(--ranq-muted);
	font-size: 13px;
}

.ranq-fset__sum p b {
	color: var(--ranq-ink);
	font-weight: 600;
}

.ranq-fset__tally {
	display: inline-flex;
	gap: var(--ranq-2);
	align-items: center;
	flex: 0 0 auto;
	padding: 5px var(--ranq-3);
	border: 1px solid var(--ranq-line);
	border-radius: 999px;
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
	font-size: 12px;
	white-space: nowrap;
}

/* A Live dot means "this one you touched". The same colour and the same meaning
   as in the rest of the desk, so no new one is introduced. */
.ranq-admin .ranq-dot--live {
	background: var(--ranq-live);
}

/* ---------- the body ---------- */

.ranq-fset__body {
	display: grid;
	gap: var(--ranq-5);
	align-items: start;
	grid-template-columns: minmax(0, 1fr) 400px;
	padding: var(--ranq-5) var(--ranq-4) var(--ranq-6);
}

.ranq-fset__side {
	display: grid;
	gap: var(--ranq-5);
	align-content: start;
}

/* ---------- a group, three weights ---------- */

.ranq-builder__wide.ranq-fset .ranq-fset__group {
	margin: 0;
	padding: 0;
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-panel);
}

.ranq-builder__wide.ranq-fset .ranq-fset__group--main {
	box-shadow: var(--ranq-lift);
}

.ranq-builder__wide.ranq-fset .ranq-fset__group--quiet {
	border: 0;
	border-radius: 0;
	background: none;
}

.ranq-fset__head {
	display: flex;
	gap: var(--ranq-3);
	flex-wrap: wrap;
	row-gap: var(--ranq-1);
	align-items: baseline;
	padding: var(--ranq-4) var(--ranq-5) var(--ranq-3);
	border-bottom: 1px solid var(--ranq-line-soft);
}

.ranq-fset__group--quiet .ranq-fset__head {
	padding: 0 0 var(--ranq-2);
	border-bottom: 1px solid var(--ranq-line);
}

.ranq-fset__name {
	margin: 0;
	color: var(--ranq-ink);
	font: 600 15px/1.3 var(--ranq-font);
}

.ranq-fset__group--main .ranq-fset__name {
	font: 600 18px/1.2 var(--ranq-font);
	letter-spacing: -.01em;
}

/* The third group lies on the work surface, which is darker than a panel. So
   there is no faint text here: everything that gets read goes in ink, only
   weaker. */
.ranq-fset__group--quiet .ranq-fset__name {
	color: var(--ranq-ink-2);
	font: 700 11px/1 var(--ranq-font);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ranq-fset__state {
	display: inline-flex;
	gap: var(--ranq-2);
	align-items: center;
	padding: 3px var(--ranq-2);
	border-radius: 999px;
	background: var(--ranq-paper);
	box-shadow: inset 0 0 0 1px var(--ranq-line-soft);
	color: var(--ranq-ink-2);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.ranq-fset__state.is-quiet {
	padding: 0;
	background: none;
	box-shadow: none;
	font-weight: 400;
}

.ranq-fset__note {
	flex: 1 1 100%;
	margin: 0;
	color: var(--ranq-muted);
	font-size: 12px;
}

.ranq-fset__in {
	padding: var(--ranq-5);
}

.ranq-fset__group--main .ranq-fset__in {
	padding: var(--ranq-6);
}

.ranq-fset__group--quiet .ranq-fset__in {
	padding: var(--ranq-2) 0 0;
}

/* ---------- a settings row ---------- */

.ranq-fset .ranq-fset__row {
	margin: 0 0 var(--ranq-4);
}

.ranq-fset .ranq-fset__row:last-child {
	margin-bottom: 0;
}

.ranq-fset__group--main > .ranq-fset__in > .ranq-fset__row,
.ranq-fset__group--main > .ranq-fset__in > .ranq-fset__pair {
	margin-bottom: var(--ranq-5);
}

.ranq-fset__row-top {
	display: flex;
	gap: var(--ranq-2);
	align-items: baseline;
	margin-bottom: var(--ranq-1);
}

.ranq-fset .ranq-fset__row-top .ranq-settings__label {
	margin: 0;
	color: var(--ranq-ink-2);
	font-size: 12px;
	font-weight: 600;
}

.ranq-fset__pair {
	display: grid;
	gap: var(--ranq-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ranq-fset__pair > .ranq-fset__row {
	margin-bottom: 0;
}

/* ---------- THE INHERITED VALUE --------------------------------------
   The heart of this screen. Until now that was an empty field with a grey
   example inside it, so it looked forgotten. Now the empty field holds the
   REAL value that reaches a visitor today, in the monospaced face, and next
   to it a mark saying where it comes from. The monospaced face is out of the
   system: it carries what is a value, not a sentence.
   ------------------------------------------------------------------ */

.ranq-fset__field {
	position: relative;
}

.ranq-fset .ranq-fset__field input[type="text"].ranq-settings__input,
.ranq-fset .ranq-fset__field input[type="date"].ranq-settings__input,
.ranq-fset .ranq-fset__field input[type="number"].ranq-settings__input,
.ranq-fset .ranq-fset__field textarea.ranq-settings__input {
	min-height: var(--ranq-control);
	padding: var(--ranq-2) var(--ranq-3);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	color: var(--ranq-ink);
	font-size: 13px;
	line-height: 1.5;
}

.ranq-fset .ranq-fset__field textarea.ranq-settings__input {
	min-height: 64px;
}

/* A field that still takes somebody else's value is SUNKEN: the panel ground,
   the field border, and the value in the monospaced face. That way it is told
   apart at a glance from a field this form filled in itself. */
.ranq-fset__row.is-inherited .ranq-fset__field input.ranq-settings__input,
.ranq-fset__row.is-inherited .ranq-fset__field textarea.ranq-settings__input {
	padding-right: 132px;
	background: var(--ranq-inset);
}

.ranq-fset__row.is-inherited .ranq-fset__field textarea.ranq-settings__input {
	padding-right: var(--ranq-3);
	padding-bottom: 28px;
}

/* An inherited value is WRITTEN as a value. The colour is ink 2, which on the
   sunken ground gives 8.1 to 1, while faint would give 2.7. */
.ranq-fset__row.is-inherited .ranq-fset__field input.ranq-settings__input::placeholder,
.ranq-fset__row.is-inherited .ranq-fset__field textarea.ranq-settings__input::placeholder {
	color: var(--ranq-ink-2);
	font-family: var(--ranq-mono);
	font-size: 12px;
	opacity: 1;
}

/* The source mark sits IN the field, against the right edge, because it speaks
   about that value and not about the label above it. */
.ranq-fset__from {
	position: absolute;
	top: 7px;
	right: 7px;
	display: inline-flex;
	gap: 5px;
	align-items: center;
	height: 22px;
	padding: 0 var(--ranq-2);
	border-radius: 999px;
	background: var(--ranq-paper);
	box-shadow: inset 0 0 0 1px var(--ranq-line-soft);
	color: var(--ranq-muted);
	font: 500 11px/1 var(--ranq-font);
	white-space: nowrap;
	pointer-events: none;
}

/* On a field with several rows the mark goes to the bottom, and shifted left,
   because the resize handle sits in the corner itself and the two would
   overlap. */
.ranq-fset__row.is-inherited .ranq-fset__field textarea.ranq-settings__input ~ .ranq-fset__from {
	top: auto;
	right: 20px;
	bottom: 7px;
}

.ranq-fset__from .dashicons {
	width: 13px;
	height: 13px;
	font-size: 13px;
	color: var(--ranq-faint);
}

/* The moment a value becomes yours, the field is white and written in ink, and
   next to the label a badge and a way back to the inherited one appear. */
.ranq-fset__row.is-mine .ranq-fset__from {
	display: none;
}

/* Our `display` beats the `hidden` attribute, the same collision that has
   already cost us time with the form. Without this the badge and the way back
   stay on the screen even when the value is NOT yours, so every field lies. */
.ranq-fset [hidden] {
	display: none !important;
}

.ranq-fset__mine {
	display: inline-flex;
	align-items: center;
	height: 18px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--ranq-live-soft);
	color: var(--ranq-live);
	font: 700 10px/1 var(--ranq-font);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ranq-admin .ranq-fset__revert {
	display: inline-flex;
	gap: var(--ranq-1);
	align-items: center;
	margin-left: auto;
	padding: 3px var(--ranq-2);
	border: 0;
	border-radius: var(--ranq-r);
	background: none;
	color: var(--ranq-muted);
	font: 500 11px/1 var(--ranq-font);
	cursor: pointer;
}

.ranq-admin .ranq-fset__revert:hover {
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
}

.ranq-fset__revert .dashicons {
	width: 13px;
	height: 13px;
	font-size: 13px;
}

/* The legend sits once, at the place where a sunken field is first seen. */
.ranq-fset__legend {
	display: flex;
	gap: var(--ranq-3);
	align-items: flex-start;
	margin: 0 0 var(--ranq-5);
	padding: var(--ranq-3) var(--ranq-4);
	border-left: 3px solid var(--ranq-ink);
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
	font-size: 12px;
	line-height: 1.6;
}

.ranq-fset__legend-tag {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: 24px;
	padding: 0 var(--ranq-2);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-inset);
	color: var(--ranq-ink-2);
	font: 11px/1 var(--ranq-mono);
}

/* ---------- where else the entry goes, subordinate to the notification ---------- */

.ranq-fset__extra {
	margin-top: var(--ranq-5);
	padding-top: var(--ranq-4);
	border-top: 1px solid var(--ranq-line);
}

.ranq-fset__extra-name {
	margin: 0 0 var(--ranq-2);
	color: var(--ranq-muted);
	font: 700 11px/1 var(--ranq-font);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ranq-fset__extra-row {
	display: flex;
	gap: var(--ranq-2) var(--ranq-5);
	flex-wrap: wrap;
}

.ranq-fset__extra-row .ranq-fset__row {
	margin: 0;
}

.ranq-fset__extra-row .ranq-settings__help {
	display: none;
}

/* ---------- the switch --------------------------------------------
   WordPress draws its own checkbox over our class, so the input name has to
   be in the selector. Without that a plain checkbox is left next to our
   switch.
   ------------------------------------------------------------------ */

.ranq-fset .ranq-toggle {
	gap: var(--ranq-2);
	align-items: center;
	min-height: var(--ranq-control);
	margin: 0;
	color: var(--ranq-ink-2);
	font-size: 13px;
}

.ranq-fset .ranq-toggle input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
}

.ranq-fset .ranq-toggle__mark {
	position: relative;
	display: inline-block;
	width: 34px;
	height: 20px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: var(--ranq-line-field);
	transition: background-color var(--ranq-t);
}

.ranq-fset .ranq-toggle__mark::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ranq-paper);
	transition: left var(--ranq-t);
}

.ranq-fset .ranq-toggle input[type="checkbox"]:checked + .ranq-toggle__mark {
	background: var(--ranq-live);
}

.ranq-fset .ranq-toggle input[type="checkbox"]:checked + .ranq-toggle__mark::after {
	left: 17px;
}

.ranq-fset .ranq-toggle input[type="checkbox"]:focus-visible + .ranq-toggle__mark {
	outline: 2px solid var(--ranq-live);
	outline-offset: 2px;
}

.ranq-fset .ranq-toggle__text {
	flex: 0 1 auto;
}

/* ---------- a choice of two, sentences rather than words ------------
   The options are whole sentences, so a drop down is no good: it shows one,
   and a person has to open it to learn that the other exists at all.
   ------------------------------------------------------------------ */

.ranq-fset__pick {
	display: grid;
	gap: var(--ranq-2);
}

@media (min-width: 1181px) {
	.ranq-fset__group--main .ranq-fset__pick {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ranq-fset .ranq-fset__pick-card {
	display: flex;
	gap: var(--ranq-2);
	align-items: flex-start;
	min-height: var(--ranq-control);
	padding: var(--ranq-2) var(--ranq-3);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
	font-size: 13px;
	cursor: pointer;
	transition: background-color var(--ranq-t), border-color var(--ranq-t);
}

.ranq-fset .ranq-fset__pick-card input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
}

.ranq-fset .ranq-fset__pick-mark {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-top: 2px;
	border: 1px solid var(--ranq-line-field);
	border-radius: 50%;
	background: var(--ranq-paper);
}

.ranq-fset .ranq-fset__pick-card.is-on {
	border-color: var(--ranq-live);
	background: var(--ranq-live-soft);
	color: var(--ranq-ink);
	font-weight: 600;
}

.ranq-fset .ranq-fset__pick-card.is-on .ranq-fset__pick-mark {
	border-color: var(--ranq-live);
	background: var(--ranq-live);
	box-shadow: inset 0 0 0 3px var(--ranq-paper);
}

.ranq-fset .ranq-fset__pick-card input[type="radio"]:focus-visible + .ranq-fset__pick-mark {
	outline: 2px solid var(--ranq-live);
	outline-offset: 2px;
}

/* What a choice pulls along with it sits indented under it, next to a live
   line, so it is clear it belongs to that choice and not to the group. */
.ranq-fset__after {
	margin-top: var(--ranq-3);
	padding-left: var(--ranq-3);
	border-left: 2px solid var(--ranq-live);
}

/* ---------- THE LIST OF RULES ---------------------------------------
   The third group is usually only glanced at: everything is off and that is
   how it should be. So it is not eight fields but eight rows: the name on
   the left, the state on the right. A click opens the field, and only then
   does the row become a field.
   ------------------------------------------------------------------ */

.ranq-admin .ranq-fset__item {
	display: flex;
	gap: var(--ranq-3);
	align-items: baseline;
	width: 100%;
	min-height: var(--ranq-control);
	margin: 0;
	padding: var(--ranq-2) var(--ranq-2) var(--ranq-2) 0;
	border: 0;
	border-bottom: 1px solid var(--ranq-line-field);
	border-radius: 0;
	background: none;
	color: var(--ranq-ink);
	font: 13px/1.5 var(--ranq-font);
	text-align: left;
	cursor: pointer;
	transition: background-color var(--ranq-t);
}

.ranq-admin button.ranq-fset__item:hover {
	background: rgba(255, 255, 255, .5);
}

.ranq-fset__item-name {
	min-width: 0;
	flex: 1 1 auto;
	color: var(--ranq-ink-2);
	font-size: 13px;
}

.ranq-fset__item-value {
	display: inline-flex;
	gap: var(--ranq-2);
	align-items: center;
	flex: 0 0 auto;
	max-width: 55%;
	color: var(--ranq-ink);
	font-size: 13px;
	font-weight: 600;
	text-align: right;
}

/* The default is told apart by weight rather than by faintness, because faint
   on the work surface falls below 4.5 to 1. */
.ranq-fset__item-value.is-default {
	color: var(--ranq-ink-2);
	font-weight: 400;
}

.ranq-fset__item-value.is-inherited {
	overflow: hidden;
	padding: 2px var(--ranq-2);
	border-radius: var(--ranq-r);
	background: var(--ranq-inset);
	box-shadow: inset 0 0 0 1px var(--ranq-line-field);
	color: var(--ranq-ink-2);
	font: 11px/1.5 var(--ranq-mono);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranq-admin .ranq-fset__item.is-dead {
	cursor: default;
}

.ranq-fset__item.is-dead .ranq-fset__item-name {
	color: var(--ranq-muted);
}

.ranq-fset__item.is-dead .ranq-fset__item-value.is-default {
	color: var(--ranq-muted);
	font-size: 12px;
}

/* An open row rises onto a panel. That shows it is open, and only then does the
   helper text sit on a ground it can be read on. */
.ranq-admin .ranq-fset__item.is-open {
	display: block;
	margin: var(--ranq-2) 0;
	padding: var(--ranq-3);
	border: 0;
	border-radius: var(--ranq-r);
	background: var(--ranq-panel);
	cursor: default;
}

.ranq-fset__item-top {
	display: flex;
	gap: var(--ranq-3);
	align-items: baseline;
	min-height: 28px;
}

.ranq-fset__item.is-open .ranq-fset__item-name {
	color: var(--ranq-ink);
	font-weight: 600;
}

.ranq-fset__item-body {
	position: relative;
	margin-top: var(--ranq-2);
}

.ranq-admin .ranq-fset__close {
	position: absolute;
	top: -30px;
	right: 0;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: var(--ranq-r-sm);
	background: none;
	color: var(--ranq-muted);
	font: 16px/1 var(--ranq-font);
	cursor: pointer;
}

.ranq-admin .ranq-fset__close:hover {
	background: var(--ranq-paper);
	color: var(--ranq-ink);
}

/* ---------- the bottom ---------- */

.ranq-fset__foot {
	display: flex;
	gap: var(--ranq-3);
	flex-wrap: wrap;
	align-items: center;
	margin: 0 var(--ranq-4);
	padding: var(--ranq-4) 0 var(--ranq-6);
	border-top: 1px solid var(--ranq-line-field);
	color: var(--ranq-ink-2);
	font-size: 12px;
}

.ranq-fset__foot-link {
	margin-left: auto;
	color: var(--ranq-ink-2);
}

/* ---------- the helper text ---------- */

.ranq-fset .ranq-settings__help {
	margin: var(--ranq-1) 0 0;
	color: var(--ranq-muted);
	font-size: 11px;
	line-height: 1.5;
}


/* ---------- narrower screens, the Settings tab ---------- */

@media (max-width: 1440px) {
	.ranq-fset__body {
		grid-template-columns: minmax(0, 1fr) 344px;
	}

	.ranq-fset__group--main .ranq-fset__in {
		padding: var(--ranq-4);
	}

	.ranq-fset__head {
		padding: var(--ranq-3) var(--ranq-4);
	}
}

/* Below this there is no longer room for two columns: the right one would fall
   below 300 pixels and the sentence in a choice card would run to five lines. */
@media (max-width: 1180px) {
	.ranq-fset__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 782px) {
	.ranq-fset__sum {
		flex-wrap: wrap;
		row-gap: var(--ranq-2);
	}

	.ranq-fset__body {
		gap: var(--ranq-4);
		padding: var(--ranq-4) var(--ranq-3) var(--ranq-5);
	}

	.ranq-fset__in,
	.ranq-fset__group--main .ranq-fset__in {
		padding: var(--ranq-3);
	}

	.ranq-fset__group--quiet .ranq-fset__in {
		padding: var(--ranq-2) 0 0;
	}

	.ranq-fset__head {
		padding: var(--ranq-3);
	}

	.ranq-fset__group--quiet .ranq-fset__head {
		padding: 0 0 var(--ranq-2);
	}

	.ranq-fset__pair {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The name and the value do not fit on the same line, so the value drops
	   under the name and stays against the right edge, where the eye already
	   looks for it. */
	.ranq-admin .ranq-fset__item {
		flex-wrap: wrap;
		row-gap: var(--ranq-1);
	}

	.ranq-fset__item-value {
		max-width: 100%;
		margin-left: auto;
	}

	.ranq-fset__legend {
		flex-wrap: wrap;
		row-gap: var(--ranq-2);
	}

	.ranq-fset__foot {
		margin: 0 var(--ranq-3);
	}

	.ranq-fset__foot-link {
		margin-left: 0;
	}

	/* On a narrow screen the source mark eats the whole field, so it goes under the
   field. */
	.ranq-fset__row.is-inherited .ranq-fset__field input.ranq-settings__input,
	.ranq-fset__row.is-inherited .ranq-fset__field textarea.ranq-settings__input {
		padding-right: var(--ranq-3);
	}

	.ranq-fset__from,
	.ranq-fset__row.is-inherited .ranq-fset__field textarea.ranq-settings__input ~ .ranq-fset__from {
		position: static;
		right: auto;
		bottom: auto;
		margin-top: var(--ranq-1);
	}
}


/* ------------------------------------------------------------------
   TASK 5: THE DESIGN TAB

   The three columns of the frame stay, they are only filled with other
   work: on the left a choice among 45 ready made styles, in the middle
   your real form on a ground you pick, on the right 57 settings with the
   three most used ones lifted to the top.

   Nowhere does the screen say the preview is live. Instead of a
   sentence, the change is SEEN: a ring around the part of the form you
   just touched, the value in the bar above the preview, and the
   thumbnail at the top left that changes along with the form.

   🔴 The form is not touched by a single rule from here. The paper
   around it is ours, the bar above it is ours, the ring is an `outline`,
   which is not any value the user picks.
   ------------------------------------------------------------------ */

.ranq-builder__styles {
	flex: 0 0 288px;
	border-right: 1px solid var(--ranq-line);
}

.ranq-builder__cols.is-design .ranq-builder__settings {
	flex: 0 0 352px;
}

/* ---------- on the left: what is on the form RIGHT NOW ---------- */

/* It sits stuck to the top of the column, so it is seen even after a hundred
   rows of scrolling the list. The negative spacing is there so the ground covers
   the whole width. */
.ranq-styles__now {
	position: sticky;
	top: 40px;
	z-index: 2;
	margin: 0 calc(var(--ranq-4) * -1) var(--ranq-3);
	padding: var(--ranq-3) var(--ranq-4);
	border-bottom: 1px solid var(--ranq-line);
	background: var(--ranq-panel);
}

.ranq-styles__now-row {
	display: flex;
	gap: var(--ranq-3);
	align-items: center;
}

/* The same ring is carried by the thumbnail here and by the tile in the grid, so
   the same thing in two places is recognised as the same thing. */
.ranq-styles__now-mini {
	width: 64px;
	height: auto;
	flex: 0 0 auto;
	box-shadow: 0 0 0 2px var(--ranq-live);
}

.ranq-styles__now-name {
	min-width: 0;
}

.ranq-styles__now-name b {
	display: block;
	overflow: hidden;
	color: var(--ranq-ink);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.01em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranq-styles__now-note {
	display: flex;
	gap: var(--ranq-1);
	align-items: center;
	margin-top: 2px;
	color: var(--ranq-muted);
	font: 11px/1.3 var(--ranq-mono);
}

/* ---------- on the left: the search and the sieve ---------- */

.ranq-admin input[type="search"].ranq-styles__search {
	width: 100%;
	height: var(--ranq-control);
	margin: 0 0 var(--ranq-3);
	padding: 0 var(--ranq-3);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	box-shadow: none;
	color: var(--ranq-ink);
	font-size: 13px;
}

.ranq-chips {
	display: flex;
	gap: var(--ranq-1);
	flex-wrap: wrap;
	margin-bottom: var(--ranq-3);
}

/* A sieve tile. The visible height is 26, while what a finger hits is 34: the
   hit area is widened up and down, so the sieve bar does not grow into three
   rows of 36 pixels. */
.ranq-admin .ranq-chip {
	position: relative;
	display: inline-flex;
	gap: var(--ranq-1);
	align-items: center;
	height: 26px;
	padding: 0 var(--ranq-2);
	border: 1px solid var(--ranq-line);
	border-radius: 999px;
	background: var(--ranq-paper);
	color: var(--ranq-muted);
	font: 500 12px/1 var(--ranq-font);
	cursor: pointer;
	transition: background-color var(--ranq-t), color var(--ranq-t), border-color var(--ranq-t);
}

.ranq-admin .ranq-chip::after {
	content: "";
	position: absolute;
	top: -4px;
	right: 0;
	bottom: -4px;
	left: 0;
}

.ranq-admin .ranq-chip:hover {
	border-color: var(--ranq-line-field);
	color: var(--ranq-ink-2);
}

.ranq-admin .ranq-chip.is-on {
	border-color: var(--ranq-ink);
	background: var(--ranq-ink);
	color: #fff;
}

.ranq-chip__count {
	color: var(--ranq-faint);
	font: 11px/1 var(--ranq-mono);
}

.ranq-chip.is-on .ranq-chip__count {
	color: rgba(255, 255, 255, .65);
}

.ranq-styles__none {
	margin: 0 0 var(--ranq-3);
	color: var(--ranq-muted);
	font-size: 12px;
}

/* ---------- on the left: the grid of styles ---------- */

.ranq-styles__grid {
	display: grid;
	gap: var(--ranq-2);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 0 var(--ranq-5);
}

.ranq-admin .ranq-styles__item {
	display: block;
	padding: var(--ranq-1);
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	text-align: left;
	cursor: pointer;
	transform: none;
	transition: border-color var(--ranq-t), box-shadow var(--ranq-t);
}

.ranq-admin .ranq-styles__item:hover {
	border-color: var(--ranq-faint);
	box-shadow: var(--ranq-pop);
	transform: none;
}

.ranq-admin .ranq-styles__item.is-current {
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--ranq-live);
}

.ranq-styles__item.is-current .ranq-styles__name {
	color: var(--ranq-live);
	font-weight: 700;
}

/* The thumbnail is the style itself: the ground, the field, the border, the
   corner radius and the button take the REAL values of that style. Nothing is
   drawn by hand. */
.ranq-styles__mini {
	display: block;
	height: auto;
	padding: 7px;
	border-radius: 4px;
	background-color: var(--ranq-form-bg, #fff);
	box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .28);
}

.ranq-styles__mini-label {
	display: block;
	width: 34%;
	height: 4px;
	margin-bottom: 5px;
	border-radius: 2px;
	background: var(--ranq-label-color, #16181d);
	opacity: 1;
}

.ranq-styles__mini-field {
	display: block;
	height: 13px;
	margin-bottom: 5px;
	border-color: var(--ranq-field-border-color, #c9ccd4);
	border-style: var(--ranq-field-border-style, solid);
	border-width: var(--ranq-field-border-width, 1px);
	border-radius: min(var(--ranq-field-radius, 6px), 6px);
	background: var(--ranq-field-bg, #fff);
}

.ranq-styles__mini-button {
	display: block;
	width: 52%;
	height: 9px;
	margin-top: 7px;
	border-radius: min(var(--ranq-button-radius, 6px), 5px);
	background: var(--ranq-button-bg, #16181d);
}

.ranq-styles__now-mini .ranq-styles__mini-field {
	height: 11px;
}

.ranq-styles__now-mini .ranq-styles__mini-button {
	height: 8px;
}

.ranq-styles__name {
	display: block;
	overflow: hidden;
	padding: var(--ranq-1) var(--ranq-1) 2px;
	color: var(--ranq-ink-2);
	font-size: 11px;
	font-weight: 500;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- in the middle: the bar above the preview ---------- */

.ranq-stage__bar {
	display: flex;
	gap: var(--ranq-3);
	align-items: center;
	max-width: 680px;
	margin: 0 auto var(--ranq-3);
}

.ranq-stage__who {
	display: flex;
	min-width: 0;
	gap: var(--ranq-2);
	align-items: center;
	color: var(--ranq-ink-2);
	font-size: 12px;
	font-weight: 600;
}

/* The value that was just written. The monospaced face, because it is a value
   and not a sentence. It falls away by itself after two seconds of quiet. */
.ranq-stage__value {
	overflow: hidden;
	max-width: 26ch;
	padding: 3px 7px;
	border-radius: var(--ranq-r);
	background: var(--ranq-live);
	color: #fff;
	font: 11px/1 var(--ranq-mono);
	font-style: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranq-stage__tools {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	margin-left: auto;
}

/* The ground of the preview is OURS, the form is not. Thirteen of the styles
   were taken from sites that have a dark band, and on white paper they look
   broken although they are not. This switch changes only the paper under the
   form. */
.ranq-builder__canvas .ranq-canvas__paper.is-dark {
	background: #16181d;
}

/* ---------- shared pieces: the row of choices and the small buttons ---------- */

.ranq-seg {
	display: flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
}

.ranq-admin .ranq-seg__b {
	position: relative;
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	padding: 0 var(--ranq-2);
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--ranq-muted);
	font: 500 12px/1 var(--ranq-font);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ranq-t), color var(--ranq-t);
}

/* The same rule as with a sieve tile: 28 visible, a full 36 to hit. */
.ranq-admin .ranq-seg__b::after {
	content: "";
	position: absolute;
	top: -4px;
	right: 0;
	bottom: -4px;
	left: 0;
}

.ranq-admin .ranq-seg__b:hover {
	color: var(--ranq-ink-2);
}

.ranq-admin .ranq-seg__b.is-on {
	background: var(--ranq-live-soft);
	color: var(--ranq-live);
	font-weight: 700;
}

.ranq-admin .ranq-btn-small {
	position: relative;
	display: inline-flex;
	gap: var(--ranq-2);
	align-items: center;
	height: 30px;
	padding: 0 var(--ranq-3);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
	font: 500 12px/1 var(--ranq-font);
	white-space: nowrap;
	cursor: pointer;
}

.ranq-admin .ranq-btn-small::after {
	content: "";
	position: absolute;
	top: -3px;
	right: 0;
	bottom: -3px;
	left: 0;
}

.ranq-admin .ranq-btn-small.is-held {
	border-color: var(--ranq-live);
	background: var(--ranq-live-soft);
	color: var(--ranq-live);
}

.ranq-admin .ranq-btn-quiet {
	display: inline-flex;
	gap: var(--ranq-2);
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--ranq-control);
	padding: 0 var(--ranq-3);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
	font: 500 12px/1 var(--ranq-font);
	cursor: pointer;
}

.ranq-admin .ranq-btn-quiet:hover {
	border-color: var(--ranq-ink);
	color: var(--ranq-ink);
}

/* ---------- the ring on the part of the form that just changed -------
   An `outline` is used, never a `box-shadow` or a `border`, because both the
   shadow and the border of the form are the user's values out of this very
   screen. The white outer edge exists because the ground underneath can be
   either dark or light.
   ------------------------------------------------------------------ */

.ranq-builder__canvas--design .ranq-design-mark {
	outline: 2px solid var(--ranq-live);
	outline-offset: 4px;
}

/* ---------- on the right: the three most used, then seven groups ---------- */

.ranq-design__start {
	margin: 0 0 var(--ranq-4);
	padding: var(--ranq-3);
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-paper);
}

.ranq-design__start-name {
	margin: 0 0 var(--ranq-3);
	color: var(--ranq-muted);
	font: 700 11px/1 var(--ranq-font);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ranq-design__start .ranq-design__setting:last-child {
	margin-bottom: 0;
}

.ranq-design__groups {
	overflow: hidden;
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-paper);
}

.ranq-builder__design .ranq-design__group {
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--ranq-line-soft);
}

.ranq-builder__design .ranq-design__group:first-child {
	border-top: 0;
}

.ranq-builder__design .ranq-design__group.is-open {
	background: var(--ranq-panel);
}

.ranq-admin .ranq-design__row {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	width: 100%;
	height: 44px;
	padding: 0 var(--ranq-3);
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ranq-ink-2);
	font: 600 13px/1 var(--ranq-font);
	text-align: left;
	cursor: pointer;
	transition: background-color var(--ranq-t);
}

.ranq-admin .ranq-design__row:hover {
	background: var(--ranq-panel);
}

.ranq-design__group.is-open .ranq-design__row {
	color: var(--ranq-ink);
}

.ranq-design__row-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* A group you touched carries a live dot, so it still speaks up when closed. */
.ranq-design__row-live {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	margin-left: auto;
	color: var(--ranq-live);
	font: 11px/1 var(--ranq-mono);
}

.ranq-design__row-count {
	color: var(--ranq-muted);
	font: 11px/1 var(--ranq-mono);
}

.ranq-design__row-live + .ranq-design__row-count {
	margin-left: 0;
}

.ranq-design__row-name + .ranq-design__row-count {
	margin-left: auto;
}

.ranq-design__row-arrow {
	width: 12px;
	color: var(--ranq-faint);
	text-align: center;
}

.ranq-design__body {
	padding: var(--ranq-1) var(--ranq-3) var(--ranq-3);
}

.ranq-design__foot {
	margin-top: var(--ranq-4);
	padding-bottom: var(--ranq-5);
}

/* ---------- one setting ---------- */

.ranq-builder__design .ranq-design__setting {
	margin: 0 0 var(--ranq-4);
}

/* The row you just touched carries a live line on its left, the same colour as
   the ring on the form. The hand is here, the change is there, and that is one
   colour. */
.ranq-design__setting.is-live {
	margin-left: calc(var(--ranq-3) * -1);
	padding-left: calc(var(--ranq-3) - 3px);
	border-left: 3px solid var(--ranq-live);
}

.ranq-builder__design .ranq-settings__label {
	margin-bottom: var(--ranq-1);
	font-size: 12px;
}

/* A read out value is a VALUE, so it carries the monospaced face. The tone is
   helper text and not faint: faint gives about 3 to 1, and the lower limit for
   text is 4.5. */
.ranq-builder__design .ranq-settings__readout {
	margin-left: auto;
	color: var(--ranq-muted);
	font: 11px/1 var(--ranq-mono);
	font-weight: 400;
}

.ranq-design__setting.is-live .ranq-settings__readout {
	color: var(--ranq-live);
	font-weight: 700;
}

.ranq-builder__design .ranq-color {
	gap: var(--ranq-2);
}

.ranq-admin .ranq-builder__design .ranq-color__picker {
	width: var(--ranq-control);
	height: var(--ranq-control);
	padding: 3px;
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
}

.ranq-admin .ranq-builder__design .ranq-color__text {
	min-height: var(--ranq-control);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	font-family: var(--ranq-mono);
	text-transform: uppercase;
}

.ranq-admin .ranq-builder__design .ranq-color__clear {
	width: var(--ranq-control);
	height: var(--ranq-control);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
}

.ranq-builder__design .ranq-range {
	accent-color: var(--ranq-ink-2);
}

.ranq-design__setting.is-live .ranq-range {
	accent-color: var(--ranq-live);
}

.ranq-builder__design .ranq-design__reset {
	margin-top: var(--ranq-2);
}

/* ---------- narrower screens, the Design tab ---------- */

@media (max-width: 1440px) {
	.ranq-builder__styles {
		flex: 0 0 260px;
	}

	.ranq-builder__cols.is-design .ranq-builder__settings {
		flex: 0 0 328px;
	}
}

@media (max-width: 1300px) {
	.ranq-builder__styles {
		flex: none;
		border-right: 0;
		border-bottom: 1px solid var(--ranq-line);
	}

	/* In a vertical stack the list of styles is not a narrow column but spreads
	   across the width, so 45 of them fit into five rows instead of twenty
	   three. */
	.ranq-styles__grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

	/* The column here is full width and has its own padding, so the negative
	   spacing of the stuck bar has nothing left to cover: it only runs off the
	   screen and creates sideways scrolling. Measured: 4 pixels. */
	.ranq-styles__now {
		position: static;
		margin: 0 0 var(--ranq-3);
	}

	/* A list of 45 styles in a vertical stack would push the form and the
	   settings five screens further down. So it gets its own height and its own
	   scrolling. */
	.ranq-styles__grid {
		max-height: 420px;
		overflow-y: auto;
	}

	.ranq-stage__bar {
		max-width: 100%;
	}
}

@media (max-width: 782px) {
	.ranq-styles__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ranq-stage__bar {
		flex-wrap: wrap;
		row-gap: var(--ranq-2);
	}

	.ranq-stage__tools {
		width: 100%;
		margin-left: 0;
	}
}


/* ------------------------------------------------------------------
   TASK 6: THE FULL WIDGETS TAB, SECOND STEP

   Here a person is not adding items but looking at ONE picture and
   changing parts of it. So the left column is not a list of fields but a
   map of the section, the bar with the device switch sits right above
   the picture instead of in the row of tabs, and the right hand panel
   splits the settings into what a part SAYS and how it LOOKS.
   ------------------------------------------------------------------ */

.ranq-builder__wmap {
	flex: 0 0 264px;
	border-right: 1px solid var(--ranq-line);
}

/* ---------- on the left: the map of the section ---------- */

.ranq-wmap {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* What is inside something is indented as well: the section holds everything, so
   everything is indented under it. That way the list reads as one picture rather
   than as a menu. */
.ranq-wpart__kids {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-left: 14px;
	padding-left: var(--ranq-3);
	border-left: 1px solid var(--ranq-line);
}

.ranq-admin .ranq-wpart,
.ranq-admin .ranq-wpart-locked {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	width: 100%;
	min-height: var(--ranq-control);
	margin: 0;
	padding: var(--ranq-1) var(--ranq-2);
	border: 1px solid transparent;
	border-radius: var(--ranq-r);
	background: none;
	color: var(--ranq-ink-2);
	text-align: left;
	cursor: pointer;
	transition: background-color var(--ranq-t), border-color var(--ranq-t);
}

.ranq-admin .ranq-wpart:hover {
	border-color: var(--ranq-line);
	background: var(--ranq-paper);
}

.ranq-admin .ranq-wpart.is-active {
	border-color: transparent;
	background: var(--ranq-live-soft);
	box-shadow: inset 2px 0 0 var(--ranq-live);
	color: var(--ranq-ink);
}

.ranq-wpart__text {
	min-width: 0;
	flex: 1 1 auto;
}

.ranq-wpart__text b {
	display: block;
	font: 600 12px/1.35 var(--ranq-font);
}

.ranq-wpart__text em {
	display: block;
	overflow: hidden;
	color: var(--ranq-muted);
	font: 400 11px/1.4 var(--ranq-font);
	font-style: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* An old rule from the first round writes a white letter on the chosen item,
   because back then the chosen item was a solid purple slab. The ground is faint
   now, so white would disappear. The input name is in the selector on purpose,
   to beat the old rule. */
.ranq-wpart.is-active .ranq-wpart__text b.ranq-palette__label {
	color: var(--ranq-ink);
}

.ranq-wpart.is-active .ranq-wpart__text em {
	color: var(--ranq-live);
}

/* The mark of a part is a small drawing of THAT part, not an icon next to which
   it says the same as the text does: a heading is one thick line, text is three
   thin ones, the rows of detail are lines with a mark on the left, a section is
   a frame. */
.ranq-wpart__mark {
	display: flex;
	width: 30px;
	height: 24px;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding: 4px;
	border-radius: var(--ranq-r-sm);
	background: var(--ranq-paper);
	box-shadow: inset 0 0 0 1px var(--ranq-line-soft);
	color: var(--ranq-faint);
}

.ranq-wpart__mark i {
	display: block;
	flex: 0 0 auto;
	height: 2px;
	width: 100%;
	border-radius: 1px;
	background: currentColor;
}

.ranq-wpart__mark.is-frame {
	justify-content: space-between;
	padding: 3px;
	background: var(--ranq-ink);
	color: rgba(255, 255, 255, .55);
}

.ranq-wpart__mark.is-head i {
	height: 4px;
	width: 80%;
}

.ranq-wpart__mark.is-text i:nth-child(2) {
	width: 90%;
}

.ranq-wpart__mark.is-text i:nth-child(3) {
	width: 60%;
}

.ranq-wpart__mark.is-rows i {
	width: 14px;
	margin-left: 8px;
	box-shadow: -8px 0 0 0 currentColor;
}

.ranq-wpart__mark.is-box {
	justify-content: center;
	padding: 5px 4px;
	box-shadow: inset 0 0 0 1px var(--ranq-line-field);
}

.ranq-wpart__mark.is-photo i {
	height: 14px;
	border-radius: 2px;
	opacity: .5;
}

.ranq-wpart.is-active .ranq-wpart__mark {
	color: var(--ranq-live);
	box-shadow: inset 0 0 0 1px #cfccf7;
}

.ranq-wpart.is-active .ranq-wpart__mark.is-frame {
	background: var(--ranq-live);
	color: rgba(255, 255, 255, .75);
}

/* The form is not a part of the section but the user's own object that the
   section holds. It stands on the map, but it is not edited from here. Without
   this line a person clicks the form in the preview, gets an empty panel and
   thinks something is broken. */
.ranq-admin .ranq-wpart-locked {
	color: var(--ranq-muted);
}

.ranq-wpart-locked .ranq-wpart__mark {
	background: var(--ranq-inset);
	box-shadow: inset 0 0 0 1px var(--ranq-line-soft);
}

.ranq-wpart__lock.dashicons {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	font-size: 14px;
	color: var(--ranq-faint);
}

.ranq-wmap__note {
	margin-top: var(--ranq-4);
	padding-bottom: var(--ranq-5);
}

/* ---------- in the middle: the bar above the preview -----------------
   Always in the same place, above the picture, because it acts on the whole
   picture and not on one setting. The negative spacing is there so the bar
   covers the whole width of the column and not only the content.
   ------------------------------------------------------------------ */

.ranq-builder__canvas--widget .ranq-stage__bar {
	display: flex;
	gap: var(--ranq-3);
	align-items: center;
	min-height: 52px;
	max-width: none;
	/* The widget column has no side padding of its own, so the bar must not pull
	   it into the negative either: it would then run out of the column and the
	   column would cut it off. */
	margin: 0 0 var(--ranq-4);
	padding: var(--ranq-2) var(--ranq-4);
	border-bottom: 1px solid var(--ranq-line);
	background: var(--ranq-paper);
}

.ranq-stage__name {
	min-width: 0;
	overflow: hidden;
	color: var(--ranq-ink);
	font: 600 13px/1.3 var(--ranq-font);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranq-builder__canvas--widget .ranq-stage__tools {
	display: flex;
	gap: var(--ranq-3);
	align-items: center;
	margin-left: auto;
}

/* The preview is an OBJECT on the work surface, just like the paper with the
   form in the Fields tab: a grey ground around it, a shadow under it. Without
   that a section on a white page has no edge and there is no telling where it
   begins. */
.ranq-builder__canvas--widget {
	padding-bottom: var(--ranq-7);
	background: var(--ranq-desk);
}

/* 🔴 `align-items` has to be `flex-start`. The frame is given a set height and
   the preview is its flexible child, so without this it STRETCHES to the height
   of the frame: the white ground of the preview stays 611 tall instead of 930
   and the bottom third of the section ends up on grey. It went unseen until now
   only because the column ground was white itself. */
.ranq-builder__canvas--widget .ranq-frame {
	align-items: flex-start;
	margin: 0 auto;
	border-radius: var(--ranq-r-lg);
	box-shadow: var(--ranq-lift);
}

.ranq-stage__live {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	justify-content: center;
	margin: 0 0 var(--ranq-3);
	color: var(--ranq-muted);
	font-size: 11px;
}

/* ---------- the device switch ---------- */

.ranq-builder__canvas--widget .ranq-devices {
	display: flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
}

.ranq-admin .ranq-builder__canvas--widget .ranq-device {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	height: 30px;
	padding: 0 10px;
	border: 0;
	border-radius: var(--ranq-r-sm);
	background: none;
	color: var(--ranq-muted);
	font: 500 12px/1 var(--ranq-font);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ranq-t), color var(--ranq-t);
}

.ranq-admin .ranq-builder__canvas--widget .ranq-device:hover {
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
}

.ranq-admin .ranq-builder__canvas--widget .ranq-device.is-active {
	background: var(--ranq-live-soft);
	color: var(--ranq-live);
	font-weight: 700;
}

/* The number is the REAL width the preview is rendered at, so it carries the
   monospaced face: it is a value, not a word. */
.ranq-device__w {
	color: var(--ranq-faint);
	font: 11px/1 var(--ranq-mono);
}

.ranq-device.is-active .ranq-device__w {
	color: var(--ranq-live);
}

.ranq-builder__canvas--widget .ranq-device__mark {
	color: currentColor;
}

/* ---------- on the right: the panel header and two groups ---------- */

.ranq-wpanel__head {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	margin: 0 0 var(--ranq-4);
	padding-bottom: var(--ranq-3);
	border-bottom: 1px solid var(--ranq-line-soft);
}

.ranq-wpanel__head strong {
	min-width: 0;
	overflow: hidden;
	color: var(--ranq-ink);
	font-size: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranq-wpanel__head .ranq-wpart__mark {
	color: var(--ranq-live);
	box-shadow: inset 0 0 0 1px #cfccf7;
}

.ranq-wpanel__key {
	margin-left: auto;
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--ranq-live-soft);
	color: var(--ranq-live);
	font: 11px/1 var(--ranq-mono);
}

.ranq-builder__widget .ranq-wpanel__group {
	margin: 0 0 var(--ranq-5);
	padding: 0;
	border: 0;
}

.ranq-wpanel__group-name {
	margin: 0 0 var(--ranq-3);
	color: var(--ranq-muted);
	font: 700 11px/1 var(--ranq-font);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ranq-builder__widget .ranq-settings__row {
	margin-bottom: var(--ranq-3);
}

.ranq-builder__widget .ranq-settings__label {
	margin-bottom: var(--ranq-1);
	color: var(--ranq-ink-2);
	font-size: 12px;
	font-weight: 600;
}

/* A note in the panel: the same shape as a rule in the system, because it is the
   same thing. */
.ranq-wpanel__note {
	margin: var(--ranq-4) 0 0;
	padding: var(--ranq-3);
	border-left: 3px solid var(--ranq-ink);
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
	font-size: 11px;
	line-height: 1.6;
}

/* ---------- the colour field and the measurement field ---------- */

.ranq-builder__widget .ranq-color {
	gap: var(--ranq-2);
	align-items: center;
	height: var(--ranq-control);
	padding: 0 var(--ranq-2) 0 var(--ranq-1);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
}

.ranq-admin .ranq-builder__widget .ranq-color__picker {
	width: 28px;
	height: 28px;
	padding: 2px;
	border: 0;
	border-radius: var(--ranq-r-sm);
	box-shadow: inset 0 0 0 1px rgba(20, 23, 28, .18);
}

.ranq-admin .ranq-builder__widget .ranq-color__text {
	min-height: 28px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ranq-ink-2);
	font: 12px/1 var(--ranq-mono);
	text-transform: uppercase;
}

.ranq-admin .ranq-builder__widget .ranq-color__clear {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	border: 0;
	background: none;
	color: var(--ranq-faint);
}

/* The word that says a value still comes from the pattern. Without it there is
   no telling "this is what I picked" from "this is what the pattern brought with
   it". */
.ranq-from-tpl {
	flex: 0 0 auto;
	color: var(--ranq-faint);
	font: 11px/1 var(--ranq-mono);
}

.ranq-builder__widget .ranq-size {
	display: grid;
	gap: 2px;
	grid-template-columns: 1fr auto;
	align-items: center;
}

.ranq-builder__widget .ranq-size .ranq-range {
	grid-column: 1 / -1;
	accent-color: var(--ranq-live);
}

.ranq-builder__widget .ranq-size__value {
	grid-row: 1;
	grid-column: 2;
	color: var(--ranq-ink-2);
	font: 12px/1 var(--ranq-mono);
}

/* A detail that comes out of the site settings sits sunken, exactly as in the
   Form settings tab, so empty and inherited do not get mixed up. */
.ranq-builder__widget .ranq-settings__row.is-inherited input.ranq-settings__input {
	border-color: var(--ranq-line-field);
	background: var(--ranq-inset);
}

.ranq-builder__widget .ranq-settings__row.is-inherited input.ranq-settings__input::placeholder {
	color: var(--ranq-ink-2);
	font-family: var(--ranq-mono);
	font-size: 11px;
	opacity: 1;
}

/* ---------- narrower screens, Full Widgets ---------- */

@media (max-width: 1440px) {
	.ranq-builder__wmap {
		flex: 0 0 232px;
	}
}

@media (max-width: 1300px) {
	.ranq-builder__wmap {
		flex: none;
		border-right: 0;
		border-bottom: 1px solid var(--ranq-line);
	}

	/* The map of the section does NOT spread into a grid the way the field list
	   does: the order of the parts is the order on the picture and it carries
	   meaning. */
	.ranq-wmap {
		display: flex;
		flex-direction: column;
	}
}

@media (max-width: 782px) {
	/* The bar wraps onto two rows, but it STAYS above the picture and stays the
	   first thing above it. The place does not change, it only stacks. */
	.ranq-builder__canvas--widget .ranq-stage__bar {
		flex-wrap: wrap;
		row-gap: var(--ranq-2);
		margin: 0 0 var(--ranq-3);
		padding: var(--ranq-2) var(--ranq-3);
	}

	.ranq-builder__canvas--widget .ranq-stage__tools {
		width: 100%;
		margin-left: 0;
		justify-content: space-between;
	}

	.ranq-builder__canvas--widget .ranq-devices {
		flex: 1 1 auto;
	}

	.ranq-admin .ranq-builder__canvas--widget .ranq-device {
		flex: 1 1 0;
		justify-content: center;
		padding: 0 4px;
	}

	.ranq-device__w {
		display: none;
	}
}


/* ------------------------------------------------------------------
   THE DESIGN ARRIVES WITH THE SECTION: A QUESTION INSTEAD OF A QUIET CHANGE

   Design and Full Widgets exclude each other. While the form design is
   held by a section, the Design tab does not offer its 45 styles and 57
   settings but one question with two ways out. That is why this screen
   does not look like a working screen with three columns: it is one
   sheet on the work surface, with the form in question right below, so
   it is clear what is being asked about.
   ------------------------------------------------------------------ */

.ranq-builder__wide.ranq-handover {
	min-height: 100%;
	padding: var(--ranq-7) var(--ranq-5) var(--ranq-7);
	background: var(--ranq-desk);
}

.ranq-handover__box {
	box-sizing: border-box;
	max-width: 680px;
	margin: 0 auto;
	padding: var(--ranq-6);
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-paper);
	box-shadow: var(--ranq-lift);
}

/* Where the design comes from. The name of the section stands above the
   question, because without it the question cannot even be understood. */
.ranq-handover__from {
	margin: 0 0 var(--ranq-2);
	color: var(--ranq-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ranq-handover__ask {
	margin: 0 0 var(--ranq-3);
	color: var(--ranq-ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.01em;
}

.ranq-handover__note {
	max-width: 62ch;
	margin: 0;
	color: var(--ranq-muted);
	font-size: 13px;
	line-height: 1.6;
}

/* The thumbnail of the design in question. The same one that sits at the top of
   the left column in the Design tab, so the two are recognised as one thing. */
.ranq-handover__row {
	display: flex;
	gap: var(--ranq-3);
	align-items: center;
	margin-top: var(--ranq-5);
	padding-top: var(--ranq-4);
	border-top: 1px solid var(--ranq-line-soft);
}

.ranq-handover__mini {
	width: 64px;
	height: auto;
	flex: 0 0 auto;
	box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .28);
}

.ranq-handover__mini .ranq-styles__mini-field {
	height: 11px;
}

.ranq-handover__mini .ranq-styles__mini-button {
	height: 8px;
}

.ranq-handover__name {
	min-width: 0;
}

.ranq-handover__name b {
	display: block;
	color: var(--ranq-ink);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.ranq-handover__name span {
	display: block;
	margin-top: 2px;
	color: var(--ranq-muted);
	font-size: 12px;
}

/* Two ways out, both visible, neither quiet. Taking it over is the main one,
   because that is what brought the person to this tab. */
.ranq-handover__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ranq-2);
	margin-top: var(--ranq-5);
}

.ranq-admin .ranq-handover__take,
.ranq-admin .ranq-handover__back {
	min-height: var(--ranq-control);
	padding: 0 var(--ranq-4);
}

/* The form in question. It is looked at, not touched, so it has neither a bar
   nor tools. */
.ranq-handover__stage {
	margin-top: var(--ranq-6);
}

.ranq-handover__stage .ranq-canvas__paper {
	max-width: 680px;
}

@media (max-width: 782px) {
	.ranq-builder__wide.ranq-handover {
		padding: var(--ranq-5) var(--ranq-3);
	}

	.ranq-handover__box {
		padding: var(--ranq-5);
	}

	.ranq-handover__ask {
		font-size: 18px;
	}
}

/* ------------------------------------------------------------------
   THE SECTION PICKER SHOWS THE FORM TOO

   🔴 Measured: while no section was chosen, this tab was a wall of
   fourteen tiles and nothing else, so for someone coming from the Design
   tab the form simply vanished. A section is what goes AROUND a form, so
   the form stands next to the intro text, as the measure of what is being
   chosen around.
   ------------------------------------------------------------------ */

.ranq-builder__wide.ranq-wchooser.has-form {
	display: grid;
	grid-template-areas:
		"uvod forma"
		"plocice forma";
	grid-template-columns: minmax(0, 1fr) 300px;
	grid-template-rows: auto 1fr;
	column-gap: var(--ranq-6);
	align-items: start;
}

.ranq-wchooser__intro {
	min-width: 0;
	grid-area: uvod;
}

.ranq-wchooser.has-form > .ranq-wgallery {
	min-width: 0;
	grid-area: plocice;
}

.ranq-wchooser__intro .ranq-fset__help {
	margin-bottom: 0;
}

.ranq-wchooser__form {
	position: relative;
	grid-area: forma;
	max-width: 100%;
}

.ranq-wchooser__form-name {
	margin: 0 0 var(--ranq-2);
	color: var(--ranq-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* The height is capped, because a form of twenty fields must not push the tiles
   below the edge of the screen. The fade at the end goes to the paper colour, so
   on a short form it is not seen at all, while on a long one it says there is
   more. */
.ranq-wchooser__form .ranq-canvas__paper {
	max-width: none;
	max-height: 360px;
	overflow: hidden;
	padding: var(--ranq-5);
}

.ranq-wchooser__form::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 56px;
	border-radius: 0 0 var(--ranq-r-lg) var(--ranq-r-lg);
	background: linear-gradient(rgba(255, 255, 255, 0), var(--ranq-paper));
	pointer-events: none;
}

/* Below 1300 pixels the form column no longer has the width it needs, so
   everything stacks vertically: the intro, the form, then the tiles. The order
   stays the same as in the wide layout, because it is read from top to bottom. */
@media (max-width: 1300px) {
	.ranq-builder__wide.ranq-wchooser.has-form {
		display: block;
	}

	.ranq-wchooser__form {
		max-width: 420px;
		margin-top: var(--ranq-5);
	}
}

/* ------------------------------------------------------------------
   THE BUTTONS IN THE BAR ABOVE THE CHOSEN FIELD: the target is 36 pixels

   The bar above the chosen field stays small, 26 pixels tall, because it
   is the heading of the selection and not a toolbox: it carries the type
   mark, the field name and the position in the order. A button in it was
   22 pixels tall, and the rule says nothing clickable is shorter than 36.

   So what is SEEN is separated from what is HIT. The mark stays 22 pixels
   and the bar does not grow by a single pixel, while the target is
   widened with an invisible layer of seven pixels above and seven below:
   7 + 22 + 7 = 36.

   The widening goes up and down only. It does not widen left and right,
   because the targets of neighbouring buttons would overlap and a click
   would catch the wrong button.
   ------------------------------------------------------------------ */

.ranq-builder__canvas .ranq-canvas__action {
	position: relative;
	width: 30px;
	height: 22px;
}

.ranq-builder__canvas .ranq-canvas__action::after {
	content: "";
	position: absolute;
	top: -7px;
	right: 0;
	bottom: -7px;
	left: 0;
}

/* A disabled button must not steal the target from its neighbour, because there
   is nothing on it to click. */
.ranq-builder__canvas .ranq-canvas__action:disabled::after {
	display: none;
}

/* == END: SETTINGS, DESIGN, SECTIONS == */

/* ==================================================================
   THE DESK: THE SCREENS OUTSIDE THE BUILDER
   Tasks 7, 8 and 9: the form list, the entries, the plugin settings.
   ------------------------------------------------------------------

   One rule holds all three screens, the same as in the builder: the body is
   a panel, and WHITE goes only to the thing the screen is opened for at all.
   On the list that is the column of shortcodes, on the entries one entry, in
   the settings the paper with the settings. Everything else is three depths
   of grey and one line.

   One deliberate difference from the mockup: small text that gets READ does
   not go on `--ranq-faint`. By the system that tone is for marks and icons,
   and it measures 3.1 to 1 on white and 2.7 on a panel, while the lower limit
   is 4.5. The column headings, the day heading, the hour in the list, the word
   Copy and the contents headings are text, so they go on `--ranq-muted`, which
   gives 5.4 on white and 4.7 on a panel. Faint stays only as the ground of a
   state dot.
   ------------------------------------------------------------------ */

/* These three screens run edge to edge, like the head of the builder. Without
   this the head floats in WordPress's padding and stops being the edge of the
   screen. The class is set by `Ranq_Forms_Admin::body_class`. */
body.ranq-edge #wpcontent,
body.ranq-edge #wpbody-content {
	padding-left: 0;
	padding-right: 0;
}

/* The wrappers are ABOVE the class that carries the tokens, so the ground goes
   in as a value. It is the same as `--ranq-panel`, and changes along with it. */
body.ranq-edge #wpbody-content {
	background: #eef1f6;
}

body.ranq-edge .ranq-admin.wrap {
	margin: 0;
	max-width: none;
}

body.ranq-edge #wpbody-content > .notice,
body.ranq-edge #wpbody-content > .updated,
body.ranq-edge #wpbody-content > .error {
	margin: 12px 16px;
}

body.ranq-edge #wpfooter {
	padding-left: 20px;
	padding-right: 20px;
}

/* ------------------------------------------------------------------
   SHARED PIECES: the button, the mark, the dot, the shortcode
   ------------------------------------------------------------------ */

.ranq-admin .ranq-btn {
	display: inline-flex;
	gap: var(--ranq-2);
	align-items: center;
	justify-content: center;
	height: var(--ranq-control);
	flex: 0 0 auto;
	padding: 0 var(--ranq-4);
	border: 1px solid transparent;
	border-radius: var(--ranq-r);
	background: none;
	font: 600 13px/1 var(--ranq-font);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ranq-t), border-color var(--ranq-t), color var(--ranq-t);
}

.ranq-admin .ranq-btn--main {
	background: var(--ranq-ink);
	color: #fff;
}

.ranq-admin .ranq-btn--main:hover,
.ranq-admin .ranq-btn--main:focus {
	background: #000;
	color: #fff;
}

.ranq-admin .ranq-btn--second {
	border-color: var(--ranq-line-field);
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
}

.ranq-admin .ranq-btn--second:hover,
.ranq-admin .ranq-btn--second:focus {
	border-color: #aab2c0;
	background: var(--ranq-panel);
	color: var(--ranq-ink);
}

.ranq-admin .ranq-btn--quiet {
	color: var(--ranq-muted);
}

.ranq-admin .ranq-btn--quiet:hover,
.ranq-admin .ranq-btn--quiet:focus {
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
}

.ranq-admin .ranq-btn--big {
	height: 44px;
	padding: 0 var(--ranq-5);
	font-size: 14px;
}

.ranq-admin .ranq-btn--small {
	height: 30px;
	padding: 0 var(--ranq-3);
	font-size: 12px;
}

.ranq-admin .ranq-btn--sq {
	width: var(--ranq-control);
	padding: 0;
}

/* The state dot. Colour is the only carrier of meaning, so it always goes with
   text. */
.ranq-admin .ranq-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--ranq-faint);
}

.ranq-admin .ranq-dot--ok { background: var(--ranq-ok); }
.ranq-admin .ranq-dot--warn { background: var(--ranq-warn); }
.ranq-admin .ranq-dot--danger { background: var(--ranq-danger); }
.ranq-admin .ranq-dot--dead { background: var(--ranq-faint); }

.ranq-admin .ranq-tag {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--ranq-panel);
	color: var(--ranq-muted);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.ranq-admin .ranq-tag--ok { background: var(--ranq-ok-soft); color: var(--ranq-ok); }
.ranq-admin .ranq-tag--danger { background: var(--ranq-danger-soft); color: var(--ranq-danger); }

.ranq-admin .ranq-copyable {
	font: 13px/1.5 var(--ranq-mono);
	overflow-wrap: anywhere;
}

/* ---------- the shortcode: a button, not text ----------

   The same behaviour and the same words as the button in the head of the
   builder. The whole width of the column is the click area, not only the
   icon. */

.ranq-admin .ranq-shortcode {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: var(--ranq-control);
	padding: 0 var(--ranq-1) 0 var(--ranq-3);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	box-shadow: none;
	color: var(--ranq-ink-2);
	font: 12px/1 var(--ranq-mono);
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ranq-t), border-color var(--ranq-t), color var(--ranq-t);
}

.ranq-admin .ranq-shortcode__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ranq-admin .ranq-shortcode__tag {
	display: inline-flex;
	gap: var(--ranq-1);
	align-items: center;
	justify-content: center;
	height: 28px;
	flex: 0 0 auto;
	padding: 0 var(--ranq-2);
	border-radius: var(--ranq-r-sm);
	color: var(--ranq-muted);
	font: 11px/1 var(--ranq-mono);
}

.ranq-admin .ranq-ico--done,
.ranq-admin .ranq-shortcode__word--done { display: none; }

.ranq-admin .ranq-shortcode.is-copied .ranq-ico--copy,
.ranq-admin .ranq-shortcode.is-copied .ranq-shortcode__word--copy { display: none; }

.ranq-admin .ranq-shortcode.is-copied .ranq-ico--done,
.ranq-admin .ranq-shortcode.is-copied .ranq-shortcode__word--done { display: inline-flex; }

/* Copied: green is a claim that the job is done. The code stays visible, because
   it often gets copied twice. */
.ranq-admin .ranq-shortcode.is-copied {
	border-color: var(--ranq-ok);
	background: var(--ranq-paper);
	color: var(--ranq-ok);
}

.ranq-admin .ranq-shortcode.is-copied .ranq-shortcode__tag {
	background: none;
	color: var(--ranq-ok);
	box-shadow: none;
}

/* A form with no fields at all: the code exists and copies, but there is nothing
   for it to show on a page, so it does not stand there as a finished thing. */
.ranq-admin .ranq-shortcode--quiet {
	border-color: var(--ranq-line-soft);
	background: var(--ranq-inset);
	color: var(--ranq-muted);
}

.ranq-admin .ranq-shortcode--still {
	width: auto;
	margin-top: var(--ranq-2);
	cursor: default;
}

/* ==================================================================
   TASK 7: THE FORM LIST
   ================================================================== */

.ranq-fl {
	border-bottom: 1px solid var(--ranq-line);
	background: var(--ranq-panel);
}

.ranq-fl__head {
	display: flex;
	gap: var(--ranq-4);
	align-items: center;
	min-height: var(--ranq-head);
	padding: var(--ranq-3) var(--ranq-4);
	border-bottom: 1px solid var(--ranq-line);
	background: var(--ranq-paper);
}

.ranq-fl__name {
	min-width: 0;
	flex: 1 1 auto;
}

.ranq-admin h1.ranq-fl__title {
	display: flex;
	gap: var(--ranq-2);
	align-items: baseline;
	margin: 0;
	padding: 0;
	font: 700 22px/1.2 var(--ranq-font);
	letter-spacing: -.02em;
}

.ranq-fl__count {
	color: var(--ranq-muted);
	font: 13px/1 var(--ranq-mono);
	letter-spacing: 0;
}

.ranq-fl__lead {
	margin: 2px 0 0;
	color: var(--ranq-muted);
	font-size: 12px;
}

.ranq-fl__tools {
	display: flex;
	gap: var(--ranq-3);
	align-items: center;
	margin-left: auto;
}

/* WordPress targets `input[type=search]`, so the input name has to be in the
   selector. */
.ranq-admin .ranq-search {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	width: 280px;
	height: var(--ranq-control);
	padding: 0 var(--ranq-3);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	color: var(--ranq-muted);
}

.ranq-admin .ranq-search:focus-within {
	border-color: var(--ranq-live);
	box-shadow: 0 0 0 3px var(--ranq-live-soft);
}

.ranq-admin .ranq-search input.ranq-search__input {
	width: 100%;
	min-height: 0;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--ranq-ink);
	font-size: 13px;
	outline: none;
}

.ranq-fl__bar {
	display: flex;
	gap: var(--ranq-4);
	align-items: center;
	min-height: var(--ranq-tabs);
	padding: 0 var(--ranq-4);
	border-bottom: 1px solid var(--ranq-line);
	background: var(--ranq-panel);
}

.ranq-seg {
	display: flex;
	gap: 2px;
	min-width: 0;
	padding: 3px;
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	overflow-x: auto;
	scrollbar-width: none;
}

.ranq-admin button.ranq-seg__b {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	height: 30px;
	flex: 0 0 auto;
	padding: 0 var(--ranq-3);
	border: 0;
	border-radius: var(--ranq-r-sm);
	background: none;
	color: var(--ranq-muted);
	font: 500 12px/1 var(--ranq-font);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ranq-t), color var(--ranq-t);
}

.ranq-admin button.ranq-seg__b u {
	color: var(--ranq-muted);
	font: 11px/1 var(--ranq-mono);
	text-decoration: none;
}

.ranq-admin button.ranq-seg__b:hover {
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
}

.ranq-admin button.ranq-seg__b.is-on {
	background: var(--ranq-live-soft);
	color: var(--ranq-live);
	font-weight: 700;
}

.ranq-admin button.ranq-seg__b.is-on u { color: var(--ranq-live); }

.ranq-fl__sorted {
	margin-left: auto;
	color: var(--ranq-muted);
	font-size: 12px;
	white-space: nowrap;
}

.ranq-fl__sorted b { color: var(--ranq-ink-2); font-weight: 600; }

.ranq-fl__cols,
.ranq-frow {
	display: grid;
	gap: var(--ranq-4);
	align-items: center;
	grid-template-columns: minmax(200px, 480px) 268px 220px 148px minmax(88px, 1fr);
	padding: 0 var(--ranq-4);
}

.ranq-fl__cols {
	height: var(--ranq-tabs);
	border-bottom: 1px solid var(--ranq-line);
	color: var(--ranq-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ranq-fl__rows { padding-bottom: var(--ranq-7); }

/* Our `display: grid` beats the `hidden` attribute, the same as in the form.
   Without this a row the search threw out stays on the screen. */
.ranq-fl__rows [hidden] { display: none !important; }

.ranq-frow {
	position: relative;
	min-height: 56px;
	border-bottom: 1px solid var(--ranq-line-soft);
}

.ranq-frow:hover { background: var(--ranq-paper); }

.ranq-admin a.ranq-frow__link {
	display: block;
	max-width: 46ch;
	overflow: hidden;
	color: var(--ranq-ink);
	font: 600 14px/1.3 var(--ranq-font);
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranq-frow:hover .ranq-frow__link { text-decoration: underline; }

.ranq-frow__meta {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	margin: 2px 0 0;
	color: var(--ranq-muted);
	font-size: 12px;
}

.ranq-frow--empty .ranq-frow__meta { color: var(--ranq-warn); }

/* On the row under the pointer the colours swap, so the control stays visible
   when the row turns white. */
.ranq-frow:hover .ranq-shortcode {
	border-color: #aab2c0;
	background: var(--ranq-panel);
}

.ranq-frow:hover .ranq-shortcode__tag {
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
	box-shadow: inset 0 0 0 1px var(--ranq-line-soft);
}

.ranq-frow:hover .ranq-shortcode--quiet,
.ranq-frow:hover .ranq-shortcode.is-copied {
	background: var(--ranq-inset);
}

.ranq-frow:hover .ranq-shortcode.is-copied {
	border-color: var(--ranq-ok);
	background: var(--ranq-paper);
}

.ranq-frow:hover .ranq-shortcode.is-copied .ranq-shortcode__tag {
	background: none;
	color: var(--ranq-ok);
	box-shadow: none;
}

.ranq-admin a.ranq-frow__entries,
.ranq-frow__entries {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	width: 100%;
	color: var(--ranq-ink);
	font-size: 13px;
	text-decoration: none;
}

.ranq-frow__entries strong { font: 600 15px/1 var(--ranq-font); }
.ranq-frow__entries em { color: var(--ranq-muted); font-size: 12px; font-style: normal; }
.ranq-admin a.ranq-frow__entries:hover em { color: var(--ranq-ink-2); text-decoration: underline; }
.ranq-frow__entries--none { color: var(--ranq-muted); font-size: 12px; }

/* The bar is a ratio against the largest number in the list, not against a
   hundred. */
.ranq-bar {
	width: 72px;
	height: 6px;
	flex: 0 0 auto;
	margin-left: auto;
	border-radius: 3px;
	background: var(--ranq-line-soft);
}

.ranq-bar i {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: var(--ranq-ink-2);
}

.ranq-frow__date {
	color: var(--ranq-muted);
	font-size: 12px;
	white-space: nowrap;
}

.ranq-frow__acts {
	display: flex;
	gap: var(--ranq-1);
	justify-content: flex-end;
}

.ranq-admin a.ranq-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ranq-control);
	height: var(--ranq-control);
	border: 1px solid transparent;
	border-radius: var(--ranq-r);
	background: none;
	color: var(--ranq-muted);
	text-decoration: none;
	transition: background-color var(--ranq-t), border-color var(--ranq-t), color var(--ranq-t);
}

.ranq-frow:hover .ranq-act { color: var(--ranq-muted); }

.ranq-admin a.ranq-act:hover {
	border-color: var(--ranq-line);
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
}

.ranq-admin a.ranq-act--danger:hover {
	border-color: var(--ranq-danger);
	background: var(--ranq-danger);
	color: #fff;
}

.ranq-fl__none {
	margin: 0;
	padding: var(--ranq-7) var(--ranq-4);
	color: var(--ranq-muted);
	font-size: 13px;
	text-align: center;
}

/* ---------- a first install, not a single form yet ---------- */

.ranq-first {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--ranq-7) var(--ranq-5);
	text-align: center;
}

.ranq-first h2 {
	margin: 0;
	font: 700 22px/1.2 var(--ranq-font);
	letter-spacing: -.02em;
}

.ranq-first > p {
	max-width: 46ch;
	margin: var(--ranq-2) 0 var(--ranq-5);
	color: var(--ranq-muted);
	font-size: 13px;
}

.ranq-first__steps {
	display: grid;
	gap: var(--ranq-3);
	width: 100%;
	max-width: 900px;
	margin-top: var(--ranq-7);
	grid-template-columns: repeat(3, 1fr);
	text-align: left;
}

.ranq-step {
	padding: var(--ranq-4);
	border: 1px solid var(--ranq-line-soft);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
}

.ranq-step__no {
	display: block;
	margin-bottom: var(--ranq-2);
	color: var(--ranq-muted);
	font: 11px/1 var(--ranq-mono);
	letter-spacing: .08em;
}

.ranq-step b { display: block; margin-bottom: var(--ranq-1); font-size: 13px; }
.ranq-step p { margin: 0; color: var(--ranq-muted); font-size: 12px; }

/* ==================================================================
   TASK 8: THE ENTRIES
   ------------------------------------------------------------------
   Seven columns and a long message do not fit into a table, so there is no
   table. On the left is a list the eye scans, on the right is one entry,
   whole.
   ================================================================== */

.ranq-ent {
	border-bottom: 1px solid var(--ranq-line);
	background: var(--ranq-desk);
}

.ranq-ent__head {
	display: flex;
	gap: var(--ranq-3);
	align-items: center;
	min-height: var(--ranq-head);
	padding: var(--ranq-3) var(--ranq-4);
	border-bottom: 1px solid var(--ranq-line);
	background: var(--ranq-paper);
}

.ranq-admin h1.ranq-ent__title {
	margin: 0;
	padding: 0;
	font: 600 18px/1.2 var(--ranq-font);
	letter-spacing: -.01em;
	white-space: nowrap;
}

.ranq-ent__rule {
	align-self: stretch;
	width: 1px;
	flex: 0 0 auto;
	margin: var(--ranq-1) 0;
	background: var(--ranq-line-soft);
}

/* The form picker is not a drop down glued into a corner but the first question
   of the screen: which form are you looking at and how many are there.
   WordPress targets `select`, so the input name has to be in the selector. */
.ranq-admin .ranq-ent .ranq-entries__filter {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-width: 0;
	margin: 0;
}

.ranq-admin .ranq-ent .ranq-entries__filter select.ranq-entries__which {
	height: var(--ranq-control);
	min-height: var(--ranq-control);
	max-width: 30ch;
	margin: 0;
	padding: 0 30px 0 var(--ranq-3);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background-color: var(--ranq-paper);
	background-image: none;
	box-shadow: none;
	color: var(--ranq-ink);
	font: 600 13px/1 var(--ranq-font);
	appearance: none;
	cursor: pointer;
}

.ranq-entries__arrow {
	position: absolute;
	right: 10px;
	color: var(--ranq-muted);
	pointer-events: none;
}

.ranq-ent__right {
	display: flex;
	gap: var(--ranq-3);
	align-items: center;
	margin-left: auto;
}

/* The sentence about trust. It is not a notice that can be dismissed but a
   permanent part of the head, because it is the only thing a site owner really
   asks here: where is the data. */
.ranq-ent__where {
	display: inline-flex;
	gap: var(--ranq-2);
	align-items: center;
	height: var(--ranq-control);
	padding: 0 var(--ranq-3);
	border: 1px solid var(--ranq-line-soft);
	border-radius: var(--ranq-r);
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
	font-size: 12px;
	white-space: nowrap;
}

.ranq-ent__where svg { flex: 0 0 auto; color: var(--ranq-muted); }

.ranq-ent__where code {
	padding: 0;
	background: none;
	color: var(--ranq-muted);
	font: 11px/1 var(--ranq-mono);
}

.ranq-admin .ranq-entries__export { margin-left: 0; }

/* ---------- two columns ---------- */

.ranq-ent__cols {
	display: flex;
	align-items: stretch;
	min-height: 560px;
}

.ranq-ent__side,
.ranq-ent__read {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.ranq-ent__side {
	flex: 0 0 372px;
	border-right: 1px solid var(--ranq-line);
	background: var(--ranq-panel);
}

.ranq-ent__read {
	flex: 1 1 auto;
	background: var(--ranq-desk);
}

.ranq-ent__cap {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	height: 40px;
	flex: 0 0 auto;
	padding: 0 var(--ranq-4);
	border-bottom: 1px solid var(--ranq-line-soft);
	color: var(--ranq-ink-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ranq-ent__read .ranq-ent__cap { border-bottom-color: var(--ranq-line); }

.ranq-ent__capr {
	display: flex;
	gap: var(--ranq-1);
	align-items: center;
	margin-left: auto;
	color: var(--ranq-muted);
	font: 11px/1 var(--ranq-mono);
	letter-spacing: 0;
	text-transform: none;
}

.ranq-ent__body { flex: 1 1 auto; }
.ranq-ent__stage { flex: 1 1 auto; padding: var(--ranq-5) var(--ranq-5) var(--ranq-7); }

.ranq-ent__day {
	position: sticky;
	top: 0;
	margin: 0;
	padding: var(--ranq-3) var(--ranq-4) var(--ranq-1);
	background: var(--ranq-panel);
	color: var(--ranq-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ranq-admin a.ranq-entries__item {
	display: block;
	width: 100%;
	padding: 9px var(--ranq-4) 11px var(--ranq-3);
	border-left: 3px solid transparent;
	border-bottom: 1px solid var(--ranq-line-soft);
	color: inherit;
	text-decoration: none;
	transition: background-color var(--ranq-t);
}

.ranq-admin a.ranq-entries__item:hover { background: var(--ranq-line-soft); }

.ranq-admin a.ranq-entries__item.is-on {
	border-left-color: var(--ranq-live);
	background: var(--ranq-live-soft);
}

.ranq-entries__top {
	display: flex;
	gap: var(--ranq-2);
	align-items: baseline;
}

.ranq-entries__who {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	color: var(--ranq-ink);
	font-size: 13px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranq-entries__at {
	flex: 0 0 auto;
	color: var(--ranq-muted);
	font: 11px/1 var(--ranq-mono);
}

.ranq-entries__topic {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	margin-top: 1px;
	color: var(--ranq-ink-2);
	font-size: 12px;
}

.ranq-entries__topic span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranq-entries__topic svg { flex: 0 0 auto; color: var(--ranq-muted); }

.ranq-entries__snip {
	display: block;
	margin-top: 2px;
	overflow: hidden;
	color: var(--ranq-muted);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- the reader, one entry ---------- */

.ranq-entry {
	max-width: 760px;
	margin: 0 auto;
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-paper);
	box-shadow: var(--ranq-lift);
}

.ranq-entry__head {
	display: flex;
	gap: var(--ranq-3);
	align-items: flex-start;
	padding: var(--ranq-5) var(--ranq-6) var(--ranq-4);
	border-bottom: 1px solid var(--ranq-line-soft);
}

.ranq-entry__who { min-width: 0; flex: 1 1 auto; }
.ranq-entry__who h2 { margin: 0; font: 600 18px/1.25 var(--ranq-font); letter-spacing: -.01em; }
.ranq-entry__who p { margin: 2px 0 0; color: var(--ranq-muted); font-size: 12px; }
.ranq-entry__acts { display: flex; gap: var(--ranq-2); flex: 0 0 auto; }

.ranq-entry__body { padding: var(--ranq-5) var(--ranq-6) var(--ranq-6); }

/* One entry is a list of pairs, not a row in a table. The field name on the left
   in its own column, the value on the right, however long it is. */
.ranq-pair {
	display: flex;
	gap: var(--ranq-5);
	padding: var(--ranq-3) 0;
	border-top: 1px solid var(--ranq-line-soft);
}

.ranq-pair:first-child { padding-top: 0; border-top: 0; }

.ranq-pair__name {
	flex: 0 0 168px;
	padding-top: 1px;
	color: var(--ranq-muted);
	font-size: 12px;
	font-weight: 600;
}

.ranq-pair__val {
	min-width: 0;
	flex: 1 1 auto;
	color: var(--ranq-ink);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.ranq-pair__val p { margin: 0 0 10px; line-height: 1.65; }
.ranq-pair__val p:last-child { margin-bottom: 0; }
.ranq-pair__blank { color: var(--ranq-muted); }

.ranq-pair__pick {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 var(--ranq-2);
	border-radius: var(--ranq-r);
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
	font-size: 12px;
	font-weight: 600;
}

.ranq-attach {
	display: flex;
	gap: var(--ranq-3);
	align-items: center;
	margin-bottom: var(--ranq-2);
	padding: var(--ranq-2) var(--ranq-3);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
}

.ranq-attach i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: var(--ranq-r);
	background: var(--ranq-panel);
	color: var(--ranq-muted);
	font: 700 10px/1 var(--ranq-mono);
	font-style: normal;
}

.ranq-attach__name { min-width: 0; }
.ranq-attach__name b { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ranq-attach__name small { color: var(--ranq-muted); font: 11px/1.4 var(--ranq-mono); }
.ranq-admin .ranq-attach .ranq-file-link { margin-left: auto; flex: 0 0 auto; }
.ranq-attach__note { margin: var(--ranq-2) 0 0; color: var(--ranq-muted); font-size: 11px; }

.ranq-entry__foot {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	flex-wrap: wrap;
	padding: var(--ranq-3) var(--ranq-6);
	border-top: 1px solid var(--ranq-line-soft);
	border-radius: 0 0 var(--ranq-r-lg) var(--ranq-r-lg);
	background: var(--ranq-panel);
	color: var(--ranq-muted);
	font-size: 11px;
}

.ranq-entry__foot svg { flex: 0 0 auto; }
.ranq-entry__foot span { min-width: 0; flex: 1 1 auto; }
.ranq-entry__foot code { padding: 0; background: none; color: var(--ranq-ink-2); font: 11px/1 var(--ranq-mono); }

/* ---------- the empty screen: a call to act, not a piece of news ---------- */

.ranq-ent__blank { padding: var(--ranq-7) var(--ranq-5); }

.ranq-invite {
	max-width: 760px;
	margin: 0 auto;
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-paper);
	box-shadow: var(--ranq-lift);
}

.ranq-invite__head { padding: var(--ranq-6) var(--ranq-6) var(--ranq-4); }
.ranq-invite__head h2 { margin: 0 0 var(--ranq-1); font: 600 22px/1.2 var(--ranq-font); letter-spacing: -.02em; }
.ranq-invite__head p { margin: 0; max-width: 60ch; color: var(--ranq-muted); font-size: 13px; }

.ranq-invite__steps {
	margin: 0;
	padding: 0 var(--ranq-6) var(--ranq-5);
	list-style: none;
	counter-reset: ranqk;
}

.ranq-istep {
	display: flex;
	gap: var(--ranq-4);
	padding: var(--ranq-4) 0;
	border-top: 1px solid var(--ranq-line-soft);
	counter-increment: ranqk;
}

.ranq-istep::before {
	content: counter(ranqk);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--ranq-ink);
	color: #fff;
	font: 700 12px/1 var(--ranq-mono);
}

.ranq-istep__body { min-width: 0; flex: 1 1 auto; }
.ranq-istep__body b { display: block; font-size: 13px; }
.ranq-istep__body p { margin: 2px 0 var(--ranq-3); color: var(--ranq-muted); font-size: 12px; }
.ranq-istep__body .ranq-copyable { font-size: 12px; color: var(--ranq-ink-2); }

.ranq-istep__acts {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	flex-wrap: wrap;
}

.ranq-istep__acts .ranq-shortcode { width: auto; }

.ranq-invite__foot {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	padding: var(--ranq-3) var(--ranq-6);
	border-top: 1px solid var(--ranq-line-soft);
	border-radius: 0 0 var(--ranq-r-lg) var(--ranq-r-lg);
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
	font-size: 12px;
}

.ranq-invite__foot svg { flex: 0 0 auto; color: var(--ranq-muted); }
.ranq-invite__foot span { min-width: 0; flex: 1 1 auto; }
.ranq-invite__foot code { padding: 0; background: none; font: 11px/1 var(--ranq-mono); }

/* Another form already has entries. The empty screen says so, because that is
   the most useful thing a person can do here. */
.ranq-ent__jump {
	display: flex;
	gap: var(--ranq-3);
	align-items: center;
	flex-wrap: wrap;
	max-width: 760px;
	margin: var(--ranq-4) auto 0;
	padding: var(--ranq-3) var(--ranq-4);
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-panel);
	color: var(--ranq-ink-2);
	font-size: 13px;
}

.ranq-ent__jump .ranq-btn { margin-left: auto; }

.ranq-admin .ranq-ent .tablenav {
	height: auto;
	margin: 0;
	padding: var(--ranq-3);
	border-top: 1px solid var(--ranq-line-soft);
}

/* ==================================================================
   TASK 9: THE PLUGIN SETTINGS
   ------------------------------------------------------------------
   On the left a table of contents, which is not a list of names but a list
   of STATES. On the right the paper, because here the settings are what is
   being worked on.
   ================================================================== */

.ranq-admin .ranq-settings-form.ranq-set {
	max-width: none;
	background: var(--ranq-paper);
	border-bottom: 1px solid var(--ranq-line);
}

/* Saving sits ABOVE, because the page scrolls a long way. */
.ranq-set__head {
	position: sticky;
	top: var(--ranq-adminbar);
	z-index: 30;
	display: flex;
	gap: var(--ranq-3);
	align-items: center;
	min-height: var(--ranq-head);
	padding: var(--ranq-3) var(--ranq-4);
	border-bottom: 1px solid var(--ranq-line);
	background: var(--ranq-paper);
}

.ranq-set__name { min-width: 0; }
.ranq-admin .ranq-set__name h1 { margin: 0; padding: 0; font: 700 22px/1.2 var(--ranq-font); letter-spacing: -.02em; }
.ranq-set__name p { margin: 2px 0 0; color: var(--ranq-muted); font-size: 12px; }

.ranq-set__right {
	display: flex;
	gap: var(--ranq-3);
	align-items: center;
	margin-left: auto;
}

.ranq-set__state {
	display: inline-flex;
	gap: var(--ranq-2);
	align-items: center;
	color: var(--ranq-muted);
	font-size: 12px;
	white-space: nowrap;
}

.ranq-set__body {
	display: grid;
	align-items: stretch;
	grid-template-columns: 264px minmax(0, 1fr);
}

/* ---------- on the left: the table of states ---------- */

.ranq-set__index {
	border-right: 1px solid var(--ranq-line);
	background: var(--ranq-panel);
}

.ranq-index {
	position: sticky;
	top: calc(var(--ranq-adminbar) + var(--ranq-head));
	padding: var(--ranq-4) var(--ranq-3) var(--ranq-6);
}

.ranq-index__title {
	margin: var(--ranq-4) var(--ranq-2) var(--ranq-2);
	color: var(--ranq-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ranq-index__title:first-child { margin-top: 0; }

.ranq-admin a.ranq-index__item {
	display: flex;
	gap: var(--ranq-2);
	align-items: flex-start;
	min-height: var(--ranq-control);
	padding: var(--ranq-2);
	border: 1px solid transparent;
	border-radius: var(--ranq-r);
	color: var(--ranq-ink-2);
	text-decoration: none;
	transition: background-color var(--ranq-t), border-color var(--ranq-t);
}

.ranq-admin a.ranq-index__item:hover {
	border-color: var(--ranq-line);
	background: var(--ranq-paper);
}

.ranq-index__item .ranq-dot { margin-top: 5px; }
.ranq-index__item span { min-width: 0; }
.ranq-index__item b { display: block; font-size: 13px; font-weight: 600; }
.ranq-index__item small { display: block; margin-top: 1px; overflow: hidden; color: var(--ranq-muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; }

.ranq-admin a.ranq-index__item--danger b { color: var(--ranq-danger); }

.ranq-admin a.ranq-index__item--danger:hover {
	border-color: var(--ranq-danger-line);
	background: var(--ranq-danger-soft);
}

.ranq-index__rule { height: 1px; margin: var(--ranq-3) var(--ranq-2); background: var(--ranq-line); }

/* ---------- on the right: the paper with the parts ---------- */

.ranq-set__paper { min-width: 0; background: var(--ranq-paper); }

.ranq-admin .ranq-set__paper .ranq-card {
	margin: 0;
	padding: var(--ranq-5) var(--ranq-6);
	border-bottom: 1px solid var(--ranq-line);
	border-radius: 0;
	background: var(--ranq-paper);
	box-shadow: none;
}

.ranq-sect__head {
	display: flex;
	gap: var(--ranq-2) var(--ranq-3);
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: var(--ranq-3);
}

.ranq-admin .ranq-sect__head h2 { margin: 0; font: 600 15px/1.3 var(--ranq-font); }

.ranq-sect__lead {
	max-width: 92ch;
	margin: -4px 0 var(--ranq-4);
	color: var(--ranq-muted);
	font-size: 12px;
}

/* Two small parts side by side. */
.ranq-sect__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--ranq-line);
}

.ranq-admin .ranq-sect__pair .ranq-card { border-bottom: 0; }
.ranq-admin .ranq-sect__pair .ranq-card + .ranq-card { border-left: 1px solid var(--ranq-line); }

/* A settings row: the name on the left, the field in the middle, the explanation
   on the right. That way the instruction sits BESIDE the field, not under it,
   and does not push the next one down. */
.ranq-set .ranq-settings__row {
	display: grid;
	gap: var(--ranq-3) var(--ranq-5);
	align-items: start;
	grid-template-columns: 200px minmax(240px, 400px) minmax(0, 1fr);
	margin: 0;
	padding: var(--ranq-3) 0;
}

.ranq-set .ranq-settings__row + .ranq-settings__row { border-top: 1px solid var(--ranq-line-soft); }
.ranq-set .ranq-settings__row--wide { grid-template-columns: 200px minmax(0, 1fr); }

/* Our `display: grid` beats the `hidden` attribute. Without this a row the
   chosen service does not ask for stays on the screen. */
.ranq-set [hidden] { display: none !important; }

.ranq-set .ranq-settings__label {
	display: block;
	margin: 0;
	padding-top: 7px;
	color: var(--ranq-ink-2);
	font-size: 13px;
	font-weight: 600;
}

.ranq-set .ranq-settings__label small {
	display: block;
	margin-top: 2px;
	color: var(--ranq-muted);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
}

.ranq-admin .ranq-set .ranq-settings__input {
	border-color: var(--ranq-line-field);
	border-radius: var(--ranq-r);
}

.ranq-admin .ranq-set .ranq-settings__input--mono { font: 12px/1 var(--ranq-mono); }
.ranq-admin .ranq-set .ranq-settings__input--narrow { max-width: 110px; }

.ranq-set .ranq-settings__help {
	margin: var(--ranq-1) 0 0;
	color: var(--ranq-muted);
	font-size: 11px;
	line-height: 1.5;
}

/* The explanation in the third column sits beside the field, so it reads as
   company rather than as small print underneath. */
.ranq-set .ranq-settings__row > .ranq-settings__help {
	max-width: 46ch;
	padding-top: 8px;
	font-size: 12px;
}

.ranq-set__grid {
	display: grid;
	gap: var(--ranq-2) var(--ranq-3);
	max-width: 760px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.ranq-set__gitem { display: block; }

.ranq-set__gitem > span {
	display: block;
	margin-bottom: var(--ranq-1);
	color: var(--ranq-ink-2);
	font-size: 12px;
	font-weight: 600;
}

.ranq-set__log { margin: 0; padding-left: 18px; list-style: disc; }

/* ---------- the secret key ---------- */

.ranq-key { display: flex; gap: var(--ranq-2); align-items: center; }
.ranq-key .ranq-key__input { flex: 1 1 auto; min-width: 0; }
.ranq-key [hidden] { display: none !important; }

.ranq-key__saved {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	height: var(--ranq-control);
	padding: 0 var(--ranq-3);
	border: 1px solid var(--ranq-line-soft);
	border-radius: var(--ranq-r);
	background: var(--ranq-inset);
	color: var(--ranq-ink-2);
	font: 13px/1 var(--ranq-mono);
	letter-spacing: .08em;
}

.ranq-key__saved svg { flex: 0 0 auto; color: var(--ranq-muted); }

.ranq-key-rule {
	display: flex;
	gap: var(--ranq-2);
	align-items: flex-start;
	max-width: 108ch;
	margin: 0 0 var(--ranq-3);
	padding: var(--ranq-2) var(--ranq-3);
	border-left: 3px solid var(--ranq-ok);
	border-radius: 0 var(--ranq-r) var(--ranq-r) 0;
	background: var(--ranq-ok-soft);
	color: #14532d;
	font-size: 12px;
	line-height: 1.5;
}

.ranq-key-rule svg { margin-top: 2px; flex: 0 0 auto; }
.ranq-key-rule--ok { margin: var(--ranq-2) 0 0; }

.ranq-nofield {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	min-height: var(--ranq-control);
	margin: 0;
	padding: var(--ranq-2) var(--ranq-3);
	border: 1px dashed var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-inset);
	color: var(--ranq-ink-2);
	font-size: 12px;
	line-height: 1.45;
}

.ranq-nofield svg { flex: 0 0 auto; color: var(--ranq-muted); }

/* ---------- the service choice: cards, because each comes with a sentence ---------- */

.ranq-svcs {
	display: grid;
	gap: var(--ranq-2);
	grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
}

.ranq-svc {
	display: block;
	padding: var(--ranq-3);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	cursor: pointer;
	transition: background-color var(--ranq-t), border-color var(--ranq-t);
}

.ranq-svc:hover { border-color: #aab2c0; }

.ranq-svc.is-on {
	border-color: var(--ranq-live);
	background: var(--ranq-live-soft);
	box-shadow: inset 0 0 0 1px var(--ranq-live);
}

.ranq-svc b { display: flex; gap: var(--ranq-2); align-items: center; font-size: 13px; font-weight: 600; }
.ranq-svc.is-on b { color: var(--ranq-live); }
.ranq-svc small { display: block; margin-top: var(--ranq-1); color: var(--ranq-muted); font-size: 11px; line-height: 1.45; }

.ranq-svc b i,
.ranq-pick__one i {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	border: 1px solid var(--ranq-line-field);
	border-radius: 50%;
	background: var(--ranq-paper);
}

.ranq-svc.is-on b i,
.ranq-pick__one.is-on i { border-color: var(--ranq-live); border-width: 4px; }

/* The real radio buttons are there for the keyboard and the screen reader, they
   are only not seen. */
.ranq-admin .ranq-svc__radio,
.ranq-admin .ranq-pick__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.ranq-admin .ranq-svc__radio:focus-visible + b,
.ranq-admin .ranq-pick__radio:focus-visible ~ i {
	outline: 2px solid var(--ranq-live);
	outline-offset: 3px;
}

.ranq-pick { display: grid; gap: var(--ranq-1); max-width: 400px; }

.ranq-pick__one {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	min-height: var(--ranq-control);
	padding: 0 var(--ranq-3);
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
	font-size: 13px;
	cursor: pointer;
	transition: background-color var(--ranq-t), border-color var(--ranq-t);
}

.ranq-pick__one.is-on {
	border-color: var(--ranq-live);
	background: var(--ranq-live-soft);
	color: var(--ranq-live);
	font-weight: 600;
}

/* ---------- the three step instructions: company, not a block ---------- */

.ranq-set .ranq-howto {
	max-width: 52ch;
	margin: 0;
	padding: 2px 0 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.ranq-set .ranq-howto .ranq-settings__help { margin: 0 0 6px; font-size: 12px; }

.ranq-set .ranq-howto__title {
	display: flex;
	gap: var(--ranq-2);
	align-items: center;
	min-height: var(--ranq-control);
	margin: 0;
	color: var(--ranq-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.ranq-set .ranq-howto__title::-webkit-details-marker { display: none; }
.ranq-set .ranq-howto__title:hover { color: var(--ranq-ink-2); }
.ranq-set .ranq-howto__title svg { flex: 0 0 auto; transform: rotate(-90deg); }
.ranq-set details[open] > .ranq-howto__title svg { transform: none; }

.ranq-set .ranq-howto__title u {
	padding: 2px 6px;
	border-radius: 999px;
	background: var(--ranq-panel);
	color: var(--ranq-muted);
	font: 11px/1 var(--ranq-mono);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
}

.ranq-set .ranq-howto__steps {
	margin: 0 0 var(--ranq-2);
	padding: 0;
	list-style: none;
	counter-reset: ranqh;
}

.ranq-set .ranq-howto__steps li {
	position: relative;
	margin: 0;
	padding: 2px 0 2px 22px;
	color: var(--ranq-muted);
	font-size: 12px;
	line-height: 1.5;
}

.ranq-set .ranq-howto__steps li::before {
	counter-increment: ranqh;
	content: counter(ranqh);
	position: absolute;
	top: 3px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--ranq-panel);
	color: var(--ranq-muted);
	font: 700 10px/1 var(--ranq-mono);
}

.ranq-set .ranq-spam__howto { max-width: 52ch; margin: 0 0 var(--ranq-3) 224px; }

/* ---------- the dangerous part ---------- */

.ranq-admin .ranq-set__paper .ranq-sect--danger {
	border-bottom: 0;
	border-left: 3px solid var(--ranq-danger);
	background: var(--ranq-danger-soft);
}

.ranq-admin .ranq-sect--danger h2 { color: var(--ranq-danger); }

.ranq-danger-box {
	display: flex;
	gap: var(--ranq-3);
	align-items: flex-start;
	max-width: 108ch;
	padding: var(--ranq-3) var(--ranq-4);
	border: 1px solid var(--ranq-danger-line);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
}

.ranq-danger-box > svg { margin-top: 2px; flex: 0 0 auto; color: var(--ranq-danger); }
.ranq-danger-box__text { min-width: 0; }
.ranq-danger-box__text b { display: block; margin-bottom: 2px; font-size: 13px; }
.ranq-danger-box__text p { margin: 0; color: var(--ranq-muted); font-size: 12px; line-height: 1.5; }

.ranq-danger-box__count {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-top: var(--ranq-2);
	padding: 3px 8px;
	border-radius: var(--ranq-r);
	background: var(--ranq-danger-soft);
	color: var(--ranq-danger);
	font-size: 12px;
	font-weight: 600;
}

.ranq-danger-box .ranq-settings__toggle { margin-left: auto; padding-left: var(--ranq-4); }

.ranq-admin .ranq-settings__toggle--danger input[type="checkbox"]:checked { background: var(--ranq-danger); }

.ranq-set__foot {
	display: flex;
	gap: var(--ranq-3);
	align-items: center;
	padding: var(--ranq-4) var(--ranq-6);
	color: var(--ranq-muted);
	font-size: 12px;
}

.ranq-set__ver { margin-left: auto; color: var(--ranq-muted); font: 11px/1 var(--ranq-mono); }

/* ==================================================================
   NARROWER SCREENS
   ================================================================== */

@media (max-width: 1440px) {

	.ranq-fl__cols,
	.ranq-frow {
		gap: var(--ranq-3);
		grid-template-columns: minmax(180px, 420px) 244px 196px 132px minmax(88px, 1fr);
	}

	.ranq-bar { width: 56px; }

	.ranq-ent__side { flex: 0 0 330px; }
	.ranq-ent__stage { padding: var(--ranq-4) var(--ranq-4) var(--ranq-6); }
	.ranq-entry__head,
	.ranq-entry__body,
	.ranq-entry__foot { padding-left: var(--ranq-5); padding-right: var(--ranq-5); }
	.ranq-pair__name { flex-basis: 150px; }

	.ranq-admin .ranq-set__paper .ranq-card { padding: var(--ranq-5); }
	.ranq-set .ranq-settings__row { gap: var(--ranq-3) var(--ranq-4); grid-template-columns: 180px minmax(220px, 360px) minmax(0, 1fr); }
	.ranq-set .ranq-settings__row--wide { grid-template-columns: 180px minmax(0, 1fr); }
	.ranq-set .ranq-spam__howto { margin-left: 196px; }
	.ranq-index { padding: var(--ranq-4) var(--ranq-2) var(--ranq-6); }
}

/* Below this width five columns no longer fit honestly, so a row becomes a block
   of two storeys: the name and the actions on top, the code, the number and the
   date below. */
@media (max-width: 1180px) {

	.ranq-fl__cols { display: none; }

	.ranq-frow {
		gap: var(--ranq-3) var(--ranq-4);
		padding: var(--ranq-3) var(--ranq-4);
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas:
			"ime ime akcije"
			"kod broj datum";
	}

	.ranq-frow > .ranq-frow__name { grid-area: ime; }
	.ranq-frow > .ranq-shortcode { grid-area: kod; width: 268px; }
	.ranq-frow > .ranq-frow__entries { grid-area: broj; justify-self: end; width: auto; }
	.ranq-frow > .ranq-frow__entries .ranq-bar { margin-left: var(--ranq-2); }
	.ranq-frow > .ranq-frow__date { grid-area: datum; justify-self: end; }
	.ranq-frow > .ranq-frow__acts { grid-area: akcije; align-self: start; }

	.ranq-first__steps { grid-template-columns: 1fr; max-width: 520px; }

	.ranq-ent__cols { display: block; min-height: 0; }
	.ranq-ent__side { border-right: 0; border-bottom: 1px solid var(--ranq-line); }
	.ranq-ent__side .ranq-ent__body { max-height: 340px; overflow: auto; }
	.ranq-entry,
	.ranq-invite,
	.ranq-ent__jump { max-width: 100%; }

	/* The instruction drops under the field only when there is really no room
	   for a third column, because beside the field is more useful than under
	   it. */
	.ranq-set .ranq-settings__row,
	.ranq-set .ranq-settings__row--wide { display: block; }
	.ranq-set .ranq-settings__label { padding-top: 0; margin-bottom: var(--ranq-2); }
	.ranq-set .ranq-settings__row > * + * { margin-top: var(--ranq-2); }
	.ranq-set .ranq-howto,
	.ranq-set .ranq-settings__row > .ranq-settings__help { max-width: 64ch; padding-top: 0; }
	.ranq-set .ranq-spam__howto { max-width: 64ch; margin-left: 0; }

	/* A field does not run edge to edge just because there is room. */
	.ranq-set .ranq-settings__row .ranq-settings__input,
	.ranq-set .ranq-settings__row .ranq-key,
	.ranq-set .ranq-settings__row .ranq-pick,
	.ranq-set .ranq-settings__row .ranq-nofield { max-width: 520px; }
	.ranq-admin .ranq-set .ranq-settings__input--narrow { max-width: 110px; }

	.ranq-set__body { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (max-width: 900px) {

	.ranq-fl__head { flex-wrap: wrap; row-gap: var(--ranq-3); }
	.ranq-fl__tools { width: 100%; margin-left: 0; }
	.ranq-admin .ranq-search { flex: 1 1 auto; width: auto; }

	.ranq-ent__head { flex-wrap: wrap; row-gap: var(--ranq-2); }
	.ranq-ent__right { width: 100%; margin-left: 0; flex-wrap: wrap; row-gap: var(--ranq-2); }
	.ranq-ent__rule { display: none; }
	.ranq-pair { display: block; }
	.ranq-pair__name { margin-bottom: var(--ranq-1); }
	.ranq-entry__head { flex-wrap: wrap; }
	.ranq-entry__acts { width: 100%; }

	.ranq-set__body { display: block; }
	.ranq-set__index { border-right: 0; border-bottom: 1px solid var(--ranq-line); }
	.ranq-index { position: static; display: grid; gap: var(--ranq-1) var(--ranq-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding: var(--ranq-3) var(--ranq-4) var(--ranq-4); }
	.ranq-index__title,
	.ranq-index__rule { grid-column: 1 / -1; margin-top: var(--ranq-2); }
	.ranq-sect__pair { grid-template-columns: 1fr; }
	.ranq-admin .ranq-sect__pair .ranq-card + .ranq-card { border-left: 0; border-top: 1px solid var(--ranq-line); }
	.ranq-admin .ranq-set__name h1 { font-size: 18px; }
}

/* Below 782 WordPress changes the whole dashboard: the menu folds away, and the
   black bar is 46 pixels tall, so everything that sticks to the top moves by
   that much. */
@media (max-width: 782px) {

	.ranq-set__head { top: 46px; }
	.ranq-index { top: calc(46px + var(--ranq-head)); }
	.ranq-danger-box { flex-wrap: wrap; }
	.ranq-danger-box .ranq-settings__toggle { margin-left: 0; padding-left: 0; }
}

@media (max-width: 700px) {

	.ranq-index { display: flex; flex-wrap: wrap; gap: var(--ranq-1); align-items: center; }
	.ranq-index__title { width: 100%; margin: var(--ranq-2) var(--ranq-1) var(--ranq-1); }
	.ranq-index__title:first-child { margin-top: 0; }
	.ranq-index__rule { width: 100%; margin: var(--ranq-2) var(--ranq-1); }

	/* On a phone the table of contents is not a list of states but a row of
	   jump links, because seven rows with a subheading would eat the whole first
	   screen. */
	.ranq-admin a.ranq-index__item {
		min-height: 30px;
		padding: var(--ranq-1) var(--ranq-2);
		border-color: var(--ranq-line);
		background: var(--ranq-paper);
	}

	.ranq-index__item small { display: none; }
	.ranq-index__item b { font-weight: 500; }
	.ranq-index__item .ranq-dot { margin-top: 0; }

	.ranq-admin a.ranq-index__item--danger {
		border-color: var(--ranq-danger-line);
		background: var(--ranq-danger-soft);
	}
}

@media (max-width: 560px) {

	.ranq-fl__head,
	.ranq-fl__bar,
	.ranq-frow { padding-left: var(--ranq-3); padding-right: var(--ranq-3); }

	.ranq-frow {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"ime akcije"
			"kod kod"
			"broj datum";
	}

	.ranq-frow > .ranq-shortcode { width: 100%; }
	.ranq-frow > .ranq-frow__date { justify-self: end; }
	.ranq-fl__sorted { display: none; }
	.ranq-first { padding: var(--ranq-6) var(--ranq-3); }

	.ranq-ent__head,
	.ranq-ent__cap { padding-left: var(--ranq-3); padding-right: var(--ranq-3); }
	.ranq-admin .ranq-ent .ranq-entries__filter,
	.ranq-admin .ranq-ent .ranq-entries__filter select.ranq-entries__which { width: 100%; max-width: 100%; }
	.ranq-ent__where { width: 100%; height: auto; padding: var(--ranq-2) var(--ranq-3); white-space: normal; }
	.ranq-ent__stage,
	.ranq-ent__blank { padding: var(--ranq-4) var(--ranq-3) var(--ranq-6); }
	.ranq-entry__head,
	.ranq-entry__body,
	.ranq-entry__foot,
	.ranq-invite__head,
	.ranq-invite__steps,
	.ranq-invite__foot { padding-left: var(--ranq-4); padding-right: var(--ranq-4); }
	.ranq-entry__body { padding-top: var(--ranq-4); }
	.ranq-ent__jump .ranq-btn { margin-left: 0; }

	.ranq-set__head { flex-wrap: wrap; row-gap: var(--ranq-2); padding: var(--ranq-3); }
	.ranq-set__right { width: 100%; margin-left: 0; justify-content: space-between; }
	.ranq-admin .ranq-set__paper .ranq-card { padding: var(--ranq-4) var(--ranq-3); }
	.ranq-set__foot { flex-wrap: wrap; padding: var(--ranq-4) var(--ranq-3); }
	.ranq-index { padding: var(--ranq-3); }
}

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

	.ranq-admin .ranq-btn,
	.ranq-admin .ranq-shortcode,
	.ranq-admin a.ranq-act,
	.ranq-admin button.ranq-seg__b,
	.ranq-admin a.ranq-entries__item,
	.ranq-admin a.ranq-index__item,
	.ranq-svc,
	.ranq-pick__one { transition: none; }
}

/* ==================================================================
   TASK 3, A SECOND TIME: THE "ADD NEW" SCREEN

   The same job as the Templates tab in the builder, so the same look.
   This is the only screen outside the builder that does the job of one
   of its own, so it is measured against it and against
   `15-predlozi/pult/03-obrasci.html`.

   A wall of twenty nine tiles is not solved with smaller tiles but by
   not drawing a tile until it is asked for: the screen is a list of
   JOBS, every job is one row, and a closed row holds the names of all
   its forms. Every name is seen at once, the drawings only in the open
   one.

   A deliberate difference from the builder: there the tiles are BUTTONS,
   because picking a template wipes the fields that already exist, so it
   asks first. Here there is no form yet, there is nothing to lose, so
   every tile is a LINK. That is why the screen works without a single
   line of JavaScript: what is open, what is being searched for and which
   filter holds all sit in the address.
   ------------------------------------------------------------------ */

.ranq-nf {
	background: var(--ranq-panel);
}

/* ---------- the head of the screen, the same as on the form list ---------- */

.ranq-nf__head {
	display: flex;
	gap: var(--ranq-4);
	align-items: center;
	min-height: var(--ranq-head);
	padding: var(--ranq-3) var(--ranq-4);
	border-bottom: 1px solid var(--ranq-line);
	background: var(--ranq-paper);
}

.ranq-nf__intro {
	min-width: 0;
	flex: 1 1 auto;
}

/* WordPress targets `.wrap h1`, which is stronger than one class of ours. */
.ranq-admin h1.ranq-nf__title {
	margin: 0;
	padding: 0;
	color: var(--ranq-ink);
	font: 700 22px/1.2 var(--ranq-font);
	letter-spacing: -.02em;
}

.ranq-nf__lead {
	margin: 2px 0 0;
	max-width: 78ch;
	color: var(--ranq-muted);
	font-size: 12px;
	line-height: 1.55;
}

/* Searching by name and by description is the path for someone who knows exactly
   what they want and does not care to look at any group. It goes through the
   address, so it works without a script. */
.ranq-nf__tools {
	display: flex;
	flex-direction: column;
	gap: var(--ranq-2);
	margin-left: auto;
	flex: 0 0 auto;
	width: 340px;
}

.ranq-nf__search {
	position: relative;
	display: flex;
	align-items: center;
}

.ranq-nf__search-icon {
	position: absolute;
	left: 11px;
	color: var(--ranq-faint);
	pointer-events: none;
}

/* WordPress targets `input[type=search]`, so the input name has to be in the
   selector. */
.ranq-nf input.ranq-nf__search-input {
	box-sizing: border-box;
	width: 100%;
	height: var(--ranq-control);
	min-height: var(--ranq-control);
	margin: 0;
	padding: 0 var(--ranq-3) 0 32px;
	border: 1px solid var(--ranq-line-field);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
	box-shadow: none;
	color: var(--ranq-ink);
	font: 13px/1 var(--ranq-font);
}

.ranq-nf input.ranq-nf__search-input::placeholder {
	color: var(--ranq-faint);
}

.ranq-nf input.ranq-nf__search-input:focus {
	border-color: var(--ranq-live);
	box-shadow: none;
	outline: 2px solid var(--ranq-live);
	outline-offset: 1px;
}

.ranq-nf__filters {
	display: flex;
	align-items: center;
	gap: var(--ranq-2);
	flex-wrap: wrap;
}

.ranq-admin a.ranq-nf__filter {
	display: inline-flex;
	align-items: center;
	gap: var(--ranq-2);
	height: 30px;
	padding: 0 var(--ranq-3);
	border: 1px solid var(--ranq-line);
	border-radius: 999px;
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
	font: 500 12px/1 var(--ranq-font);
	text-decoration: none;
	box-shadow: none;
	transition: background-color var(--ranq-t), border-color var(--ranq-t), color var(--ranq-t);
}

.ranq-admin a.ranq-nf__filter:hover {
	border-color: var(--ranq-line-field);
	color: var(--ranq-ink);
}

.ranq-admin a.ranq-nf__filter.is-on {
	border-color: var(--ranq-ink);
	background: var(--ranq-ink);
	color: #fff;
}

.ranq-nf__filter.is-on .ranq-nf__steps i {
	background: rgba(255, 255, 255, .45);
}

.ranq-nf__filter.is-on .ranq-nf__steps i:first-child {
	background: #fff;
}

/* ---------- the body: the work surface, as in the builder ---------- */

/* The tiles and the cards are panel coloured, so the body has to be the work
   surface. Had the body stayed a panel, a tile would vanish into the ground. */
.ranq-nf__body {
	/* The work surface runs to the bottom of the screen even when the search
	   result is short. Without this WordPress's grey shows under the list and
	   the screen looks cut off. The reckoning is smaller than the window height,
	   so it creates no scrolling. */
	min-height: calc(100vh - 200px);
	padding: var(--ranq-5) var(--ranq-5) var(--ranq-7);
	background: var(--ranq-desk);
}

.ranq-nf__body > * {
	max-width: 1180px;
}

/* ---------- the start: the recommendation and the blank form ---------- */

.ranq-nf__start {
	display: grid;
	gap: var(--ranq-4);
	grid-template-columns: 1.9fr 1fr;
	margin-bottom: var(--ranq-6);
	align-items: stretch;
}

.ranq-nf__card {
	display: flex;
	gap: var(--ranq-5);
	padding: var(--ranq-5);
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-panel);
}

.ranq-nf__card-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.ranq-nf__flag {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	margin-bottom: var(--ranq-2);
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--ranq-ink);
	color: #fff;
	font: 700 11px/1.4 var(--ranq-font);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ranq-admin h2.ranq-nf__card-name {
	margin: 0 0 var(--ranq-1);
	padding: 0;
	color: var(--ranq-ink);
	font: 600 18px/1.2 var(--ranq-font);
	letter-spacing: -.01em;
}

.ranq-nf__card-desc {
	margin: 0 0 var(--ranq-3);
	color: var(--ranq-muted);
	font-size: 13px;
	line-height: 1.55;
}

.ranq-nf__card-foot {
	display: flex;
	align-items: center;
	gap: var(--ranq-3);
	margin-top: auto;
}

.ranq-nf__card--blank {
	flex-direction: column;
	gap: var(--ranq-3);
	border-style: dashed;
	background: transparent;
}

.ranq-nf__card--blank .ranq-nf__card-desc {
	margin-bottom: 0;
}

/* An empty card has no ground of its own but stands on the work surface, which
   is darker than a panel. Measured: `--ranq-muted` on it gives 3.97 to 1, below
   the limit of 4.5. So the text of that one card goes a step darker, to 7.6. */
.ranq-nf__card--blank .ranq-nf__card-desc,
.ranq-nf__card--blank .ranq-nf__meta {
	color: var(--ranq-ink-2);
}

/* An empty card is vertical, so the `flex-basis` of the sketch would be its
   HEIGHT rather than its width, and the card would grow for no reason. */
.ranq-nf__card--blank .ranq-nf__sketch.is-big {
	flex: 0 0 auto;
	align-self: stretch;
}

.ranq-admin a.ranq-nf__use {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ranq-control);
	padding: 0 var(--ranq-4);
	border: 1px solid transparent;
	border-radius: var(--ranq-r);
	background: var(--ranq-ink);
	color: #fff;
	font: 600 13px/1 var(--ranq-font);
	white-space: nowrap;
	text-decoration: none;
	box-shadow: none;
	transition: background-color var(--ranq-t), border-color var(--ranq-t);
}

.ranq-admin a.ranq-nf__use:hover {
	background: #000;
	color: #fff;
}

.ranq-admin a.ranq-nf__use--quiet {
	border-color: var(--ranq-line-field);
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
}

.ranq-admin a.ranq-nf__use--quiet:hover {
	border-color: var(--ranq-muted);
	background: var(--ranq-inset);
	color: var(--ranq-ink);
}

.ranq-nf__meta {
	display: inline-flex;
	align-items: center;
	gap: var(--ranq-2);
	/* Small text that gets READ does not go on `--ranq-faint`: by the system that
	   tone is for marks and icons and on a panel it gives 2.7 to 1. "3 fields"
	   is text, so it goes on `--ranq-muted`, measured 4.8 on a panel and 5.4 on
	   white. */
	color: var(--ranq-muted);
	font: 11px/1.3 var(--ranq-mono);
	white-space: nowrap;
}

/* The ladder: as many rungs as there are steps, the first one full because that
   is where the visitor stands. The same mark sits next to the form name, on the
   tile and at the top of the sketch. */
.ranq-nf__steps {
	display: inline-flex;
	gap: 2px;
	flex: 0 0 auto;
}

.ranq-nf__steps i {
	width: 7px;
	height: 3px;
	border-radius: 999px;
	background: var(--ranq-line-field);
}

.ranq-nf__steps i:first-child {
	background: var(--ranq-ink);
}

/* ---------- a job: one row per group ---------- */

.ranq-nf__jobs {
	display: grid;
	gap: var(--ranq-2);
}

.ranq-nf__job {
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-panel);
	overflow: hidden;
}

/* The whole head of the row is a target for opening, while the form names above
   it are links of their own. That way there is no link inside a link, and the
   row still clicks whole. */
.ranq-nf__job-head {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ranq-3);
	min-height: 52px;
	padding: var(--ranq-2) var(--ranq-4);
}

.ranq-admin a.ranq-nf__job-toggle {
	display: flex;
	align-items: center;
	gap: var(--ranq-3);
	flex: 0 0 15.5rem;
	min-width: 0;
	color: var(--ranq-ink);
	text-decoration: none;
	box-shadow: none;
}

.ranq-nf__job-toggle::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.ranq-nf__job-head:hover {
	background: #e6eaf1;
}

.ranq-nf__job-arrow {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: var(--ranq-faint);
	font-size: 16px;
	line-height: 1;
	transition: transform var(--ranq-t);
}

.ranq-nf__job.is-open .ranq-nf__job-arrow {
	color: var(--ranq-ink);
	transform: rotate(90deg);
}

.ranq-nf__job-name {
	min-width: 0;
	color: var(--ranq-ink);
	font: 600 14px/1.3 var(--ranq-font);
}

.ranq-nf__job-name small {
	display: block;
	color: var(--ranq-muted);
	font: 400 12px/1.4 var(--ranq-font);
}

.ranq-nf__chips {
	position: relative;
	z-index: 1;
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: var(--ranq-1) var(--ranq-2);
}

/* A form name is already a link. Someone who knows what they are after clicks
   the name and never sees a single tile. */
.ranq-admin a.ranq-nf__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ranq-2);
	height: 30px;
	padding: 0 var(--ranq-2) 0 var(--ranq-3);
	border: 1px solid var(--ranq-line-soft);
	border-radius: 999px;
	background: var(--ranq-paper);
	color: var(--ranq-ink-2);
	font: 12px/1 var(--ranq-font);
	white-space: nowrap;
	text-decoration: none;
	box-shadow: none;
	transition: border-color var(--ranq-t), background-color var(--ranq-t);
}

.ranq-admin a.ranq-nf__chip:hover {
	border-color: var(--ranq-line-field);
	color: var(--ranq-ink);
}

.ranq-nf__chip-count {
	color: var(--ranq-muted);
	font: 11px/1 var(--ranq-mono);
	font-style: normal;
}

.ranq-nf__job-count {
	position: relative;
	z-index: 0;
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--ranq-muted);
	font: 11px/1 var(--ranq-mono);
	white-space: nowrap;
}

.ranq-nf__job-body {
	padding: var(--ranq-4);
	border-top: 1px solid var(--ranq-line);
	background: #e7ebf2;
}

/* ---------- the tile ---------- */

.ranq-nf__grid {
	display: grid;
	gap: var(--ranq-3);
	align-items: start;
	grid-template-columns: repeat(auto-fill, minmax(258px, 320px));
	justify-content: start;
}

.ranq-admin a.ranq-nf__tile {
	display: flex;
	flex-direction: column;
	gap: var(--ranq-3);
	padding: var(--ranq-3);
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-panel);
	color: var(--ranq-ink);
	text-align: left;
	text-decoration: none;
	box-shadow: none;
	transition: background-color var(--ranq-t), border-color var(--ranq-t);
}

.ranq-admin a.ranq-nf__tile:hover {
	border-color: #aab2c0;
	background: #f4f6fa;
}

.ranq-nf__tile-text {
	display: block;
}

.ranq-nf__tile-name {
	display: block;
	margin-bottom: 2px;
	color: var(--ranq-ink);
	font: 600 14px/1.3 var(--ranq-font);
}

.ranq-nf__tile-desc {
	display: block;
	color: var(--ranq-muted);
	font-size: 12px;
	line-height: 1.5;
}

.ranq-nf__tile .ranq-nf__meta {
	margin-top: var(--ranq-1);
	font-size: 11px;
}

.ranq-nf__tile .ranq-nf__steps i {
	width: 9px;
	height: 4px;
}

/* ---------- the sketch: a small but truthful picture of the form ---------- */

/* An icon would repeat the name. The sketch says what the name does not: how
   long the form is, whether it has a long message box, whether two fields share
   a row and where the form breaks into steps. */
.ranq-nf__sketch {
	display: block;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--ranq-line-soft);
	border-radius: var(--ranq-r);
	background: var(--ranq-paper);
}

.ranq-nf__sketch.is-big {
	flex: 0 0 208px;
	align-self: flex-start;
}

.ranq-nf__sketch.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	border-style: dashed;
	border-color: var(--ranq-line-field);
	color: var(--ranq-muted);
	font-size: 12px;
}

.ranq-nf__sketch-steps {
	display: flex;
	gap: 3px;
	margin-bottom: 9px;
}

.ranq-nf__sketch-steps i {
	flex: 1 1 0;
	height: 4px;
	border-radius: 999px;
	background: #dbe1ea;
}

.ranq-nf__sketch-steps i:first-child {
	background: var(--ranq-ink);
}

.ranq-nf__sketch-row {
	display: block;
	margin-bottom: 8px;
}

.ranq-nf__sketch-row:last-child {
	margin-bottom: 0;
}

.ranq-nf__sketch-row.is-pair {
	display: flex;
	gap: 6px;
}

.ranq-nf__sketch-row.is-pair > .ranq-nf__sketch-cell {
	flex: 1 1 0;
	min-width: 0;
}

.ranq-nf__sketch-cell {
	display: block;
}

.ranq-nf__sketch-label {
	display: block;
	width: 42%;
	height: 4px;
	margin-bottom: 4px;
	border-radius: 999px;
	background: #b0b8c5;
}

.ranq-nf__sketch-label.is-short {
	width: 30%;
}

.ranq-nf__sketch-label.is-long {
	width: 58%;
}

.ranq-nf__sketch-field {
	display: block;
	height: 15px;
	border: 1px solid #cdd4de;
	border-radius: 3px;
	background: #fbfcfe;
}

.ranq-nf__sketch-field.is-tall {
	height: 34px;
}

.ranq-nf__sketch.is-big .ranq-nf__sketch-field {
	height: 18px;
}

.ranq-nf__sketch.is-big .ranq-nf__sketch-field.is-tall {
	height: 42px;
}

.ranq-nf__sketch-button {
	display: block;
	width: 62px;
	height: 15px;
	border-radius: 3px;
	background: #2a3038;
}

/* ---------- the search result ---------- */

.ranq-nf__found {
	max-width: 720px;
	padding: var(--ranq-2);
	border: 1px solid var(--ranq-line);
	border-radius: var(--ranq-r-lg);
	background: var(--ranq-paper);
	box-shadow: var(--ranq-pop);
}

.ranq-nf__found-head {
	margin: 0;
	padding: var(--ranq-1) var(--ranq-3) var(--ranq-2);
	color: var(--ranq-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ranq-admin a.ranq-nf__found-row {
	display: flex;
	width: 100%;
	align-items: center;
	gap: var(--ranq-3);
	padding: var(--ranq-2) var(--ranq-3);
	border-radius: var(--ranq-r);
	color: var(--ranq-ink);
	text-decoration: none;
	box-shadow: none;
	transition: background-color var(--ranq-t);
}

.ranq-admin a.ranq-nf__found-row:hover {
	background: var(--ranq-live-soft);
}

.ranq-nf__found-text {
	min-width: 0;
	flex: 1 1 auto;
}

.ranq-nf__found-name {
	display: block;
	color: var(--ranq-ink);
	font-size: 13px;
	font-weight: 600;
}

.ranq-nf__found-desc {
	display: block;
	color: var(--ranq-muted);
	font-size: 11px;
	line-height: 1.5;
}

/* The yellow ground is light, so a small description on it with `--ranq-muted`
   gives 4.31 to 1. The underlined word therefore takes full ink, measured
   14.4. */
.ranq-nf__found-row mark {
	background: #fde68a;
	color: var(--ranq-ink);
}

.ranq-nf__found-row .ranq-nf__meta {
	margin-left: auto;
}

/* ---------- focus, visible on everything that can be reached ---------- */

.ranq-admin a.ranq-nf__filter:focus,
.ranq-admin a.ranq-nf__use:focus,
.ranq-admin a.ranq-nf__chip:focus,
.ranq-admin a.ranq-nf__tile:focus,
.ranq-admin a.ranq-nf__job-toggle:focus,
.ranq-admin a.ranq-nf__found-row:focus {
	outline: 2px solid var(--ranq-live);
	outline-offset: 2px;
	box-shadow: none;
}

/* Opening a job targets the whole row, so its ring has to go around the row as
   well, and not only around the name. */
.ranq-admin a.ranq-nf__job-toggle:focus {
	outline-offset: -2px;
}

/* ---------- narrower screens ---------- */

@media (max-width: 1300px) {

	.ranq-admin a.ranq-nf__job-toggle {
		flex-basis: 13rem;
	}
}

@media (max-width: 1100px) {

	.ranq-nf__head {
		display: block;
	}

	.ranq-nf__tools {
		width: 100%;
		margin: var(--ranq-4) 0 0;
	}

	.ranq-nf__start {
		grid-template-columns: 1fr;
	}

	.ranq-nf__job-head {
		flex-wrap: wrap;
		row-gap: var(--ranq-2);
	}

	.ranq-admin a.ranq-nf__job-toggle {
		flex: 1 1 auto;
	}

	.ranq-nf__chips {
		order: 3;
		flex-basis: 100%;
	}
}

@media (max-width: 782px) {

	.ranq-nf__head {
		padding: var(--ranq-3);
	}

	.ranq-nf__body {
		padding: var(--ranq-4) var(--ranq-3) var(--ranq-6);
	}

	/* On a phone the recommendation card goes into a vertical stack, otherwise
	   a sketch of 208 pixels eats the whole row and the text is left at one
	   letter per line. */
	.ranq-nf__card {
		flex-direction: column;
		gap: var(--ranq-3);
		padding: var(--ranq-4);
	}

	.ranq-nf__card .ranq-nf__sketch.is-big {
		flex: 0 0 auto;
		align-self: stretch;
	}

	.ranq-nf__grid {
		grid-template-columns: 1fr;
	}

	.ranq-nf__found {
		box-shadow: none;
	}

	.ranq-nf__found-row .ranq-nf__meta {
		display: none;
	}
}

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

	.ranq-admin a.ranq-nf__filter,
	.ranq-admin a.ranq-nf__use,
	.ranq-admin a.ranq-nf__chip,
	.ranq-admin a.ranq-nf__tile,
	.ranq-admin a.ranq-nf__found-row,
	.ranq-nf__job-arrow { transition: none; }
}

/* == END: THE SCREENS OUTSIDE THE BUILDER == */

/* ==================================================================
   SCROLLING: ONE, AND IT WORKS EVERYWHERE
   ------------------------------------------------------------------
   🔴 The owner's remark, 29 August 2026: "the double scroll does not work
   on a single screen, only by hand". Measured and confirmed: at 1920 with
   the pointer in the middle of the screen the wheel moved NOTHING. The
   columns were locked to the screen height, the middle had nothing to
   scroll, and `overscroll-behavior: contain` was stopping the handover to
   the page. A person turns the wheel and the screen stands still, so they
   are right to think the tool is broken.

   The fix: the page scrolls like any other dashboard page, with ONE
   scroll. The head and the tabs stay stuck to the top. The side columns
   stick under them and get scrolling of their own ONLY when they are
   taller than the screen, and when their content fits, the wheel over
   them moves the page.
   ================================================================== */

.ranq-builder__cols {
	align-items: flex-start;
	height: auto;
	min-height: 0;
}

.ranq-builder__col {
	overflow: visible;
	overscroll-behavior: auto;
}

/* The head and the row of tabs stay at the top while the page moves. */
.ranq-builder__bar {
	position: sticky;
	top: var(--ranq-adminbar);
	z-index: 30;
}

.ranq-builder__tabs {
	position: sticky;
	top: calc(var(--ranq-adminbar) + var(--ranq-head));
	z-index: 25;
}

/* The side columns follow the page and scroll on their own only once they
   outgrow the screen. */
.ranq-builder__palette,
.ranq-builder__settings {
	position: sticky;
	top: calc(var(--ranq-adminbar) + var(--ranq-head) + var(--ranq-tabs));
	max-height: calc(100vh - var(--ranq-adminbar) - var(--ranq-head) - var(--ranq-tabs));
	overflow-y: auto;
	overscroll-behavior: auto;
}

/* The middle grows with the form, because a long form is read from top to
   bottom. */
.ranq-builder__canvas {
	min-height: calc(100vh - var(--ranq-adminbar) - var(--ranq-head) - var(--ranq-tabs));
	overflow: visible;
}

@media (max-width: 1300px) {

	.ranq-builder__palette,
	.ranq-builder__settings {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.ranq-builder__canvas {
		min-height: 0;
	}
}