/*
 * Real Results widget: tabbed performance boards. Loads on top of shell.css,
 * which owns the section panel, the header and the header button.
 *
 * The section reads dark by default, because this board is a bright object and
 * it needs something to sit on. Those are plain defaults on .mrr — the shared
 * Section and Header controls carry an extra class and so still win.
 */

.mrr {
	--mrr-tabs-gap: 10px;
	--mrr-tabs-space: 26px;
	--mrr-tab-radius: 999px;

	--mrr-board-pad: 26px;
	--mrr-board-radius: 22px;
	--mrr-board-head-space: 22px;

	--mrr-stat-cols: 4;
	--mrr-stat-gap: 16px;
	--mrr-stat-pad: 18px;
	--mrr-stat-radius: 14px;
	--mrr-stat-label-space: 8px;
	--mrr-stat-value-space: 8px;
	--mrr-stats-space: 24px;

	--mrr-up: #16a34a;
	--mrr-down: #dc2626;
	--mrr-flat: #64748b;

	--mrr-chart-h: 260px;
	--mrr-chart-pad: 18px;
	--mrr-chart-radius: 14px;
	--mrr-line-a: #143a5e;
	--mrr-line-b: #f59e0b;
	--mrr-line-w: 3px;
	--mrr-grid: rgba(15, 23, 42, 0.08);
	--mrr-legend-space: 14px;

	--mrr-collage-cols: 3;
	--mrr-collage-gap: 12px;
	--mrr-collage-h: 150px;
	--mrr-collage-radius: 12px;
	--mrr-collage-fit: cover;

	background-color: #0b2138;
}

/* Dark-section defaults for the shared header. */
.mrr .msw__eyebrow {
	color: #f59e0b;
}

.mrr .msw__title {
	color: #ffffff;
}

.mrr .msw__desc {
	color: rgba(255, 255, 255, 0.72);
}

.mrr__note {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	line-height: 1.5;
}

/* -------------------------------------------------------------------- tabs */

.mrr__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mrr-tabs-gap);
	margin-bottom: var(--mrr-tabs-space);
}

.mrr__tab {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--mrr-tab-radius);
	background-color: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.78);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.mrr__tab:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

.mrr__tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.mrr__tab[aria-selected="true"] {
	border-color: #ffffff;
	background-color: #ffffff;
	color: #0b2138;
}

.mrr__tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.mrr__tab-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/*
 * Panels are hidden with [hidden] rather than a class, so the markup is still
 * correct if the script never runs — the first panel is the one left visible.
 */
.mrr__panel[hidden] {
	display: none;
}

/* ------------------------------------------------------------------- board */

.mrr-board {
	padding: var(--mrr-board-pad);
	border-radius: var(--mrr-board-radius);
	background-color: #ffffff;
	box-shadow: 0 20px 50px rgba(3, 18, 33, 0.18);
}

.mrr-board__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: var(--mrr-board-head-space);
}

.mrr-board__title {
	margin: 0;
	color: #0d2137;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.mrr-board__badge {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	color: #475569;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
}

/* ------------------------------------------------------------------- stats */

.mrr-board__stats {
	display: grid;
	grid-template-columns: repeat(var(--mrr-stat-cols), minmax(0, 1fr));
	gap: var(--mrr-stat-gap);
	margin-bottom: var(--mrr-stats-space);
}

.mrr-stat {
	min-width: 0;
	padding: var(--mrr-stat-pad);
	border: 1px solid #eef2f8;
	border-radius: var(--mrr-stat-radius);
	background-color: #f5f8fc;
}

.mrr-stat__label {
	margin: 0 0 var(--mrr-stat-label-space);
	color: #64748b;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
}

.mrr-stat__value {
	margin: 0 0 var(--mrr-stat-value-space);
	color: #0d2137;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.mrr-stat__delta {
	margin: 0;
	color: var(--mrr-flat);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
}

.mrr-stat__delta--up {
	color: var(--mrr-up);
}

.mrr-stat__delta--down {
	color: var(--mrr-down);
}

/* ------------------------------------------------------------------- chart */

