/**
 * The BirchToad admin screen.
 *
 * Deliberately not a default WordPress settings page. Same palette as the visitor panel, so the
 * admin and the thing it configures look like one product.
 */

.birchtoad-wrap {
	--bt-ink: #0f1535;
	--bt-head: #191c44;
	--bt-accent: #2f57f0;
	--bt-card: #ffffff;
	--bt-page: #f4f5f8;
	--bt-line: #e4e7ef;
	--bt-muted: #6b7190;
	margin: 0 0 0 -20px;
	padding: 0 0 40px;
	background: var(--bt-page);
	min-height: calc(100vh - 32px);
	font-size: 14px;
	color: var(--bt-ink);
}

.birchtoad-wrap * {
	box-sizing: border-box;
}

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

/* The strip spans the screen and the padding belongs to the inner column, not
   to the strip. With it on the strip, the 1180px column was centered inside an
   already inset box and the head sat 24px right of the tabs and the cards. */
.birchtoad-head {
	background: linear-gradient(120deg, #191c44 0%, #262c6b 100%);
	color: #ffffff;
}

.birchtoad-head-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 26px 32px;
}

.birchtoad-head h1 {
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.birchtoad-head p {
	margin: 4px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 13px;
}

.birchtoad-logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 7px;
	border-radius: 11px;
	background: var(--bt-accent);
	color: #ffffff;
}

/* The mark is drawn in currentColor, so the white above colors it. */
.birchtoad-logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.birchtoad-edition {
	margin-inline-start: auto;
	padding: 5px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------- tabs */

/* The strip spans the screen; the row inside it is the same 1180px column as the
   header title and the cards, so all three share one left edge. */
.birchtoad-tabs {
	background: #ffffff;
	border-bottom: 1px solid var(--bt-line);
}

.birchtoad-tabs-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 32px;
}

.birchtoad-tabs .birchtoad-tab {
	padding: 15px 16px;
	border-bottom: 3px solid transparent;
	color: var(--bt-muted);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: none;
}

.birchtoad-tabs .birchtoad-tab:hover,
.birchtoad-tabs .birchtoad-tab:focus {
	color: var(--bt-ink);
	box-shadow: none;
	outline: none;
}

.birchtoad-tabs .birchtoad-tab.is-active {
	border-bottom-color: var(--bt-accent);
	color: var(--bt-accent);
}

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

.birchtoad-body {
	max-width: 1180px;
	margin: 0 auto;
	padding: 26px 32px 0;
}

/* Prose, not a card. One readable column at the top of a tab. */
.birchtoad-lead {
	max-width: 70ch;
	margin: 0 0 26px;
}

.birchtoad-lead h2 {
	margin: 0 0 8px;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bt-ink);
}

.birchtoad-lead p {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.6;
	color: #4b5270;
}

.birchtoad-lead p:last-child {
	margin-bottom: 0;
}

.birchtoad-notice {
	max-width: 1180px;
	margin: 18px auto -6px;
	padding: 11px 16px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
}

.birchtoad-notice-ok {
	background: #e7f6ee;
	color: #11643c;
}

.birchtoad-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	gap: 18px;
	align-items: start;
}

.birchtoad-card {
	padding: 22px 24px;
	border: 1px solid var(--bt-line);
	border-radius: 14px;
	background: var(--bt-card);
	box-shadow: 0 1px 2px rgba(15, 21, 53, 0.04);
}

.birchtoad-card-wide {
	grid-column: 1 / -1;
}

.birchtoad-card h2 {
	margin: 0 0 4px;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--bt-ink);
}

.birchtoad-card p {
	font-size: 13px;
	line-height: 1.55;
}

.birchtoad-muted {
	color: var(--bt-muted);
	font-size: 12px;
}

.birchtoad-help {
	margin: -4px 0 14px;
	color: var(--bt-muted);
	font-size: 12px;
	line-height: 1.5;
}

.birchtoad-status {
	margin: 10px 0 4px;
	font-size: 14px;
	font-weight: 600;
}

.birchtoad-status.is-on {
	color: #11643c;
}

.birchtoad-status.is-off {
	color: #9a3412;
}

.birchtoad-list {
	margin: 10px 0 0;
	padding-inline-start: 18px;
	font-size: 13px;
	line-height: 1.6;
	list-style: disc;
}

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

.birchtoad-wrap .birchtoad-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 0;
	border-top: 1px solid var(--bt-line);
}

.birchtoad-wrap .birchtoad-row:first-of-type {
	border-top: 0;
}

.birchtoad-wrap .birchtoad-row-label {
	flex: 1;
	font-size: 13px;
	line-height: 1.4;
}

.birchtoad-wrap .birchtoad-row input[type="text"],
.birchtoad-wrap .birchtoad-row input[type="number"],
.birchtoad-wrap .birchtoad-row select {
	flex: 0 0 200px;
	max-width: 200px;
	height: 34px;
	margin: 0;
	border: 1px solid var(--bt-line);
	border-radius: 8px;
	box-shadow: none;
	font-size: 13px;
}

.birchtoad-wrap .birchtoad-row.is-locked {
	opacity: 0.6;
}

