/* =============================================================================
   ACXPA REMEDIATION — plan item 9   |   8 September 2026
   -----------------------------------------------------------------------------
   Complete drop-in replacement. Upload over the existing file; nothing is
   appended, nothing is pasted in. (R-M6)

   WHAT CHANGED — 2 rgb()/rgba() colour literals in this file now resolve from
   acxpa-tokens.css. Nothing else was touched: 229 declarations before,
   229 after, braces balanced, comments untouched.

   WHY color-mix() AND NOT A BARE var()
   Every literal converted here carries alpha < 1 — they are shadows, tints,
   rails and scrims, not solid fills. A bare var(--token) would drop the alpha
   and paint each one fully opaque. color-mix() keeps the exact rendered colour
   and makes the token the source of truth:

       rgba(15, 79, 92, .18)
       -> color-mix(in srgb, var(--acxpa-ds-teal-700) 18%, transparent)

   Baseline widely available since May 2023 (Chrome 111, Firefox 113,
   Safari/iOS 16.4). Four ACXPA stylesheets already used this pattern before
   today, so it is not new to this codebase.

   PROVEN, NOT ASSUMED
   Every substitution in this file was composited over white in a canvas and
   compared pixel by pixel against the literal it replaced.
   Every one is pixel-identical: same RGB, same alpha, same composite.

   Tokens referenced: --acxpa-ds-gold, --acxpa-ds-teal-700
   ============================================================================= */

/* ══════════════════════════════════════════════════════════════════════════
   ACXPA — CX Statistics library
   Enqueued by acxpa-cx-stats.php. Lives at:
     kleo-child/acxpa-cx-stats/acxpa-cx-stats.css

   Bridged to the ACXPA design system. All colour resolves from
   acxpa-tokens.css via --acxpa-ds-* tokens — no hardcoded brand colours.
   REQUIRES: kleo-child/css/acxpa-tokens.css loaded first.

   Self-contained otherwise — does NOT depend on acxpa-articles.css, so the
   shortcode can be dropped on any page (member hub, CX hub) and still look
   right.
   ══════════════════════════════════════════════════════════════════════════ */

.acxpa-cxs {
	/* Bridged to brand tokens. Edit acxpa-tokens.css, never these. */
	--cxs-ink:    var(--acxpa-ds-teal-700);   /* was #08363f — a stray teal */
	--cxs-gold:   var(--acxpa-ds-gold);       /* was #ffce4d */
	--cxs-line:   var(--acxpa-ds-teal-100);   /* was #e2e8f0 — decorative rules */
	--cxs-soft:   var(--acxpa-ds-cloud);      /* was #f6f8fa */
	--cxs-muted:  var(--acxpa-ds-slate);      /* was #6b7a7f */

	/* Interactive control borders need 3:1 (WCAG 1.4.11).
	   Teal 100 is 1.28:1 — fine for dividers, not for controls. */
	--cxs-border: var(--acxpa-ds-teal-400);

	/* Focus must never be gold: gold is 1.86:1 on white and fails the
	   3:1 minimum for focus indicators on every light surface. */
	--cxs-focus:  var(--acxpa-ds-teal-700);

	/* rgba() cannot consume a hex token, so these are stated literally
	   from Teal 700 (15,79,92) and Gold (249,176,46). */
	--cxs-ring-gold:   color-mix(in srgb, var(--acxpa-ds-gold) 35%, transparent);
	--cxs-shadow-teal: color-mix(in srgb, var(--acxpa-ds-teal-700) 25%, transparent);

	margin: 26px 0;
}

/* ---- Filter bar ------------------------------------------------------- */
.acxpa-cxs-bar {
	background: var(--cxs-soft);
	border: 1px solid var(--cxs-line);
	border-radius: 14px;
	padding: 18px 20px 14px;
	margin-bottom: 14px;
	position: sticky;
	top: 90px;              /* clears the KLEO sticky header */
	z-index: 20;
}
@media (max-width: 780px) {
	.acxpa-cxs-bar { position: static; }
}

