/**
 * Admin screen styling.
 *
 * The screen is still built from core admin markup — .wrap, .form-table, .widefat — so it keeps
 * WordPress's own accessibility, responsive and form behaviour. What is here restyles that markup
 * into a flat, card-based layout and gives the brand somewhere to live.
 *
 * Everything is written with logical properties rather than left/right, so the screen reads
 * correctly in Persian, Arabic and Hebrew without a second -rtl stylesheet to keep in step with
 * this one. "start" is the side the text begins on, whichever that is for the reader.
 *
 * On colour: the brand orange is 2.75:1 against white, which is below the 3:1 a control needs and
 * well below the 4.5:1 text needs. It is therefore used for decoration only. Anything that carries
 * meaning — a switch that is on, a focus ring, a link, a button — uses one of the darker steps.
 *
 * @package AdPix\Analytics
 */

.adpix-app {
	/* Brand. */
	--adpix-brand: #f07b4a;        /* Decoration only: gradients, tints, the logo tile. */
	--adpix-brand-mid: #e2662f;    /* 3.4:1 — controls and focus rings, never text. */
	--adpix-brand-strong: #b4521f; /* 5.0:1 — text, links, and white-on-brand buttons. */
	--adpix-brand-deep: #96400f;   /* Hover state of the above. */
	--adpix-accent: #f2af4d;

	/* Neutrals, matched to the admin palette so the page does not look transplanted. */
	--adpix-ink: #1d2327;
	--adpix-muted: #646970;
	--adpix-line: #e2e4e7;
	--adpix-field-line: #c6c9ce;
	--adpix-surface: #fff;
	--adpix-canvas: #f6f7f7;
	--adpix-tint: #fdf2ec;

	--adpix-radius: 10px;
	--adpix-radius-sm: 6px;
	--adpix-shadow: 0 1px 2px rgba( 16, 24, 40, 0.06 ), 0 1px 3px rgba( 16, 24, 40, 0.04 );

	max-width: 1320px;
}

/* Core drops admin notices in just after the first h1, which here is the hidden one. */
.adpix-app > .notice {
	margin: 15px 0 0;
}

/* ---------------------------------------------------------------- Header */

.adpix-header {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 16px 0 20px;
	padding: 20px;
	overflow: hidden;
	background: var( --adpix-surface );
	border: 1px solid var( --adpix-line );
	border-radius: var( --adpix-radius );
	box-shadow: var( --adpix-shadow );
}

/* The one place the full-strength brand colour appears, where nothing has to be read off it. */
.adpix-header::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 4px;
	background: linear-gradient( 90deg, var( --adpix-brand ), var( --adpix-accent ) );
}

.adpix-header__logo {
	flex: none;
	width: 44px;
	height: 44px;
	padding: 6px;
	background: var( --adpix-tint );
	border-radius: var( --adpix-radius-sm );
	box-sizing: content-box;
}

.adpix-header__text {
	flex: 1 1 320px;
	min-width: 0;
}

.adpix-header__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var( --adpix-ink );
}

.adpix-header__version {
	display: inline-block;
	margin-inline-start: 8px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	vertical-align: 2px;
	color: var( --adpix-brand-strong );
	background: var( --adpix-tint );
	border-radius: 999px;
}

.adpix-header__intro {
	max-width: 76ch;
	margin: 6px 0 0;
	color: var( --adpix-muted );
}

.adpix-header__state {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	margin-inline-start: auto;
}

/* ---------------------------------------------------------------- Simple / advanced switch */

.adpix-mode {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.adpix-mode__label {
	font-size: 13px;
	color: var( --adpix-muted );
}

.adpix-mode__switch {
	display: inline-flex;
	padding: 3px;
	background: var( --adpix-canvas );
	border: 1px solid var( --adpix-line );
	border-radius: 999px;
}

.adpix-mode__option {
	min-height: 30px;
	padding: 4px 14px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	color: var( --adpix-muted );
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 999px;
}

.adpix-mode__option:hover {
	color: var( --adpix-ink );
}

.adpix-mode__option:focus-visible {
	outline: 2px solid var( --adpix-brand-mid );
	outline-offset: 1px;
}

/* White-on-brand uses the strong shade, the one that passes contrast for text. */
.adpix-mode__option.is-current {
	color: #fff;
	cursor: default;
	background: var( --adpix-brand-strong );
}

.adpix-mode-note {
	margin: -8px 0 16px;
	font-size: 13px;
	color: var( --adpix-muted );
}

/* ---------------------------------------------------------------- Layout */

.adpix-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 320px;
	gap: 20px;
	align-items: start;
}

.adpix-main {
	min-width: 0;
}

.adpix-side {
	position: sticky;
	inset-block-start: 46px;
}

@media screen and ( max-width: 1100px ) {
	.adpix-layout {
		grid-template-columns: minmax( 0, 1fr );
	}

	.adpix-side {
		position: static;
	}
}

/* ---------------------------------------------------------------- Cards */

.adpix-app .adpix-card {
	margin: 0 0 20px;
	background: var( --adpix-surface );
	border: 1px solid var( --adpix-line );
	border-radius: var( --adpix-radius );
	box-shadow: var( --adpix-shadow );
}

.adpix-app .adpix-card__title {
	margin: 0;
	padding: 13px 20px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --adpix-muted );
	border-block-end: 1px solid var( --adpix-line );
}

.adpix-app .adpix-card__footer {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	background: var( --adpix-canvas );
	border-block-start: 1px solid var( --adpix-line );
	border-radius: 0 0 var( --adpix-radius ) var( --adpix-radius );
}

/* ---------------------------------------------------------------- Tabs */

.adpix-tabs {
	display: flex;
	gap: 2px;
	padding: 6px 12px 0;
	overflow-x: auto;
	scrollbar-width: thin;
	border-block-end: 1px solid var( --adpix-line );
}

.adpix-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 10px 12px;
	font: inherit;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	color: var( --adpix-muted );
	background: none;
	border: 0;
	border-block-end: 2px solid transparent;
	border-radius: var( --adpix-radius-sm ) var( --adpix-radius-sm ) 0 0;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.adpix-tab:hover {
	color: var( --adpix-ink );
	background: var( --adpix-canvas );
}

