/*
 * Resilience Tracker form: one colour and one banner per category.
 *
 * Voxel already prints `field-key-<key>` on every field, and the keys carry the
 * category prefix (div-, red-, conn-, feedback-, equity-, learning-), so the
 * fields need no extra classes. The colours and images are the ones the single
 * Resilience Tracker page uses.
 *
 * --rt-c    the category colour (progress bar, slider, card tint)
 * --rt-ink  the same colour darkened to read on white (question titles)
 */

/* ---------------------------------------------------------------- palette */

.ts-create-post [class*="field-key-div-"],
.ts-create-post:has([class*="field-key-div-"]:not([style*="display: none"])),
.cvfsw-step[data-group="diversity-tab"] {
	--rt-c: #669AA2;
	--rt-ink: #50787E;
	--rt-bg: url(/wp-content/uploads/2026/09/diversitybck.webp);
	--rt-icon: url(/wp-content/uploads/2026/09/diversity.webp);
}

.ts-create-post [class*="field-key-red-"],
.ts-create-post:has([class*="field-key-red-"]:not([style*="display: none"])),
.cvfsw-step[data-group="redundancy-tab"] {
	--rt-c: #E19B61;
	--rt-ink: #976841;
	--rt-bg: url(/wp-content/uploads/2026/09/redundancybck.webp);
	--rt-icon: url(/wp-content/uploads/2026/09/redundancy.webp);
}

.ts-create-post [class*="field-key-conn-"],
.ts-create-post:has([class*="field-key-conn-"]:not([style*="display: none"])),
.cvfsw-step[data-group="balancing-connectivity-tab"] {
	--rt-c: #759F81;
	--rt-ink: #597962;
	--rt-bg: url(/wp-content/uploads/2026/09/balancing_connectivitybck.webp);
	--rt-icon: url(/wp-content/uploads/2026/09/balancing_connectivity.webp);
}

.ts-create-post [class*="field-key-feedback-"],
.ts-create-post:has([class*="field-key-feedback-"]:not([style*="display: none"])),
.cvfsw-step[data-group="system-feedbacks-tab"] {
	--rt-c: #BC755C;
	--rt-ink: #9E624D;
	--rt-bg: url(/wp-content/uploads/2026/09/system_feedbacksbck.webp);
	--rt-icon: url(/wp-content/uploads/2026/09/system_feedbacks.webp);
}

.ts-create-post [class*="field-key-equity-"],
.ts-create-post:has([class*="field-key-equity-"]:not([style*="display: none"])),
.cvfsw-step[data-group="inclusivity-equity-tab"] {
	--rt-c: #B8BC67;
	--rt-ink: #727540;
	--rt-bg: url(/wp-content/uploads/2026/09/inclusivity_equitybck.webp);
	--rt-icon: url(/wp-content/uploads/2026/09/inclusivity_equity.webp);
}

.ts-create-post [class*="field-key-learning-"],
.ts-create-post:has([class*="field-key-learning-"]:not([style*="display: none"])),
.cvfsw-step[data-group="adaptive-learning-tab"] {
	--rt-c: #DAB662;
	--rt-ink: #856F3C;
	--rt-bg: url(/wp-content/uploads/2026/09/adaptive_learningbck.webp);
	--rt-icon: url(/wp-content/uploads/2026/09/adaptive_learning.webp);
}

/* ------------------------------------------------- step header as a banner */

/* Only on the six category steps; General Information keeps its plain header. */
.ts-create-post:has(:is(
	[class*="field-key-div-"], [class*="field-key-red-"], [class*="field-key-conn-"],
	[class*="field-key-feedback-"], [class*="field-key-equity-"], [class*="field-key-learning-"]
):not([style*="display: none"])) .ts-active-step {
	/*
	 * Only the top half of each texture is clean: most are two images stacked
	 * with a hard seam about halfway down, a pale strip runs down the right
	 * edge and along the very top. So: anchored top left, nudged up past the
	 * top strip, 106% wide to push the right strip out, and never narrower
	 * than 700px, so the taller phone banner (icon stacked over the title)
	 * still ends above the seam.
	 */
	background: var(--rt-c) var(--rt-bg) left -24px / max(106%, 700px) auto no-repeat;
	border-radius: 12px;
	padding: 24px;
	min-height: 120px;
	align-items: center;
	margin-bottom: 24px;
}