/* A row whose control is too wide to sit beside its label. */
.birchtoad-wrap .birchtoad-row-stack {
	display: block;
}

.birchtoad-wrap .birchtoad-row-stack .birchtoad-row-label {
	display: block;
	margin-bottom: 10px;
}

/* ------------------------------------------------------- the icon picker */

.birchtoad-icons {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 10px;
}

.birchtoad-icon-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	cursor: pointer;
	text-align: center;
}

/* Visually hidden, not display:none: a hidden radio is removed from the tab order and from
   the arrow-key group, which would leave the picker unusable from the keyboard. */
.birchtoad-icons input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.birchtoad-icon-art {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 70px;
	border: 1px solid var(--bt-line);
	border-radius: 10px;
	background: var(--bt-card);
	color: var(--bt-ink);
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}

.birchtoad-icon-art svg {
	width: 30px;
	height: 30px;
	display: block;
}

.birchtoad-icon-empty {
	width: 30px;
	height: 30px;
	border: 2px dashed var(--bt-line);
	border-radius: 999px;
}

/* Two lines of room whether or not the name needs them, so a name that wraps does not push
   the next row of tiles out of line with this one. */
.birchtoad-icon-name {
	min-height: 2.6em;
	font-size: 12px;
	line-height: 1.3;
	color: var(--bt-muted);
}

.birchtoad-icon-tile:hover .birchtoad-icon-art {
	border-color: #c3cbe6;
}

.birchtoad-icons input[type="radio"]:checked ~ .birchtoad-icon-art {
	border-color: var(--bt-accent);
	box-shadow: inset 0 0 0 1px var(--bt-accent);
	background: #f3f6ff;
	color: var(--bt-accent);
}

.birchtoad-icons input[type="radio"]:checked ~ .birchtoad-icon-name {
	color: var(--bt-ink);
	font-weight: 600;
}

.birchtoad-icons input[type="radio"]:focus-visible ~ .birchtoad-icon-art {
	outline: 2px solid var(--bt-accent);
	outline-offset: 2px;
}

.birchtoad-pill {
	padding: 3px 9px;
	border-radius: 999px;
	background: #eef1fb;
	color: var(--bt-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* The switch is a real checkbox with a drawn track beside it, so it keeps keyboard behavior
   and the label association for free. */
.birchtoad-wrap input.birchtoad-switch {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.birchtoad-wrap .birchtoad-switch-track {
	position: relative;
	flex: 0 0 auto;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: #c9cfdd;
	transition: background 0.15s ease;
}

.birchtoad-wrap .birchtoad-switch-track::after {
	content: "";
	position: absolute;
	inset-block-start: 3px;
	inset-inline-start: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease;
}

.birchtoad-wrap input.birchtoad-switch:checked + .birchtoad-switch-track {
	background: var(--bt-accent);
}

.birchtoad-wrap input.birchtoad-switch:checked + .birchtoad-switch-track::after {
	transform: translateX(18px);
}

.birchtoad-wrap[dir="rtl"] input.birchtoad-switch:checked + .birchtoad-switch-track::after,
body.rtl .birchtoad-wrap input.birchtoad-switch:checked + .birchtoad-switch-track::after {
	transform: translateX(-18px);
}

.birchtoad-wrap input.birchtoad-switch:focus-visible + .birchtoad-switch-track {
	outline: 3px solid var(--bt-accent);
	outline-offset: 2px;
}

.birchtoad-row-toggle {
	cursor: pointer;
}

/* --------------------------------------------------------------- actions */

.birchtoad-actions {
	max-width: 1180px;
	margin: 22px auto 0;
	padding: 0;
}

.birchtoad-wrap .birchtoad-btn {
	padding: 10px 22px;
	border: 1px solid var(--bt-line);
	border-radius: 9px;
	background: #ffffff;
	color: var(--bt-ink);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.birchtoad-wrap .birchtoad-btn-primary {
	border-color: var(--bt-accent);
	background: var(--bt-accent);
	color: #ffffff;
}

.birchtoad-wrap .birchtoad-btn-primary:hover,
.birchtoad-wrap .birchtoad-btn-primary:focus {
	background: #2546cf;
	color: #ffffff;
}

/* --------------------------------------------------------------- compare */

.birchtoad-compare {
	width: 100%;
	margin-top: 12px;
	border-collapse: collapse;
	font-size: 13px;
}

.birchtoad-compare th,
.birchtoad-compare td {
	padding: 11px 12px;
	border-bottom: 1px solid var(--bt-line);
	text-align: start;
}

.birchtoad-compare th:not(:first-child),
.birchtoad-compare td:not(:first-child) {
	width: 90px;
	text-align: center;
}

.birchtoad-compare thead th {
	color: var(--bt-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.birchtoad-yes {
	color: #11643c;
	font-weight: 700;
}

.birchtoad-no {
	color: #b4bac9;
}

@media screen and (max-width: 782px) {
	.birchtoad-wrap {
		margin-left: -10px;
	}

	.birchtoad-head-inner,
	.birchtoad-tabs-inner,
	.birchtoad-body {
		padding-inline: 16px;
	}

	.birchtoad-grid {
		grid-template-columns: 1fr;
	}
}