.adpix-tab[aria-selected="true"] {
	color: var( --adpix-brand-strong );
	background: none;
	border-block-end-color: var( --adpix-brand-mid );
}

.adpix-tab:focus {
	outline: 2px solid var( --adpix-brand-mid );
	outline-offset: -2px;
	box-shadow: none;
}

.adpix-tab .dashicons {
	width: 17px;
	height: 17px;
	font-size: 17px;
	line-height: 1;
}

/* ---------------------------------------------------------------- Panels */

.adpix-panel {
	padding: 2px 20px 10px;
}

.adpix-panel:focus {
	outline: none;
}

.adpix-panel__title {
	margin: 18px 0 2px;
	font-size: 15px;
	font-weight: 600;
	color: var( --adpix-ink );
}

/*
 * With the tab strip running, the tab already names the section and repeating it below is noise.
 * The heading stays in the document for anything reading structure, and stays visible when the
 * script has not run — which is the only time it is the sole label a section has.
 */
.adpix-has-tabs .adpix-panel__title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.adpix-panel__intro {
	max-width: 76ch;
	margin: 14px 0 0;
	color: var( --adpix-muted );
}

.adpix-has-tabs .adpix-panel__intro {
	margin-block-start: 18px;
}

/* ---------------------------------------------------------------- Form rows */

.adpix-app .adpix-form {
	margin: 0;
}

.adpix-app .adpix-form th {
	width: 210px;
	padding: 18px 0;
	padding-inline-end: 24px;
	font-weight: 600;
	text-align: start;
	vertical-align: top;
	color: var( --adpix-ink );
}

.adpix-app .adpix-form td {
	padding: 18px 0;
	vertical-align: top;
}

.adpix-app .adpix-form tr + tr > th,
.adpix-app .adpix-form tr + tr > td {
	border-block-start: 1px solid var( --adpix-line );
}

.adpix-app .adpix-form .description {
	max-width: 66ch;
	margin: 7px 0 0;
	font-size: 13px;
	color: var( --adpix-muted );
}

.adpix-app .adpix-locked {
	font-style: italic;
}

/* ---------------------------------------------------------------- Help tooltips */

/*
 * A field's help text sits behind an icon beside its label rather than under the control, so a long
 * form reads as a list of settings instead of a wall of small print. It opens on hover and on focus,
 * stays open while the pointer is over the text itself, and Escape closes it (see admin.js).
 */
.adpix-app .adpix-help {
	position: relative;
	display: inline-block;
	margin-inline-start: 4px;
	vertical-align: middle;
}

.adpix-app .adpix-help__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	color: var( --adpix-muted );
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: help;
}

.adpix-app .adpix-help__toggle .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
}

.adpix-app .adpix-help__toggle:hover,
.adpix-app .adpix-help__toggle:focus {
	color: var( --adpix-brand-strong );
}

.adpix-app .adpix-help__toggle:focus-visible {
	outline: 2px solid var( --adpix-brand-mid );
	outline-offset: 1px;
}

.adpix-app .adpix-help__tip {
	position: absolute;
	inset-block-start: calc( 100% + 6px );
	inset-inline-start: -6px;
	z-index: 10;
	width: max-content;
	max-width: min( 320px, calc( 100vw - 48px ) );
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	text-align: start;
	white-space: normal;
	color: var( --adpix-ink );
	background: var( --adpix-surface );
	border: 1px solid var( --adpix-line );
	border-radius: var( --adpix-radius-sm );
	box-shadow: 0 4px 12px rgba( 16, 24, 40, 0.12 );
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.12s ease, visibility 0.12s;
}

/* Bridges the gap under the icon, so moving the pointer onto the text does not close it on the way. */
.adpix-app .adpix-help__tip::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 100%;
	height: 8px;
}

.adpix-app .adpix-help:hover .adpix-help__tip,
.adpix-app .adpix-help:focus-within .adpix-help__tip {
	visibility: visible;
	opacity: 1;
}

.adpix-app .adpix-help.is-dismissed .adpix-help__tip {
	visibility: hidden;
	opacity: 0;
}

/* ---------------------------------------------------------------- Fields */

.adpix-app .adpix-form input[type="text"],
.adpix-app .adpix-form input[type="url"],
.adpix-app .adpix-form input[type="password"],
.adpix-app .adpix-form select,
.adpix-app .adpix-form textarea {
	padding: 7px 10px;
	color: var( --adpix-ink );
	background-color: var( --adpix-surface );
	border: 1px solid var( --adpix-field-line );
	border-radius: var( --adpix-radius-sm );
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.adpix-app .adpix-form select {
	min-width: 16em;
	max-width: 100%;
	min-height: 34px;
	padding-block: 6px;
}

.adpix-app .adpix-form input[type="text"]:focus,
.adpix-app .adpix-form input[type="url"]:focus,
.adpix-app .adpix-form input[type="password"]:focus,
.adpix-app .adpix-form select:focus,
.adpix-app .adpix-form textarea:focus {
	border-color: var( --adpix-brand-mid );
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba( 226, 102, 47, 0.18 );
}

.adpix-app .adpix-form input:disabled,
.adpix-app .adpix-form textarea[readonly] {
	color: var( --adpix-muted );
	background-color: var( --adpix-canvas );
}

.adpix-app .adpix-form .regular-text {
	width: 28em;
	max-width: 100%;
}

/* Code fields are read left-to-right even when the surrounding page is not. */
.adpix-app textarea.code,
.adpix-app input.code {
	direction: ltr;
	text-align: left;
	font-size: 13px;
}

/* ---------------------------------------------------------------- Switches */

.adpix-app .adpix-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var( --adpix-ink );
	cursor: pointer;
}

/*
 * A checkbox drawn as a switch. Core already relies on ::before over an appearance:none checkbox
 * for its own tick, so the same technique is safe here; the :checked::before reset below removes
 * that tick, which would otherwise sit underneath the knob.
 */