.ts-create-post:has(:is(
	[class*="field-key-div-"], [class*="field-key-red-"], [class*="field-key-conn-"],
	[class*="field-key-feedback-"], [class*="field-key-equity-"], [class*="field-key-learning-"]
):not([style*="display: none"])) .ts-active-step .active-step-details {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ts-create-post:has(:is(
	[class*="field-key-div-"], [class*="field-key-red-"], [class*="field-key-conn-"],
	[class*="field-key-feedback-"], [class*="field-key-equity-"], [class*="field-key-learning-"]
):not([style*="display: none"])) .ts-active-step .active-step-details::before {
	content: "";
	flex: none;
	width: 80px;
	height: 50px;
	background: var(--rt-icon) center / contain no-repeat;
}

.ts-create-post:has(:is(
	[class*="field-key-div-"], [class*="field-key-red-"], [class*="field-key-conn-"],
	[class*="field-key-feedback-"], [class*="field-key-equity-"], [class*="field-key-learning-"]
):not([style*="display: none"])) .ts-active-step .active-step-details p {
	color: #fff;
}

/* Save / previous / next sit on the banner, so give them a solid backing. */
.ts-create-post:has(:is(
	[class*="field-key-div-"], [class*="field-key-red-"], [class*="field-key-conn-"],
	[class*="field-key-feedback-"], [class*="field-key-equity-"], [class*="field-key-learning-"]
):not([style*="display: none"])) .ts-active-step .ts-icon-btn {
	background: rgba(255, 255, 255, .92);
}

@media (max-width: 767px) {
	.ts-create-post:has(:is(
		[class*="field-key-div-"], [class*="field-key-red-"], [class*="field-key-conn-"],
		[class*="field-key-feedback-"], [class*="field-key-equity-"], [class*="field-key-learning-"]
	):not([style*="display: none"])) .ts-active-step {
		padding: 16px;
		min-height: 0;
	}
	/* Icon above the title, so a long name like "System Feedbacks" gets the full width. */
	.ts-create-post:has(:is(
		[class*="field-key-div-"], [class*="field-key-red-"], [class*="field-key-conn-"],
		[class*="field-key-feedback-"], [class*="field-key-equity-"], [class*="field-key-learning-"]
	):not([style*="display: none"])) .ts-active-step .active-step-details {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.ts-create-post:has(:is(
		[class*="field-key-div-"], [class*="field-key-red-"], [class*="field-key-conn-"],
		[class*="field-key-feedback-"], [class*="field-key-equity-"], [class*="field-key-learning-"]
	):not([style*="display: none"])) .ts-active-step .active-step-details::before {
		width: 56px;
		height: 36px;
	}
}

/* ------------------------------------------------------------------ fields */

/* The slider and anything else in the field that follows Voxel's accent. */
.ts-create-post :is(
	[class*="field-key-div-"], [class*="field-key-red-"], [class*="field-key-conn-"],
	[class*="field-key-feedback-"], [class*="field-key-equity-"], [class*="field-key-learning-"]
) {
	--ts-accent-1: var(--rt-c);
}

.ts-create-post :is(
	[class*="field-key-div-"], [class*="field-key-red-"], [class*="field-key-conn-"],
	[class*="field-key-feedback-"], [class*="field-key-equity-"], [class*="field-key-learning-"]
) > label {
	/* !important: the widget's label colour control is more specific. */
	color: var(--rt-ink) !important;
}

.ts-create-post :is(
	[class*="field-key-div-"], [class*="field-key-red-"], [class*="field-key-conn-"],
	[class*="field-key-feedback-"], [class*="field-key-equity-"], [class*="field-key-learning-"]
) .cdts-slider-desc {
	background: color-mix(in srgb, var(--rt-c) 14%, transparent);
	border-color: color-mix(in srgb, var(--rt-c) 35%, transparent);
}

.ts-create-post :is(
	[class*="field-key-div-"], [class*="field-key-red-"], [class*="field-key-conn-"],
	[class*="field-key-feedback-"], [class*="field-key-equity-"], [class*="field-key-learning-"]
) .cdts-slider-desc.is-current {
	background: color-mix(in srgb, var(--rt-c) 28%, transparent);
	border-color: var(--rt-c);
}

/* ------------------------------------------------------------ progress bar */

/* One segment per step, in form order; segment 1 (General Information) keeps
   the site colour. !important because the widget's own colour control writes
   a more specific selector. */
.ts-create-post ul.step-percentage li:nth-child(2)::after { background: #669AA2 !important; }
.ts-create-post ul.step-percentage li:nth-child(3)::after { background: #E19B61 !important; }
.ts-create-post ul.step-percentage li:nth-child(4)::after { background: #759F81 !important; }
.ts-create-post ul.step-percentage li:nth-child(5)::after { background: #BC755C !important; }
.ts-create-post ul.step-percentage li:nth-child(6)::after { background: #B8BC67 !important; }
.ts-create-post ul.step-percentage li:nth-child(7)::after { background: #DAB662 !important; }

/* ------------------------------------------------------- sidebar summary */

/* The summary widget paints its ticks and counts with Voxel's accent. Listed
   by name: a step without a palette (General Information, the admin steps)
   would otherwise lose its accent altogether. */
.codicts-voxel-form-summary-widget .cvfsw-step:is(
	[data-group="diversity-tab"], [data-group="redundancy-tab"], [data-group="balancing-connectivity-tab"],
	[data-group="system-feedbacks-tab"], [data-group="inclusivity-equity-tab"], [data-group="adaptive-learning-tab"]
) {
	--ts-accent-1: var(--rt-c);
}

.codicts-voxel-form-summary-widget .cvfsw-step.cvfsw-active:is(
	[data-group="diversity-tab"], [data-group="redundancy-tab"], [data-group="balancing-connectivity-tab"],
	[data-group="system-feedbacks-tab"], [data-group="inclusivity-equity-tab"], [data-group="adaptive-learning-tab"]
) .cvfsw-accordion {
	/* !important: the widget's own link colour is already !important. */
	color: var(--rt-ink) !important;
}