/**
 * Home page: the category explorer (includes/class-home-explorer.php).
 * Built from the theme's own colour, type and radius tokens, so it follows
 * the light and dark themes. Logical properties only, so it flips for Urdu.
 *
 * The brand colour is read as rgb(var(--msm-brand-rgb)) rather than
 * var(--msm-brand): the theme's dark mode changes only the RGB triplet,
 * and --msm-brand, worked out once on :root, would stay the light teal.
 */

.msm-cx-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 32px;
	margin-bottom: 28px;
}

.msm-cx-head > div {
	max-width: 720px;
}

.msm-cx-kicker {
	margin: 0 0 10px;
	color: var(--text-muted, #78716c);
	font-family: var(--msm-font-mono, ui-monospace, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.msm-cx h2 {
	margin: 0;
	font-size: clamp(1.55rem, 3.2vw, 2.25rem);
	line-height: 1.14;
}

.msm-cx-text {
	margin: 10px 0 0;
	color: var(--text-secondary, #57534e);
}

.msm-cx .msm-cx-all {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	box-sizing: border-box;
	padding: 0 20px;
	border: 1px solid rgb(var(--msm-brand-rgb, 13, 124, 109));
	border-radius: 23px;
	color: rgb(var(--msm-brand-rgb, 13, 124, 109));
	font-family: var(--msm-font-display, system-ui, sans-serif);
	font-size: 0.94rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease;
}

.msm-cx .msm-cx-all:hover {
	background: rgba(var(--msm-brand-rgb, 13, 124, 109), 0.08);
	color: var(--msm-brand-hover, #0b6357);
}

[dir="rtl"] .msm-cx-arrow {
	display: inline-block;
	transform: scaleX(-1);
}

.msm-cx-body {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

/* The categories. */
.msm-cx-tabs {
	position: relative;
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.msm-cx-tab {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	box-sizing: border-box;
	padding-block: 8px;
	padding-inline: 8px 14px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: transparent;
	color: var(--text-primary, #1c1917);
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.msm-cx-tab:hover {
	background: var(--bg-surface, #ffffff);
}

.msm-cx-tab[aria-selected="true"] {
	border-color: rgb(var(--msm-brand-rgb, 13, 124, 109));
	background: var(--bg-surface, #ffffff);
	box-shadow: 0 6px 18px rgba(var(--msm-brand-rgb, 13, 124, 109), 0.12);
}

.msm-cx-tab:focus-visible,
.msm-cx-tools a:focus-visible,
.msm-cx-more:focus-visible,
.msm-cx-phead a:focus-visible {
	outline: 2px solid rgb(var(--msm-brand-rgb, 13, 124, 109));
	outline-offset: 2px;
}

.msm-cx-ic {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(var(--msm-brand-rgb, 13, 124, 109), 0.08);
	color: rgb(var(--msm-brand-rgb, 13, 124, 109));
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.msm-cx-tab[aria-selected="true"] .msm-cx-ic {
	background: rgb(var(--msm-brand-rgb, 13, 124, 109));
	color: var(--msm-on-brand, #ffffff);
}

.msm-cx-name {
	flex: 1;
	min-width: 0;
	font-family: var(--msm-font-display, system-ui, sans-serif);
	font-size: 0.97rem;
	font-weight: 600;
}

.msm-cx-count {
	color: var(--text-muted, #78716c);
	font-family: var(--msm-font-mono, ui-monospace, monospace);
	font-size: 0.75rem;
}

.msm-cx-tab[aria-selected="true"] .msm-cx-count {
	color: rgb(var(--msm-brand-rgb, 13, 124, 109));
}

/* The chosen category's tools. */
.msm-cx-panel {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	padding: 28px;
	border: 1px solid var(--card-border, #e7e5e4);
	border-radius: 20px;
	background: var(--bg-surface, #ffffff);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.msm-cx-panel[hidden] {
	display: none;
}

.msm-cx-phead {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.msm-cx-ic-lg {
	width: 52px;
	height: 52px;
	border-radius: 14px;
}

.msm-cx-pcopy {
	flex: 1;
	min-width: 0;
}

.msm-cx-phead h3 {
	margin: 0;
	font-size: 1.45rem;
	line-height: 1.2;
}

.msm-cx-phead h3 a {
	color: inherit;
	text-decoration: none;
}

.msm-cx-phead h3 a:hover {
	color: rgb(var(--msm-brand-rgb, 13, 124, 109));
}

.msm-cx-phead p {
	margin: 6px 0 0;
	color: var(--text-secondary, #57534e);
	font-size: 0.95rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.msm-cx-badge {
	flex: none;
	padding: 5px 12px;
	border-radius: 99px;
	background: var(--bg-surface-alt, #f5f4f1);
	color: var(--text-secondary, #57534e);
	font-family: var(--msm-font-mono, ui-monospace, monospace);
	font-size: 0.78rem;
	white-space: nowrap;
}

.msm-cx-tools {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.msm-cx-tools li {
	display: flex;
	min-width: 0;
}

.msm-cx-tools a {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-sizing: border-box;
	padding: 16px;
	border: 1px solid var(--card-border, #e7e5e4);
	border-radius: 14px;
	background: var(--bg-body, #faf9f7);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.msm-cx-tools a:hover {
	border-color: rgba(var(--msm-brand-rgb, 13, 124, 109), 0.45);
}

.msm-cx-tname {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	color: var(--text-primary, #1c1917);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
}

.msm-cx-new {
	padding: 1px 7px;
	border-radius: 99px;
	background: rgb(var(--msm-brand-rgb, 13, 124, 109));
	color: var(--msm-on-brand, #ffffff);
	font-size: 0.69rem;
	font-weight: 700;
	line-height: 1.5;
}

.msm-cx-tdesc {
	color: var(--text-secondary, #57534e);
	font-size: 0.82rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.msm-cx .msm-cx-more {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgb(var(--msm-brand-rgb, 13, 124, 109));
	font-weight: 600;
	text-decoration: none;
}

.msm-cx .msm-cx-more:hover {
	color: var(--msm-brand-hover, #0b6357);
}

/* A phone: the categories become a row that scrolls sideways, and the
   panel lists its first five tools, one per line. */
@media (max-width: 860px) {
	.msm-cx-body {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.msm-cx-tabs {
		flex: none;
		flex-direction: row;
		gap: 8px;
		overflow-x: auto;
		padding-block: 2px 8px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.msm-cx-tabs::-webkit-scrollbar {
		display: none;
	}

	.msm-cx-tab {
		flex: none;
		width: auto;
		min-height: 44px;
		gap: 8px;
		padding-block: 0;
		padding-inline: 8px 14px;
		border-color: var(--card-border, #e7e5e4);
		border-radius: 22px;
		background: var(--bg-surface, #ffffff);
		white-space: nowrap;
	}

	.msm-cx-tab[aria-selected="true"] {
		background: rgb(var(--msm-brand-rgb, 13, 124, 109));
		color: var(--msm-on-brand, #ffffff);
		box-shadow: none;
	}

	.msm-cx-tab .msm-cx-ic {
		width: 28px;
		height: 28px;
		border-radius: 14px;
	}

	.msm-cx-tab[aria-selected="true"] .msm-cx-ic {
		background: rgba(255, 255, 255, 0.2);
		color: inherit;
	}

	.msm-cx-tab[aria-selected="true"] .msm-cx-count {
		color: inherit;
	}

	.msm-cx-name {
		flex: none;
		font-size: 0.9rem;
	}

	.msm-cx-panel {
		padding: 18px;
		gap: 12px;
		border-radius: 18px;
	}

	.msm-cx-ic-lg {
		display: none;
	}

	.msm-cx-phead {
		gap: 12px;
	}

	.msm-cx-phead h3 {
		font-size: 1.2rem;
	}

	.msm-cx-phead p {
		font-size: 0.9rem;
	}

	.msm-cx-badge {
		padding: 3px 0 0;
		background: none;
		color: var(--text-muted, #78716c);
	}

	.msm-cx-tools {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.msm-cx-tools li:nth-child(n+6) {
		display: none;
	}

	.msm-cx-tools a {
		min-height: 56px;
		padding: 10px 0;
		border: 0;
		border-top: 1px solid var(--card-border, #e7e5e4);
		border-radius: 0;
		background: none;
	}

	.msm-cx .msm-cx-more {
		align-self: stretch;
		justify-content: center;
		min-height: 46px;
		border-radius: 23px;
		background: rgba(var(--msm-brand-rgb, 13, 124, 109), 0.08);
	}

	.msm-cx .msm-cx-all {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msm-cx-tab,
	.msm-cx-tools a,
	.msm-cx .msm-cx-all {
		transition: none;
	}
}