/*
 * VEFdocsKit Pro — styles of the screens the add-on adds: the preview sheet, the stamp designer, the folders.
 * They use the variables of the page defined by VEFdocsKit (--_accent, --_border, --_gap…).
 */

@container vefdk (min-width: 52rem) {
	.vefdk-grid--sidebar { grid-template-columns: minmax(14rem, 1fr) minmax(0, 3fr); align-items: start; }
}

@container vefdk (min-width: 70rem) {
	.vefdk-grid--designer { grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr) minmax(14rem, 1.4fr); align-items: start; }
	.vefdk-grid--designer > :nth-child(2) { grid-column: 3; grid-row: 1; }
	.vefdk-grid--designer > :nth-child(3) { grid-column: 2; grid-row: 1; }
}

@container vefdk (min-width: 52rem) and (max-width: 69.99rem) {
	.vefdk-grid--designer { grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr); align-items: start; }
	.vefdk-grid--designer > :nth-child(2) { grid-column: 1 / -1; order: -1; }
}

@container vefdk (min-width: 52rem) {
	.vefdk-sticky { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 1rem); }
}

.vefdk-app .vefdk-button--danger { border-color: var(--_danger); color: var(--_danger); background: transparent; }

.vefdk-app .vefdk-button--danger:hover { background: color-mix(in srgb, var(--_danger) 12%, transparent); color: var(--_danger); }

