/**
* Settings screen styles.
*
* A section per group: a heading and a line on what it holds, over a white
* panel of rows. In the admin's own sizes and greys, so the screen reads as a
* WordPress settings page rather than a dashboard. Colour for links, icons
* and focus comes from the admin theme colour, so the screen follows the
* user's admin colour scheme.
*
* Every gap comes from the scale below, on a 4px grid.
*/
.pagecore-modules {
	--pc-space-1: 4px;
	--pc-space-2: 8px;
	--pc-space-3: 12px;
	--pc-space-4: 16px;
	--pc-space-5: 24px;
	--pc-space-6: 32px;
	--pc-text: #1d2327;
	--pc-label: #50575e;
	--pc-muted: #646970;
	--pc-border: #dcdcde;
	--pc-divider: #f0f0f1;
	--pc-accent: var(--wp-admin-theme-color, #2271b1);
	--pc-radius: 4px;

	max-width: 880px;
}

/* Page header ----------------------------------------------------------- */
.pagecore-modules__header {
	margin-bottom: var(--pc-space-5);
}

.pagecore-modules__intro {
	max-width: 72ch;
	margin: var(--pc-space-1) 0 0;
	color: var(--pc-label);
	font-size: 13px;
	line-height: 1.5;
	text-wrap: pretty;
}

.pagecore-modules .components-notice {
	margin: 0 0 var(--pc-space-4);
}

/* Sections -------------------------------------------------------------- */
.pagecore-section + .pagecore-section {
	margin-top: var(--pc-space-6);
}

/* Its heading carries 8px of padding to make a 44px target, so 8px less
   margin keeps the same 32px rhythm as the sections above. */
.pagecore-section + .pagecore-section--advanced {
	margin-top: var(--pc-space-5);
}

/* A heading belongs to the panel under it: 32px above, 12px below. */
.pagecore-section__header {
	margin: 0 0 var(--pc-space-3);
}

.pagecore-section__title {
	margin: 0;
	color: var(--pc-label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
	text-transform: uppercase;
}

.pagecore-section__description {
	display: block;
	max-width: 72ch;
	margin: var(--pc-space-1) 0 0;
	color: var(--pc-muted);
	font-size: 13px;
	line-height: 1.5;
	text-wrap: pretty;
}

.pagecore-panel {
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius);
	background: #fff;
}

/* Advanced opens and closes on its heading, with no script. */
.pagecore-section--advanced > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--pc-space-1);
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	padding: var(--pc-space-2) 0;
	border-radius: var(--pc-radius);
	cursor: pointer;
	list-style: none;
}

.pagecore-section--advanced[open] > summary {
	margin-bottom: var(--pc-space-1);
}

.pagecore-section--advanced > summary::-webkit-details-marker {
	display: none;
}

/* Under the heading, level with its text rather than with the chevron. The
   full width, not the 72ch the other descriptions keep to, or it fits beside
   the heading and never wraps under it. */
.pagecore-section--advanced > summary .pagecore-section__description {
	flex-basis: 100%;
	max-width: none;
	padding-left: 20px;
}

.pagecore-section__chevron {
	width: 16px;
	height: 16px;
	color: var(--pc-label);
	font-size: 16px;
	transition: transform 0.15s ease;
}

.pagecore-section--advanced[open] .pagecore-section__chevron {
	transform: rotate(90deg);
}

.pagecore-section--advanced > summary:hover .pagecore-section__title,
.pagecore-section--advanced > summary:hover .pagecore-section__chevron {
	color: var(--pc-text);
}

.pagecore-section--advanced > summary:focus-visible {
	outline: 2px solid var(--pc-accent);
	outline-offset: 2px;
}

/* A row ----------------------------------------------------------------- */
.pagecore-setting {
	display: flex;
	align-items: flex-start;
	gap: var(--pc-space-4);
	padding: var(--pc-space-4) var(--pc-space-5);
}

.pagecore-setting + .pagecore-setting {
	border-top: 1px solid var(--pc-divider);
}

/* The module's icon, in the admin colour while it is on and grey while off. */
.pagecore-setting__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--pc-radius);
	background: color-mix(in srgb, var(--pc-accent) 10%, #fff);
	color: var(--pc-accent);
}

.pagecore-setting__icon .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
}

