/*
 * Adminkeep — settings screen.
 *
 * Design notes, so the next person does not undo them by accident:
 *
 * 1. The accent is NOT ours. It resolves to --wp-admin-theme-color, which is whatever admin
 *    colour scheme the user picked. A plugin about not hijacking the admin should not turn up
 *    wearing its own brand colour.
 * 2. Boldness is spent in exactly one place: the latch. Flipping a switch throws a bolt and
 *    fills the card's left rail top-to-bottom. Nothing else on this page moves on its own.
 * 3. Monospace is used only for things that genuinely are identifiers — plugin files, version
 *    numbers. Content-derived, not decoration.
 * 4. Every transition collapses under prefers-reduced-motion.
 */

/*
 * Tokens live on :root, not on .adminkeep-wrap. The confirm <dialog> is rendered outside the wrap
 * (it belongs to the document, not the page body), and custom properties inherit through the
 * DOM tree rather than the top layer — scoped to .adminkeep-wrap they resolved to nothing in there.
 */
:root {
	--adminkeep-accent: var( --wp-admin-theme-color, #2271b1 );
	--adminkeep-ink: #1d2327;
	--adminkeep-muted: #646970;
	--adminkeep-rail: #dcdcde;
	--adminkeep-surface: #fff;
	--adminkeep-inset: #f6f7f7;
	--adminkeep-danger: #b32d2e;

	/* The shell: one rounded card on WordPress's grey. Tinted nav, white controls area. */
	--adminkeep-edge: #e3e5e8;
	--adminkeep-canvas: #f8f9fb;

	--adminkeep-latch: 260ms cubic-bezier( 0.2, 0.9, 0.3, 1.2 );
	--adminkeep-ease: 200ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.adminkeep-wrap {
	max-width: 1180px;
}

.adminkeep-intro {
	color: var( --adminkeep-muted );
	font-size: 14px;
	margin: 4px 0 22px;
	max-width: 54ch;
}

/* ---------------------------------------------------------------- shell */

.adminkeep-shell {
	background: var( --adminkeep-surface );
	border: 1px solid var( --adminkeep-edge );
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.03 );
	margin-top: 16px;
	overflow: hidden;
}

.adminkeep-masthead {
	align-items: baseline;
	background: var( --adminkeep-surface );
	border-bottom: 1px solid var( --adminkeep-edge );
	display: flex;
	justify-content: space-between;
	padding: 22px 26px;
}

.adminkeep-masthead__title {
	align-items: center;
	display: flex;
	gap: 10px;
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.1;
	margin: 0;
	padding: 0;
}

.adminkeep-masthead__version {
	color: #8c8f94;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	margin: 0;
}

/* ------------------------------------------------------------------ app */

.adminkeep-app {
	display: grid;
	grid-template-columns: 252px minmax( 0, 1fr );

	/*
	 * min-height, not height: a short panel still fills the card so it does not sit stubby with
	 * grey page below it, and a long one grows past this rather than scrolling inside a box.
	 * The empty space ends up inside the shell, where it reads as breathing room.
	 */
	min-height: 80vh;
}

/* ------------------------------------------------------------------ nav */

.adminkeep-nav {
	background: var( --adminkeep-canvas );
	border-right: 1px solid var( --adminkeep-edge );
	padding: 18px 14px 24px;
}

.adminkeep-nav__filter input[type="search"] {
	background: var( --adminkeep-surface );
	border: 1px solid #d5d8dc;
	border-radius: 6px;
	box-shadow: none;
	font-size: 13px;
	line-height: 1.4;
	min-height: 34px;
	padding: 6px 14px;
	transition: border-color var( --adminkeep-ease ), box-shadow var( --adminkeep-ease );
	width: 100%;
}

.adminkeep-nav__filter input[type="search"]:focus {
	border-color: var( --adminkeep-accent );
	box-shadow: 0 0 0 1px var( --adminkeep-accent );
	outline: none;
}

/*
 * Everything the nav tucks away is hidden with the `hidden` attribute — the feature rows, the
 * group headings, the group lists, the hidden-count line, and the panel's screen-link slot. That
 * works only because none of .adminkeep-nav__list li, .adminkeep-nav__group,
 * .adminkeep-nav__hidden-count or .adminkeep-panel__link sets `display` anywhere in this file:
 * any `display` beats the user-agent `display: none` that `hidden` relies on, and the element
 * would stay on screen while the markup and the script both believe it is gone. Style those four
 * however you like, but not with `display`.
 */
.adminkeep-nav__list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.adminkeep-nav__group {
	color: var( --adminkeep-muted );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 20px 0 6px;
	padding: 0 10px;
	text-transform: uppercase;
}

.adminkeep-nav__item {
	align-items: center;
	border-radius: 4px;
	color: var( --adminkeep-ink );
	display: flex;
	gap: 9px;
	padding: 8px 10px;
	position: relative;
	text-decoration: none;
	transition: background var( --adminkeep-ease ), color var( --adminkeep-ease );
}

.adminkeep-nav__item:hover {
	background: rgba( 255, 255, 255, 0.75 );
	color: var( --adminkeep-ink );
}

.adminkeep-nav__item:focus-visible {
	box-shadow: 0 0 0 2px var( --adminkeep-accent );
	outline: none;
}

/* The rail moved here: it marks the panel you are in. */
.adminkeep-nav__item.is-current {
	background: var( --adminkeep-surface );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 );
	color: var( --adminkeep-accent );
	font-weight: 600;
}