/* Page preview */
.vefdk-sheet-wrap { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.vefdk-sheet {
	position: relative;
	width: min(100%, 22rem);
	background: #fff;
	border: 1px solid var(--_border);
	box-shadow: 0 .15rem .8rem rgba(0, 0, 0, .12);
	overflow: hidden;
	touch-action: none;
	color: #888;
}

.vefdk-sheet--landscape { width: min(100%, 30rem); }
.vefdk-sheet__lines { position: absolute; inset: 7% 8%; display: flex; flex-direction: column; gap: 2.2%; pointer-events: none; }
.vefdk-sheet__lines i { display: block; height: 1.1%; background: #dcdcdc; border-radius: 1px; }
.vefdk-sheet__lines i:nth-child(3n) { width: 70%; }
.vefdk-sheet__lines i:nth-child(4n) { width: 45%; }
.vefdk-sheet__stamp { position: absolute; cursor: grab; user-select: none; touch-action: none; line-height: 0; }
.vefdk-sheet__stamp:active { cursor: grabbing; }
.vefdk-sheet__stamp img { display: block; width: 100%; height: auto; pointer-events: none; }
.vefdk-sheet__stamp:focus-visible { outline: 1px dashed var(--_accent); outline-offset: 2px; }

.vefdk-checker {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 9rem;
	padding: 1rem;
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	background: repeating-conic-gradient(#f2f2f2 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}

.vefdk-checker img { max-width: 100%; height: auto; }

.vefdk-list__main { min-width: 0; flex: 1 1 10rem; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }

.vefdk-chip {
	display: inline-block;
	padding: .1em .6em;
	border: 1px solid var(--_border);
	border-radius: 99px;
	font-size: var(--vefdk-fs-small);
	background: none;
	color: inherit;
	font-family: inherit;
}

button.vefdk-chip { cursor: pointer; }
.vefdk-chip[aria-pressed="true"] { background: var(--_accent); border-color: var(--_accent); color: var(--_accent-ink); }
.vefdk-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

.vefdk-example { font-weight: 600; }

.vefdk-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.vefdk-line { margin: 0 0 var(--_gap); padding: calc(var(--_gap) * .75); border: 1px solid var(--_border); border-radius: var(--_radius); }
.vefdk-line__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.vefdk-line__head .vefdk-actions { margin: 0; }
.vefdk-range { display: flex; align-items: center; gap: .5rem; }
.vefdk-range input { flex: 1 1 auto; min-width: 0; }
.vefdk-range output { min-width: 3.5em; text-align: right; }
.vefdk-chips { margin: 0 0 .6rem; }
.vefdk-linklike { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.vefdk-linklike:hover strong,
.vefdk-linklike:focus-visible strong { color: var(--_accent); text-decoration: underline; }


.vefdk-fields + p { margin-top: var(--_gap); }
.vefdk-line > div > h3:first-child { margin-top: 0; }

/* Page of the account (subscription) */
.vefdkpro-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vefdkpro-form input[type="text"],
.vefdkpro-form input[type="email"] { width: 100%; max-width: 100%; }
.vefdkpro-notice--ok { border-color: var(--_ok); }
.vefdkpro-notice--error { border-color: var(--_danger); }
.vefdkpro-notice--warn { border-color: #b26a00; }

/* Signatures: the form, the requests, the people and their state. Complete thin frames only, never a stripe on one side. */
.vefdkpro-people { display: grid; gap: .75rem; margin-bottom: .5rem; }
.vefdkpro-person { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .75rem; align-items: end; }
@container vefdk (max-width: 40rem) {
	.vefdkpro-person { grid-template-columns: minmax(0, 1fr); }
}

.vefdkpro-requests { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--_gap); }
.vefdkpro-request { padding: .9rem 1rem; border: 1px solid var(--_border); border-radius: var(--_radius); background: var(--_surface); }
.vefdkpro-request__head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-start; justify-content: space-between; }

.vefdkpro-pill { display: inline-block; padding: .1em .65em; border: 1px solid currentColor; border-radius: var(--_radius); font-size: var(--vefdk-fs-small); font-weight: 600; white-space: nowrap; }
.vefdkpro-pill--pending, .vefdkpro-pill--sealing { color: var(--_accent); }
.vefdkpro-pill--completed { color: var(--_ok); }
.vefdkpro-pill--cancelled, .vefdkpro-pill--expired { color: #6a7280; }
.vefdkpro-pill--declined { color: var(--_danger); }

.vefdkpro-signers { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.vefdkpro-signer { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; justify-content: space-between; padding: .4rem 0; border-top: 1px solid var(--_border); }
.vefdkpro-signer__who { min-width: 12rem; }
.vefdkpro-signer--signed .vefdk-small:last-of-type { color: var(--_ok); }
.vefdkpro-signer--declined .vefdk-small:last-of-type { color: var(--_danger); }

.vefdkpro-trail { margin-top: .75rem; padding: .75rem 1rem; border: 1px solid var(--_border); border-radius: var(--_radius); }
.vefdkpro-trail ul { margin: 0 0 .5rem; padding-left: 1.1rem; }

/* Page of the account: the plans, the count of the month, the team. Complete thin frames only. */
.vefdkpro-plans { display: grid; gap: var(--_gap, 1rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: .75rem 0; }
.vefdkpro-plan { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border: 1px solid var(--_border, #c3c4c7); border-radius: var(--_radius, 4px); background: var(--_surface, transparent); }
.vefdkpro-plan.is-current { border-color: var(--_accent, #2563a8); border-width: 2px; }
.vefdkpro-plan__name { margin: 0; font-size: 1.15em; }
.vefdkpro-plan__blurb { margin: 0; }
.vefdkpro-plan__list { margin: .25rem 0 .5rem; padding-left: 1.1rem; }
.vefdkpro-plan__price { margin: .5rem 0 0; font-weight: 600; }
.vefdkpro-plan .vefdkpro-form p { margin: .25rem 0 0; }
.vefdkpro-meter { width: 100%; max-width: 28rem; height: .8rem; }
.vefdkpro-team { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.vefdkpro-team > li { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; justify-content: space-between; padding: .4rem 0; border-top: 1px solid var(--_border, #c3c4c7); }
.vefdkpro-form--inline { display: inline-block; margin: 0; }

/* Discreet buttons of the account page (take out, cancel, leave): an outline, smaller than the main buttons. */
.vefdkpro-form .wp-element-button.is-style-outline {
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
	padding: .35em .9em;
	font-size: .9em;
}
.vefdkpro-form .wp-element-button.is-style-outline:hover,
.vefdkpro-form .wp-element-button.is-style-outline:focus {
	background: transparent;
	text-decoration: underline;
}

.vefdkpro-tip { color: #646970; cursor: help; vertical-align: middle; width: 1.25rem; height: 1.25rem; font-size: 1.25rem; }
.vefdkpro-tip:hover, .vefdkpro-tip:focus { color: #2271b1; }