/*
 * Layer: components. PMPro screens (plan §6 design gap; kit-derived defaults, no kit page): levels,
 * checkout, confirmation, account, billing, cancel, invoice, login and profile edit. PMPro runs
 * `variation_minimal` (no variation sheet) and its base sheet sits in @layer plugins with its
 * `--pmpro--*` colours mapped in base.css, so this restyles PMPro's own markup without moving it:
 * cards are porcelain plates (kit .nd-plate), buttons are the primary button (components.css),
 * inputs are the kit input (base.css), the login card is the glass form card (forms.css).
 * Utils' levels list (`[nd_memberships]`: .nd-levels / .nd-level) is a row of plates.
 * Selectors that meet .nd-prose's element rules (lists, tables) carry the element to win on order.
 */
@layer components {

	.pmpro {
		display: grid;
		gap: 56px;
		max-width: 880px;
		font-size: var(--wp--preset--font-size--medium);
		line-height: var(--wp--custom--line-height--body);
	}

	.pmpro_section {
		display: grid;
		gap: 20px;
	}

	.pmpro_section > *,
	.pmpro_section_content > *,
	.pmpro_card > *,
	.pmpro_card_content > * {
		margin-block: 0;
	}

	.pmpro_section_content {
		display: grid;
		gap: 24px;
	}

	/* Section heads: display serif, like the article's "More from" heading. */
	.pmpro_section_title {
		font-family: var(--wp--preset--font-family--display);
		font-size: min(36px, var(--wp--preset--font-size--display-s));
		font-weight: 500;
		line-height: var(--wp--custom--line-height--display-s);
	}

	/* Cards: the porcelain plate (kit .nd-plate) with its double rim. */
	.pmpro_card {
		box-sizing: border-box;
		display: grid;
		gap: 20px;
		padding: 36px 40px;
		border-radius: var(--wp--preset--border-radius--card);
		background-color: var(--wp--preset--color--paper);
		box-shadow:
			0 0 0 1px var(--wp--preset--color--line),
			0 0 0 7px var(--wp--preset--color--porcelain),
			0 0 0 8px color-mix(in srgb, var(--wp--preset--color--glass-border) 30%, var(--wp--preset--color--line));
	}

	.pmpro_card_title {
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--row-title);
		font-weight: 500;
		line-height: var(--wp--custom--line-height--row-title);
	}

	.pmpro_heading-with-avatar {
		display: flex;
		gap: 16px;
		align-items: center;
	}

	.pmpro_heading-with-avatar .avatar {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		box-shadow: 0 0 0 1px var(--wp--preset--color--line), 0 0 0 4px var(--wp--preset--color--porcelain);
	}

	.pmpro_card_content {
		display: grid;
		gap: 16px;
		color: var(--wp--preset--color--ink-soft);
	}

	.pmpro_card_content strong {
		color: var(--wp--preset--color--ink);
	}

	/* Action links under a hairline; PMPro prints an empty wrapper when there are none. */
	.pmpro_card_actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 12px;
		padding-block-start: 20px;
		border-top: 1px solid var(--wp--preset--color--line);
		color: var(--wp--preset--color--ink-muted);
		font-size: var(--wp--preset--font-size--small);
	}

	.pmpro_card_action_separator {
		color: var(--wp--preset--color--line);
	}

	.pmpro_card_actions:not(:has(*)) {
		display: none;
	}

	:is(.pmpro_card_actions, .pmpro_actions_nav) a {
		color: var(--wp--preset--color--brand-deep);
		font-weight: 600;
		text-decoration: none;
	}

	:is(.pmpro_card_actions, .pmpro_actions_nav) a:hover {
		color: var(--wp--preset--color--brand);
		text-decoration: underline;
		text-underline-offset: var(--wp--custom--link--underline-offset);
	}

	.pmpro_actions_nav {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 24px;
		justify-content: space-between;
		font-size: var(--wp--preset--font-size--small);
	}

	.pmpro_spacer {
		display: none;
	}

	/* Lists (account details, membership terms). */
	ul.pmpro_list {
		display: grid;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	ul.pmpro_list:not(:has(li)) {
		display: none;
	}

	/* A details wrapper holding only empty lists would still cost the card a grid gap. */
	.pmpro_card_content:not(:has(> :not(.pmpro_list), .pmpro_list li)) {
		display: none;
	}

	ul.pmpro_list > li.pmpro_list_item {
		margin: 0;
	}

	@media (min-width: 601px) {

		ul.pmpro_list.pmpro_cols-3 {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.pmpro_cols-2 {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 20px;
		}

		.pmpro_cols-3:not(ul) {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 20px;
		}
	}

	/* Forms: fieldsets are layout only; labels as the password form's; inputs are base.css's. */
	.pmpro_form {
		display: grid;
		gap: 32px;
	}

	.pmpro_form > * {
		margin: 0;
	}

	.pmpro_form_fieldset {
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.pmpro_form_fields,
	.pmpro_cols-2,
	.pmpro_cols-3 {
		display: grid;
		gap: 20px;
	}

	.pmpro_form_field {
		display: grid;
		gap: 8px;
		align-content: start;
	}

	.pmpro_form_label,
	.pmpro_form_legend,
	.pmpro_form_heading {
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--meta);
		font-weight: 600;
		line-height: 1.3;
	}

	.pmpro_form_input:not([type="checkbox"], [type="radio"]) {
		width: 100%;
	}

	/* Month / year pairs. */
	.pmpro_form_fields-inline {
		display: flex;
		gap: 10px;
		align-items: center;
		color: var(--wp--preset--color--ink-muted);
	}

	.pmpro_form_fields-inline .pmpro_form_input:not([type="checkbox"], [type="radio"]) {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.pmpro_form_input-error {
		border-color: var(--wp--preset--color--error);
	}

	.pmpro_form_hint {
		margin: 0;
		color: var(--wp--preset--color--ink-muted);
		font-size: var(--wp--preset--font-size--small);
	}

	.pmpro_asterisk abbr {
		color: var(--wp--preset--color--error);
	}

	.pmpro_form_field-checkbox,
	.pmpro_form_field-radio-item {
		display: flex;
		gap: 10px;
		align-items: center;
	}

	:is(.pmpro_form, #loginform) input:is([type="checkbox"], [type="radio"]) {
		width: 18px;
		height: 18px;
		margin: 0;
		accent-color: var(--wp--preset--color--brand);
	}

	/* "Show password": a quiet text button under the field. */
	.pmpro_form_field-password-toggle button.pmpro_btn-plain {
		color: var(--wp--preset--color--brand-deep);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--meta);
		font-weight: 600;
		cursor: pointer;
	}

	.pmpro_form_submit {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 24px;
		align-items: center;
	}

	/* Secondary actions: the glass button (kit .nd-btn--glass). */
	.pmpro_btn:is(.pmpro_btn-cancel, .pmpro_btn-outline) {
		border-color: var(--wp--preset--color--glass-border);
		background-color: var(--wp--custom--glass--button);
		color: var(--wp--preset--color--ink);
	}

	.pmpro_btn:is(.pmpro_btn-cancel, .pmpro_btn-outline):is(:hover, :focus-visible) {
		background-color: var(--wp--custom--glass--bg-strong);
		color: var(--wp--preset--color--ink);
	}

	/* Messages: PMPro's variables (base.css) give the colours; the kit gives the shape. */
	.pmpro_message {
		margin: 0;
		padding: 16px 20px;
		border-radius: var(--wp--preset--border-radius--panel);
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--small);
	}

	.pmpro_message:empty {
		display: none;
	}

	.pmpro_tag {
		border-radius: var(--wp--preset--border-radius--pill);
		font-size: var(--wp--preset--font-size--tag);
	}

	/* Tables (cancel, invoices): hairline rows, the meta voice for heads. */
	table.pmpro_table {
		width: 100%;
		margin: 0;
		border-collapse: collapse;
		font-size: var(--wp--preset--font-size--small);
	}

	table.pmpro_table :is(th, td) {
		padding: 14px 12px 14px 0;
		border: 0;
		border-bottom: 1px solid var(--wp--preset--color--line);
		text-align: start;
		vertical-align: top;
	}

	table.pmpro_table thead th {
		color: var(--wp--preset--color--ink-muted);
		font-size: var(--wp--preset--font-size--meta);
		font-weight: 600;
	}

	table.pmpro_table tbody th {
		color: var(--wp--preset--color--ink);
		font-weight: 600;
	}

	/* Login (PMPro's card and the bare wp_login_form utils prints on /dashboard): the glass form card. */
	.pmpro_card.pmpro_login_wrap,
	.nd-prose > #loginform {
		position: relative;
		max-width: 520px;
		padding: 40px 36px 36px;
		border: 1px solid var(--wp--custom--glass--island-border);
		background-color: var(--wp--custom--glass--island);
		box-shadow: var(--wp--preset--shadow--island);
		-webkit-backdrop-filter: var(--wp--custom--blur--card);
		backdrop-filter: var(--wp--custom--blur--card);
	}

	.nd-prose > #loginform {
		box-sizing: border-box;
		border-radius: var(--wp--preset--border-radius--card);
	}

	#loginform {
		display: grid;
		gap: 20px;
	}

	#loginform > p {
		display: grid;
		gap: 8px;
		margin: 0;
	}

	#loginform label {
		color: var(--wp--preset--color--ink);
		font-size: var(--wp--preset--font-size--meta);
		font-weight: 600;
		line-height: 1.3;
	}

	#loginform :is(input[type="text"], input[type="password"]) {
		width: 100%;
	}

	#loginform .login-remember label {
		display: flex;
		gap: 10px;
		align-items: center;
		font-weight: 400;
	}

	#loginform .login-submit {
		display: flex;
		margin-block-start: 4px;
	}

	.pmpro_login_wrap .pmpro_form_field-password-toggle {
		justify-self: start;
	}

	.pmpro_login_wrap + .pmpro_actions_nav,
	.pmpro_login_wrap .pmpro_actions_nav {
		justify-content: flex-start;
	}

	/* Levels (utils [nd_memberships] on /membership): a row of plates; the level name links to checkout. */
	ul.nd-levels {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
		gap: 32px;
		margin-block: 48px;
		padding: 8px;
		list-style: none;
	}

	ul.nd-levels > li.nd-level {
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin: 0;
		padding: 32px 28px 36px;
		border-radius: var(--wp--preset--border-radius--card);
		background-color: var(--wp--preset--color--paper);
		box-shadow:
			0 0 0 1px var(--wp--preset--color--line),
			0 0 0 7px var(--wp--preset--color--porcelain),
			0 0 0 8px color-mix(in srgb, var(--wp--preset--color--glass-border) 30%, var(--wp--preset--color--line));
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--row-title);
		font-weight: 500;
		line-height: var(--wp--custom--line-height--row-title);
		transition: box-shadow var(--wp--custom--duration--fast);
	}

	ul.nd-levels > li.nd-level > * {
		margin: 0;
	}

	/* The name is the card's one link; its ::after covers the plate. */
	.nd-level > a {
		color: inherit;
		text-decoration: none;
	}

	.nd-level > a::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	.nd-level > a:focus-visible {
		outline: 2px solid transparent;
	}

	.nd-level:has(> a:hover) {
		box-shadow:
			0 0 0 1px var(--wp--preset--color--brand-deep),
			0 0 0 7px var(--wp--preset--color--porcelain),
			0 0 0 8px var(--wp--preset--color--glass-border),
			var(--wp--preset--shadow--lift-soft);
	}

	.nd-level:has(> a:focus-visible) {
		box-shadow: var(--wp--custom--focus-ring);
	}

	/* Cost: PMPro's "<strong>$60.00</strong> now." — the figure in the display face. */
	.nd-level > p {
		color: var(--wp--preset--color--ink-soft);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 400;
		line-height: var(--wp--custom--line-height--small);
	}

	.nd-level > p:nth-of-type(1) {
		padding-block-end: 12px;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.nd-level > p:nth-of-type(1) {
		line-height: var(--wp--custom--line-height--display-s);
	}

	.nd-level > p strong {
		margin-inline-end: 4px;
		color: var(--wp--preset--color--brand-deep);
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--display-s);
		font-weight: 500;
		line-height: var(--wp--custom--line-height--display-s);
	}

	@media (max-width: 600px) {

		.pmpro_card {
			padding: 28px 24px;
		}

		.pmpro_card.pmpro_login_wrap,
		.nd-prose > #loginform {
			padding: 32px 24px 24px;
		}

		.pmpro_actions_nav {
			flex-direction: column;
		}
	}
}