/* @reviewed 2026-08-30 Eli & Claude */
/*
 * Onboarding — stage-tab status colouring, and the wizard's required-setting marker.
 *
 * Semantic status coding, not theme colour, so it belongs here rather than in the facelift
 * stylesheet (canopy/CLAUDE.md § CSS facelift — the same reason sup.css keeps its own status
 * colours). It has to work under BOTH canopy views, which is what shapes everything below.
 *
 * ── WHY THE STRIP IS ON TOP ────────────────────────────────────────────────────────────────────
 *
 * The facelift draws a 1px rail across the base of every idle tab
 * (`.tc-root-branding-canopy .tc-tabs .tc-button:not(.tc-button-current)`, themis-facelift.css),
 * deliberately: it is one continuous line that only the active tab breaks. A status strip along the
 * bottom would either be overwritten by that rule or would break the rail. The top edge is free in
 * both views, follows the facelift's 10px tab radius, and reads the way a browser tab's coloured
 * edge does — so the strip lives there and the rail is re-declared intact below.
 *
 * ── WHY THE FACELIFT-SCOPED DUPLICATES ─────────────────────────────────────────────────────────
 *
 * `.tc-root-branding-canopy .tc-tabs .tc-button:not(.tc-button-current)` is specificity (0,4,0);
 * an unprefixed `.tc-tabs .tc-button.cy-onboarding-tab-done` is (0,3,0) and LOSES. That is not a
 * hypothetical — it is what shipped first, and the symptom was precise: the colour appeared on the
 * selected tab only, because the facelift's rule excludes exactly that one. Matching the prefix
 * takes ours to (0,5,0), and it would win on load order alone even at a tie (`onboarding.php` is
 * required after `branding.php`). No `!important`: canopy/CLAUDE.md reserves that for per-data-slug
 * module rules, and this is not one.
 *
 * Note the root class is present for BOTH facelift flavours — `CANOPY_VIEW_V1` and `CANOPY_VIEW_SH`
 * (SH remaps the palette on top of V1's structure). Test the view with
 * `tc_branding_canopy_is_enabled()`, never `== CANOPY_VIEW_V1`, which misses SH.
 *
 * Classes come from cy_onboarding_step_status_slug() (canopy/onboarding/onboarding-wizard.php).
 * Adding a value to the cy_onboarding_step_status enum means adding it in BOTH places.
 */

/* ── The palette, once. Everything below consumes the variable. ─────────────────────────────── */

.tc-tabs .tc-button.cy-onboarding-tab {
	--cy-onboarding-status: #9aa3ab;
}

/* Done — the only status that says "nothing left to do here". */
.tc-tabs .tc-button.cy-onboarding-tab-done {
	--cy-onboarding-status: #2e8b57;
}

/* Done, on a NON-SH facelift IDLE tab — the one place the base colour cannot survive the theme. An
 * idle tab is filled with var(--cy-green-600), and on the non-SH facelift that token IS #2e8b57: the
 * same green, contrast 1.00, the strip invisible. A light mint restores it at 3.31.
 *
 * SH IS EXCLUDED BY PREFERENCE, NOT BY CONTRAST (operator, 2026-08-31) - it remaps that token to a
 * slate navy, so the base green is legible there and stays. Scope this with the :not() rather than
 * dropping the -sh class from the selector: both classes sit on the same root element, so a bare
 * .tc-root-branding-canopy rule would catch SH too.
 *
 * The ACTIVE tab is excluded in both flavours - it is filled with var(--cy-bg) instead, where the
 * base green reads at 3.91 and this mint would read at 1.18. */
.tc-root-branding-canopy:not(.tc-root-branding-canopy-sh) .tc-tabs .tc-button.cy-onboarding-tab-done:not(.tc-button-current) {
	--cy-onboarding-status: #9bf6c4;
}

/* In progress — someone started and stopped. The one colour meant to draw the eye. */
.tc-tabs .tc-button.cy-onboarding-tab-in-progress {
	--cy-onboarding-status: #e8a33d;
}

/* Pending — untouched, and the majority on a fresh deployment. Deliberately quiet. */
.tc-tabs .tc-button.cy-onboarding-tab-pending {
	--cy-onboarding-status: #9aa3ab;
}

/* Skipped — a decision was recorded, so it reads as settled but not as done. */
.tc-tabs .tc-button.cy-onboarding-tab-skipped {
	--cy-onboarding-status: #6f7b8a;
	font-style: italic;
}

/* Not relevant — resolved by the customer's own answers; nothing is owed. Half-transparent rather
 * than pale, so it stays faint against the facelift's navy AND the classic view's light grey. */
.tc-tabs .tc-button.cy-onboarding-tab-not-relevant {
	--cy-onboarding-status: rgba(154, 163, 171, 0.45);
}

/*
 * No step row, or a status matching no known constant. Red because it is a FAULT, not a state: the
 * sync did not run, or update-now is part-way through minting the enum. Never let this look calm.
 */
.tc-tabs .tc-button.cy-onboarding-tab-unknown {
	--cy-onboarding-status: #c0392b;
}


/* ── The strip. Three rules, because the facelift owns the idle tab's base. ─────────────────── */

/* Classic view (CANOPY_VIEW_V0), and the fallback for any tab the two rules below do not claim. */
.tc-tabs .tc-button.cy-onboarding-tab {
	box-shadow: inset 0 3px 0 0 var(--cy-onboarding-status);
}

/* Facelift, idle tab: the status strip AND the facelift's own base rail, which this rule replaces
 * and must therefore re-declare — dropping it would leave a gap in a line that runs the full width. */
.tc-root-branding-canopy .tc-tabs .tc-button.cy-onboarding-tab:not(.tc-button-current) {
	box-shadow: inset 0 3px 0 0 var(--cy-onboarding-status),
		inset 0 -1px 0 0 var(--cy-border-strong);
}

/* Facelift, active tab: it carries a real border and two pseudo-element feet instead of a rail, so
 * there is nothing to preserve here — only the strip. */
.tc-root-branding-canopy .tc-tabs .tc-button.cy-onboarding-tab.tc-button-current {
	box-shadow: inset 0 3px 0 0 var(--cy-onboarding-status);
}


/* ── The wizard's required-field marker ─────────────────────────────────────────────────────── */

/* Core already draws this asterisk for `.tc-field-required`, which the FIELD-level `required` def
 * key emits (core/server/fields.php). The wizard's own claim is a weaker one — it governs the
 * wizard's navigation and its stage close-out, never the write — so it cannot borrow that key
 * without making the field mandatory on the ordinary Settings and Externals screens too. The
 * declarations below are core's, matched deliberately: an implementer should read one asterisk, not
 * learn a second symbol.
 *
 * The class comes from cy_onboarding_wizard_field_layout_defs() (onboarding-wizard.php), which adds
 * it only on a stage widget, from the two sources documented there. */
.tc-field.cy-onboarding-field-required .tc-caption:before {
	position: absolute;
	display: inline-block;
	content: "* ";
	color: red;
	width: 10px;
}

.tc-root-rtl .tc-field.cy-onboarding-field-required .tc-caption:before {
	right: -10px;
}

.tc-root-ltr .tc-field.cy-onboarding-field-required .tc-caption:before {
	left: -10px;
}