.adpix-app input[type="checkbox"].adpix-switch {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex: none;
	width: 38px;
	height: 22px;
	min-width: 38px;
	margin: 0;
	background: #dcdcde;
	border: 1px solid #c3c4c7;
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.adpix-app input[type="checkbox"].adpix-switch::before {
	content: none;
}

.adpix-app input[type="checkbox"].adpix-switch::after {
	content: "";
	position: absolute;
	inset-block-start: 2px;
	inset-inline-start: 2px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.25 );
	transition: inset-inline-start 0.15s ease;
}

.adpix-app input[type="checkbox"].adpix-switch:checked {
	background: var( --adpix-brand-mid );
	border-color: var( --adpix-brand-strong );
}

.adpix-app input[type="checkbox"].adpix-switch:checked::after {
	inset-inline-start: 18px;
}

.adpix-app input[type="checkbox"].adpix-switch:focus {
	outline: 2px solid var( --adpix-brand-mid );
	outline-offset: 2px;
	box-shadow: none;
}

.adpix-app input[type="checkbox"].adpix-switch:disabled {
	cursor: default;
	opacity: 0.6;
}

/* ---------------------------------------------------------------- Role choices */

/*
 * Chips rather than a stacked list: a site with a dozen roles stays one glanceable block. The chip
 * itself shows the state, so the tick box inside it is hidden - but only where :has() can draw that
 * state; a browser without it keeps the tick box, which is then the only sign of what is chosen.
 */
.adpix-app .adpix-choice {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 6px;
	margin-inline-end: 6px;
	padding-block: 5px;
	padding-inline: 8px 12px;
	font-size: 13px;
	color: var( --adpix-ink );
	background: var( --adpix-surface );
	border: 1px solid var( --adpix-line );
	border-radius: 999px;
	cursor: pointer;
}

.adpix-app .adpix-choice:hover {
	border-color: var( --adpix-field-line );
	background: var( --adpix-canvas );
}

.adpix-app .adpix-choice:has( input:checked ) {
	color: var( --adpix-brand-strong );
	background: var( --adpix-tint );
	border-color: var( --adpix-brand-mid );
}

.adpix-app .adpix-choice:focus-within {
	outline: 2px solid var( --adpix-brand-mid );
	outline-offset: 1px;
}

@supports selector( :has( * ) ) {
	.adpix-app .adpix-choice {
		padding-inline: 12px;
		user-select: none;
	}

	/* Out of sight but still in the form, in the tab order and in the accessibility tree. */
	.adpix-app .adpix-choice .adpix-check {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: 0;
		opacity: 0;
		pointer-events: none;
	}

	.adpix-app .adpix-choice:has( input:checked )::before {
		content: "\f147";
		margin-inline-start: -4px;
		font: normal 16px/1 dashicons;
		-webkit-font-smoothing: antialiased;
	}
}

/* ---------------------------------------------------------------- Choice cards */

/*
 * Two or three choices laid out side by side, each with a sentence saying what it does. The card
 * carries the state where :has() is supported; the radio button stays visible regardless, so the
 * choice is never shown by colour alone.
 */
.adpix-app .adpix-options {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 250px, 100% ), 1fr ) );
	gap: 10px;
	max-width: 620px;
	margin: 0;
	padding: 0;
	border: 0;
}

.adpix-app .adpix-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 14px;
	padding-inline-end: 40px;
	background: var( --adpix-surface );
	border: 1px solid var( --adpix-field-line );
	border-radius: var( --adpix-radius );
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.adpix-app .adpix-option:hover {
	border-color: var( --adpix-brand-mid );
}

.adpix-app .adpix-option:has( input:checked ) {
	background: var( --adpix-tint );
	border-color: var( --adpix-brand-mid );
	box-shadow: 0 0 0 1px var( --adpix-brand-mid );
}

.adpix-app .adpix-option:focus-within {
	outline: 2px solid var( --adpix-brand-mid );
	outline-offset: 2px;
}

.adpix-app .adpix-option .adpix-option__input {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-end: 14px;
	margin: 0;
}

.adpix-app .adpix-option .adpix-option__input:checked {
	border-color: var( --adpix-brand-strong );
}

.adpix-app .adpix-option .adpix-option__input:checked::before {
	background-color: var( --adpix-brand-strong );
}

.adpix-app .adpix-option .adpix-option__input:focus {
	box-shadow: none;
	outline: 0;
}

/* A thumbnail of a page, with the part the choice refers to picked out. */
.adpix-app .adpix-option__art {
	position: relative;
	flex: none;
	width: 42px;
	height: 52px;
	background:
		linear-gradient( var( --adpix-line ), var( --adpix-line ) ) 7px 20px / 28px 3px no-repeat,
		linear-gradient( var( --adpix-line ), var( --adpix-line ) ) 7px 27px / 22px 3px no-repeat,
		linear-gradient( var( --adpix-line ), var( --adpix-line ) ) 7px 34px / 26px 3px no-repeat,
		var( --adpix-surface );
	border: 1px solid var( --adpix-field-line );
	border-radius: 4px;
}

.adpix-app .adpix-option__art::after {
	content: "";
	position: absolute;
	inset-inline: 4px;
	height: 8px;
	background: var( --adpix-field-line );
	border-radius: 2px;
}

.adpix-app .adpix-option__art--head::after {
	inset-block-start: 4px;
}

.adpix-app .adpix-option__art--footer::after {
	inset-block-end: 4px;
}

.adpix-app .adpix-option:has( input:checked ) .adpix-option__art {
	border-color: var( --adpix-brand-mid );
}

.adpix-app .adpix-option:has( input:checked ) .adpix-option__art::after {
	background: var( --adpix-brand-mid );
}

.adpix-app .adpix-option__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.adpix-app .adpix-option__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var( --adpix-ink );
}

.adpix-app .adpix-option__badge {
	padding: 0 7px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.7;
	color: var( --adpix-brand-strong );
	background: var( --adpix-surface );
	border: 1px solid var( --adpix-brand-mid );
	border-radius: 999px;
}

.adpix-app .adpix-option__hint {
	font-size: 12px;
	line-height: 1.55;
	color: var( --adpix-muted );
}

/* ---------------------------------------------------------------- Page picker */

.adpix-app .adpix-picker {
	max-width: 28em;
}