.mrr-chart {
	padding: var(--mrr-chart-pad);
	border-radius: var(--mrr-chart-radius);
	background-color: #f5f8fc;
}

.mrr-chart__plot {
	display: block;
	width: 100%;
	height: var(--mrr-chart-h);
}

/*
 * preserveAspectRatio="none" lets the plot fill whatever box it is given;
 * non-scaling-stroke then keeps the lines an even width instead of stretching
 * them with the geometry.
 */
.mrr-chart__line,
.mrr-chart__grid line {
	vector-effect: non-scaling-stroke;
}

.mrr-chart__grid line {
	stroke: var(--mrr-grid);
	stroke-width: 1px;
}

.mrr-chart__line {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: var(--mrr-line-w);
}

.mrr-chart__line--a {
	stroke: var(--mrr-line-a);
}

.mrr-chart__line--b {
	stroke: var(--mrr-line-b);
	stroke-dasharray: 7 6;
}

.mrr-chart__area {
	fill: var(--mrr-line-a);
	opacity: 0.1;
	stroke: none;
}

.mrr-chart__xaxis {
	display: flex;
	justify-content: space-between;
	gap: 6px;
	margin-top: 10px;
	color: #94a3b8;
	font-size: 11px;
	font-weight: 500;
}

.mrr-chart__xaxis span {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}

.mrr-chart__xaxis span:first-child {
	text-align: left;
}

.mrr-chart__xaxis span:last-child {
	text-align: right;
}

.mrr-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: var(--mrr-legend-space);
}

.mrr-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #475569;
	font-size: 12px;
	font-weight: 600;
}

.mrr-legend__key {
	display: inline-block;
	width: 20px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--mrr-line-a);
}

.mrr-legend__key--b {
	background-color: transparent;
	background-image: linear-gradient(to right, var(--mrr-line-b) 0 7px, transparent 7px 13px, var(--mrr-line-b) 13px 20px);
}

/* ----------------------------------------------------------------- collage */

/*
 * Rows are a fixed height rather than content-sized: the lead tile spans two of
 * them and so comes out exactly twice its neighbours plus the gap. Left to size
 * themselves, the rows follow the lead image and the smaller tiles sit in the
 * top of half-empty cells.
 */
.mrr-collage {
	display: grid;
	grid-template-columns: repeat(var(--mrr-collage-cols), minmax(0, 1fr));
	grid-auto-rows: var(--mrr-collage-h);
	gap: var(--mrr-collage-gap);
}

.mrr-collage__item {
	min-width: 0;
	height: 100%;
	overflow: hidden;
	border-radius: var(--mrr-collage-radius);
	background-color: #f5f8fc;
}

/* The lead image takes a two-by-two block, which is what stops a grid of equal
   rectangles from reading as a contact sheet. */
.mrr-collage--featured .mrr-collage__item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.mrr-collage__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--mrr-collage-fit);
	object-position: center center;
}

/* ------------------------------------------------------------- placeholder */

.mrr-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	min-height: 120px;
	padding: 12px;
	color: #93a1ba;
	text-align: center;
	background-image: linear-gradient(
		160deg,
		rgba(47, 107, 255, 0.1) 0%,
		rgba(47, 107, 255, 0.03) 45%,
		rgba(148, 163, 184, 0.12) 100%
	);
}

.mrr-ph__icon {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.mrr-ph__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.mrr {
		--mrr-stat-cols: 2;
	}
}

@media (max-width: 767px) {
	.mrr {
		--mrr-board-pad: 18px;
		--mrr-stat-gap: 12px;
		--mrr-stat-pad: 14px;
		--mrr-chart-h: 200px;
		--mrr-chart-pad: 12px;
		--mrr-collage-cols: 2;
		--mrr-collage-h: 120px;
	}

	.mrr-stat__value {
		font-size: 22px;
	}

	.mrr__tab {
		padding: 9px 14px;
		font-size: 13px;
	}
}

@media (max-width: 420px) {
	.mrr {
		--mrr-stat-cols: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mrr__tab {
		transition: none;
	}
}