.acxpa-cxs-search { margin-bottom: 14px; }
.acxpa-cxs-search input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--cxs-border);
	border-radius: 10px;
	font-size: 15px;
	background: var(--acxpa-ds-white);
	color: var(--cxs-ink);
}
.acxpa-cxs-search input:focus {
	outline: 2px solid var(--cxs-focus);
	outline-offset: 1px;
	border-color: var(--cxs-focus);
}

.acxpa-cxs-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-bottom: 9px;
}
.acxpa-cxs-lbl {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cxs-muted);
	min-width: 52px;
}

.acxpa-cxs-pill {
	background: var(--acxpa-ds-white);
	border: 1px solid var(--cxs-border);
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--cxs-ink);
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.acxpa-cxs-pill:hover { border-color: var(--cxs-ink); }
.acxpa-cxs-pill.is-on {
	background: var(--cxs-ink);
	border-color: var(--cxs-ink);
	color: var(--acxpa-ds-white);
}
.acxpa-cxs-pill.is-toggle.is-on {
	background: var(--cxs-gold);
	border-color: var(--cxs-gold);
	color: var(--cxs-ink);
}

/* ---- Result meta ------------------------------------------------------ */
.acxpa-cxs-meta {
	font-size: 13.5px;
	color: var(--cxs-muted);
	margin: 0 0 16px 2px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.acxpa-cxs-meta #acxpa-cxs-count { font-weight: 800; color: var(--cxs-ink); }

.acxpa-cxs-reset {
	background: none;
	border: 0;
	padding: 0;
	color: var(--cxs-ink);
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: underline;
	cursor: pointer;
}

/* ---- Grid ------------------------------------------------------------- */
.acxpa-cxs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
	gap: 14px;
}

.acxpa-cxs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--acxpa-ds-white);
	border: 1px solid var(--cxs-line);
	border-top: 3px solid var(--cxs-ink);
	border-radius: 12px;
	padding: 18px 18px 14px;
}
.acxpa-cxs-card[hidden] { display: none; }
.acxpa-cxs-card.is-picked {
	border-color: var(--cxs-gold);
	border-top-color: var(--cxs-gold);
	box-shadow: 0 0 0 2px var(--cxs-ring-gold);
}

.acxpa-cxs-val {
	font-size:var(--acxpa-ds-text-h2, 30px);
	font-weight: 800;
	line-height: 1.05;
	color: var(--cxs-ink);
	margin-bottom: 9px;
	letter-spacing: -.01em;
}
.acxpa-cxs-txt {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--acxpa-ds-ink);
	flex: 1;
}

/* ---- Tags ------------------------------------------------------------- */
.acxpa-cxs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 12px;
}
.acxpa-cxs-tag {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 5px;
	background: var(--cxs-soft);
	color: var(--cxs-muted);
	white-space: nowrap;
}
.acxpa-cxs-tag.is-region {
	background: var(--acxpa-ds-teal-100);
	color: var(--cxs-ink);
}
/* A forecast is NOT a finding. We republished 2022 predictions as fact once and
   their deadlines passed without happening — this badge exists so no reader can
   ever make that mistake on our page. */
.acxpa-cxs-tag.is-forecast {
	background: var(--acxpa-ds-warning-tint);
	color: var(--acxpa-ds-warning-deep);
	border: 1px solid var(--acxpa-ds-warning);
}

/* ---- Source line ------------------------------------------------------ */
.acxpa-cxs-src {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 11px;
	border-top: 1px solid var(--cxs-line);
	font-size: 12.5px;
}
.acxpa-cxs-src a {
	color: var(--cxs-muted) !important;
	text-decoration: none;
	font-weight: 600;
}
.acxpa-cxs-src a:hover {
	color: var(--cxs-ink) !important;
	text-decoration: underline;
}