.adpix-app .adpix-picker__chosen {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.adpix-app .adpix-picker__chosen[hidden] {
	display: none;
}

.adpix-app .adpix-picker__chip {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	max-width: 100%;
	margin: 0;
	padding-block: 4px;
	padding-inline: 12px 4px;
	font-size: 13px;
	color: var( --adpix-brand-strong );
	background: var( --adpix-tint );
	border: 1px solid var( --adpix-brand-mid );
	border-radius: 999px;
}

.adpix-app .adpix-picker__chip > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.adpix-app .adpix-picker__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 22px;
	height: 22px;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.adpix-app .adpix-picker__remove .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.adpix-app .adpix-picker__remove:hover,
.adpix-app .adpix-picker__remove:focus {
	color: var( --adpix-surface );
	background: var( --adpix-brand-strong );
}

.adpix-app .adpix-picker__remove:focus-visible {
	outline: 2px solid var( --adpix-brand-mid );
	outline-offset: 1px;
}

.adpix-app .adpix-picker__box {
	position: relative;
}

.adpix-app .adpix-form .adpix-picker__search {
	width: 100%;
	padding: 7px 10px;
	color: var( --adpix-ink );
	background-color: var( --adpix-surface );
	border: 1px solid var( --adpix-field-line );
	border-radius: var( --adpix-radius-sm );
	box-shadow: none;
}

.adpix-app .adpix-form .adpix-picker__search:focus {
	border-color: var( --adpix-brand-mid );
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba( 226, 102, 47, 0.18 );
}

.adpix-app .adpix-picker__results {
	position: absolute;
	inset-block-start: calc( 100% + 4px );
	inset-inline: 0;
	z-index: 10;
	max-height: 260px;
	margin: 0;
	padding: 4px;
	overflow-y: auto;
	list-style: none;
	background: var( --adpix-surface );
	border: 1px solid var( --adpix-line );
	border-radius: var( --adpix-radius-sm );
	box-shadow: 0 4px 12px rgba( 16, 24, 40, 0.12 );
}

.adpix-app .adpix-picker__results[hidden] {
	display: none;
}

.adpix-app .adpix-picker__option {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 7px 10px;
	border-radius: 4px;
	cursor: pointer;
}

.adpix-app .adpix-picker__option.is-active {
	background: var( --adpix-tint );
}

.adpix-app .adpix-picker__title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var( --adpix-ink );
}

.adpix-app .adpix-picker__meta {
	flex: none;
	font-size: 12px;
	color: var( --adpix-muted );
}

.adpix-app .adpix-picker__empty {
	margin: 0;
	padding: 7px 10px;
	font-size: 13px;
	color: var( --adpix-muted );
}

/* ---------------------------------------------------------------- Status */

.adpix-app .adpix-status {
	margin: 0;
	padding: 4px 20px 6px;
	list-style: none;
}

.adpix-app .adpix-status__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 11px 0;
	border-block-end: 1px solid var( --adpix-line );
}

.adpix-app .adpix-status__row:last-child {
	border-block-end: 0;
}

.adpix-app .adpix-status__label {
	flex: 1 1 auto;
	font-size: 13px;
	font-weight: 600;
	color: var( --adpix-ink );
}

.adpix-app .adpix-status__note {
	flex: 1 1 100%;
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: var( --adpix-muted );
}

.adpix-app .adpix-status__note .button-link {
	font-size: 12px;
	color: var( --adpix-brand-strong );
}

.adpix-app .adpix-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 14px 20px;
	background: var( --adpix-canvas );
	border-block-start: 1px solid var( --adpix-line );
	border-radius: 0 0 var( --adpix-radius ) var( --adpix-radius );
}

.adpix-pill {
	display: inline-block;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
	border-radius: 999px;
}

.adpix-pill-ok {
	color: #14622a;
	background: #edfaef;
	box-shadow: inset 0 0 0 1px #9ad5a8;
}

.adpix-pill-off {
	color: #50575e;
	background: #f0f0f1;
	box-shadow: inset 0 0 0 1px #c3c4c7;
}

.adpix-result-ok {
	font-size: 13px;
	color: #14622a;
}

.adpix-result-error {
	font-size: 13px;
	color: #b32d2e;
}

.adpix-result-busy {
	font-size: 13px;
	font-style: italic;
	color: var( --adpix-muted );
}

/* ---------------------------------------------------------------- Buttons */

.adpix-app .button-primary {
	height: 34px;
	padding: 0 18px;
	font-weight: 500;
	line-height: 32px;
	color: #fff;
	background: var( --adpix-brand-strong );
	border-color: var( --adpix-brand-strong );
	border-radius: var( --adpix-radius-sm );
	text-shadow: none;
	box-shadow: none;
}

.adpix-app .button-primary:hover,
.adpix-app .button-primary:focus,
.adpix-app .button-primary:active {
	color: #fff;
	background: var( --adpix-brand-deep );
	border-color: var( --adpix-brand-deep );
}

.adpix-app .button-primary:focus {
	box-shadow: 0 0 0 3px rgba( 226, 102, 47, 0.25 );
}

.adpix-app .button-secondary {
	height: 34px;
	padding: 0 14px;
	line-height: 32px;
	border-radius: var( --adpix-radius-sm );
	border-color: var( --adpix-field-line );
	color: var( --adpix-ink );
	background: var( --adpix-surface );
}

.adpix-app .button-secondary:hover:not( :disabled ) {
	color: var( --adpix-brand-strong );
	border-color: var( --adpix-brand-mid );
	background: var( --adpix-tint );
}

.adpix-app .button-secondary:focus {
	border-color: var( --adpix-brand-mid );
	box-shadow: 0 0 0 3px rgba( 226, 102, 47, 0.2 );
}

/* ---------------------------------------------------------------- Reset */

/* The restore control sits outside the settings form, so it needs its own separation. */
.adpix-app .adpix-reset {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 20px;
	padding: 14px 20px;
	background: var( --adpix-canvas );
	border: 1px solid var( --adpix-line );
	border-radius: var( --adpix-radius );
}

.adpix-app .adpix-reset .description {
	flex: 1 1 26em;
	max-width: 66ch;
	margin: 0;
	font-size: 13px;
	color: var( --adpix-muted );
}

/* ---------------------------------------------------------------- Failure log */

