/**
 * Acknowledgify settings screen.
 *
 * Everything is scoped under .acknowledgify-wrap so nothing here can affect
 * another plugin's screen. There are no !important declarations: the previous
 * stylesheet used them to fight core, which made the button colours impossible
 * to override and hid a contrast failure.
 *
 * Colour notes. #48C0F7 is the brand blue and measures 2.07:1 against white,
 * so it cannot be used for text or for a button background with white text.
 * It is kept for decorative rules and edges only. Text links use #2C7A9E
 * (4.79:1) and the primary button uses the same, both of which clear WCAG AA.
 * The switch track uses #3999C5 (3.21:1), which clears the 3:1 required of a
 * non-text interface component.
 *
 * One rule to remember when adding to this file: the hidden attribute is
 * implemented as a user-agent display: none, so any author-level display
 * declaration outranks it and the element stays visible. Anything the markup
 * can hide must therefore carry :not([hidden]) on its display declaration, as
 * .ack-tabs__state does below. Elements that set no display at all are fine.
 */

.acknowledgify-wrap {
	--ack-accent: #48c0f7;
	--ack-accent-strong: #3999c5;
	--ack-link: #2c7a9e;
	--ack-link-hover: #1f6c8f;
	--ack-border: #dcdcde;
	--ack-surface: #fff;
	--ack-muted: #50575e;
	--ack-radius: 4px;
	--ack-gap: 16px;

	max-width: 1100px;
}

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

.acknowledgify-wrap .ack-tabs {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 1px solid var(--ack-border);
}

.acknowledgify-wrap .ack-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.acknowledgify-wrap .ack-tabs .nav-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 0;
	margin-right: 0;
}

/*
 * Clicking a tab focuses the anchor, and core's .nav-tab:focus glow then stays
 * on screen after the pointer has moved on, which reads as a stuck state
 * rather than as focus. Suppressed for pointer focus only: a keyboard user
 * still gets the clear outline below, which is the whole point of the ring.
 */
.acknowledgify-wrap .ack-tabs .nav-tab:focus:not(:focus-visible) {
	box-shadow: none;
}

/*
 * outline-offset stays at 0 so the ring traces the tab's border box. A
 * negative offset drew it two pixels inside, immediately alongside the tab's
 * own 1px borders, and the doubled edges read as an uneven rectangle rather
 * than a focus ring.
 */
.acknowledgify-wrap .ack-tabs .nav-tab:focus-visible {
	outline: 2px solid var(--ack-link);
	outline-offset: 0;
	box-shadow: none;
}

/* Quiet "Off" marker on a feature tab whose toggle is unchecked. It updates
	live, so flipping a switch has a visible effect before saving.

	:not([hidden]) is load-bearing. Without it this display declaration beats
	the user-agent rule behind the hidden attribute and the badge shows on every
	tab regardless of state. */
.acknowledgify-wrap .ack-tabs__state:not([hidden]) {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid var(--ack-border);
	border-radius: 9px;
	background: #f0f0f1;
	color: var(--ack-muted);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
	text-transform: none;
}

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

.acknowledgify-wrap .ack-panels {
	margin-top: 0;
}

.acknowledgify-wrap .ack-panel {
	padding: 8px 24px 24px;
	border: 1px solid var(--ack-border);
	border-top: 0;
	border-radius: 0 0 var(--ack-radius) var(--ack-radius);
	background: var(--ack-surface);
}


.acknowledgify-wrap .ack-lede {
	max-width: 68ch;
	color: var(--ack-muted);
}

.acknowledgify-wrap .ack-panel a {
	color: var(--ack-link);
}

.acknowledgify-wrap .ack-panel a:hover,
.acknowledgify-wrap .ack-panel a:focus {
	color: var(--ack-link-hover);
}

.acknowledgify-wrap .ack-muted {
	color: var(--ack-muted);
	font-style: italic;
}

.acknowledgify-wrap .description {
	max-width: 60ch;
}

.acknowledgify-wrap .ack-code {
	margin: 6px 0 0;
}

.acknowledgify-wrap .ack-code code {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: break-word;
}

/* Shown at the top of a feature panel while that feature is switched off. */
.acknowledgify-wrap .ack-panel-notice {
	margin: 16px 0;
	padding: 10px 14px;
	border-left: 4px solid var(--ack-accent);
	border-radius: 0 var(--ack-radius) var(--ack-radius) 0;
	background: #f6fbfe;
}