.adminkeep-nav__item.is-current::before {
	background: var( --adminkeep-accent );
	border-radius: 0 2px 2px 0;
	content: "";
	height: 60%;
	left: -12px;
	position: absolute;
	top: 20%;
	width: 3px;
}

.adminkeep-nav__text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.adminkeep-nav__empty {
	color: var( --adminkeep-muted );
	font-size: 13px;
	padding: 8px 10px;
}

/*
 * Saving the choice needs the script, so the toggle only shows once the script has run. Both
 * selectors are qualified on purpose. The nav is named in the hide rule so it outweighs the
 * display: flex the switch rules set further down; the show rule then names both .adminkeep-js
 * and the nav, which makes it (0,3,0) against the hide rule's (0,2,0) and so objectively
 * stronger — a tie at (0,2,0) would leave the outcome resting on source order alone. Everything
 * else about the control comes from .adminkeep-switch and its small modifier.
 */
.adminkeep-nav .adminkeep-nav__toggle {
	display: none;
}

.adminkeep-js .adminkeep-nav .adminkeep-nav__toggle {
	display: flex;
	margin: 0 0 14px;
}

.adminkeep-nav__hidden-count {
	border-top: 1px solid var( --adminkeep-edge );
	color: var( --adminkeep-muted );
	font-size: 12px;
	margin: 16px 0 0;
	padding: 10px 10px 0;
}

.adminkeep-nav__hidden-count .button-link {
	font-size: 12px;
	margin-left: 6px;
}

/* The state dot: grey when dormant, accent when engaged. */
.adminkeep-dot {
	background: #c3c4c7;
	border-radius: 50%;
	flex: 0 0 auto;
	height: 7px;
	transition: background var( --adminkeep-latch ), transform var( --adminkeep-latch );
	width: 7px;
}

.adminkeep-dot.is-on {
	background: var( --adminkeep-accent );
	transform: scale( 1.15 );
}

/* --------------------------------------------------------------- panels */

.adminkeep-panels {
	background: var( --adminkeep-surface );
	padding: 24px 28px 30px;
}

.adminkeep-panel[hidden] {
	display: none;
}

/*
 * Without JavaScript the router never runs, so every panel is shown stacked and the nav, which
 * only switches panels, is hidden. Core puts `no-js` on the admin <body> and swaps it for `js`
 * inline before the page paints, so this never flashes for a scripted browser.
 */
.no-js .adminkeep-panel[hidden] {
	display: block;
}

.no-js .adminkeep-nav__item {
	display: none;
}

.adminkeep-panel__head {
	align-items: center;
	border-bottom: 1px solid var( --adminkeep-edge );
	display: flex;
	gap: 12px;
	margin: 0 -28px 20px;
	padding: 0 28px 16px;
}

.adminkeep-panel__title {
	font-size: 17px;
	font-weight: 600;
	margin: 0;
	padding: 0;
}

.adminkeep-panel__lead {
	color: var( --adminkeep-muted );
	font-size: 14px;
	margin: 0 0 20px;
	max-width: 62ch;
}

