/*
 * VEFdocsKit — the page of the plugin (front of the site and admin screens).
 *
 * Everything the webmaster can set is a variable. When a variable is not set, the look follows the site:
 * the font and the text color are inherited, the accent and the radius are read from the theme by app.js.
 */

.vefdk-app,
.vefdk-panel {
	--vefdk-fs-small: var(--wp--preset--font-size--small, clamp(.75rem, .69rem + .26vw, .9rem));
	--vefdk-fs-normal: clamp(.875rem, .79rem + .39vw, 1.1rem);
	--vefdk-fs-large: var(--wp--preset--font-size--large, clamp(1.2rem, 1.08rem + .52vw, 1.5rem));
	--_accent: var(--vefdk-accent, var(--vefdk-probe-accent, #2563a8));
	--_accent-ink: var(--vefdk-accent-ink, var(--vefdk-probe-ink, #fff));
	--_border: var(--vefdk-border, color-mix(in srgb, currentColor 22%, transparent));
	--_surface: var(--vefdk-surface, color-mix(in srgb, currentColor 4%, transparent));
	--_radius: var(--vefdk-radius, var(--vefdk-probe-radius, 4px));
	--_gap: var(--vefdk-gap, clamp(.75rem, .6rem + .6vw, 1.25rem));
	--_danger: #b32d2e;
	--_ok: #1a7f37;
	box-sizing: border-box;
	max-width: var(--vefdk-width, 100%);
	margin-inline: auto;
	color: var(--vefdk-text, inherit);
	background: var(--vefdk-bg, transparent);
	font-family: var(--vefdk-font, inherit);
	font-size: var(--vefdk-fs-normal);
	line-height: 1.5;
	box-shadow: var(--vefdk-shadow, none);
	container: vefdk / inline-size;
}

/* The wrapper that Divi 5 puts around its module shrinks to its content without a width: the page must fill it. */
.vefdk-module { width: 100%; }

.vefdk-app *,
.vefdk-app *::before,
.vefdk-app *::after,
.vefdk-panel * {
	box-sizing: border-box;
}

.vefdk-app[data-vefdk-context="admin"] {
	--vefdk-accent: var(--wp-admin-theme-color, #2271b1);
	--vefdk-radius: 3px;
	max-width: none;
	margin: 0;
	font-size: .875rem;
}

.vefdk-app h2,
.vefdk-app h3,
.vefdk-app h4 {
	margin: 0 0 .5em;
	font-family: inherit;
	line-height: 1.25;
}

.vefdk-app h2 { font-size: var(--vefdk-fs-large); }
.vefdk-app h3 { font-size: 1.05em; }
.vefdk-app h4 { font-size: 1em; }
.vefdk-app p { margin: 0 0 .75em; }
.vefdk-small { font-size: var(--vefdk-fs-small); opacity: .8; }

/* Sign-in and messages */
.vefdk-panel {
	max-width: min(100%, 28rem);
	margin: var(--_gap) auto;
	padding: calc(var(--_gap) * 1.5);
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	background: var(--vefdk-surface, transparent);
}

.vefdk-panel__title { margin-top: 0; }
.vefdk-panel form p { display: flex; flex-direction: column; gap: .25em; }
.vefdk-panel label { font-size: var(--vefdk-fs-small); }
.vefdk-panel input[type="text"],
.vefdk-panel input[type="password"] { width: 100%; }
.vefdk-panel .login-submit input,
.vefdk-panel input[type="submit"] { cursor: pointer; }

/* Tabs */
.vefdk-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin: 0 0 var(--_gap);
	padding: 0;
	border-bottom: 1px solid var(--_border);
}

.vefdk-tab {
	padding: .55em 1em;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	opacity: .75;
}

.vefdk-tab:hover,
.vefdk-tab:focus-visible { opacity: 1; }
.vefdk-tab[aria-current="page"] { border-bottom-color: var(--_accent); opacity: 1; font-weight: 600; }

.vefdk-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: var(--_gap);
}

.vefdk-bar__user { font-size: var(--vefdk-fs-small); }

/* Layout */
.vefdk-grid {
	display: grid;
	gap: var(--_gap);
	grid-template-columns: minmax(0, 1fr);
}

@container vefdk (min-width: 52rem) {
	.vefdk-grid--2 { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
}

.vefdk-card {
	padding: var(--_gap);
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	background: var(--vefdk-surface, transparent);
}

.vefdk-card + .vefdk-card { margin-top: var(--_gap); }

/* Fields */
.vefdk-fields {
	display: grid;
	gap: .6rem var(--_gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	align-items: start;
}

.vefdk-field { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.vefdk-field > span:first-child { font-size: var(--vefdk-fs-small); font-weight: 600; }
.vefdk-field--wide { grid-column: 1 / -1; }
.vefdk-field .vefdk-small { margin: 0; }

.vefdk-app input[type="text"],
.vefdk-app input[type="number"],
.vefdk-app input[type="search"],
.vefdk-app input[type="date"],
.vefdk-app input[type="password"],
.vefdk-app input[type="email"],
.vefdk-app select,
.vefdk-app textarea {
	width: 100%;
	min-height: 2.4em;
	padding: .35em .6em;
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	background: var(--vefdk-field-bg, color-mix(in srgb, Canvas 92%, transparent));
	color: inherit;
	font: inherit;
}

.vefdk-app input[type="color"] { width: 100%; height: 2.4em; padding: 2px; border: 1px solid var(--_border); border-radius: var(--_radius); background: none; }
.vefdk-app input[type="range"] { width: 100%; accent-color: var(--_accent); }
.vefdk-app input[type="checkbox"],
.vefdk-app input[type="radio"] { accent-color: var(--_accent); }
.vefdk-app :focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; }

.vefdk-check { display: flex; align-items: center; gap: .5em; }
.vefdk-radios { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.vefdk-radios label { display: inline-flex; align-items: center; gap: .4em; }

/* Buttons */
.vefdk-app .vefdk-button,
.vefdk-panel .vefdk-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	min-height: 2.4em;
	padding: .4em 1.1em;
	border: 1px solid var(--_accent);
	border-radius: var(--_radius);
	background: var(--_accent);
	color: var(--_accent-ink);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.vefdk-app .vefdk-button:hover,
.vefdk-app .vefdk-button:focus-visible,
.vefdk-panel .vefdk-button:hover,
.vefdk-panel .vefdk-button:focus-visible { background: color-mix(in srgb, var(--_accent) 85%, #000); color: var(--_accent-ink); }
.vefdk-app .vefdk-button--ghost { background: transparent; color: var(--_accent); }
.vefdk-app .vefdk-button--ghost:hover,
.vefdk-app .vefdk-button--ghost:focus-visible { background: color-mix(in srgb, var(--_accent) 12%, transparent); color: var(--_accent); }
.vefdk-app .vefdk-button--small { min-height: 2em; padding: .2em .7em; font-size: var(--vefdk-fs-small); }
.vefdk-app .vefdk-button[disabled] { opacity: .5; cursor: not-allowed; }
.vefdk-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: var(--_gap); }

/* Messages: a complete thin frame, never a stripe on one side */
.vefdk-notice {
	margin: 0 0 var(--_gap);
	padding: .6em .9em;
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	background: var(--_surface);
}

.vefdk-notice--error { border-color: var(--_danger); color: var(--_danger); }
.vefdk-notice--ok { border-color: var(--_ok); }
.vefdk-notice--warn { border-color: #b26a00; }
.vefdk-notice ul { margin: .25em 0 0 1.2em; padding: 0; }

/* Drop zone and file list */
.vefdk-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: calc(var(--_gap) * 1.6) var(--_gap);
	border: 2px dashed var(--_border);
	border-radius: var(--_radius);
	text-align: center;
	cursor: pointer;
}

.vefdk-drop:hover,
.vefdk-drop.is-over,
.vefdk-drop:focus-visible { border-color: var(--_accent); background: color-mix(in srgb, var(--_accent) 8%, transparent); }
.vefdk-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.vefdk-files { list-style: none; margin: var(--_gap) 0 0; padding: 0; display: grid; gap: .4rem; }
.vefdk-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	padding: .45em .7em;
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
}

.vefdk-file__name { flex: 1 1 8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vefdk-file__pw { flex: 1 0 100%; }
.vefdk-file.is-error { border-color: var(--_danger); }
.vefdk-file.is-done { border-color: var(--_ok); }

/* Tools */
.vefdk-stack { display: grid; gap: var(--_gap); }
.vefdk-toolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .6rem; }
.vefdk-tool {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .25rem;
	padding: .7em .9em;
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.vefdk-tool:hover { border-color: var(--_accent); }
.vefdk-tool[aria-checked="true"] { border-color: var(--_accent); background: color-mix(in srgb, var(--_accent) 10%, transparent); box-shadow: 0 0 0 1px var(--_accent); }
.vefdk-tool:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; }

.vefdk-anchors { display: grid; grid-template-columns: repeat(3, 1.6rem); gap: 3px; }
.vefdk-anchors button { width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid var(--_border); border-radius: 2px; background: none; cursor: pointer; }
.vefdk-anchors button[aria-pressed="true"] { background: var(--_accent); border-color: var(--_accent); }

/* Lists and tables */
.vefdk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.vefdk-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .5em .7em;
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
}

.vefdk-list__item.is-active { border-color: var(--_accent); background: color-mix(in srgb, var(--_accent) 8%, transparent); }

.vefdk-table-wrap { overflow-x: auto; }
.vefdk-table { width: 100%; border-collapse: collapse; font-size: var(--vefdk-fs-small); }
.vefdk-table th,
.vefdk-table td { padding: .5em .6em; border-bottom: 1px solid var(--_border); text-align: left; vertical-align: top; }
.vefdk-table th { font-weight: 600; white-space: nowrap; }
.vefdk-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }

.vefdk-loading { opacity: .7; }

@media (prefers-reduced-motion: no-preference) {
	.vefdk-button,
	.vefdk-drop,
	.vefdk-tab { transition: background-color .15s, border-color .15s, opacity .15s; }
}


/* Designer and folders */
.vefdk-card h3 { margin: 1.25em 0 .5em; font-size: var(--vefdk-fs-normal); }
.vefdk-card > h2 + h3 { margin-top: 0; }
.vefdk-card .vefdk-list { margin-bottom: var(--_gap); }
.vefdk-card .vefdk-actions { margin-top: var(--_gap); }
.vefdk-view .vefdk-card { margin-bottom: var(--_gap); }
.vefdk-view .vefdk-card + .vefdk-card { margin-top: 0; }