.adpix-app .adpix-card--flush .adpix-log {
	margin: 0;
	border: 0;
	border-block-end: 1px solid var( --adpix-line );
	box-shadow: none;
}

.adpix-app .adpix-card--flush .adpix-log th,
.adpix-app .adpix-card--flush .adpix-log td {
	padding-inline: 20px;
}

.adpix-app .adpix-card--flush > p {
	margin: 0;
	padding: 14px 20px;
}

.adpix-log-context {
	display: block;
	margin-block-start: 0.3em;
	padding: 0;
	font-size: 12px;
	color: var( --adpix-muted );
	background: none;
}

/* ---------------------------------------------------------------- Order screen */

.adpix-order-attribution {
	width: 100%;
	border-collapse: collapse;
}

.adpix-order-attribution th {
	padding-block: 0.25em;
	padding-inline: 0 0.75em;
	font-weight: 600;
	text-align: start;
	vertical-align: top;
	white-space: nowrap;
}

.adpix-order-attribution td {
	padding: 0.25em 0;
	word-break: break-word;
}

.adpix-order-first,
.adpix-order-empty {
	margin: 0.75em 0 0;
	color: var( --adpix-muted, #50575e );
}

/* ---------------------------------------------------------------- Report palette */

/*
 * One list of colours for every figure on the page, so the same measure is the same colour in the
 * chart, its legend and the ring. Each is at least 3:1 against the card, which is what a shape that
 * carries meaning needs; none of them is used for text.
 */
.adpix-app {
	--adpix-series-1: #e2662f;
	--adpix-series-2: #2271b1;
	--adpix-series-3: #2a7d5f;
	--adpix-series-4: #7a4fa3;
	--adpix-series-5: #8a6d3b;

	/* Width reserved for the chart's value axis. The dates below it are indented to match. */
	--adpix-scale: 48px;
	--adpix-plot: 260px;
}

.adpix-series--1 { --adpix-series: var( --adpix-series-1 ); }
.adpix-series--2 { --adpix-series: var( --adpix-series-2 ); }
.adpix-series--3 { --adpix-series: var( --adpix-series-3 ); }

.adpix-slice--1 { --adpix-series: var( --adpix-series-1 ); }
.adpix-slice--2 { --adpix-series: var( --adpix-series-2 ); }
.adpix-slice--3 { --adpix-series: var( --adpix-series-3 ); }
.adpix-slice--4 { --adpix-series: var( --adpix-series-4 ); }
.adpix-slice--5 { --adpix-series: var( --adpix-series-5 ); }

/* ---------------------------------------------------------------- Period switcher */

.adpix-ranges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 20px;
	padding: 5px;
	background: var( --adpix-surface );
	border: 1px solid var( --adpix-line );
	border-radius: 999px;
	box-shadow: var( --adpix-shadow );
}

.adpix-app .adpix-range {
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	color: var( --adpix-muted );
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.adpix-app .adpix-range:hover,
.adpix-app .adpix-range:focus {
	color: var( --adpix-brand-strong );
	background: var( --adpix-tint );
}

.adpix-app .adpix-range:focus-visible {
	outline: 2px solid var( --adpix-brand-mid );
	outline-offset: 1px;
}

.adpix-app .adpix-range.is-current {
	font-weight: 600;
	color: #fff;
	background: var( --adpix-brand-strong );
}

/* ---------------------------------------------------------------- Setup prompt */

.adpix-app .adpix-setup {
	max-width: 74ch;
	padding: 24px;
}

.adpix-app .adpix-setup__title {
	margin: 0 0 10px;
	font-size: 17px;
	line-height: 1.35;
	color: var( --adpix-ink );
}

.adpix-app .adpix-setup__steps {
	margin: 16px 0;
	padding-inline-start: 22px;
}

.adpix-app .adpix-setup__steps li {
	margin: 0 0 10px;
	line-height: 1.6;
	color: var( --adpix-ink );
}

.adpix-app .adpix-setup__steps code,
.adpix-app .adpix-setup__note code {
	font-size: 12px;
	word-break: break-all;
}

.adpix-app .adpix-setup__subtitle {
	margin: 20px 0 0;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --adpix-muted );
}

/* What is already set and what is not, so a half-configured site sees which step it is on. */
.adpix-app .adpix-setup__checklist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 4px;
	padding: 0;
	list-style: none;
}

.adpix-app .adpix-setup__checklist li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var( --adpix-line );
	border-radius: 999px;
	background: var( --adpix-canvas );
}

.adpix-app .adpix-setup__checklist .is-done .dashicons {
	color: #00a32a;
}

.adpix-app .adpix-setup__checklist .is-missing {
	border-color: var( --adpix-brand-mid );
	background: var( --adpix-tint );
}

.adpix-app .adpix-setup__checklist .is-missing .dashicons {
	color: var( --adpix-brand-strong );
}

.adpix-app .adpix-setup__state {
	color: var( --adpix-muted );
}

/* The "property not found" explanation: IDs are long and must wrap rather than widen the notice. */
.adpix-app .adpix-diagnosis code {
	word-break: break-all;
}

.adpix-app .adpix-diagnosis__list {
	margin: 4px 0 8px;
	padding-inline-start: 18px;
	list-style: disc;
}

.adpix-app .adpix-diagnosis__list li {
	margin: 0 0 4px;
}

.adpix-app .adpix-setup__note {
	padding: 10px 14px;
	border-inline-start: 3px solid var( --adpix-brand-mid );
	background: var( --adpix-canvas );
	color: var( --adpix-muted );
}

/* ---------------------------------------------------------------- Headline figures */

.adpix-tiles {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	gap: 16px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.adpix-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 18px 18px 16px;
	overflow: hidden;
	background: var( --adpix-surface );
	border: 1px solid var( --adpix-line );
	border-radius: var( --adpix-radius );
	box-shadow: var( --adpix-shadow );
}

.adpix-tile::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 3px;
	background: linear-gradient( var( --adpix-brand ), var( --adpix-accent ) );
}

.adpix-tile__icon {
	color: var( --adpix-brand-mid );
}

.adpix-tile__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --adpix-muted );
}

.adpix-tile__value {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	color: var( --adpix-ink );
	overflow-wrap: anywhere;
}

