/**
 * MX Model Portfolios — frontend.
 * Scoped under .mx-mp. Override the tokens below from the theme to rebrand.
 */

.mx-mp {
	--mx-mp-accent: #0e7a5f;       /* deep emerald */
	--mx-mp-accent-ink: #0a5a46;
	--mx-mp-ink: #14181d;
	--mx-mp-muted: #5c646e;
	--mx-mp-surface: #ffffff;
	--mx-mp-bg: #f7f8f7;
	--mx-mp-border: #e3e7e4;
	--mx-mp-up: #0e7a5f;
	--mx-mp-down: #b23b31;

	/* sleeve palette (matches detail.js) */
	--mx-mp-c-equity: #0e7a5f;
	--mx-mp-c-intl: #20618c;
	--mx-mp-c-sukuk: #c29b40;
	--mx-mp-c-gold: #d08a2e;
	--mx-mp-c-cash: #8a8f98;
	--mx-mp-c-hsa: #6b4fa0;

	color: var(--mx-mp-ink);
	line-height: 1.55;
}

.mx-mp .mx-mp-num {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}
.mx-mp .mx-mp-up { color: var(--mx-mp-up); }
.mx-mp .mx-mp-down { color: var(--mx-mp-down); }
.mx-mp .mx-mp-muted { color: var(--mx-mp-muted); }
.mx-mp .mx-mp-small { font-size: 0.82rem; }
.mx-mp .mx-mp-right { text-align: right; }
.mx-mp .mx-mp-empty { color: var(--mx-mp-muted); padding: 2rem 0; text-align: center; }

/* ---- Chips ---- */
.mx-mp-chip {
	display: inline-block;
	padding: 0.15rem 0.65rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: capitalize;
	background: var(--mx-mp-bg);
	border: 1px solid var(--mx-mp-border);
	color: var(--mx-mp-muted);
}
.mx-mp-chip-conservative { background: #eef4f8; border-color: #d4e2ec; color: #20618c; }
.mx-mp-chip-balanced { background: #f4f1e8; border-color: #e6dfc9; color: #8a7423; }
.mx-mp-chip-growth { background: #e9f4f0; border-color: #cfe6dd; color: var(--mx-mp-accent-ink); }
.mx-mp-chip-aggressive { background: #f6ece9; border-color: #ecd6cf; color: #a34a2a; }

/* ---- Gallery ---- */
.mx-mp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.25rem;
}
.mx-mp-card {
	display: block;
	background: var(--mx-mp-surface);
	border: 1px solid var(--mx-mp-border);
	border-radius: 14px;
	padding: 1.25rem 1.25rem 1rem;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.mx-mp-card:hover,
.mx-mp-card:focus-visible {
	border-color: var(--mx-mp-accent);
	box-shadow: 0 6px 24px rgba(14, 122, 95, 0.08);
	transform: translateY(-2px);
}
.mx-mp-card-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0.35rem;
}
.mx-mp-card-name { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.mx-mp-card-excerpt {
	margin: 0 0 0.9rem;
	font-size: 0.86rem;
	color: var(--mx-mp-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Allocation spine — the signature element */
.mx-mp-spine {
	display: flex;
	height: 10px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--mx-mp-bg);
	margin: 0.35rem 0 0.6rem;
}
.mx-mp-spine-seg { display: block; height: 100%; }
.mx-mp-spine-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	font-size: 0.78rem;
	color: var(--mx-mp-muted);
	margin-bottom: 0.9rem;
}
.mx-mp-legend-item i,
.mx-mp-alloc-legend i {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 3px;
	margin-right: 0.35rem;
}
.mx-mp-legend-item b { color: var(--mx-mp-ink); font-weight: 600; margin-left: 0.25rem; }

.mx-mp-card-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	margin: 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--mx-mp-border);
}
.mx-mp-card-stats dt,
.mx-mp-stats-row dt {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--mx-mp-muted);
	margin: 0;
}
.mx-mp-card-stats dd,
.mx-mp-stats-row dd {
	margin: 0.1rem 0 0;
	font-size: 0.98rem;
	font-weight: 600;
}

/* ---- Single: hero ---- */
.mx-mp-single {
	max-width: 960px;
	margin: 0 auto;
	padding: 2rem 1.25rem 3rem;
}
.mx-mp-hero {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
}
.mx-mp-eyebrow {
	margin: 0 0 0.25rem;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--mx-mp-accent-ink);
}
.mx-mp-title { margin: 0 0 0.5rem; line-height: 1.15; }
.mx-mp-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.mx-mp-lede { margin: 0.5rem 0 0; color: var(--mx-mp-muted); max-width: 46ch; }
.mx-mp-hero-actions { display: flex; flex-direction: column; gap: 0.5rem; min-width: 240px; }