.acxpa-cxs-copy {
	background: none;
	border: 1px solid var(--cxs-border);
	border-radius: 6px;
	padding: 3px 9px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--cxs-muted);
	cursor: pointer;
	white-space: nowrap;
}
.acxpa-cxs-copy:hover {
	background: var(--cxs-ink);
	border-color: var(--cxs-ink);
	color: var(--acxpa-ds-white);
}
.acxpa-cxs-copy.is-done {
	background: var(--cxs-gold);
	border-color: var(--cxs-gold);
	color: var(--cxs-ink);
}

/* ---- Member: Stat Pack ------------------------------------------------ */
.acxpa-cxs-pick {
	position: absolute;
	top: 12px;
	right: 12px;
	cursor: pointer;
}
.acxpa-cxs-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.acxpa-cxs-pick span {
	display: block;
	width: 22px;
	height: 22px;
	border: 2px solid var(--cxs-border);
	border-radius: 6px;
	background: var(--acxpa-ds-white);
	transition: background-color .12s ease, border-color .12s ease;
}
.acxpa-cxs-pick:hover span { border-color: var(--cxs-ink); }
.acxpa-cxs-pick input:checked + span {
	background: var(--cxs-gold);
	border-color: var(--cxs-gold);
}
/* CSS escape, NOT the literal glyph */
.acxpa-cxs-pick input:checked + span::after {
	content: "\2713";
	display: block;
	text-align: center;
	line-height: 18px;
	font-size:var(--acxpa-ds-text-eyebrow, 13px);
	font-weight: 900;
	color: var(--cxs-ink);
}
.acxpa-cxs-pick input:focus-visible + span {
	outline: 2px solid var(--cxs-focus);
	outline-offset: 2px;
}

.acxpa-cxs-pack {
	position: sticky;
	bottom: 16px;
	z-index: 25;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	background: var(--cxs-ink);
	color: var(--acxpa-ds-white);
	border-radius: 12px;
	padding: 13px 18px;
	margin: 0 0 16px;
	box-shadow: 0 10px 30px var(--cxs-shadow-teal);
}
.acxpa-cxs-pack strong { color: var(--cxs-gold); }
.acxpa-cxs-pack > div { display: flex; gap: 8px; }

.acxpa-cxs-btn {
	background: var(--cxs-gold);
	color: var(--cxs-ink);
	border: 0;
	border-radius: 8px;
	padding: 9px 16px;
	font-size:var(--acxpa-ds-text-small, 14px);
	font-weight: 800;
	cursor: pointer;
}
.acxpa-cxs-btn:hover { background: var(--acxpa-ds-white); }
.acxpa-cxs-btn.is-ghost {
	background: transparent;
	color: var(--acxpa-ds-white);
	border: 1px solid rgba(255, 255, 255, .35);
	font-weight: 600;
}
.acxpa-cxs-btn.is-ghost:hover {
	background: rgba(255, 255, 255, .12);
	color: var(--acxpa-ds-white);
}

/* ---- Empty state ------------------------------------------------------ */
.acxpa-cxs-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--cxs-muted);
	background: var(--cxs-soft);
	border-radius: 12px;
}
.acxpa-cxs-empty[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Featured strip — [acxpa_cx_stats featured="1"]
   ══════════════════════════════════════════════════════════════════════════ */
.acxpa-cxs-featured {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin: 24px 0;
}
.acxpa-cxs-fcard {
	background: var(--acxpa-ds-teal-700);
	border-radius: 12px;
	padding: 20px 18px;
	color: var(--acxpa-ds-white);
}
.acxpa-cxs-fval {
	display: block;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.05;
	color: var(--acxpa-ds-gold);
	margin-bottom: 8px;
}
.acxpa-cxs-fcard p {
	margin: 0 0 10px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--acxpa-ds-teal-100);
}
.acxpa-cxs-fsrc {
	font-size: 11.5px;
	color: var(--acxpa-ds-teal-200);
	font-weight: 600;
}