.acknowledgify-wrap .ack-panel-notice p {
	margin: 0;
	max-width: 68ch;
}

/* -------------------------------------------------------------------------
	Feature switches
	------------------------------------------------------------------------- */

.acknowledgify-wrap .ack-switch {
	display: inline-block;
}

/*
 * The checkbox is hidden visually but stays in the accessibility tree and
 * keeps keyboard focus, so the switch has a real accessible name and a real
 * checked state. The old markup used an empty <label> pushed off screen with
 * text-indent, which meant a screen reader announced no name at all, and
 * mirrored the state into a data attribute with JavaScript, so the switch
 * looked wrong whenever JavaScript had not run.
 */
.acknowledgify-wrap .ack-switch input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.acknowledgify-wrap .ack-switch label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	line-height: 1.4;
}

.acknowledgify-wrap .ack-switch__track {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 22px;
	border-radius: 11px;
	background: #dcdcde;
	box-shadow: inset 0 0 0 1px #c3c4c7;
	transition: background-color 0.2s ease-in-out;
}

.acknowledgify-wrap .ack-switch__track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease-in-out;
}

.acknowledgify-wrap .ack-switch input:checked + label .ack-switch__track {
	background: var(--ack-accent-strong);
	box-shadow: inset 0 0 0 1px var(--ack-link);
}

.acknowledgify-wrap .ack-switch input:checked + label .ack-switch__track::after {
	transform: translateX(18px);
}

.acknowledgify-wrap .ack-switch input:focus-visible + label .ack-switch__track {
	outline: 2px solid var(--ack-link);
	outline-offset: 2px;
}

/* Some browsers still lack :focus-visible on checkboxes; :focus is the
	fallback and is no worse than an always-visible ring. */
