/**
 * ACXPA Agent Performance Matrix — the guided demo's own chrome.
 *
 * Loads AFTER apm-results.css and adds only what the demo page has and the
 * results page does not: the hero, the four numbered steps, the read-only
 * scorecard cards, the scored-call sheet, and the closing call to action.
 *
 * Everything from the roster down is styled by apm-results.css, untouched. If a
 * rule in here starts restyling a panel, a chart or a table, that is the demo
 * forking the product's appearance and it belongs in apm-results.css instead.
 *
 * Deploy: APM folder, assets/.
 *
 * @package ACXPA\AgentPerformanceMatrix
 * @version 2.2.0
 */

.apm-demo {
	--step: #143C3B;
}

/* ---------------------------------------------------------------------------
 * HERO
 * A demo has to say what it is before it shows anything, and it gets one screen
 * to do it. Dark enough to read as a masthead, light enough to read — the
 * control shell at #0F2E2D was too dark to scan and this is the same lesson.
 * ------------------------------------------------------------------------- */
.apm-demo-hero {
	background: linear-gradient(160deg, #1A4A47 0%, #143C3B 100%);
	color: #fff;
	border-radius: 14px;
	padding: 34px 34px 28px;
	margin: 0 0 30px;
}

.apm-demo-hero .apm-eyebrow {
	color: #E2C878;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.apm-demo-hero h1 {
	color: #fff;
	font-size: 34px;
	line-height: 1.15;
	margin: 0 0 14px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.apm-demo-lede {
	color: rgba(255, 255, 255, .88);
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 22px;
}

/* The four steps, as a table of contents you can click. On a phone they stack
 * and stay in order, which is the whole point of numbering them. */
.apm-demo-nav {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.apm-demo-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 9px;
	padding: 11px 13px;
	color: #fff;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	transition: background .15s, border-color .15s;
}

.apm-demo-nav a:hover,
.apm-demo-nav a:focus {
	background: rgba(255, 255, 255, .17);
	border-color: rgba(226, 200, 120, .6);
	color: #fff;
	text-decoration: none;
}

.apm-demo-nav b {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--gold, #C4890F);
	color: #16302E;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * STEPS
 * ------------------------------------------------------------------------- */
.apm-demo-step {
	margin: 0 0 44px;
	scroll-margin-top: 90px;
}

.apm-demo-steph {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0 0 18px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--line, #E8E0D2);
}

.apm-demo-num {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--step);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 17px;
	font-weight: 700;
}

.apm-demo-steph h2 {
	margin: 2px 0 6px;
	font-size: 23px;
	line-height: 1.2;
	color: var(--ink, #143C3B);
	font-weight: 700;
}

.apm-demo-steph p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--inks, #51635F);
}

/* ---------------------------------------------------------------------------
 * STEP 1 — the scorecard, as three cards
 * ------------------------------------------------------------------------- */
.apm-demo-cards {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr;
	gap: 16px;
	align-items: start;
}

.apm-demo-cards .apm-panel {
	margin: 0;
}

/* The three headings must line up. They are in separate grid ITEMS, so nothing
 * equalises them for free — and the hints are different lengths, so one wrapped
 * to two lines and the other two did not, leaving the card titles at three
 * different heights across a row that reads as one thing.
 *
 * min-height sized to two lines of hint, with the row centred in it: whichever
 * hints wrap, all three headers are the same height. */
.apm-demo-cards .apm-ph {
	min-height: 62px;
	align-items: center;
}

.apm-demo-cards .apm-phhint {
	align-self: center;
}

.apm-demo-blockhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 14px 0 8px;
	font-size: 13px;
}

.apm-demo-blockhead:first-child {
	margin-top: 0;
}

.apm-demo-blockhead b {
	color: var(--ink, #143C3B);
	font-weight: 700;
}

.apm-demo-blockhead span {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--inks, #51635F);
	white-space: nowrap;
}

/* A weighted list: name, weight on the right, what it is made of underneath. */
.apm-demo-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.apm-demo-list li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 10px;
	padding: 9px 0;
	border-top: 1px solid var(--line, #E8E0D2);
}

.apm-demo-list li:first-child {
	border-top: 0;
}

.apm-demo-list .nm {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink, #143C3B);
	line-height: 1.35;
}

.apm-demo-list .wt {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--ink, #143C3B);
	text-align: right;
	white-space: nowrap;
}

.apm-demo-list .sub {
	grid-column: 1 / -1;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--inks, #51635F);
}

/* Compliance items carry a severity, not a weight. */
.apm-demo-list--comp li {
	grid-template-columns: 1fr auto;
	align-items: center;
}

.apm-demo-list--comp .sev {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

.apm-demo-list--comp .maj .sev {
	background: rgba(178, 58, 72, .11);
	color: #8E2C38;
}

.apm-demo-list--comp .min .sev {
	background: rgba(184, 144, 48, .15);
	color: #7A5E14;
}

.apm-demo-foot {
	margin: 14px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--line, #E8E0D2);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--inks, #51635F);
}

/* ---------------------------------------------------------------------------
 * STEP 2 — one scored call
 * ------------------------------------------------------------------------- */
.apm-demo-readonly {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--inks, #51635F);
	background: rgba(20, 60, 59, .07);
	border: 1px solid var(--line, #E8E0D2);
	border-radius: 999px;
	padding: 3px 10px;
	white-space: nowrap;
}

.apm-demo-scoregrid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 26px;
	align-items: start;
}

.apm-demo-h3 {
	margin: 0 0 10px;
	font-size: 12px;
	font-family: var(--mono);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--inks, #51635F);
}

/* Nineteen elements in one column ran the left side to twice the height of the
 * right and left a pane of white beside the compliance list. Two columns of
 * competencies bring the two halves out roughly level. */
.apm-demo-comps {
	columns: 2;
	column-gap: 26px;
}

.apm-demo-comp {
	break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 14px;
}

/* A second heading in the same column needs air above it; without it "What this
 * call scored" sat flush against the last compliance row. */
.apm-demo-h3 + * + .apm-demo-h3,
* + .apm-demo-h3 {
	margin-top: 22px;
}

.apm-demo-scoregrid > div > .apm-demo-h3:first-child {
	margin-top: 0;
}

.apm-demo-compname {
	margin: 0 0 5px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink, #143C3B);
}

/* The marks themselves. A tick and a cross, with the colour carrying the same
 * meaning it carries everywhere else on this tool: red is a major breach, gold
 * a minor one, and a failed conversation element is neither — it is a coaching
 * point, so it is grey-red and does not shout. */
.apm-demo-marks {
	list-style: none;
	margin: 0;
	padding: 0;
}

.apm-demo-marks li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 5px 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--ink, #143C3B);
}

.apm-demo-marks .mk {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	margin-top: 1px;
}

.apm-demo-marks .pass .mk {
	background: rgba(90, 143, 58, .14);
	color: #41702A;
}

.apm-demo-marks .fail .mk {
	background: rgba(178, 58, 72, .1);
	color: #A0454F;
}

.apm-demo-marks .fail {
	color: var(--inks, #51635F);
}

.apm-demo-marks--comp li {
	align-items: center;
	padding: 7px 0;
	border-top: 1px solid var(--line, #E8E0D2);
}

.apm-demo-marks--comp li:first-child {
	border-top: 0;
}

.apm-demo-marks .fail-maj .mk {
	background: #b23a48;
	color: #fff;
}

.apm-demo-marks .fail-min .mk {
	background: #B89030;
	color: #fff;
}

.apm-demo-marks .bx {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

.apm-demo-marks .fail-maj .bx {
	background: rgba(178, 58, 72, .12);
	color: #8E2C38;
}

.apm-demo-marks .fail-min .bx {
	background: rgba(184, 144, 48, .17);
	color: #7A5E14;
}

.apm-demo-callscore {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 0 0 6px;
}

/* ---------------------------------------------------------------------------
 * STEP 3 — the live panels
 * The picker sits on its own light bar. It is two dropdowns, not a control
 * shell: there is nothing else to choose on this page.
 * ------------------------------------------------------------------------- */
.apm-demo-pick {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background: #F6F2E9;
	border: 1px solid var(--line, #E8E0D2);
	border-radius: 11px;
	padding: 12px 16px;
	margin: 0 0 16px;
}

.apm-demo-pick .apm-ctl-lab {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--inks, #51635F);
}

.apm-demo-pick .apm-ctl-spacer {
	flex: 1;
}

.apm-demo-period {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--inks, #51635F);
	white-space: nowrap;
}

/* The demo's selects sit on a LIGHT bar, so the shell's white-on-dark treatment
 * would be invisible. Same defensive approach though — appearance:none plus an
 * inline chevron, because a parent theme that strips the arrow and leaves a
 * bare box is the single most common thing a theme does to a select. */
.acxpa-apm-shell .apm-demo-pick select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2351635F' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 11px center !important;
	background-size: 12px 8px !important;
	border: 1px solid #D7CDBA !important;
	border-radius: 8px !important;
	color: var(--ink, #143C3B) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	height: auto !important;
	padding: 9px 34px 9px 12px !important;
	box-shadow: none !important;
	max-width: 100%;
}

.acxpa-apm-shell .apm-demo-pick select:focus {
	outline: 2px solid rgba(196, 137, 15, .5);
	outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
 * CTA
 * ------------------------------------------------------------------------- */
.apm-demo-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	background: linear-gradient(160deg, #1A4A47 0%, #143C3B 100%);
	border-radius: 14px;
	padding: 28px 32px;
	margin: 8px 0 40px;
}

.apm-demo-cta h2 {
	color: #fff;
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
}

.apm-demo-cta p {
	color: rgba(255, 255, 255, .86);
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
}

.apm-demo-cta .apm-btn {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.apm-demo-cards {
		grid-template-columns: 1fr 1fr;
	}

	.apm-demo-cards .apm-panel:first-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 860px) {
	.apm-demo-hero {
		padding: 26px 20px 22px;
	}

	.apm-demo-hero h1 {
		font-size: 26px;
	}

	.apm-demo-nav {
		grid-template-columns: 1fr 1fr;
	}

	.apm-demo-cards,
	.apm-demo-scoregrid {
		grid-template-columns: 1fr;
	}

	.apm-demo-steph {
		gap: 12px;
	}

	.apm-demo-num {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}

	.apm-demo-steph h2 {
		font-size: 19px;
	}
}

@media (max-width: 560px) {
	.apm-demo-nav {
		grid-template-columns: 1fr;
	}

	.apm-demo-callscore {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * SPLIT SCORECARD — saying who marked what
 * A block heading now carries the assessor, because the whole point of the
 * split is that two different people mark two different artefacts and neither
 * sees the other's work. Without the attribution it reads as one long form.
 * ------------------------------------------------------------------------- */
.apm-demo-who {
	display: block;
	margin-top: 4px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--inks, #51635F);
}

.apm-demo-twinref {
	margin: 0 0 8px;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--inks, #51635F);
}

/* Three tiles when the scorecard is split, two when it is not. */
.apm-demo-callscore {
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* ---------------------------------------------------------------------------
 * NARROW WIDTHS
 * Measured at 420px: the two picker selects sat side by side and pushed the
 * page 90px wider than the screen, and the four sort buttons did the same in
 * the roster header. Both are rows of controls that have no business staying on
 * one line when there is no line to stay on.
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.apm-demo-pick {
		align-items: stretch;
	}

	.apm-demo-pick .apm-ctl-pair {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: 100%;
		min-width: 0;
	}

	.acxpa-apm-shell .apm-demo-pick select {
		flex: 1 1 100%;
		min-width: 0;
	}

	.apm-demo-pick .apm-ctl-spacer {
		display: none;
	}
}

/* A competency's weight beside its name in the scored sample — the custom block
 * holds several, weighted against each other, and a flat element list hid that. */
.apm-demo-compname .wt{float:right;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--inks);}
/* The right column's competencies stack; only the left column is two-up. */
.apm-demo-scoregrid > div:last-child .apm-demo-comp{margin-bottom:12px;}