.adpix-tile__hint {
	margin-block-start: 4px;
	font-size: 12px;
	line-height: 1.5;
	color: var( --adpix-muted );
}

/* ---------------------------------------------------------------- Report cards */

.adpix-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 360px, 100% ), 1fr ) );
	gap: 20px;
	align-items: start;
}

.adpix-app .adpix-report {
	display: flex;
	flex-direction: column;
	padding: 18px 20px 20px;
}

.adpix-app .adpix-report__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 600;
	color: var( --adpix-ink );
}

.adpix-app .adpix-report__title .dashicons {
	flex: none;
	color: var( --adpix-brand-mid );
}

/* The chart carries its own padding, so the card it sits in gives up all of it. */
.adpix-app .adpix-report--wide {
	padding: 0;
}

.adpix-app .adpix-report--wide > .adpix-report__title {
	margin: 18px 20px 0;
}

.adpix-app .adpix-report--wide > .adpix-empty {
	padding-block-end: 24px;
}

/* ---------------------------------------------------------------- Chart */

.adpix-chart {
	margin: 0;
	padding: 18px 20px 20px;
}

.adpix-chart__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 20px;
	margin: 0 0 16px;
	padding: 0;
}

.adpix-app .adpix-chart__title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var( --adpix-ink );
}

.adpix-chart__body {
	position: relative;
	display: grid;
	grid-template-columns: var( --adpix-scale ) minmax( 0, 1fr );
	height: var( --adpix-plot );
}

/*
 * The axis labels sit on the gridlines rather than between them: each step is a zero-height row, so
 * its text is centred on the line it names and the first and last line up with the edges of the plot.
 */
.adpix-chart__scale {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	list-style: none;
}

.adpix-chart__scale-step {
	display: flex;
	align-items: center;
	height: 0;
	margin: 0;
	padding-inline-end: 8px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var( --adpix-muted );
}

.adpix-chart__svg {
	width: 100%;
	height: 100%;
}

.adpix-chart__grid line {
	stroke: var( --adpix-line );
	stroke-width: 1;
}

.adpix-chart__stop--top {
	stop-color: var( --adpix-brand );
	stop-opacity: 0.3;
}

.adpix-chart__stop--base {
	stop-color: var( --adpix-brand );
	stop-opacity: 0;
}

.adpix-chart__line {
	stroke: var( --adpix-series, var( --adpix-brand-mid ) );
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.adpix-chart__band {
	fill: transparent;
	cursor: pointer;
}

.adpix-chart__band:hover,
.adpix-chart__band.is-current {
	fill: var( --adpix-brand );
	fill-opacity: 0.08;
}

/* Keyboard focus gets a stronger wash than hover: an outline on a stretched box is not square. */
.adpix-chart__band:focus {
	outline: none;
	fill: var( --adpix-brand );
	fill-opacity: 0.16;
}

.adpix-chart__dates {
	display: flex;
	margin: 8px 0 0;
	padding: 0;
	padding-inline-start: var( --adpix-scale );
	list-style: none;
}

.adpix-chart__date {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-size: 11px;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	color: var( --adpix-muted );
}

/* The outermost labels are pulled inside the plot so neither hangs off the end of the card. */
.adpix-chart__date:first-child {
	flex-grow: 0.5;
	text-align: start;
}

.adpix-chart__date:last-child {
	flex-grow: 0.5;
	text-align: end;
}

.adpix-chart__data {
	margin-block-start: 16px;
	font-size: 13px;
}

.adpix-chart__data > summary {
	display: inline-block;
	padding: 4px 0;
	cursor: pointer;
	color: var( --adpix-brand-strong );
}

.adpix-chart__data > summary:focus-visible {
	outline: 2px solid var( --adpix-brand-mid );
	outline-offset: 2px;
}

.adpix-chart__data[open] > summary {
	margin-block-end: 10px;
}

/* ---------------------------------------------------------------- Legend */

.adpix-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.adpix-legend__item {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 12px;
	color: var( --adpix-muted );
}

.adpix-legend__swatch {
	flex: none;
	width: 10px;
	height: 10px;
	background: var( --adpix-series, var( --adpix-brand-mid ) );
	border-radius: 3px;
}

.adpix-legend__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var( --adpix-ink );
}

/* ---------------------------------------------------------------- Hover readout */

.adpix-readout {
	position: absolute;
	inset-block-start: 8px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 120px;
	padding: 8px 10px;
	font-size: 12px;
	line-height: 1.5;
	pointer-events: none;
	background: var( --adpix-surface );
	border: 1px solid var( --adpix-line );
	border-radius: var( --adpix-radius-sm );
	box-shadow: 0 4px 12px rgba( 16, 24, 40, 0.12 );
}

.adpix-readout[hidden] {
	display: none;
}

.adpix-readout__day {
	color: var( --adpix-ink );
}

.adpix-readout__row {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	color: var( --adpix-muted );
}

.adpix-readout__row::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	background: var( --adpix-series, var( --adpix-brand-mid ) );
	border-radius: 2px;
}

/* ---------------------------------------------------------------- Breakdown tables */

/*
 * Wide content is given its own scroller rather than being allowed to push the card out: a table
 * that scrolls is readable on a phone, a card that overflows takes the whole layout with it.
 */
.adpix-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.adpix-app .adpix-table {
	border: 0;
	box-shadow: none;
}

.adpix-app .adpix-table th,
.adpix-app .adpix-table td {
	padding: 9px 10px;
	vertical-align: middle;
}

.adpix-app .adpix-table thead th {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --adpix-muted );
}

