/*
 * IEXEL Club OS shared visual foundations.
 *
 * This layer intentionally styles primitives only. Dashboard grids, section
 * order, content-driven heights and role-specific layouts remain unchanged.
 */
:root {
	/* Backward-compatible aliases for existing portal selectors. */
	--iexel-midnight: var(--iexel-color-primary, #071d49);
	--iexel-navy: var(--iexel-color-navy-deep, #10285d);
	--iexel-gold: var(--iexel-color-gold, #cba135);
	--iexel-gold-bright: var(--iexel-color-gold-hover, #b88b1f);
	--iexel-ink: var(--iexel-color-text, #16213e);
	--iexel-muted: var(--iexel-color-text-muted, #697386);
	--iexel-surface: var(--iexel-color-card, #fff);
	--iexel-bg: var(--iexel-color-page, #f4f6fa);
}

/* Bounded merchandise imagery shared by both Club Shop directories. */
.iexel-shop-product-image {
	aspect-ratio: 1 / 1;
	background: var(--iexel-surface-muted, var(--iexel-surface));
	border-radius: var(--iexel-radius-small, 8px);
	box-sizing: border-box;
	display: block;
	height: auto;
	margin-bottom: 1rem;
	object-fit: contain;
	padding: 12px;
	width: 100%;
}

.iexel-shop-product-image.is-empty {
	color: var(--iexel-ink);
	display: grid;
	place-items: center;
}

.iexel-os-card .iexel-shop-product-price {
	color: var(--iexel-gold);
}

/*
 * Compatibility foregrounds for legacy shared components.
 *
 * These selectors deliberately pair foregrounds with the surface that owns
 * them. A configured brand colour is not a safe general-purpose text colour.
 */
.iexel-experience-header {
	background: var(--iexel-surface-identity, #071d49);
	color: var(--iexel-color-on-primary, #fff);
}

.iexel-experience-brand,
.iexel-experience-refresh button,
.iexel-experience-account summary {
	color: inherit;
}

.iexel-experience-brand > .iexel-experience-brand-mark,
.iexel-experience-active-role {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.iexel-experience-brand > .iexel-experience-brand-mark {
	color: inherit;
}

.iexel-experience-refresh button {
	border-color: currentColor;
}

.iexel-experience-account summary > span {
	background: var(--iexel-surface-card, #fff);
	color: var(--iexel-color-text, #16213e);
}

.iexel-experience-nav a[aria-current="page"] {
	background: var(--iexel-surface-identity, #071d49);
	color: var(--iexel-color-on-primary, #fff);
}

.iexel-experience-mobile-nav > summary {
	color: var(--iexel-color-text, #16213e);
}

.iexel-player-statistics-page,
.iexel-team-dashboard-card,
.iexel-team-workspace-hero,
.iexel-team-events-section,
.iexel-team-events-card,
.iexel-team-squad-card,
.iexel-team-attendance-workspace,
.iexel-team-event-form-card,
.iexel-team-statistics-quality,
.iexel-team-statistics-section,
.iexel-team-statistics-player-table,
.iexel-match-mode-card,
.iexel-match-report-card,
.iexel-match-details-form-card,
.iexel-coach-workspace-hero,
.iexel-coach-dashboard-card,
.iexel-event-match-selection-card {
	--iexel-text: var(--iexel-color-on-dark, #fff);
	--iexel-muted: var(--iexel-color-on-dark-muted, #fff);
}

.iexel-player-statistics-filters,
.iexel-player-statistics-summary,
.iexel-player-statistics-history-section {
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--iexel-surface-feature, #10285d) 82%, #000),
		var(--iexel-surface-feature, #10285d)
	);
	color: var(--iexel-color-on-dark, #fff);
}

.iexel-player-statistics-hero,
.iexel-player-statistics-quality,
.iexel-team-dashboard-card,
.iexel-team-workspace-hero,
.iexel-team-events-section,
.iexel-team-events-card,
.iexel-team-squad-card,
.iexel-team-attendance-workspace,
.iexel-team-event-form-card,
.iexel-team-statistics-quality,
.iexel-team-statistics-section,
.iexel-match-mode-card,
.iexel-match-report-card,
.iexel-coach-workspace-hero,
.iexel-coach-dashboard-card,
.iexel-event-match-selection-card,
.iexel-os-card {
	color: var(--iexel-color-on-dark, #fff);
}

.iexel-player-statistics-page .iexel-section-kicker,
.iexel-team-dashboard-card .iexel-section-kicker,
.iexel-team-workspace-hero .iexel-section-kicker,
.iexel-team-upcoming-registers .iexel-section-kicker,
.iexel-event-match-selection-card .iexel-section-kicker,
.iexel-os-card .iexel-section-kicker {
	color: var(--iexel-color-gold, #cba135);
}

.iexel-player-statistics-shirt,
.iexel-player-statistics-badge.is-location,
.iexel-player-statistics-badge.is-potm,
.iexel-team-member-statistics,
.iexel-team-next-event-date,
.iexel-coach-alert-count {
	color: var(--iexel-color-on-accent, #000);
}

.iexel-os-card h1,
.iexel-os-card h2,
.iexel-os-card h3,
.iexel-os-card p {
	color: inherit;
}

.iexel-os-card .iexel-os-button {
	color: var(--iexel-color-on-dark, #fff);
	text-decoration-color: var(--iexel-color-gold, #cba135);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.iexel-os-card table td a:not(.iexel-button):not(.button) {
	color: var(--iexel-color-on-dark, #fff);
	text-decoration: underline;
	text-decoration-color: var(--iexel-color-gold, #cba135);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.iexel-os-card table td a:not(.iexel-button):not(.button):hover,
.iexel-os-card table td a:not(.iexel-button):not(.button):focus-visible {
	color: var(--iexel-color-gold, #cba135);
	text-decoration-color: currentColor;
}

/*
 * Finance metadata labels are small (~11px), uppercase and letter-spaced, so
 * they must not take their colour from the configurable club accent
 * (--iexel-color-gold -> --iexel-brand-accent), which a club may set to a
 * mid-tone that cannot reach WCAG AA at this size. They use the fixed,
 * non-configurable readable-gold text token instead -- the same token the
 * canonical small-label/kicker treatment below already uses for
 * .iexel-finance-metrics span -- so the gold identity is preserved with
 * contrast that does not depend on club configuration.
 */
.iexel-billing-schedule-meta dt,
.iexel-billing-run-meta dt {
	color: var(--iexel-color-gold-text, #715514);
}

/*
 * The one dark Finance surface (Invoice Detail's authoritative .iexel-os-card
 * record) needs the established on-dark label colour instead -- the same token
 * .iexel-my-team-card dt already uses. --iexel-color-on-dark-muted resolves to
 * the plugin-computed brand-on-secondary foreground, so it stays readable
 * whatever the club configures.
 */
.iexel-os-card .iexel-billing-schedule-meta dt,
.iexel-os-card .iexel-billing-run-meta dt {
	color: var(--iexel-color-on-dark-muted, #c8d3e3);
}

.iexel-my-team-card dt,
.iexel-coach-action-list span {
	color: var(--iexel-color-on-dark-muted, #fff);
}

.iexel-portal {
	background: var(--iexel-surface-page, #f4f6fa);
	color: var(--iexel-color-text, #16213e);
	font-family: var(--iexel-font-family-sans, Inter, Arial, sans-serif);
	font-size: var(--iexel-font-body, 1rem);
}

/* Opt-in surface helpers. Existing production pages are not migrated here. */
.iexel-surface--identity {
	background: var(--iexel-surface-identity, #071d49);
	color: var(--iexel-color-on-primary, #fff);
}

.iexel-surface--identity-strong {
	background: var(--iexel-surface-identity-strong, #10285d);
	color: var(--iexel-color-on-secondary, #fff);
}

.iexel-surface--feature {
	background: var(--iexel-surface-feature, #10285d);
	color: var(--iexel-color-on-secondary, #fff);
}

.iexel-surface--card {
	background: var(--iexel-surface-card, #fff);
	color: var(--iexel-color-text, #16213e);
}

.iexel-surface--elevated {
	background: var(--iexel-surface-elevated, #fff);
	color: var(--iexel-color-text, #16213e);
}

.iexel-surface--muted {
	background: var(--iexel-surface-muted, #f6f7f9);
	color: var(--iexel-color-text, #16213e);
}

/* Opt-in workspace helpers. They do not change existing page widths. */
.iexel-workspace {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--iexel-workspace-application-max, 1380px);
	padding-inline: var(--iexel-workspace-gutter-desktop, 20px);
	width: 100%;
}

.iexel-workspace--content {
	max-width: var(--iexel-workspace-content-max, 1180px);
}

/* Shared semantic typography roles. */
.iexel-type-display {
	font-size: var(--iexel-font-display, clamp(1.8rem, 4vw, 2.875rem));
	font-weight: var(--iexel-weight-display, 800);
	line-height: var(--iexel-line-height-display, 1.05);
}

.iexel-type-section {
	font-size: var(--iexel-font-section, 1.25rem);
	font-weight: var(--iexel-weight-heading, 800);
	line-height: var(--iexel-line-height-heading, 1.2);
}

.iexel-type-card {
	font-size: var(--iexel-font-card, .9375rem);
	font-weight: var(--iexel-weight-strong, 700);
	line-height: var(--iexel-line-height-heading, 1.2);
}

.iexel-type-metric {
	font-size: var(--iexel-font-display, clamp(1.8rem, 4vw, 2.875rem));
	font-weight: var(--iexel-weight-display, 800);
	line-height: var(--iexel-line-height-metric, 1);
}

.iexel-type-body {
	font-size: var(--iexel-font-body, 1rem);
	line-height: var(--iexel-line-height-body, 1.5);
}

.iexel-type-supporting {
	font-size: var(--iexel-font-supporting, .875rem);
	line-height: var(--iexel-line-height-supporting, 1.45);
}

.iexel-type-label {
	font-size: var(--iexel-font-label, .6875rem);
	font-weight: var(--iexel-weight-label, 700);
	letter-spacing: .1em;
	line-height: var(--iexel-line-height-supporting, 1.45);
	text-transform: uppercase;
}

.iexel-experience-main,
.iexel-experience-grid,
.iexel-experience-grid > *,
.iexel-experience-section,
.iexel-experience-quick,
.iexel-experience-priority {
	min-width: 0;
}

.iexel-experience-section,
.iexel-experience-quick,
.iexel-experience-priority {
	background: var(--iexel-component-card-bg, #fff);
	border: var(--iexel-border-standard, 1px solid #dfe3e9);
	border-radius: var(--iexel-radius-card, 16px);
	box-shadow: var(--iexel-shadow-standard, 0 8px 24px rgba(7,29,73,.08));
	height: auto;
}

.iexel-experience-priority {
	border-left: 4px solid var(--iexel-color-gold, #cba135);
}

.iexel-experience-metric,
.iexel-finance-metrics article,
.iexel-experience-item,
.iexel-experience-alert,
.iexel-experience-empty {
	background: var(--iexel-component-metric-card-bg, #f6f7f9);
	border-radius: var(--iexel-radius-compact, 10px);
}

.iexel-experience-item {
	border-left-color: var(--iexel-color-gold, #cba135);
}

.iexel-experience-alert {
	border-left: 4px solid var(--iexel-color-info, #2563a6);
}

.iexel-experience-alert.is-urgent {
	border-left-color: var(--iexel-action-danger-bg, #b42318);
}

.iexel-experience-alert.is-warning {
	border-left-color: var(--iexel-status-warning-text, #6c4f0b);
}

.iexel-experience-alert.is-action_required {
	border-left-color: var(--iexel-color-gold, #cba135);
}

.iexel-experience-section h2,
.iexel-experience-quick h2,
.iexel-experience-priority > h2 {
	color: var(--iexel-color-text, #16213e);
	font-size: var(--iexel-font-section, 1.25rem);
	font-weight: var(--iexel-weight-heading, 800);
	line-height: var(--iexel-line-height-heading, 1.2);
}

.iexel-experience-metric strong,
.iexel-finance-metrics strong,
.iexel-experience-empty strong,
.iexel-experience-quick a {
	color: var(--iexel-color-text, #16213e);
}

body.iexel-portal .iexel-experience-shell .iexel-experience-quick a.is-primary {
	background: var(--iexel-action-primary-bg, #071d49);
	border-color: var(--iexel-action-primary-border, #071d49);
	color: var(--iexel-action-primary-text, #fff);
}

body.iexel-portal .iexel-experience-shell .iexel-experience-dashboard--coach .iexel-experience-quick a.is-primary:hover {
	background: var(--iexel-surface-feature, #10285d);
	border-color: var(--iexel-color-gold, #cba135);
	color: var(--iexel-color-on-dark, #fff);
}

body.iexel-portal .iexel-experience-shell .iexel-experience-dashboard--coach .iexel-experience-quick a:not(.is-primary):hover,
body.iexel-portal .iexel-experience-shell .iexel-experience-dashboard--coach .iexel-experience-button:not(.is-primary):not(.is-danger),
body.iexel-portal .iexel-experience-shell .iexel-experience-dashboard--coach .iexel-experience-empty strong {
	color: var(--iexel-color-text, #16213e);
}

.iexel-experience-item h3,
.iexel-experience-alert h3 {
	color: var(--iexel-color-text, #16213e);
	font-size: var(--iexel-font-card, .9375rem);
	font-weight: var(--iexel-weight-strong, 700);
	line-height: var(--iexel-line-height-heading, 1.2);
}

.iexel-experience-item p,
.iexel-experience-alert p,
.iexel-experience-empty,
.iexel-experience-generated {
	color: var(--iexel-color-text-muted, #697386);
	font-size: var(--iexel-font-supporting, .875rem);
	line-height: var(--iexel-line-height-supporting, 1.45);
}

.iexel-section-kicker,
.iexel-experience-alert span,
.iexel-experience-metric span,
.iexel-finance-metrics span {
	color: var(--iexel-color-gold-text, #715514);
	font-size: var(--iexel-font-label, .6875rem);
	font-weight: var(--iexel-weight-label, 700);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.iexel-experience-button {
	align-items: center;
	background: var(--iexel-action-secondary-bg, #fff);
	border: 1px solid var(--iexel-action-secondary-border, #071d49);
	border-radius: var(--iexel-radius-compact, 10px);
	box-sizing: border-box;
	color: var(--iexel-action-secondary-text, #071d49);
	display: inline-flex;
	font-family: inherit;
	font-weight: var(--iexel-weight-strong, 700);
	justify-content: center;
	min-height: var(--iexel-control-height, 44px);
	padding: 8px 14px;
	text-align: center;
	text-decoration: none;
}

.iexel-experience-button:hover,
.iexel-experience-button.is-secondary:hover {
	background: var(--iexel-surface-muted, #f6f7f9);
	border-color: var(--iexel-color-gold, #cba135);
	color: var(--iexel-action-secondary-text, #071d49);
}

body.iexel-portal .iexel-experience-shell .iexel-experience-button.is-primary {
	background: var(--iexel-action-primary-bg, #071d49);
	border-color: var(--iexel-action-primary-border, #071d49);
	color: var(--iexel-action-primary-text, #fff);
}

body.iexel-portal .iexel-experience-shell .iexel-experience-button.is-primary:hover {
	background: var(--iexel-action-primary-bg, #071d49);
	border-color: var(--iexel-color-gold, #cba135);
	box-shadow: inset 0 -3px 0 var(--iexel-color-gold, #cba135);
	color: var(--iexel-action-primary-text, #fff);
}

body.iexel-portal .iexel-experience-shell .iexel-experience-button.is-secondary {
	background: var(--iexel-action-secondary-bg, #fff);
	border-color: var(--iexel-action-secondary-border, #071d49);
	color: var(--iexel-action-secondary-text, #071d49);
}

body.iexel-portal .iexel-experience-shell .iexel-experience-button.is-secondary:hover {
	background: var(--iexel-surface-muted, #f6f7f9);
	border-color: var(--iexel-color-gold, #cba135);
	color: var(--iexel-action-secondary-text, #071d49);
}

body.iexel-portal .iexel-experience-shell .iexel-experience-button.is-ghost,
body.iexel-portal .iexel-experience-shell .iexel-experience-button.is-text {
	background: var(--iexel-action-ghost-bg, transparent);
	border-color: var(--iexel-action-ghost-border, transparent);
	color: var(--iexel-action-ghost-text, #071d49);
	padding-inline: 4px;
}

body.iexel-portal .iexel-experience-shell .iexel-experience-button.is-ghost:hover,
body.iexel-portal .iexel-experience-shell .iexel-experience-button.is-text:hover {
	background: var(--iexel-surface-muted, #f6f7f9);
	border-color: transparent;
	color: var(--iexel-action-ghost-text, #071d49);
}

body.iexel-portal .iexel-experience-shell .iexel-experience-button.is-danger {
	background: var(--iexel-action-danger-bg, #b42318);
	border-color: var(--iexel-action-danger-border, #b42318);
	color: var(--iexel-action-danger-text, #fff);
}

body.iexel-portal .iexel-experience-shell .iexel-experience-button.is-danger:hover {
	background: var(--iexel-action-danger-hover-bg, #991b1b);
	border-color: var(--iexel-action-danger-hover-bg, #991b1b);
	color: var(--iexel-action-danger-text, #fff);
}

body.iexel-portal .iexel-experience-shell .iexel-experience-button:disabled,
body.iexel-portal .iexel-experience-shell .iexel-experience-button[aria-disabled="true"],
body.iexel-portal .iexel-experience-shell .iexel-experience-button:is(.is-primary, .is-secondary, .is-ghost, .is-text, .is-danger):disabled,
body.iexel-portal .iexel-experience-shell .iexel-experience-button:is(.is-primary, .is-secondary, .is-ghost, .is-text, .is-danger)[aria-disabled="true"] {
	background: var(--iexel-disabled-bg, #e4e7ec);
	border-color: var(--iexel-disabled-border, #98a2b3);
	box-shadow: none;
	color: var(--iexel-disabled-text, #475467);
	cursor: not-allowed;
	opacity: 1;
	pointer-events: none;
}

.iexel-experience-status {
	align-items: center;
	background: var(--iexel-status-neutral-bg, #e8edf4);
	border: 1px solid var(--iexel-status-neutral-border, #b8c2d1);
	border-radius: var(--iexel-radius-pill, 999px);
	color: var(--iexel-status-neutral-text, #344054);
	display: inline-flex;
	font-size: var(--iexel-font-label, .6875rem);
	font-weight: var(--iexel-weight-label, 700);
	min-height: 24px;
}

.iexel-experience-status.is-state-registered,
.iexel-experience-status.is-state-approved,
.iexel-experience-status.is-success {
	background: var(--iexel-status-success-bg, #e3f4e9);
	border-color: var(--iexel-status-success-border, #9dcdb0);
	color: var(--iexel-status-success-text, #175c38);
}

.iexel-experience-status.is-state-pending,
.iexel-experience-status.is-warning {
	background: var(--iexel-status-warning-bg, #fff3d6);
	border-color: var(--iexel-status-warning-border, #dfc57f);
	color: var(--iexel-status-warning-text, #6c4f0b);
}

.iexel-experience-status.is-state-failed,
.iexel-experience-status.is-danger,
.iexel-experience-status.is-error {
	background: var(--iexel-status-danger-bg, #fde7e6);
	border-color: var(--iexel-status-danger-border, #e7aaa6);
	color: var(--iexel-status-danger-text, #8b2b27);
}

.iexel-experience-status.is-info {
	background: var(--iexel-status-info-bg, #e8f1fb);
	border-color: var(--iexel-status-info-border, #a8c5e5);
	color: var(--iexel-status-info-text, #174f82);
}

/* ActionFeedback — ONE reusable Club OS action-result notice (see
   app/core/UI/Components/Common/ActionFeedback.php). Renders in normal page
   flow by default, fully accessible and permanently visible with no
   JavaScript. app.js's initActionFeedback() adds --floating (only ever for a
   SUCCESS notice the calling page marked transient) so it appears in the
   CURRENT viewport rather than wherever it happens to sit in the DOM — this
   is what fixes the "did that save?" ambiguity after a context-preserving
   redirect. Error/warning are never floated or auto-dismissed. */
.iexel-action-feedback {
	background: var(--iexel-status-success-bg, #e3f4e9);
	border: 1px solid var(--iexel-status-success-border, #9dcdb0);
	border-radius: var(--iexel-radius-card, 16px);
	box-sizing: border-box;
	color: var(--iexel-status-success-text, #175c38);
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--iexel-font-supporting, .875rem);
	font-weight: var(--iexel-weight-strong, 700);
	line-height: 1.4;
	margin: 0 0 var(--iexel-space-standard, 16px);
	padding: 12px 16px;
}

.iexel-action-feedback.is-error {
	background: var(--iexel-status-danger-bg, #fde7e6);
	border-color: var(--iexel-status-danger-border, #e7aaa6);
	color: var(--iexel-status-danger-text, #8b2b27);
}

.iexel-action-feedback.is-warning {
	background: var(--iexel-status-warning-bg, #fff3d6);
	border-color: var(--iexel-status-warning-border, #dfc57f);
	color: var(--iexel-status-warning-text, #6c4f0b);
}

.iexel-action-feedback-icon {
	flex: 0 0 auto;
}

/* Progressive floating enhancement — JS-only, opt-in, success-only. */
.iexel-action-feedback.iexel-action-feedback--floating {
	position: fixed;
	z-index: 2000;
	bottom: 24px;
	right: 24px;
	left: auto;
	width: min(340px, calc(100vw - 48px));
	margin: 0;
	box-shadow: var(--iexel-shadow-elevated, 0 18px 44px rgba(7,29,73,.14));
	opacity: 1;
	transform: translateY(0);
	transition: opacity .25s ease, transform .25s ease;
}

.iexel-action-feedback.iexel-action-feedback--floating.iexel-action-feedback--dismissed {
	opacity: 0;
	transform: translateY(8px);
}

@media (max-width: 680px) {
	.iexel-action-feedback.iexel-action-feedback--floating {
		left: 12px;
		right: 12px;
		bottom: 16px;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iexel-action-feedback.iexel-action-feedback--floating {
		transition-duration: .01ms;
	}
}

.iexel-experience-progress {
	margin-top: var(--iexel-space-small, 10px);
}

.iexel-experience-progress-track {
	background: var(--iexel-component-progress-track, #e8edf4);
	border-radius: var(--iexel-radius-pill, 999px);
	height: 8px;
	overflow: hidden;
}

.iexel-experience-progress-track > span {
	background: var(--iexel-component-progress-value, #cba135);
	display: block;
	height: 100%;
	width: var(--iexel-progress, 0%);
}

.iexel-experience-progress small {
	color: var(--iexel-color-text-muted, #697386);
	font-size: var(--iexel-font-label, .6875rem);
	font-weight: var(--iexel-weight-label, 700);
}

.iexel-experience-shell :where(
	a,
	button,
	input,
	select,
	textarea,
	summary,
	[tabindex]:not([tabindex="-1"])
):focus-visible {
	box-shadow: var(--iexel-focus-ring, 0 0 0 3px #fff, 0 0 0 6px #2563a6);
	outline: 0;
}

.iexel-experience-refresh button,
.iexel-experience-switch select,
.iexel-experience-account summary,
.iexel-experience-nav a,
.iexel-experience-mobile-nav > summary,
.iexel-experience-item > a,
.iexel-experience-alert > a {
	box-sizing: border-box;
	min-height: var(--iexel-control-height, 44px);
}

.iexel-experience-form {
	display: grid;
	gap: var(--iexel-space-standard, 16px);
	min-width: 0;
}

.iexel-experience-form-grid,
.iexel-experience-workflow-grid {
	display: grid;
	gap: var(--iexel-space-standard, 16px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-width: 0;
}

.iexel-experience-field {
	color: var(--iexel-color-primary, #071d49);
	display: grid;
	font-weight: var(--iexel-weight-label, 700);
	gap: 7px;
	min-width: 0;
}

/* Restores the browser's default [hidden] behaviour, which the display:grid
   above (an author-origin rule) otherwise overrides regardless of
   specificity -- needed so a field can be conditionally hidden (e.g. the
   Staff Compliance Credential Name field for DBS) via the plain `hidden`
   attribute/property, without a new visibility mechanism. */
.iexel-experience-field[hidden] {
	display: none;
}

.iexel-experience-field.is-wide {
	grid-column: 1 / -1;
}

.iexel-experience-field input,
.iexel-experience-field select,
.iexel-experience-field textarea {
	border: 1px solid var(--iexel-color-border-strong, #98a2b3);
	border-radius: var(--iexel-radius-control, 10px);
	box-sizing: border-box;
	font: inherit;
	min-height: var(--iexel-control-height, 44px);
	padding: 10px 12px;
	width: 100%;
}

.iexel-experience-field textarea {
	min-height: 144px;
	overflow-wrap: anywhere;
	resize: vertical;
}

.iexel-experience-field small {
	color: var(--iexel-color-text-muted, #697386);
	font-weight: 500;
	line-height: var(--iexel-line-height-supporting, 1.45);
}

.iexel-experience-field.has-error {
	border-left: 4px solid var(--iexel-action-danger-bg, #b42318);
	padding-left: 10px;
}

.iexel-experience-field .iexel-experience-field-error {
	color: var(--iexel-action-danger-bg, #b42318);
	font-weight: var(--iexel-weight-heading, 800);
}

.iexel-experience-form-actions {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.iexel-experience-form-actions .iexel-experience-button,
.iexel-experience-workflow-form .iexel-experience-button {
	box-sizing: border-box;
	cursor: pointer;
	font: inherit;
	justify-content: center;
	min-height: var(--iexel-control-height, 44px);
}

.iexel-experience-workflow {
	margin-top: var(--iexel-space-standard, 16px);
}

.iexel-experience-workflow-grid > section {
	background: var(--iexel-surface-muted, #f6f7f9);
	border-radius: var(--iexel-radius-card, 16px);
	box-sizing: border-box;
	min-width: 0;
	padding: var(--iexel-space-standard, 16px);
}

.iexel-experience-workflow-grid > section:first-child {
	grid-column: 1 / -1;
}

.iexel-experience-workflow-form + .iexel-experience-workflow-form {
	margin-top: 10px;
}

@media (max-width: 520px) {
	.iexel-workspace {
		padding-inline: var(--iexel-workspace-gutter-mobile, 12px);
	}

	.iexel-experience-main {
		padding: 14px 12px 32px;
	}

	.iexel-experience-section,
	.iexel-experience-quick,
	.iexel-experience-priority {
		padding: var(--iexel-space-standard, 16px);
	}

	.iexel-experience-form-grid,
	.iexel-experience-workflow-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.iexel-experience-form-actions .iexel-experience-button,
	.iexel-experience-workflow-form .iexel-experience-button {
		width: 100%;
	}
}

/*
 * Person Avatar initials typography foundations.
 */
.iexel-person-avatar-initials {
	align-items: center;
	display: inline-flex;
	font-weight: 850;
	justify-content: center;
	letter-spacing: .02em;
	line-height: 1;
	text-align: center;
	user-select: none;
}
.iexel-person-avatar.is-hero .iexel-person-avatar-initials {
	font-size: clamp(2.2rem, 4vw, 3.2rem);
}
.iexel-person-avatar.is-card .iexel-person-avatar-initials {
	font-size: 1.45rem;
}
.iexel-person-avatar.is-squad .iexel-person-avatar-initials {
	font-size: 1.1rem;
}
.iexel-person-avatar.is-compact .iexel-person-avatar-initials {
	font-size: .85rem;
}
.iexel-person-avatar.is-timeline .iexel-person-avatar-initials {
	font-size: .8rem;
}
.iexel-person-avatar.is-inline .iexel-person-avatar-initials {
	font-size: .55rem;
}
@media (max-width: 600px) {
	.iexel-person-avatar.is-hero .iexel-person-avatar-initials {
		font-size: 2.2rem;
	}
}

/*
 * Brand mark and Coach hero mark initials typography foundations.
 */
.iexel-coach-hero-mark {
	align-items: center;
	color: var(--iexel-color-gold, #cba135);
	display: inline-flex;
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	font-weight: 850;
	justify-content: center;
	letter-spacing: .02em;
	line-height: 1;
	text-align: center;
	user-select: none;
}
.iexel-experience-brand-mark {
	align-items: center;
	display: inline-flex;
	font-size: 1.35rem;
	font-weight: 850;
	justify-content: center;
	line-height: 1;
	text-align: center;
	user-select: none;
}
@media (max-width: 600px) {
	.iexel-coach-hero-mark {
		font-size: 2.4rem;
	}
}