/*
 * The Overview's title has no head row around it, so nothing else separates it from the lead.
 * Both classes are shared, so this is safe only while the Overview is the one panel that prints
 * a lead directly after a bare title — feature panels wrap their title in .adminkeep-panel__head,
 * which breaks the adjacency — and a future panel that pairs the two classes directly will
 * inherit this margin whether or not it wants it.
 */
.adminkeep-panel__title + .adminkeep-panel__lead {
	margin-top: 10px;
}

.adminkeep-enable {
	margin-bottom: 20px;
}

.adminkeep-enable__desc {
	color: var( --adminkeep-muted );
	margin: 8px 0 0 50px;
	max-width: 62ch;
}

/* The explainer: the thing that makes a toggle legible. */
.adminkeep-explainer {
	background: color-mix( in srgb, var( --adminkeep-accent ) 6%, var( --adminkeep-surface ) );
	border-left: 3px solid var( --adminkeep-accent );
	border-radius: 0 4px 4px 0;
	margin-bottom: 22px;
	padding: 14px 18px;
}

.adminkeep-explainer__title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.adminkeep-explainer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.adminkeep-explainer li {
	color: #3c434a;
	margin: 0 0 6px;
	max-width: 74ch;
	padding-left: 16px;
	position: relative;
}

.adminkeep-explainer li:last-child {
	margin-bottom: 0;
}

.adminkeep-explainer li::before {
	color: var( --adminkeep-accent );
	content: "•";
	left: 2px;
	position: absolute;
}

/* Sub-settings: hidden until the lock is engaged. Maintenance tools are not — see .adminkeep-tools. */
.adminkeep-settings {
	border-top: 1px solid var( --adminkeep-edge );
	padding-top: 20px;
}

.adminkeep-settings[hidden] {
	display: none;
}

.adminkeep-settings__title {
	font-size: 14px;
	margin: 0 0 14px;
}

.adminkeep-tools {
	border-top: 1px solid var( --adminkeep-edge );
	margin-top: 20px;
	padding-top: 20px;
}

.adminkeep-panel__foot {
	align-items: center;
	border-top: 1px solid var( --adminkeep-edge );
	display: flex;
	gap: 12px;
	margin-top: 24px;
	padding-top: 18px;
}

.adminkeep-dirty {
	color: #996800;
	font-size: 12px;
}

.adminkeep-summary {
	font-size: 14px;
	margin: 0 0 16px;
}

.adminkeep-overview {
	border: 1px solid var( --adminkeep-edge );
	border-radius: 5px;
	list-style: none;
	margin: 0;
	max-width: 620px;
	padding: 0;
}

.adminkeep-overview__row {
	align-items: center;
	border-bottom: 1px solid #f0f0f1;
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 12px 16px;
}

.adminkeep-overview__row:last-child {
	border-bottom: 0;
}

.adminkeep-overview__name {
	flex: 1 1 auto;
	font-weight: 500;
	text-decoration: none;
}