/* ---- Buttons ---- */
.mx-mp-btn {
	appearance: none;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 0.7rem 1.3rem;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.mx-mp-btn-primary { background: var(--mx-mp-accent); color: #fff; }
.mx-mp-btn-primary:hover { background: var(--mx-mp-accent-ink); }
.mx-mp-btn-primary:disabled { opacity: 0.6; cursor: default; }
.mx-mp-btn-ghost {
	background: transparent;
	border-color: var(--mx-mp-border);
	color: var(--mx-mp-ink);
}
.mx-mp-btn-ghost:hover { border-color: var(--mx-mp-accent); color: var(--mx-mp-accent-ink); }
.mx-mp-btn-block { display: block; width: 100%; margin-top: 0.9rem; }
.mx-mp-btn:focus-visible {
	outline: 2px solid var(--mx-mp-accent);
	outline-offset: 2px;
}

/* ---- Single: detail panels ---- */
.mx-mp-detail-grid {
	display: grid;
	grid-template-columns: minmax(280px, 2fr) 3fr;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}
.mx-mp-panel,
.mx-mp-section {
	background: var(--mx-mp-surface);
	border: 1px solid var(--mx-mp-border);
	border-radius: 14px;
	padding: 1.4rem;
	margin-bottom: 1.25rem;
}
.mx-mp-panel { margin-bottom: 0; }
.mx-mp-panel h2,
.mx-mp-section h2,
.mx-mp-disclaimer h2 {
	margin: 0 0 1rem;
	font-size: 1.02rem;
	letter-spacing: 0.01em;
}

.mx-mp-alloc { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.mx-mp-donut { width: 160px; height: 160px; flex: 0 0 auto; }
.mx-mp-alloc-legend { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.mx-mp-alloc-legend li { display: flex; align-items: center; margin-bottom: 0.4rem; }
.mx-mp-alloc-legend b { margin-left: auto; padding-left: 1.25rem; font-weight: 600; }

.mx-mp-chart-wrap { margin-bottom: 1rem; }
.mx-mp-chart-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.85rem;
	color: var(--mx-mp-muted);
	margin-bottom: 0.4rem;
}
.mx-mp-chart-head b { font-size: 1.15rem; color: var(--mx-mp-ink); }
.mx-mp-chart { width: 100%; height: 180px; display: block; background: linear-gradient(to top, rgba(14, 122, 95, 0.05), transparent 55%); border-radius: 8px; }
.mx-mp-chart-range {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: var(--mx-mp-muted);
	margin-top: 0.25rem;
}
.mx-mp-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--mx-mp-border);
}

/* ---- Tables ---- */
.mx-mp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.mx-mp-table th {
	text-align: left;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--mx-mp-muted);
	font-weight: 600;
	padding: 0.45rem 0.6rem;
	border-bottom: 1px solid var(--mx-mp-border);
}
.mx-mp-table th.mx-mp-right { text-align: right; }
.mx-mp-table td {
	padding: 0.55rem 0.6rem;
	border-bottom: 1px solid var(--mx-mp-border);
}
.mx-mp-table tr:last-child td { border-bottom: 0; }
.mx-mp-ticker { font-weight: 600; }
.mx-mp-skipped td { color: var(--mx-mp-muted); font-size: 0.85rem; }

.mx-mp-changelog { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.mx-mp-changelog li { padding: 0.4rem 0; border-bottom: 1px solid var(--mx-mp-border); }
.mx-mp-changelog li:last-child { border-bottom: 0; }

/* ---- Disclaimer ---- */
.mx-mp-disclaimer {
	background: var(--mx-mp-bg);
	border: 1px solid var(--mx-mp-border);
	border-radius: 14px;
	padding: 1.4rem;
	font-size: 0.88rem;
	color: var(--mx-mp-muted);
}
.mx-mp-disclaimer p { margin: 0; }

/* ---- Modal ---- */
.mx-mp-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 24, 29, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 1rem;
}
.mx-mp-modal {
	position: relative;
	background: var(--mx-mp-surface, #fff);
	border-radius: 16px;
	max-width: 560px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 1.75rem;
	color: var(--mx-mp-ink, #14181d);
}
.mx-mp-no-scroll { overflow: hidden; }
.mx-mp-modal-close {
	position: absolute;
	top: 0.9rem;
	right: 1rem;
	appearance: none;
	background: none;
	border: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: #5c646e;
	cursor: pointer;
}
.mx-mp-modal-title { margin: 0 0 1.1rem; font-size: 1.15rem; padding-right: 1.5rem; }
.mx-mp-field { display: block; margin-bottom: 1rem; }
.mx-mp-field span {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: #5c646e;
	margin-bottom: 0.3rem;
}
.mx-mp-field select,
.mx-mp-amount-wrap input {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid #e3e7e4;
	border-radius: 10px;
	font-size: 1rem;
}
.mx-mp-amount-wrap { position: relative; }
.mx-mp-amount-symbol {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: #5c646e;
}
.mx-mp-amount-wrap input { padding-left: 1.6rem; }
.mx-mp-note {
	background: #f7f8f7;
	border: 1px solid #e3e7e4;
	border-radius: 10px;
	padding: 0.75rem 0.9rem;
	font-size: 0.86rem;
	margin: 0.9rem 0 0;
}
.mx-mp-ack {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-size: 0.85rem;
	margin-top: 1rem;
}
.mx-mp-ack input { margin-top: 0.2rem; }
.mx-mp-error {
	color: #b23b31;
	font-size: 0.87rem;
	margin: 0.75rem 0 0;
}

/* ---- Responsive & a11y ---- */
@media (max-width: 720px) {
	.mx-mp-detail-grid { grid-template-columns: 1fr; }
	.mx-mp-hero { align-items: flex-start; }
	.mx-mp-hero-actions { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.mx-mp-card { transition: none; }
	.mx-mp-card:hover { transform: none; }
}