.acknowledgify-wrap .ack-switch input:focus + label .ack-switch__track {
	outline: 2px solid var(--ack-link);
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.acknowledgify-wrap .ack-switch__track,
	.acknowledgify-wrap .ack-switch__track::after {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
	Export and import
	------------------------------------------------------------------------- */

.acknowledgify-wrap .ack-transfer {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 16px;
}

.acknowledgify-wrap .ack-transfer__block {
	flex: 1 1 260px;
	min-width: 0;
	padding: 4px 18px 14px;
	border: 1px solid var(--ack-border);
	border-radius: var(--ack-radius);
	background: #fbfbfc;
}

.acknowledgify-wrap .ack-transfer__block h3 {
	margin-bottom: 4px;
}

.acknowledgify-wrap input[type="file"] {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
	Placeholder tokens and examples
	------------------------------------------------------------------------- */

.acknowledgify-wrap .ack-tokens {
	margin: 16px 0;
	padding: 10px 14px;
	border: 1px solid var(--ack-border);
	border-radius: var(--ack-radius);
	background: #fbfbfc;
}

.acknowledgify-wrap .ack-tokens > summary {
	cursor: pointer;
	font-weight: 600;
}

.acknowledgify-wrap .ack-tokens > summary:focus-visible {
	outline: 2px solid var(--ack-link);
	outline-offset: 2px;
}

.acknowledgify-wrap .ack-tokens p {
	max-width: 68ch;
}

.acknowledgify-wrap .ack-tokens__table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
}

.acknowledgify-wrap .ack-tokens__table th,
.acknowledgify-wrap .ack-tokens__table td {
	padding: 6px 12px 6px 0;
	border-bottom: 1px solid var(--ack-border);
	text-align: left;
	vertical-align: top;
	word-break: break-word;
}

.acknowledgify-wrap .ack-examples {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.acknowledgify-wrap .ack-examples li {
	margin: 0 0 4px;
}

/* -------------------------------------------------------------------------
	Credits repeater
	------------------------------------------------------------------------- */

.acknowledgify-wrap .ack-credits {
	margin-top: 12px;
}

.acknowledgify-wrap .ack-credit {
	position: relative;
	margin: 0 0 12px;
	padding: 14px 16px;
	border: 1px solid var(--ack-border);
	border-left: 4px solid var(--ack-accent);
	border-radius: 0 var(--ack-radius) var(--ack-radius) 0;
	background: #fbfbfc;
}

.acknowledgify-wrap .ack-credit__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
	gap: var(--ack-gap);
	align-items: end;
}

.acknowledgify-wrap .ack-credit__field {
	margin: 0;
	min-width: 0;
}

.acknowledgify-wrap .ack-credit__field label {
	display: block;
	margin-bottom: 3px;
	color: var(--ack-muted);
	font-size: 12px;
	font-weight: 600;
}

.acknowledgify-wrap .ack-credit__input {
	width: 100%;
}

.acknowledgify-wrap .ack-credit__remove {
	margin-top: 10px;
	color: #b32d2e;
	cursor: pointer;
}

.acknowledgify-wrap .ack-credit__remove:hover,
.acknowledgify-wrap .ack-credit__remove:focus {
	color: #8a2424;
}

.acknowledgify-wrap .ack-credits__empty {
	max-width: 68ch;
	color: var(--ack-muted);
}

/* -------------------------------------------------------------------------
	Preview
	------------------------------------------------------------------------- */

.acknowledgify-wrap .ack-preview {
	margin-top: 24px;
	padding: 4px 18px 18px;
	border: 1px solid var(--ack-border);
	border-radius: var(--ack-radius);
	background: #fbfbfc;
}

.acknowledgify-wrap .ack-preview h3 {
	margin-bottom: 2px;
}

.acknowledgify-wrap .ack-preview__output {
	background: var(--ack-surface);
	font-size: 13px;
	line-height: 1.6;
	resize: vertical;
}

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

.acknowledgify-wrap .button-primary {
	border-color: var(--ack-link);
	background: var(--ack-link);
}

.acknowledgify-wrap .button-primary:hover,
.acknowledgify-wrap .button-primary:focus {
	border-color: var(--ack-link-hover);
	background: var(--ack-link-hover);
	color: #fff;
}

.acknowledgify-wrap .button-primary:focus-visible {
	outline: 2px solid var(--ack-link-hover);
	outline-offset: 2px;
	box-shadow: none;
}

/* -------------------------------------------------------------------------
	Narrow screens
	-------------------------------------------------------------------------
	The previous stylesheet had no media queries at all: a fixed left margin
	on the panel and a calc(100% - 60px) width on the help callouts both broke
	on a phone. 782px is the width at which core stacks .form-table.
	------------------------------------------------------------------------- */

@media screen and ( max-width: 782px ) {
	.acknowledgify-wrap .ack-panel {
		padding: 4px 12px 20px;
	}

	.acknowledgify-wrap .ack-tabs__list {
		gap: 2px;
	}

	.acknowledgify-wrap .ack-tabs .nav-tab {
		flex: 1 1 auto;
		justify-content: center;
		margin-bottom: 2px;
		font-size: 13px;
		text-align: center;
	}

	/* Core stacks form-table below this width, so inputs should fill it. */
	.acknowledgify-wrap .form-table input[type="text"],
	.acknowledgify-wrap .form-table input[type="url"],
	.acknowledgify-wrap .form-table input[type="email"],
	.acknowledgify-wrap .form-table select,
	.acknowledgify-wrap .form-table textarea {
		width: 100%;
		max-width: 100%;
	}

	/* wp-color-picker sets an inline width on its own input. */
	.acknowledgify-wrap .form-table .wp-picker-container input[type="text"].wp-color-picker {
		width: 5.5em;
	}

	.acknowledgify-wrap .ack-credit__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.acknowledgify-wrap .ack-credit {
		padding: 12px;
	}

	.acknowledgify-wrap .ack-transfer {
		gap: 16px;
	}

	.acknowledgify-wrap .ack-tokens__table,
	.acknowledgify-wrap .ack-tokens__table tbody,
	.acknowledgify-wrap .ack-tokens__table tr,
	.acknowledgify-wrap .ack-tokens__table td {
		display: block;
		width: 100%;
	}

	/* The header row carries no information once the table is stacked; each
		cell is self-describing. */
	.acknowledgify-wrap .ack-tokens__table thead {
		display: none;
	}

	.acknowledgify-wrap .ack-tokens__table tr {
		padding: 8px 0;
		border-bottom: 1px solid var(--ack-border);
	}

	.acknowledgify-wrap .ack-tokens__table td {
		padding: 1px 0;
		border: 0;
	}
}

@media screen and ( max-width: 480px ) {
	.acknowledgify-wrap .ack-tabs .nav-tab {
		flex: 1 1 100%;
	}
}