.adpix-app .adpix-table__num {
	text-align: end;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.adpix-app .adpix-table__share {
	width: 1%;
	color: var( --adpix-muted );
}

/*
 * The proportional bar is a pseudo-element anchored to the reading edge, so it grows away from the
 * start of the row in Persian and Arabic exactly as it does in English — no mirrored stylesheet and
 * no direction test anywhere.
 */
.adpix-app .adpix-table__label {
	position: relative;
	font-weight: 400;
}

.adpix-app .adpix-table__label::before {
	content: "";
	position: absolute;
	inset-block: 5px;
	inset-inline-start: 0;
	width: var( --adpix-bar, 0% );
	background: var( --adpix-tint );
	border-radius: 3px;
}

.adpix-table__name {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.adpix-table__badge {
	flex: none;
	font-size: 15px;
	line-height: 1;
}

.adpix-table__text {
	display: block;
	max-width: 34ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var( --adpix-ink );
}

/* ---------------------------------------------------------------- Ring */

.adpix-donut {
	display: grid;
	grid-template-columns: 148px minmax( 0, 1fr );
	gap: 20px;
	align-items: center;
}

.adpix-donut__svg {
	width: 100%;
	max-width: 148px;
	height: auto;
}

.adpix-donut__track {
	stroke: var( --adpix-line );
	stroke-width: 14;
}

.adpix-donut__slice {
	stroke: var( --adpix-series, var( --adpix-brand-mid ) );
	stroke-width: 14;
}

.adpix-donut__key {
	margin: 0;
	padding: 0;
	list-style: none;
}

.adpix-donut__item {
	display: grid;
	grid-template-columns: 10px minmax( 0, 1fr ) auto auto;
	gap: 8px;
	align-items: center;
	margin: 0;
	padding: 6px 0;
	font-size: 13px;
	border-block-end: 1px solid var( --adpix-line );
}

.adpix-donut__item:last-child {
	border-block-end: 0;
}

.adpix-donut__swatch {
	width: 10px;
	height: 10px;
	background: var( --adpix-series, var( --adpix-brand-mid ) );
	border-radius: 3px;
}

.adpix-donut__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var( --adpix-ink );
}

.adpix-donut__share {
	font-variant-numeric: tabular-nums;
	color: var( --adpix-muted );
}

.adpix-donut__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var( --adpix-ink );
}

/* ---------------------------------------------------------------- Report asides */

.adpix-app .adpix-empty {
	margin: 0;
	padding: 24px 0;
	text-align: center;
	color: var( --adpix-muted );
}

.adpix-app .adpix-empty--bad {
	color: #8a2c0d;
}

.adpix-app .adpix-note {
	margin: 12px 0 0;
	font-size: 12px;
	color: var( --adpix-muted );
}

.adpix-footnote {
	margin: 20px 0 0;
	font-size: 12px;
	color: var( --adpix-muted );
}

/* ---------------------------------------------------------------- Settings sub-headings */

.adpix-app .adpix-form .adpix-section > td {
	padding-block: 20px 0;
	border-block-start: 0;
}

.adpix-app .adpix-section__title {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --adpix-muted );
}

.adpix-app .adpix-section > td > .description {
	margin-block-start: 4px;
}

/* A sub-heading that introduces an optional part of a tab, with its state and how to set it up. */
.adpix-app .adpix-form .adpix-section--card > td {
	padding-block: 24px 6px;
}

.adpix-app .adpix-intro {
	padding: 18px 20px;
	background: var( --adpix-canvas );
	border: 1px solid var( --adpix-line );
	border-inline-start: 3px solid var( --adpix-brand-mid );
	border-radius: var( --adpix-radius );
}

.adpix-app .adpix-intro__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.adpix-app .adpix-intro__icon {
	width: 30px;
	height: 30px;
	font-size: 18px;
	line-height: 30px;
	text-align: center;
	color: var( --adpix-brand-strong );
	background: var( --adpix-tint );
	border-radius: var( --adpix-radius-sm );
}

.adpix-app .adpix-intro__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var( --adpix-ink );
}

.adpix-app .adpix-intro__badge {
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.7;
	color: var( --adpix-muted );
	border: 1px solid var( --adpix-field-line );
	border-radius: 999px;
}

/* The state sits at the far end of the heading, where the eye finishes reading it. */
.adpix-app .adpix-intro__head .adpix-pill {
	margin-inline-start: auto;
}

.adpix-app .adpix-intro__lead {
	max-width: 70ch;
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var( --adpix-ink );
}

.adpix-app .adpix-intro__link {
	margin-inline-start: 4px;
	font-weight: 600;
	color: var( --adpix-brand-strong );
	text-decoration: none;
	white-space: nowrap;
}

.adpix-app .adpix-intro__link::after {
	content: " \2192";
}

[dir="rtl"] .adpix-app .adpix-intro__link::after,
.rtl .adpix-app .adpix-intro__link::after {
	content: " \2190";
}

.adpix-app .adpix-intro__link:hover,
.adpix-app .adpix-intro__link:focus {
	color: var( --adpix-brand-deep );
	text-decoration: underline;
}

.adpix-app .adpix-compare {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 230px, 100% ), 1fr ) );
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.adpix-app .adpix-compare__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	font-size: 12px;
	line-height: 1.55;
	color: var( --adpix-muted );
	background: var( --adpix-surface );
	border: 1px solid var( --adpix-line );
	border-radius: var( --adpix-radius-sm );
}

.adpix-app .adpix-compare__item strong {
	display: block;
	font-size: 13px;
	color: var( --adpix-ink );
}

.adpix-app .adpix-compare__item .dashicons {
	flex: none;
	color: var( --adpix-muted );
}

/* The credential this part of the form is asking for. */
.adpix-app .adpix-compare__item--this {
	border-color: var( --adpix-brand-mid );
}

.adpix-app .adpix-compare__item--this .dashicons {
	color: var( --adpix-brand-strong );
}

.adpix-app .adpix-steps {
	margin: 14px 0 0;
	font-size: 13px;
}

.adpix-app .adpix-steps > summary {
	display: inline-block;
	font-weight: 600;
	color: var( --adpix-brand-strong );
	cursor: pointer;
	list-style: none;
}

.adpix-app .adpix-steps > summary::-webkit-details-marker {
	display: none;
}

.adpix-app .adpix-steps > summary::before {
	content: "\f139";
	display: inline-block;
	margin-inline-end: 2px;
	font: normal 18px/1 dashicons;
	vertical-align: -4px;
	transition: transform 0.15s ease;
}

[dir="rtl"] .adpix-app .adpix-steps > summary::before,
.rtl .adpix-app .adpix-steps > summary::before {
	content: "\f141";
}

.adpix-app .adpix-steps[open] > summary::before {
	transform: rotate( 90deg );
}