.adminkeep-overview__state {
	color: var( --adminkeep-muted );
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------- the latch */

.adminkeep-switch {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 10px;
	min-width: 0;
}

.adminkeep-switch__input {
	height: 1px;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.adminkeep-switch__track {
	background: #c3c4c7;
	border-radius: 999px;
	flex: 0 0 auto;
	height: 22px;
	position: relative;
	transition: background var( --adminkeep-ease );
	width: 40px;
}

.adminkeep-switch__knob {
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.28 );
	height: 16px;
	left: 3px;
	position: absolute;
	top: 3px;
	transition: transform var( --adminkeep-latch );
	width: 16px;
}

.adminkeep-switch__input:checked + .adminkeep-switch__track {
	background: var( --adminkeep-accent );
}

.adminkeep-switch__input:checked + .adminkeep-switch__track .adminkeep-switch__knob {
	transform: translateX( 18px );
}

.adminkeep-switch__input:focus-visible + .adminkeep-switch__track {
	box-shadow: 0 0 0 2px var( --adminkeep-surface ), 0 0 0 4px var( --adminkeep-accent );
}

.adminkeep-switch__label {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

/*
 * The same latch at sidebar scale, for the nav's "Hide unused features". Only the measurements
 * change: the knob's travel is the track's width less the knob and both insets, so it lands
 * flush at the far end the way the full-size one does.
 */
.adminkeep-switch--small {
	gap: 8px;
}

.adminkeep-switch--small .adminkeep-switch__track {
	height: 16px;
	width: 28px;
}

.adminkeep-switch--small .adminkeep-switch__knob {
	height: 12px;
	left: 2px;
	top: 2px;
	width: 12px;
}

.adminkeep-switch--small .adminkeep-switch__input:checked + .adminkeep-switch__track .adminkeep-switch__knob {
	transform: translateX( 12px );
}

.adminkeep-switch--small .adminkeep-switch__label {
	color: var( --adminkeep-muted );
	font-size: 12px;
	font-weight: 400;
}

/* On, the label stops being a quiet aside: it names a state the nav is actually in. */
.adminkeep-switch--small .adminkeep-switch__input:checked + .adminkeep-switch__track + .adminkeep-switch__label {
	color: var( --adminkeep-ink );
}

/* State chip: a word, only when there is something true to say. */
.adminkeep-chip {
	background: var( --adminkeep-canvas );
	border: 1px solid var( --adminkeep-edge );
	border-radius: 3px;
	color: var( --adminkeep-muted );
	flex: 0 0 auto;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	opacity: 0;
	padding: 3px 8px;
	text-transform: uppercase;
	transform: translateY( -2px );
	transition: opacity var( --adminkeep-ease ), transform var( --adminkeep-ease );
	white-space: nowrap;
}

.adminkeep-chip:empty {
	display: none;
}

.adminkeep-chip {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------- controls */

.adminkeep-field + .adminkeep-field {
	margin-top: 16px;
}

.adminkeep-field__label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.adminkeep-field__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
}

.adminkeep-field__choices label {
	white-space: nowrap;
}

.adminkeep-action {
	margin-top: 4px;
}

.adminkeep-action .description {
	margin-top: 0;
}

.adminkeep-action__toggle {
	display: block;
	margin: 10px 0;
}

/* The confirm dialog owns the opt-in when scripting is available; this is the fallback. */
.adminkeep-js .adminkeep-action__toggle {
	display: none;
}

.adminkeep-action__button {
	color: var( --adminkeep-danger ) !important;
}

.adminkeep-action__button[disabled] {
	color: #a7aaad !important;
}

/* Identifiers get monospace, because that is what they are — declared per cell by the feature,
   not guessed from a column index. */
.adminkeep-status code,
.adminkeep-cell--mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.adminkeep-cell--danger {
	color: var( --adminkeep-danger );
	font-weight: 600;
}

.adminkeep-cell--muted {
	color: var( --adminkeep-muted );
}

.adminkeep-status {
	margin-top: 8px;
}

.adminkeep-flag {
	color: var( --adminkeep-danger );
}

/* ---------------------------------------------------------------- save */

.adminkeep-save {
	align-items: center;
	display: inline-flex !important;
	gap: 8px;
}

.adminkeep-save__spinner {
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-radius: 50%;
	border-top-color: #fff;
	display: none;
	height: 12px;
	width: 12px;
}

.adminkeep-save.is-busy .adminkeep-save__spinner {
	animation: adminkeep-spin 600ms linear infinite;
	display: block;
}

@keyframes adminkeep-spin {
	to { transform: rotate( 360deg ); }
}

/* --------------------------------------------------------------- toasts */

.adminkeep-toasts {
	bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: fixed;
	right: 24px;
	z-index: 100000;
}

.adminkeep-toast {
	align-items: center;
	background: var( --adminkeep-surface );
	border: 1px solid var( --adminkeep-edge );
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.10 ), 0 1px 3px rgba( 0, 0, 0, 0.06 );
	color: var( --adminkeep-ink );
	display: flex;
	gap: 11px;
	max-width: 360px;
	min-width: 240px;
	opacity: 0;
	padding: 12px 14px;
	transform: translateY( 10px ) scale( 0.97 );
	transition: opacity var( --adminkeep-ease ), transform var( --adminkeep-latch );
}

.adminkeep-toast.is-in {
	opacity: 1;
	transform: none;
}

.adminkeep-toast.is-out {
	opacity: 0;
	transform: translateY( 4px ) scale( 0.98 );
}

/* A status mark, not a decorative stripe. Green reads as done in every locale we ship to. */
.adminkeep-toast__icon {
	align-items: center;
	background: color-mix( in srgb, #00a32a 14%, var( --adminkeep-surface ) );
	border-radius: 50%;
	color: #007017;
	display: flex;
	flex: 0 0 auto;
	height: 22px;
	justify-content: center;
	width: 22px;
}

.adminkeep-toast--error .adminkeep-toast__icon {
	background: color-mix( in srgb, var( --adminkeep-danger ) 14%, var( --adminkeep-surface ) );
	color: var( --adminkeep-danger );
}

.adminkeep-toast__icon svg {
	height: 13px;
	width: 13px;
}

.adminkeep-toast__text {
	flex: 1 1 auto;
	font-size: 13px;
	line-height: 1.45;
}

.adminkeep-toast__close {
	align-items: center;
	align-self: flex-start;
	background: none;
	border: 0;
	border-radius: 4px;
	color: #8c8f94;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: 24px;
	justify-content: center;
	margin: -2px -4px 0 0;
	padding: 0;
	transition: background var( --adminkeep-ease ), color var( --adminkeep-ease );
	width: 24px;
}

.adminkeep-toast__close svg {
	height: 11px;
	width: 11px;
}

.adminkeep-toast__close:hover,
.adminkeep-toast__close:focus-visible {
	background: var( --adminkeep-inset );
	color: var( --adminkeep-ink );
}

.adminkeep-toast__close:focus-visible {
	box-shadow: 0 0 0 2px var( --adminkeep-accent );
	outline: none;
}

/* --------------------------------------------------------------- dialog */

.adminkeep-dialog {
	background: var( --adminkeep-surface );
	border: 0;
	border-radius: 8px;
	box-shadow: 0 12px 48px rgba( 0, 0, 0, 0.28 );
	color: var( --adminkeep-ink );
	max-width: 460px;
	padding: 0;
	width: calc( 100% - 32px );
}

.adminkeep-dialog::backdrop {
	background: rgba( 0, 0, 0, 0.45 );
}

.adminkeep-dialog[open] {
	animation: adminkeep-dialog-in var( --adminkeep-latch );
}

@keyframes adminkeep-dialog-in {
	from { opacity: 0; transform: translateY( 8px ) scale( 0.98 ); }
	to   { opacity: 1; transform: none; }
}

.adminkeep-dialog__inner {
	padding: 22px 24px 20px;
}

.adminkeep-dialog__title {
	font-size: 17px;
	margin: 0 0 10px;
}

.adminkeep-dialog__body {
	color: var( --adminkeep-muted );
	margin: 0 0 14px;
}

.adminkeep-dialog__body strong {
	color: var( --adminkeep-ink );
	font-variant-numeric: tabular-nums;
}

.adminkeep-dialog__opt {
	background: var( --adminkeep-inset );
	border-radius: 4px;
	display: block;
	margin-bottom: 16px;
	padding: 10px 12px;
}

.adminkeep-dialog__opt--warn {
	background: color-mix( in srgb, var( --adminkeep-danger ) 7%, transparent );
}

.adminkeep-dialog__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.adminkeep-dialog__go {
	background: var( --adminkeep-danger ) !important;
	border-color: var( --adminkeep-danger ) !important;
}

.adminkeep-progress {
	margin-bottom: 16px;
}

.adminkeep-progress__bar {
	background: var( --adminkeep-inset );
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
}

.adminkeep-progress__fill {
	background: var( --adminkeep-danger );
	display: block;
	height: 100%;
	transition: width var( --adminkeep-ease );
	width: 0;
}

.adminkeep-progress__label {
	color: var( --adminkeep-muted );
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	margin: 8px 0 0;
}

/* ------------------------------------------------------------ restraint */

@media ( prefers-reduced-motion: reduce ) {
	:root {
		--adminkeep-latch: 1ms linear;
		--adminkeep-ease: 1ms linear;
	}

	.adminkeep-dialog[open] {
		animation: none;
	}
}

@media ( max-width: 960px ) {
	.adminkeep-app {
		grid-template-columns: minmax( 0, 1fr );
		min-height: 0;
	}

	.adminkeep-nav {
		border-bottom: 1px solid var( --adminkeep-edge );
		border-right: 0;
	}

	.adminkeep-nav__item.is-current::before {
		display: none;
	}

	.adminkeep-panels {
		padding: 20px;
	}
}

@media ( max-width: 782px ) {
	.adminkeep-toasts {
		bottom: 12px;
		left: 12px;
		right: 12px;
	}

	.adminkeep-toast {
		max-width: none;
	}
}