/*
 * Agentic AI page (/agentic-ai/) styles.
 * Loads on that page only. Shared page sections are in assets/css/theme.css.
 */

/* Where the agents sit: four stacked layers, the agent layer on light mint. */
.cm-ai-layers {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	list-style: none;
}

.cm-ai-layer {
	display: grid;
	grid-template-columns: 240px 1fr;
	align-items: center;
	gap: 6px 28px;
	padding: 22px 26px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
}

.cm-ai-layer__name {
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--navy-deep);
}

.cm-ai-layer__items {
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--text-2);
}

.cm-ai-layer--active {
	border-color: var(--wp--preset--color--mint);
	background: var(--wp--preset--color--pill);
}

.cm-ai-layer__here {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--pill-ink);
}

@media (max-width: 700px) {
	.cm-ai-layer {
		grid-template-columns: 1fr;
	}
}

/* Agent mode tags (Automated, Hybrid) and the legend that explains them. */
.cm-ai-mode {
	align-self: flex-start;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.cm-ai-mode--automated {
	background: var(--wp--preset--color--pill);
	color: var(--wp--preset--color--pill-ink);
}

.cm-ai-mode--hybrid {
	border: 1px solid var(--wp--preset--color--input-border);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy-deep);
}

.cm-ai-mode--assistive {
	border: 1px dashed var(--wp--preset--color--teal);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--teal);
}

/* Agent groups: prior authorization, care management. */
.cm-ai-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Keep cards at one column's width even when a group has only one agent. */
.cm-ai-group .cm-agents__grid {
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.cm-section .cm-ai-group__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
}

.cm-ai-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: var(--wp--preset--color--text-2);
}

.cm-ai-legend li {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Trust ladder: the last step is on light mint. */
.cm-ai-stage {
	gap: 12px;
}

.cm-ai-stage__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
}

.cm-ai-stage:last-child {
	border-color: var(--wp--preset--color--mint);
	background: var(--wp--preset--color--pill);
}

.cm-ai-stage:last-child .cm-ai-stage__label {
	color: var(--wp--preset--color--pill-ink);
}