[dir="rtl"] .adpix-app .adpix-steps[open] > summary::before,
.rtl .adpix-app .adpix-steps[open] > summary::before {
	transform: rotate( -90deg );
}

.adpix-app .adpix-steps > summary:focus-visible {
	outline: 2px solid var( --adpix-brand-mid );
	outline-offset: 2px;
	border-radius: 2px;
}

.adpix-app .adpix-steps ol {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: adpix-step;
}

.adpix-app .adpix-steps li {
	position: relative;
	margin: 0 0 8px;
	padding-inline-start: 32px;
	line-height: 1.6;
	color: var( --adpix-ink );
	counter-increment: adpix-step;
}

.adpix-app .adpix-steps li::before {
	content: counter( adpix-step );
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 1px;
	width: 22px;
	height: 22px;
	font-size: 12px;
	font-weight: 600;
	line-height: 22px;
	text-align: center;
	color: var( --adpix-brand-strong );
	background: var( --adpix-tint );
	border-radius: 50%;
}

.adpix-app .adpix-steps code {
	padding: 1px 5px;
	font-size: 12px;
	direction: ltr;
	unicode-bidi: isolate;
	background: var( --adpix-surface );
	border: 1px solid var( --adpix-line );
	border-radius: 4px;
}

/* ---------------------------------------------------------------- Narrower screens */

/*
 * The layout is written to bend on its own — every grid here is an auto-fit track list, every card
 * is allowed to shrink, and wide content scrolls inside its own box. These queries only step in
 * where a fixed size stops making sense: the plot has to get shorter before it gets narrow enough
 * to be a smear, and the admin menu takes a large bite out of the page at some widths and none at
 * others. The order is largest to smallest, so each one only has to say what changed.
 */

/* Laptops, and desktops with the admin menu expanded. */
@media screen and ( max-width: 1180px ) {
	.adpix-app {
		--adpix-plot: 230px;
	}

	.adpix-grid {
		grid-template-columns: repeat( auto-fit, minmax( min( 320px, 100% ), 1fr ) );
	}
}

/* Tablets in landscape. */
@media screen and ( max-width: 960px ) {
	.adpix-tiles {
		grid-template-columns: repeat( auto-fit, minmax( 165px, 1fr ) );
		gap: 12px;
	}

	.adpix-tile {
		padding: 16px;
	}

	.adpix-tile__value {
		font-size: 24px;
	}

	.adpix-table__text {
		max-width: 26ch;
	}
}

/* The width at which core turns wp-admin into its touch layout. */
@media screen and ( max-width: 782px ) {
	.adpix-app {
		--adpix-plot: 200px;
		--adpix-scale: 40px;
	}

	.adpix-header {
		padding: 16px;
	}

	.adpix-header__state {
		margin-inline-start: 0;
	}

	/*
	 * Core stacks form-table rows into blocks below this width, so the rule that separated the two
	 * cells of a row would now cut the row in half.
	 */
	.adpix-app .adpix-form th {
		width: auto;
		padding-block-end: 0;
		padding-inline-end: 0;
	}

	.adpix-app .adpix-form td {
		padding-block-start: 10px;
	}

	.adpix-app .adpix-form tr + tr > td {
		border-block-start: 0;
	}

	.adpix-app .adpix-form .regular-text,
	.adpix-app .adpix-form select {
		width: 100%;
	}

	.adpix-tab__label {
		font-size: 13px;
	}

	/* Wrapped pills inside a pill-shaped box look like a mistake; the box stops being one. */
	.adpix-ranges {
		border-radius: var( --adpix-radius );
	}

	.adpix-app .adpix-range {
		padding: 8px 14px;
	}

	.adpix-app .adpix-setup,
	.adpix-app .adpix-report,
	.adpix-chart {
		padding: 16px;
	}

	.adpix-app .adpix-report--wide {
		padding: 0;
	}

	.adpix-app .adpix-report--wide > .adpix-report__title {
		margin: 16px 16px 0;
	}

	.adpix-donut {
		grid-template-columns: minmax( 0, 1fr );
		gap: 16px;
		justify-items: center;
	}

	.adpix-donut__key {
		width: 100%;
	}

	/* Touch targets: a 10px band is hard to hit with a finger, so the readout follows focus too. */
	.adpix-readout {
		font-size: 13px;
	}
}

/* Phones in landscape, and the narrowest tablets. */
@media screen and ( max-width: 600px ) {
	.adpix-app {
		--adpix-plot: 180px;
	}

	.adpix-header {
		gap: 12px;
	}

	.adpix-header__text {
		flex-basis: 100%;
	}

	.adpix-header__state {
		flex: 1 1 100%;
	}

	.adpix-header__state .button {
		width: 100%;
		text-align: center;
	}

	.adpix-tiles {
		grid-template-columns: repeat( auto-fit, minmax( 145px, 1fr ) );
	}

	.adpix-tile__hint {
		display: none;
	}

	.adpix-chart__head {
		gap: 8px;
	}

	.adpix-table__text {
		max-width: 18ch;
	}
}

/* Phones in portrait. */
@media screen and ( max-width: 480px ) {
	.adpix-app {
		--adpix-plot: 165px;
		--adpix-scale: 34px;
	}

	.adpix-header {
		padding: 14px;
	}

	.adpix-header__logo {
		width: 34px;
		height: 34px;
	}

	.adpix-header__title {
		font-size: 16px;
	}

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

	.adpix-tile__value {
		font-size: 22px;
	}

	/* Below this the dates stop being labels and start being a texture, so only the ends stay. */
	.adpix-chart__date:not( :first-child ):not( :last-child ) {
		visibility: hidden;
	}

	.adpix-legend {
		gap: 4px 12px;
	}

	.adpix-app .adpix-setup,
	.adpix-app .adpix-report,
	.adpix-chart {
		padding: 14px;
	}
}

/*
 * Anything taller than it is wide with very little height — a phone held sideways — gets a plot that
 * is short enough to leave room for the figures underneath it.
 */
@media screen and ( max-height: 520px ) and ( orientation: landscape ) {
	.adpix-app {
		--adpix-plot: 150px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.adpix-app * {
		transition: none !important;
	}
}