.pagecore-setting.is-off .pagecore-setting__icon {
	background: #f0f0f1;
	color: #8c8f94;
}

/* A switch that deletes things when it is on says so in red while it is. */
.pagecore-setting.is-danger:not(.is-off) .pagecore-setting__icon {
	background: #fcf0f1;
	color: #d63638;
}

.pagecore-setting__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Name on the left, Open and the switch on the right, on one line at every
   width, so a switch is never further from its name than from anything else. */
.pagecore-setting__head {
	display: flex;
	align-items: center;
	gap: var(--pc-space-4);
	min-height: 20px;
}

.pagecore-setting__name {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-1) var(--pc-space-2);
	min-width: 0;
}

.pagecore-setting__title {
	margin: 0;
	color: var(--pc-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.pagecore-setting__saved {
	display: inline-flex;
	align-items: center;
	color: #007017;
	font-size: 12px;
	line-height: 20px;
}

.pagecore-setting__saved .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.pagecore-setting__description {
	max-width: 72ch;
	margin: var(--pc-space-1) 0 0;
	color: var(--pc-muted);
	font-size: 13px;
	line-height: 1.5;
	text-wrap: pretty;
}

.pagecore-setting__warning,
.pagecore-setting__note {
	max-width: 72ch;
	margin: var(--pc-space-2) 0 0;
	font-size: 13px;
	line-height: 1.5;
	text-wrap: pretty;
}

.pagecore-setting__warning {
	color: #8a6100;
}

.pagecore-setting.is-danger .pagecore-setting__warning {
	color: #b32d2e;
}

.pagecore-setting__note {
	color: var(--pc-muted);
}

/* A module's own options: indented under it, in the smaller size. */
.pagecore-setting__options {
	margin-top: var(--pc-space-3);
	padding-left: var(--pc-space-3);
	border-left: 2px solid var(--pc-divider);
}

.pagecore-setting__options .components-checkbox-control__label {
	font-size: 13px;
}

.pagecore-setting__options .components-base-control__help {
	margin-top: var(--pc-space-1);
	font-size: 12px;
}

.pagecore-setting__controls {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--pc-space-4);
}

/* The button is 32px tall; the negative margin lets it sit on the 20px title
   line without making the line taller, which would push the description away
   from the name it belongs to. */
.pagecore-modules .pagecore-setting__open {
	gap: var(--pc-space-1);
	margin-block: -6px;
	padding-inline: var(--pc-space-2);
	white-space: nowrap;
}

.pagecore-setting__open .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

/* Wide enough for the switch, so the spinner that replaces it while a save is
   in flight does not shift the Open button. */
.pagecore-setting__switch {
	display: flex;
	justify-content: flex-end;
	min-width: 32px;
}

/* The switch is drawn 32px by 16px. Its invisible checkbox is grown to 44px
   square around it, so it is as easy to hit as it should be, without the
   switch itself changing size or moving. */
.pagecore-setting__switch .components-form-toggle input.components-form-toggle__input[type="checkbox"] {
	top: -14px;
	left: -6px;
	width: 44px;
	height: 44px;
	cursor: pointer;
}

.pagecore-setting__switch .components-form-toggle.is-disabled input.components-form-toggle__input[type="checkbox"] {
	cursor: default;
}

.pagecore-setting__switch .components-spinner {
	margin: 0;
}

/* Narrow screens: a smaller icon and tighter padding, the same layout. */
@media (max-width: 600px) {
	.pagecore-setting {
		gap: var(--pc-space-3);
		padding: var(--pc-space-4);
	}

	.pagecore-setting__icon {
		width: 32px;
		height: 32px;
	}

	.pagecore-setting__controls {
		gap: var(--pc-space-2);
	}

	.pagecore-section + .pagecore-section {
		margin-top: var(--pc-space-5);
	}

	.pagecore-section + .pagecore-section--advanced {
		margin-top: var(--pc-space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pagecore-section__chevron {
		transition: none;
	}
}

/* The PageCore theme notice: its message, then the button that fixes it. */
.pagecore-theme-notice .components-notice__content p {
	margin: 0 0 var(--pc-space-3);
}

.pagecore-theme-notice .components-notice__content p:last-child {
	margin-bottom: 0;
}

.pagecore-theme-notice__error {
	color: #cc1818;
}