// ==========================================================================
// Analytics — redesign
//
// New `bl-an-*` / `bl-hero-*` / `bl-stat-*` markup. The legacy `.btl-analytic*`
// rules in `_analytics.scss` are still loaded because the single-link and tag
// views (and the clicks table parked at the bottom of this page) continue to
// use them; they come out once all seven sections land.
// ==========================================================================
$bl-border: #e6e8ee;
$bl-muted: #6b7280;
$bl-title: #1a2233;
$bl-surface: #f7f8fa;
$bl-blue: #2f6bff;
$bl-blue-soft: #eef2ff;
$bl-up: #16a34a;
$bl-down: #dc2626;
$bl-radius: 14px;

.bl-an {
	color: $bl-title;

	* {
		box-sizing: border-box;
	}

	// ---- Header ----------------------------------------------------------
	&__head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}
	&__titles {
		min-width: 0;
	}
	// A global, unscoped `h1 { text-align: center; font-family: Dosis; color: #333;
	// padding: 10px 0 }` leaks in from the root-level short-link-generator import,
	// so every one of those declarations has to be restated here.
	&__title {
		margin: 0 0 4px;
		padding: 0;
		font-family: inherit;
		font-size: 28px;
		line-height: 1.15;
		font-weight: 700;
		text-align: left;
		color: $bl-title;
	}
	&__subtitle {
		margin: 0;
		font-size: 13px;
		color: $bl-muted;
	}
	&__tools {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
	}
	// DeleteClicks renders Reset + Refresh Stats into the toolbar.
	&__actions {
		display: contents;
	}

	// ---- Segmented range control -----------------------------------------
	&__range {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		height: 42px;
		padding: 4px;
		border: 1px solid $bl-border;
		border-radius: 10px;
		background: #f1f3f7;
	}
	&__range-btn {
		height: 32px;
		padding: 0 14px;
		border: none;
		border-radius: 7px;
		background: transparent;
		color: $bl-muted;
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
		cursor: pointer;
		transition: color 0.15s ease, background 0.15s ease;

		&:hover {
			color: $bl-title;
		}
		&.is-active {
			background: #fff;
			color: $bl-blue;
			font-weight: 600;
			box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
		}
	}
	&__picker {
		position: relative;
		display: flex;
		align-items: center;
		margin-left: 2px;
		padding-left: 4px;
		border-left: 1px solid darken($bl-border, 3%);
	}
	&__range-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border: none;
		border-radius: 7px;
		background: transparent;
		color: $bl-muted;
		cursor: pointer;
		transition: color 0.15s ease, background 0.15s ease;

		&:hover {
			color: $bl-title;
		}
		&.is-active {
			background: #fff;
			color: $bl-blue;
			box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
		}
	}

	// ---- Toolbar buttons --------------------------------------------------
	&__btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 42px;
		padding: 0 15px;
		border: 1px solid $bl-border;
		border-radius: 10px;
		background: #fff;
		color: $bl-title;
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
		cursor: pointer;
		transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;

		svg {
			color: $bl-muted;
			flex: none;
		}
		&:hover,
		&.is-active {
			border-color: rgba($bl-blue, 0.5);
			color: $bl-blue;

			svg {
				color: currentColor;
			}
		}
		&:focus-visible {
			outline: 2px solid rgba($bl-blue, 0.4);
			outline-offset: 1px;
		}
	}
	&__caret {
		margin-left: -2px;
	}
	&__filter {
		position: relative;
	}

	// ---- Popovers ---------------------------------------------------------
	&__pop {
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		z-index: 30;
		border: 1px solid $bl-border;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
		overflow: hidden;

		// The two-month calendar is ~960px wide — far too wide to hang off its
		// small top-right trigger without spilling off-screen (only part of it
		// was visible). Pin it to the viewport centre so the whole picker always
		// shows, capping its size and scrolling if the screen is smaller.
		&--calendar {
			padding: 4px;
			position: fixed;
			top: 50%;
			left: 50%;
			right: auto;
			transform: translate(-50%, -50%);
			max-width: calc(100vw - 40px);
			max-height: calc(100vh - 40px);
			overflow: auto;
		}
		&--menu {
			min-width: 210px;
			padding: 6px;
		}
	}
	&__menu-item {
		display: block;
		width: 100%;
		padding: 0 10px;
		height: 36px;
		border: none;
		border-radius: 8px;
		background: transparent;
		color: $bl-title;
		font-size: 13px;
		text-align: left;
		cursor: pointer;

		&:hover {
			background: $bl-surface;
		}
		&.is-active {
			background: $bl-blue-soft;
			color: $bl-blue;
			font-weight: 600;
		}
	}
	&__menu-sep {
		display: block;
		height: 1px;
		margin: 6px 4px;
		background: $bl-border;
	}

	// ---- Section nav ------------------------------------------------------
	// Sticky so the section tabs stay reachable while scrolling the long page.
	// `top` clears the fixed WP admin bar (32px desktop, 46px tablet); on phones
	// the admin bar scrolls away, so the nav pins to the viewport top instead.
	&__nav {
		position: sticky;
		top: 32px;
		z-index: 20;
		background: #f9fafb;
		border-bottom: 1px solid $bl-border;
		margin-bottom: 22px;

		@media screen and (max-width: 960px) {
			top: 46px;
		}
		@media screen and (max-width: 600px) {
			top: 0;
		}
	}
	&__nav-list {
		display: flex;
		align-items: center;
		gap: 4px;
		margin: 0;
		padding: 8px 0 8px;
		list-style: none;
		overflow-x: auto;
		scrollbar-width: thin;

		li {
			margin: 0;
			flex: none;
		}
	}
	&__tab {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		height: 36px;
		padding: 0 16px;
		border: none;
		border-radius: 999px;
		background: transparent;
		color: $bl-muted;
		font-size: 14px;
		font-weight: 500;
		white-space: nowrap;
		cursor: pointer;
		transition: color 0.15s ease, background 0.15s ease;

		&:hover:not(:disabled) {
			color: $bl-title;
			background: $bl-surface;
		}
		&.is-active {
			background: $bl-blue-soft;
			color: $bl-blue;
			font-weight: 600;
		}
		// Sections that have not been built yet.
		&.is-pending {
			opacity: 0.45;
			cursor: not-allowed;
		}
	}
	// PRO pill on the tabs whose section is locked in the free plugin.
	&__tab-pro {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		padding: 2px 7px 2px 5px;
		border: 1px solid #ffe9a6;
		border-radius: 999px;
		background: #fffaeb;
		color: #b45309;
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: 0.06em;
		line-height: 1.4;

		svg {
			flex: none;
		}
	}

	// ---- Section shell ----------------------------------------------------
	&__section {
		margin-bottom: 28px;
	}
	&__sechead {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-bottom: 14px;
	}
	&__sectitle {
		flex: none;
		margin: 0;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: $bl-muted;
	}
	&__secrule {
		flex: 1 1 auto;
		height: 1px;
		background: $bl-border;
	}
	&__secmeta {
		flex: none;
		font-size: 12.5px;
		color: $bl-muted;
	}

	// The legacy clicks table, parked below until section 7 replaces it.
	&__legacy {
		margin-top: 8px;
	}

	// Shown when the click-data request fails, in place of a skeleton that would
	// otherwise never resolve.
	&__error {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding: 48px 24px;
		border: 1px solid $bl-border;
		border-radius: $bl-radius;
		background: #fff;
		text-align: center;
	}
	&__error-title {
		margin: 0;
		font-size: 16px;
		font-weight: 600;
		color: $bl-title;
	}
	&__error-text {
		margin: 0 0 8px;
		max-width: 420px;
		font-size: 13px;
		line-height: 1.5;
		color: $bl-muted;
	}
}

// ---- Single-link view ------------------------------------------------------
.bl-an--single {
	.bl-an__section {
		margin-bottom: 24px;
	}
}

// "Back to analytics" — sits in the header's lead slot (where the dashboard's
// title goes), vertically centred against the toolbar.
.bl-an__back {
	display: inline-flex;
	align-items: center;
	align-self: center;
	gap: 6px;
	margin: 0;
	padding: 8px 14px 8px 10px;
	border: 1px solid $bl-border;
	border-radius: 10px;
	background: #fff;
	color: $bl-title;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;

	svg {
		color: $bl-muted;
	}
	&:hover {
		border-color: rgba($bl-blue, 0.5);
		color: $bl-blue;

		svg {
			color: currentColor;
		}
	}
}

// Link identity card
.bl-slc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	padding: 20px 22px;
	margin-bottom: 16px;
	border: 1px solid $bl-border;
	border-radius: $bl-radius;
	background: #fff;

	&__lead {
		display: flex;
		align-items: center;
		gap: 15px;
		min-width: 0;
		flex: 1 1 320px;
	}
	&__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 48px;
		height: 48px;
		border-radius: 12px;
		background: $bl-blue-soft;
		color: $bl-blue;
	}
	&__identity {
		min-width: 0;
	}
	&__title {
		margin: 0 0 6px;
		font-size: 21px;
		line-height: 1.2;
		font-weight: 700;
		color: $bl-title;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&__meta {
		display: flex;
		align-items: center;
		gap: 14px;
		flex-wrap: wrap;
	}
	&__status {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 3px 10px;
		border-radius: 999px;
		background: rgba($bl-up, 0.1);
		color: $bl-up;
		font-size: 12.5px;
		font-weight: 600;
	}
	&__status-dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: $bl-up;
	}
	&__logged {
		font-size: 13px;
		color: $bl-muted;
	}

	&__fields {
		display: flex;
		gap: 14px;
		flex: 1 1 420px;
		min-width: 0;
	}
	&__field {
		flex: 1 1 0;
		min-width: 0;
	}
	&__field-label {
		display: block;
		margin-bottom: 5px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: $bl-muted;
	}
	&__field-box {
		display: flex;
		align-items: center;
		gap: 8px;
		height: 42px;
		padding: 0 6px 0 12px;
		border: 1px solid $bl-border;
		border-radius: 10px;
		background: $bl-surface;
	}
	&__field-value {
		flex: 1 1 auto;
		min-width: 0;
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		font-size: 12.5px;
		color: $bl-title;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&__field-actions {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		flex: none;
	}
	&__field-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		border: none;
		border-radius: 7px;
		background: transparent;
		color: $bl-muted;
		cursor: pointer;

		&:hover {
			background: #fff;
			color: $bl-blue;
		}
	}
}

// Single-link overview: stat row + chart card
.bl-sov {
	margin-bottom: 4px;

	&__stats {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
		margin-bottom: 16px;
	}

	&__chart {
		padding: 18px 20px;
		border: 1px solid $bl-border;
		border-radius: $bl-radius;
		background: #fff;
	}
	&__chart-head {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-wrap: wrap;
		margin-bottom: 6px;
	}
	&__chart-title {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 15px;
		font-weight: 700;
		color: $bl-title;

		svg {
			color: $bl-blue;
		}
	}
	&__chart-meta {
		font-size: 12.5px;
		color: $bl-muted;
	}
	&__chart-legend {
		display: inline-flex;
		align-items: center;
		gap: 20px;
		margin-left: auto;
	}
	&__canvas {
		min-width: 0;

		.apexcharts-canvas {
			max-width: 100%;
		}
	}
	&__flag {
		margin-right: 8px;
		font-size: 20px;
		line-height: 1;
	}
}

// Stat-tile variants used by the single-link overview.
.bl-stat__body--wrap {
	align-items: flex-start;
	min-height: 34px;
}
.bl-stat__value--sm {
	display: inline-flex;
	align-items: center;
	font-size: 22px;
	line-height: 1.15;
	white-space: normal;
	overflow-wrap: anywhere;
}

// ---- Three-up card grid (Sources, Technology) ------------------------------
.bl-an__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;

	// Attention uses two wider columns (increases | decreases).
	&--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

// ---- Attention (top movers) ------------------------------------------------
.bl-mv {
	display: flex;
	flex-direction: column;
	min-height: 240px;
	padding: 16px 20px;
	border: 1px solid $bl-border;
	border-radius: $bl-radius;
	background: #fff;

	&__head {
		display: flex;
		align-items: center;
		gap: 9px;
		padding-bottom: 12px;
		margin-bottom: 4px;
		border-bottom: 1px solid rgba($bl-border, 0.7);
	}
	&__icon {
		display: inline-flex;
		flex: none;
		color: #f97316;
	}
	&__title {
		margin: 0;
		font-size: 15px;
		font-weight: 700;
		color: $bl-title;
		white-space: nowrap;
	}
	&__subtitle {
		font-size: 12.5px;
		color: $bl-muted;
	}

	&__list {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	&__row {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 13px 0;

		+ .bl-mv__row {
			border-top: 1px solid rgba($bl-border, 0.6);
		}
	}
	&__rank {
		flex: none;
		width: 14px;
		font-size: 13px;
		font-weight: 600;
		color: $bl-muted;
		text-align: center;
	}
	&__meta {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	&__name {
		font-size: 14px;
		font-weight: 600;
		color: $bl-title;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&__clicks {
		font-size: 12.5px;
		color: $bl-muted;
	}
	&__trend {
		flex: none;
		display: flex;
		align-items: center;
		gap: 14px;
	}
	&__spark {
		width: 32px;
		height: 16px;
	}
	&__pct {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		min-width: 62px;
		justify-content: flex-end;
		font-size: 14px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}

	&--up {
		.bl-mv__spark,
		.bl-mv__pct {
			color: $bl-up;
		}
	}
	&--down {
		.bl-mv__spark,
		.bl-mv__pct {
			color: $bl-down;
		}
	}

	&__empty {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		justify-content: center;
		padding: 30px 12px;
		font-size: 13px;
		color: $bl-muted;
		text-align: center;
	}

	// The loading card colours its spark/pct neutrally.
	&--loading .bl-mv__row {
		gap: 14px;
	}
}

// Shown when there is no comparable previous period to measure shifts against.
.bl-mv__note {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 22px 20px;
	border: 1px solid $bl-border;
	border-radius: $bl-radius;
	background: #fff;
	font-size: 13.5px;
	color: $bl-muted;

	svg {
		flex: none;
		color: $bl-blue;
	}
}

.bl-bars {
	display: flex;
	flex-direction: column;
	min-height: 300px;
	padding: 16px 18px;
	border: 1px solid $bl-border;
	border-radius: $bl-radius;
	background: #fff;

	&__head {
		display: flex;
		align-items: center;
		gap: 8px;
		padding-bottom: 12px;
		margin-bottom: 4px;
		border-bottom: 1px solid rgba($bl-border, 0.7);
	}
	&__icon {
		display: inline-flex;
		flex: none;
		color: $bl-blue;
	}
	&__title {
		margin: 0;
		font-size: 14px;
		font-weight: 700;
		color: $bl-title;
		white-space: nowrap;
	}
	&__subtitle {
		font-size: 12px;
		color: $bl-muted;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	// Long lists scroll inside the card rather than stretching it past its
	// neighbours in the grid row.
	&__list {
		flex: 1 1 auto;
		margin: 0;
		padding: 0 6px 0 0;
		list-style: none;
		max-height: 300px;
		overflow-y: auto;
		scrollbar-width: thin;
	}
	&__row {
		margin: 0;
		padding: 11px 0 9px;

		+ .bl-bars__row {
			border-top: 1px solid rgba($bl-border, 0.6);
		}
	}
	&__line {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 8px;
	}
	&__chip {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 24px;
		height: 24px;
		border-radius: 7px;
		background: $bl-surface;
		color: $bl-muted;
	}
	&__label {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 13.5px;
		color: $bl-title;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&__value {
		flex: none;
		font-size: 13.5px;
		font-weight: 700;
		color: $bl-title;
	}
	&__share {
		flex: none;
		min-width: 42px;
		text-align: right;
		font-size: 12px;
		color: $bl-muted;
	}
	&__track {
		height: 5px;
		border-radius: 999px;
		background: #eef1f7;
		overflow: hidden;
	}
	&__fill {
		display: block;
		height: 100%;
		border-radius: 999px;
		background: $bl-blue;
	}
	&__foot {
		margin: 10px 0 0;
		padding-top: 10px;
		border-top: 1px solid rgba($bl-border, 0.7);
		font-size: 12px;
		color: $bl-muted;
	}

	// Empty / not-tracked state.
	&__state {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 24px 12px;
		text-align: center;
	}
	&__state-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 12px;
		background: $bl-surface;
		color: #9aa1b1;
	}
	&__state-title {
		margin: 0;
		font-size: 15px;
		font-weight: 600;
		color: #98a1b0;
	}
	&__state-text {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		gap: 6px;
		margin: 0;
		max-width: 260px;
		font-size: 12px;
		line-height: 1.5;
		color: $bl-muted;

		svg {
			flex: none;
			margin-top: 2px;
		}
		&--plain {
			display: block;
		}
	}
}

// ---- Timing (day × hour heatmap) -------------------------------------------
.bl-heat {
	padding: 16px 18px;
	border: 1px solid $bl-border;
	border-radius: $bl-radius;
	background: #fff;

	&__head {
		display: flex;
		align-items: center;
		gap: 9px;
		padding-bottom: 14px;
		margin-bottom: 14px;
		border-bottom: 1px solid rgba($bl-border, 0.7);
	}
	&__icon {
		display: inline-flex;
		flex: none;
		color: $bl-blue;
	}
	&__title {
		margin: 0;
		font-size: 15px;
		font-weight: 700;
		color: $bl-title;
		white-space: nowrap;
	}
	&__subtitle {
		font-size: 12.5px;
		color: $bl-muted;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	// Below ~720px of grid the cells would be unreadably small, so the grid keeps
	// a min width and scrolls sideways inside the card.
	&__scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}
	&__inner {
		min-width: 620px;
	}

	// Hour axis: 24 equal columns, offset by the day-label gutter.
	&__hours {
		display: grid;
		grid-template-columns: repeat(24, 1fr);
		gap: 4px;
		margin-left: 46px;
		margin-bottom: 6px;
	}
	&__hour {
		font-size: 11px;
		color: $bl-muted;
		// Ticks (0/6/12/18) label the START of their column, so don't clip.
		white-space: nowrap;
	}

	&__body {
		display: flex;
		gap: 8px;
	}
	&__days {
		display: grid;
		grid-template-rows: repeat(7, 1fr);
		gap: 4px;
		width: 38px;
		flex: none;
	}
	&__day {
		display: flex;
		align-items: center;
		font-size: 12px;
		color: $bl-muted;
	}

	&__grid {
		position: relative;
		display: grid;
		grid-template-columns: repeat(24, 1fr);
		grid-template-rows: repeat(7, 1fr);
		grid-auto-flow: row;
		gap: 4px;
		flex: 1 1 auto;
	}
	&__cell {
		border-radius: 5px;
		cursor: pointer;
		transition: transform 0.1s ease, box-shadow 0.1s ease;

		&.is-peak {
			box-shadow: inset 0 0 0 1.5px rgba(16, 24, 40, 0.28);
		}
		&.is-hover {
			transform: scale(1.08);
			box-shadow: 0 0 0 1.5px $bl-blue;
			// Lift the scaled cell above its neighbours.
			position: relative;
			z-index: 2;
		}
	}

	// One shared tooltip, anchored to the hovered cell's top centre and lifted
	// above it.
	//
	// `@at-root` + `position: fixed`: `.bl-heat__scroll` scrolls horizontally, and
	// a box that scrolls on one axis clips the other — so a tip living inside the
	// grid was cropped above the top row. `TimingSection` portals it to <body>
	// instead, which puts it outside this partial's `.betterlinks-body` nesting,
	// so these rules have to be hoisted to the document root to still match.
	@at-root {
		.bl-heat__tip {
			position: fixed;
			z-index: 100000; // above the WP admin bar, below react-modal dialogs
			display: flex;
			flex-direction: column;
			gap: 3px;
			padding: 8px 11px;
			border-radius: 9px;
			background: #10182a;
			color: #fff;
			font-size: 12px;
			line-height: 1.45;
			white-space: nowrap;
			pointer-events: none;
			transform: translate(-50%, calc(-100% - 8px));
			box-shadow: 0 8px 22px rgba(16, 24, 40, 0.32);
		}
		.bl-heat__tip-when {
			font-weight: 700;
			margin-bottom: 1px;
		}
		.bl-heat__tip-row {
			display: flex;
			align-items: center;
			gap: 7px;
			color: #d6ddec;
		}
		.bl-heat__tip-dot {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			flex: none;

			&--clicks {
				background: #4f86ff;
			}
			&--unique {
				background: #a9c1fb;
			}
		}
	}

	&__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap;
		margin-top: 16px;
		padding-top: 14px;
		border-top: 1px solid rgba($bl-border, 0.7);
	}
	&__insight {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		color: $bl-muted;

		svg {
			flex: none;
			color: $bl-blue;
		}
		strong {
			color: $bl-title;
			font-weight: 700;
		}
	}
	&__legend {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: 12px;
		color: $bl-muted;
	}
	&__legend-label {
		font-weight: 500;
	}
	&__legend-swatch {
		width: 18px;
		height: 14px;
		border-radius: 3px;
		border: 1px solid rgba($bl-border, 0.8);
	}

	&__state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 44px 12px;
		text-align: center;
	}
	&__state-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: 13px;
		background: $bl-surface;
		color: #9aa1b1;
	}
	&__state-title {
		margin: 0;
		font-size: 15px;
		font-weight: 600;
		color: #98a1b0;
	}
	&__state-text {
		margin: 0;
		font-size: 12.5px;
		color: $bl-muted;
	}
}

// ---- Geography -------------------------------------------------------------
.bl-geo {
	display: grid;
	// Map gets the lion's share; the ranked list is a fixed-ish rail.
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 16px;

	&__panel {
		display: flex;
		flex-direction: column;
		min-height: 384px;
		padding: 16px 18px;
		border: 1px solid $bl-border;
		border-radius: $bl-radius;
		background: #fff;
	}
	&__head {
		display: flex;
		align-items: center;
		gap: 9px;
		padding-bottom: 14px;
		margin-bottom: 6px;
		border-bottom: 1px solid rgba($bl-border, 0.7);
	}
	&__icon {
		display: inline-flex;
		flex: none;
		color: $bl-blue;
	}
	&__title {
		margin: 0;
		font-size: 15px;
		font-weight: 700;
		color: $bl-title;
		white-space: nowrap;
	}
	&__subtitle {
		font-size: 12.5px;
		color: $bl-muted;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	// ---- Map ----
	&__map {
		position: relative;
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8px 0;
	}
	&__svg {
		width: 100%;
		height: auto;
		max-height: 360px;
		// Crisper coastlines when the wide map is scaled down to the panel width.
		shape-rendering: geometricPrecision;
		touch-action: none;

		// Grab cursor only once zoomed in, where panning does something.
		&.is-zoomed {
			cursor: grab;
		}
		&.is-panning {
			cursor: grabbing;
		}
	}
	&__country {
		transition: fill 0.12s ease;

		&.is-active {
			cursor: pointer;
		}
	}

	// Zoom controls, bottom-right so they clear the top-right legend.
	&__zoom {
		position: absolute;
		right: 8px;
		bottom: 8px;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
	&__zoom-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		padding: 0;
		border: 1px solid $bl-border;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.92);
		color: $bl-title;
		cursor: pointer;
		backdrop-filter: blur(2px);
		transition: color 0.15s ease, border-color 0.15s ease;

		&:hover:not(:disabled) {
			color: $bl-blue;
			border-color: rgba($bl-blue, 0.5);
		}
		&:disabled {
			opacity: 0.4;
			cursor: not-allowed;
		}
	}
	&__legend {
		position: absolute;
		top: 4px;
		right: 4px;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 5px 9px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.88);
		backdrop-filter: blur(2px);
		font-size: 11px;
		color: $bl-muted;
	}
	&__legend-label {
		font-weight: 500;
	}
	&__legend-swatch {
		width: 16px;
		height: 10px;
		border-radius: 3px;
	}

	// Floating tooltip card, matching the reference: flag tile, bold name, data
	// line. Follows the cursor, offset up-and-right so it never sits under it.
	&__tip {
		position: absolute;
		z-index: 5;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		min-width: 150px;
		max-width: 230px;
		padding: 14px;
		border: 1px solid $bl-border;
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 14px 34px rgba(16, 24, 40, 0.18);
		pointer-events: none;
		transform: translate(16px, -50%);
	}
	// The flag is an emoji glyph, which renders with its own transparent margin.
	// Scaling it up inside a clipped tile makes the flag fill the frame instead
	// of floating with padding around it.
	&__tip-flag {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 32px;
		border-radius: 6px;
		border: 1px solid $bl-border;
		font-size: 40px;
		line-height: 1;
		overflow: hidden;
	}
	&__tip-name {
		font-size: 17px;
		font-weight: 700;
		color: $bl-title;
		line-height: 1.2;
	}
	&__tip-clicks {
		font-size: 13px;
		color: $bl-title;

		&.is-empty {
			color: $bl-muted;
		}
	}

	// ---- Top countries list ----
	&__list {
		flex: 1 1 auto;
		margin: 0;
		padding: 2px 6px 0 0;
		list-style: none;
		overflow-y: auto;
		max-height: 340px;
		scrollbar-width: thin;
	}
	&__row {
		display: grid;
		grid-template-columns: 20px 22px minmax(0, 1fr) auto 46px;
		align-items: center;
		gap: 10px;
		padding: 9px 0;

		+ .bl-geo__row {
			border-top: 1px solid rgba($bl-border, 0.6);
		}
	}
	&__rank {
		font-size: 12px;
		font-weight: 600;
		color: $bl-muted;
		text-align: center;
	}
	&__flag {
		font-size: 18px;
		line-height: 1;
		text-align: center;
	}
	&__name {
		min-width: 0;
		font-size: 13.5px;
		color: $bl-title;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&__value {
		font-size: 13.5px;
		font-weight: 700;
		color: $bl-title;
		white-space: nowrap;
	}
	&__share {
		font-size: 12px;
		color: $bl-muted;
		text-align: right;
	}
	// The bar spans the full row width, on its own grid line below the label.
	&__track {
		grid-column: 1 / -1;
		height: 5px;
		margin-top: 2px;
		border-radius: 999px;
		background: #eef1f7;
		overflow: hidden;
	}
	&__fill {
		display: block;
		height: 100%;
		border-radius: 999px;
		background: $bl-blue;
	}

	// ---- Not-tracked / empty state ----
	&__state {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 24px 12px;
		text-align: center;
	}
	&__state-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: 13px;
		background: $bl-surface;
		color: #9aa1b1;
	}
	&__state-title {
		margin: 0;
		font-size: 15px;
		font-weight: 600;
		color: #98a1b0;
	}
	&__state-text {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		gap: 6px;
		margin: 0;
		max-width: 280px;
		font-size: 12px;
		line-height: 1.5;
		color: $bl-muted;

		svg {
			flex: none;
			margin-top: 2px;
		}
		&--plain {
			display: block;
		}
	}

	// ---- Skeleton ----
	&__skel-list {
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding-top: 6px;
	}
	&__skel-row {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 9px 0;
		border-bottom: 1px solid rgba($bl-border, 0.6);
	}
}

// ---- Per-link performance table --------------------------------------------
.bl-tbl {
	border: 1px solid $bl-border;
	border-radius: $bl-radius;
	background: #fff;
	// NOT `overflow: hidden` — the Columns dropdown in the toolbar is absolutely
	// positioned inside this card, and clipping here cut the menu off partway
	// down its list. The only region that needs to clip is the table itself,
	// which `&__scroll` handles on its own axis.
	overflow: visible;

	&__head {
		display: flex;
		align-items: center;
		gap: 9px;
		padding: 16px 20px 0;
	}
	&__head-icon {
		display: inline-flex;
		flex: none;
		color: $bl-blue;
	}
	&__title {
		margin: 0;
		font-size: 15px;
		font-weight: 700;
		color: $bl-title;
	}
	&__subtitle {
		font-size: 12.5px;
		color: $bl-muted;
	}

	&__toolbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex-wrap: wrap;
		padding: 16px 20px;
	}
	&__search {
		position: relative;
		display: flex;
		align-items: center;
		flex: 0 1 300px;

		svg {
			position: absolute;
			left: 12px;
			color: $bl-muted;
			pointer-events: none;
		}
		input {
			width: 100%;
			height: 40px;
			padding: 0 12px 0 36px;
			border: 1px solid $bl-border;
			border-radius: 10px;
			background: #fff;
			font-size: 13px;
			color: $bl-title;
			box-shadow: none;

			&:focus {
				border-color: rgba($bl-blue, 0.6);
				box-shadow: 0 0 0 3px rgba($bl-blue, 0.12);
				outline: none;
			}
		}
	}
	&__bulk {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	&__select {
		height: 40px;
		min-height: 40px;
		padding: 0 30px 0 12px;
		border: 1px solid $bl-border;
		border-radius: 10px;
		background-color: #fff;
		font-size: 13px;
		color: $bl-title;
		box-shadow: none;
	}
	&__apply {
		height: 40px;
		padding: 0 18px;
		border: 1px solid $bl-border;
		border-radius: 10px;
		background: #fff;
		font-size: 13px;
		font-weight: 600;
		color: $bl-title;
		cursor: pointer;

		&:hover:not(:disabled) {
			border-color: rgba($bl-blue, 0.5);
			color: $bl-blue;
		}
		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
	}

	// Horizontal pan on narrow screens; the table keeps its column widths rather
	// than crushing the URLs into unreadable slivers.
	&__scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	// Header label for a column that cannot be sorted (incl. Pro-locked ones).
	&__th-label {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
	// Small "Pro" pill — column headers and the Columns menu.
	&__pro {
		display: inline-flex;
		align-items: center;
		flex: none;
		padding: 2px 6px;
		border: 1px solid #ffe9a6;
		border-radius: 999px;
		background: #fffaeb;
		color: #b45309;
		font-size: 9.5px;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		line-height: 1.4;
	}
	&__table {
		width: 100%;
		min-width: 900px;
		border-collapse: collapse;
		font-size: 13.5px;

		th,
		td {
			padding: 14px 10px;
			text-align: left;
			vertical-align: middle;
			white-space: nowrap;
			&.bl-tbl__check-col {
				padding-left: 20px !important;
			}
		}
		thead th {
			position: sticky;
			top: 0;
			background: #f7f8fb;
			border-top: 1px solid $bl-border;
			border-bottom: 1px solid $bl-border;
			font-size: 11px;
			font-weight: 700;
			letter-spacing: 0.06em;
			text-transform: uppercase;
			color: $bl-muted;
			padding-left: 20px;
		}
		tbody tr {
			border-bottom: 1px solid rgba($bl-border, 0.75);

			&:hover {
				background: #fafbfd;
			}
			&.is-selected {
				background: rgba($bl-blue, 0.04);
			}
		}
		input[type='checkbox'] {
			margin: 0;

			// WordPress core inflates checkboxes to 25px on screens ≤782px for
			// touch, which dwarfs this compact table. Keep them proportionate
			// (the scoped selector out-specifies wp-admin's rule).
			@media screen and (max-width: 782px) {
				width: 18px;
				height: 18px;
				min-width: 18px;

				&:checked::before {
					width: 18px;
					height: 18px;
					margin: -1px 0 0 -1px;
					font-size: 20px;
					line-height: 1;
				}
			}
		}
	}
	&__check-col {
		width: 46px;
		padding-right: 0 !important;
	}
	&__details-col {
		width: 90px;
	}
	// Left-aligned to match the design; tabular figures keep the digits in column
	// so the counts still line up.
	&__num {
		font-variant-numeric: tabular-nums;
	}
	&__strong {
		font-weight: 700;
		color: $bl-title;
	}

	&__sort {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 0;
		border: none;
		background: transparent;
		font: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
		color: inherit;
		cursor: pointer;

		svg {
			opacity: 0;
			transition: opacity 0.15s ease, transform 0.15s ease;
		}
		&:hover svg {
			opacity: 0.45;
		}
		&.is-active {
			color: $bl-title;

			svg {
				opacity: 1;
				color: $bl-blue;
			}
		}
	}
	// The icon points down (descending) by default; flip it for ascending.
	&__sort-asc {
		transform: rotate(180deg);
	}

	&__link {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
	}
	&__link-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 26px;
		height: 26px;
		border-radius: 8px;
		background: $bl-blue-soft;
		color: $bl-blue;
	}
	&__link-name {
		font-weight: 600;
		color: $bl-title;
		max-width: 240px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&__slug {
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		font-size: 12.5px;
		color: $bl-muted;
	}
	&__target {
		display: inline-block;
		max-width: 240px;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: middle;
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		font-size: 12.5px;
		color: $bl-blue;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
	&__eye {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		border-radius: 8px;
		color: $bl-muted;

		&:hover {
			background: $bl-surface;
			color: $bl-blue;
		}
	}
	&__empty-row td {
		padding: 40px 16px;
		text-align: center !important;
		color: $bl-muted;
		white-space: normal;
	}

	&__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex-wrap: wrap;
		padding: 14px 20px;
	}
	&__rows {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		color: $bl-muted;

		.bl-tbl__select {
			height: 34px;
			min-height: 34px;
		}
	}
	&__pager {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
	&__count {
		margin-right: 8px;
		font-size: 13px;
		color: $bl-muted;
		font-variant-numeric: tabular-nums;
	}
	&__page {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border: 1px solid $bl-border;
		border-radius: 8px;
		background: #fff;
		color: $bl-muted;
		cursor: pointer;

		&:hover:not(:disabled) {
			border-color: rgba($bl-blue, 0.5);
			color: $bl-blue;
		}
		&:disabled {
			opacity: 0.4;
			cursor: not-allowed;
		}
	}

	// Skeleton rows reuse the scroll box, so they pan like the real table.
	&__skel-head,
	&__skel-row {
		display: flex;
		align-items: center;
		gap: 16px;
		min-width: 900px;
		padding: 14px 16px;
	}
	&__skel-head {
		border-top: 1px solid $bl-border;
		border-bottom: 1px solid $bl-border;
		background: #f7f8fb;
	}
	&__skel-row {
		border-bottom: 1px solid rgba($bl-border, 0.75);
	}
}

// ---- Click log (single-link per-click table) -------------------------------
.bl-clog {
	&__tools {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
	}
	&__cols {
		position: relative;
	}
	&__cols-btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;

		svg {
			color: $bl-muted;
		}
		&.is-active {
			border-color: rgba($bl-blue, 0.5);
			color: $bl-blue;
		}
	}
	&__cols-menu {
		min-width: 200px;
		// The list is as long as the column set, so cap it and scroll rather than
		// running off the bottom of the viewport on a short screen.
		max-height: min(60vh, 360px);
		overflow-y: auto;

		scrollbar-width: thin;
		scrollbar-color: rgba($bl-muted, 0.3) transparent;
		&::-webkit-scrollbar {
			width: 6px;
		}
		&::-webkit-scrollbar-thumb {
			background: rgba($bl-muted, 0.3);
			border-radius: 10px;
		}
	}
	&__cols-item {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 7px 8px;
		border-radius: 8px;
		font-size: 13px;
		color: $bl-title;
		cursor: pointer;

		&:hover {
			background: $bl-surface;
		}
		&.is-fixed {
			opacity: 0.6;
			cursor: default;
		}
		input {
			margin: 0;
		}
	}
	&__cols-label {
		margin-right: auto;
	}

	// Pro-only column with nothing to show on free.
	&__locked {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		border-radius: 6px;
		background: $bl-surface;
		color: $bl-muted;
	}

	// The table keeps every column at a comfortable width and pans sideways —
	// this is a wide table, so a bigger min-width than the links table.
	.bl-tbl__table {
		min-width: 1100px;
	}

	&__ib {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		white-space: nowrap;

		svg {
			flex: none;
			color: $bl-muted;
		}
	}
	&__bicon {
		flex: none;
		border-radius: 4px;
	}
	&__flag {
		font-size: 16px;
		line-height: 1;
	}
	&__mono {
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		font-size: 12.5px;
	}
	&__nowrap {
		white-space: nowrap;
	}
	&__muted {
		color: $bl-muted;
	}
	&__ref {
		color: $bl-blue;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
	// Long free-text columns (user agent, parameters) cap their width; the cell
	// content ellipsises until the row is expanded.
	&__wide {
		max-width: 300px;
	}

	// The clickable long value. Truncated to one line by default; when its row
	// carries `.is-expanded` it wraps and shows in full, growing the row.
	&__expandable {
		display: block;
		max-width: 300px;
		padding: 0;
		border: none;
		background: transparent;
		color: $bl-muted;
		font: inherit;
		text-align: left;
		cursor: pointer;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		&:hover {
			color: $bl-blue;
			text-decoration: underline;
		}
	}

	// Structured "Parameters" cell: each stored key (Forwarded / Target URL /
	// UTM …) on its own line as "Label: value" instead of a raw JSON blob.
	&__params {
		display: flex;
		flex-direction: column;
		gap: 4px;
		max-width: 300px;
	}

	&__param {
		display: flex;
		gap: 6px;
		min-width: 0;
		font-size: 12px;
		line-height: 1.4;
	}

	&__param-key {
		flex: none;
		font-weight: 600;
		color: $bl-title;

		&::after {
			content: ':';
		}
	}

	&__param-val {
		min-width: 0;
		color: $bl-muted;
		word-break: break-all;
	}

	// Expanded row: the long cells wrap and reveal everything; the row grows and
	// aligns its cells to the top so the short columns sit tidily beside the tall
	// wrapped text.
	tbody tr.is-expanded {
		background: $bl-surface;

		td {
			vertical-align: top;
		}
		.bl-clog__expandable {
			max-width: 460px;
			overflow: visible;
			white-space: normal;
			word-break: break-all;
			color: $bl-title;
		}
		.bl-clog__params {
			max-width: 460px;
		}
	}
}

// ---- Hero card -------------------------------------------------------------
.bl-hero {
	display: grid;
	grid-template-columns: 320px 1fr;
	border: 1px solid $bl-border;
	border-radius: $bl-radius;
	background: #fff;
	overflow: hidden;

	&__rail {
		display: flex;
		flex-direction: column;
		padding: 24px;
		border-right: 1px solid $bl-border;
	}
	&__label {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 14px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		color: $bl-muted;

		svg {
			flex: none;
		}
	}
	&__value {
		margin: 0 0 8px;
		font-size: 46px;
		line-height: 1;
		font-weight: 700;
		letter-spacing: -0.02em;
		color: $bl-title;
	}

	// `margin-top: auto` pushes the fact list to the foot of the rail so it lines
	// up with the bottom of the chart beside it, instead of floating under the
	// headline.
	&__facts {
		margin: auto 0 0;
		padding: 28px 0 0;
	}
	&__fact {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 9px 0;

		+ .bl-hero__fact {
			border-top: 1px solid rgba($bl-border, 0.7);
		}

		dt {
			display: flex;
			align-items: center;
			gap: 9px;
			margin: 0;
			font-size: 13.5px;
			font-weight: 400;
			color: $bl-muted;

			svg {
				flex: none;
			}
		}
		dd {
			margin: 0;
			font-size: 14px;
			font-weight: 700;
			color: $bl-title;
		}
	}
	&__na {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font-size: 12.5px;
		font-weight: 500;
		color: $bl-muted;
		cursor: help;
	}

	&__chart {
		display: flex;
		flex-direction: column;
		min-width: 0;
		padding: 20px 22px 12px;
	}
	&__legend {
		display: flex;
		align-items: center;
		gap: 22px;
		margin-bottom: 6px;
	}
	&__key {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		color: $bl-muted;

		b {
			font-weight: 700;
			color: $bl-title;
		}
	}
	&__dot {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		flex: none;

		&--clicks {
			background: $bl-blue;
		}
		&--unique {
			background: #a9bffb;
		}
	}
	&__canvas {
		flex: 1 1 auto;
		min-width: 0;

		// ApexCharts renders an inline-block svg that can overflow its grid cell.
		.apexcharts-canvas {
			max-width: 100%;
		}
	}
}

// ---- Delta -----------------------------------------------------------------
.bl-delta {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: 13px;

	&__icon {
		display: inline-flex;
		flex: none;
	}
	&__value {
		font-weight: 700;
	}
	&__caption {
		color: $bl-muted;
		font-weight: 400;
	}

	&--up {
		color: $bl-up;
	}
	&--down {
		color: $bl-down;
	}
	&--flat {
		color: $bl-muted;

		.bl-delta__value {
			font-weight: 500;
		}
	}
}

// ---- Stat cards ------------------------------------------------------------
.bl-ov {
	&__stats {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
		margin-top: 16px;
	}
}

.bl-stat {
	display: flex;
	flex-direction: column;
	min-height: 138px;
	padding: 16px 18px;
	border: 1px solid $bl-border;
	border-radius: $bl-radius;
	background: #fff;

	&__head {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 4px;
		color: $bl-muted;
	}
	&__icon {
		display: inline-flex;
		flex: none;
	}
	&__label {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&__body {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		margin: 8px 0 10px;

		&--ratio {
			margin-bottom: 12px;
		}
	}
	&__value {
		font-size: 30px;
		line-height: 1.1;
		font-weight: 700;
		letter-spacing: -0.02em;
		color: $bl-title;
		white-space: nowrap;
	}
	&__value-suffix {
		margin-left: 8px;
		font-size: 20px;
		font-weight: 500;
		color: $bl-muted;
	}
	&__spark {
		display: block;
		flex: 0 1 118px;
		max-width: 118px;
		height: 36px;
	}
	&__foot {
		margin: 0;
		font-size: 12.5px;
		color: $bl-muted;
	}

	&__bar {
		height: 8px;
		border-radius: 999px;
		background: #e3e9f6;
		overflow: hidden;
	}
	&__bar-fill {
		display: block;
		height: 100%;
		border-radius: 999px;
		background: $bl-blue;
	}
	&__legend {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin: 8px 0 0;
		font-size: 12.5px;
		color: $bl-muted;
	}

	// Metric BetterLinks cannot measure from the stored click data.
	&--na {
		.bl-stat__na-body {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1 1 auto;
			gap: 6px;
			margin-top: 8px;
		}
		.bl-stat__na-title {
			margin: 0;
			font-size: 17px;
			font-weight: 600;
			color: #98a1b0;
		}
		.bl-stat__na-hint {
			display: flex;
			align-items: flex-start;
			gap: 6px;
			margin: 0;
			font-size: 12px;
			line-height: 1.45;
			color: $bl-muted;

			svg {
				flex: none;
				margin-top: 2px;
			}
		}
	}
}

// ---- Sparkline -------------------------------------------------------------
.bl-spark {
	display: block;
	width: 100%;
	height: 36px;

	&--empty {
		border-radius: 6px;
		background: repeating-linear-gradient(90deg, #eef0f4 0 6px, transparent 6px 12px);
		opacity: 0.7;
	}
}

// ---- Skeletons -------------------------------------------------------------
.bl-skel {
	display: block;
	flex: none;
	background: #eef0f4;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
	background-size: 240px 100%;
	background-repeat: no-repeat;
	animation: bl-skel-shimmer 1.3s ease-in-out infinite;

	&--spark {
		flex: 0 1 118px;
		max-width: 118px;
	}
	// Pins a skeleton bar to the right of its row, mirroring the value column.
	&--push {
		margin-left: auto;
	}
}
@keyframes bl-skel-shimmer {
	0% {
		background-position: -240px 0;
	}
	100% {
		background-position: calc(100% + 240px) 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.bl-skel {
		animation: none;
	}
}

.bl-hero--loading {
	.bl-hero__rail {
		gap: 10px;
	}
	.bl-hero__label {
		margin-bottom: 4px;
	}
	.bl-hero__facts {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin-top: 24px;
	}
	.bl-hero__fact {
		justify-content: space-between;
	}
	.bl-hero__legend {
		margin-bottom: 12px;
	}
}
.bl-stat--loading {
	justify-content: space-between;

	.bl-stat__head {
		margin-bottom: 0;
	}
}

// ---- Responsive ------------------------------------------------------------
@media screen and (max-width: 1400px) {
	.bl-hero {
		grid-template-columns: 280px 1fr;
	}
}

// Two-up stats before the hero has to stack — the cards lose readability well
// before the chart does.
@media screen and (max-width: 1280px) {
	.bl-ov__stats,
	.bl-sov__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 1024px) {
	.bl-hero {
		grid-template-columns: 1fr;
	}
	// Two cards side by side, the third wrapping full-width beneath them.
	.bl-an__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	// Map above, country list below.
	.bl-geo {
		grid-template-columns: minmax(0, 1fr);
	}
	.bl-geo__panel {
		min-height: 0;
	}
	.bl-hero__rail {
		border-right: none;
		border-bottom: 1px solid $bl-border;
	}
	.bl-hero__facts {
		margin-top: 18px;
	}
	// (calendar popover is viewport-centred at all breakpoints — see &--calendar)
}

@media screen and (max-width: 782px) {
	.bl-an__head {
		flex-direction: column;
		align-items: stretch;
	}
	.bl-an__tools {
		width: 100%;
	}
	.bl-an__range {
		flex: 1 1 100%;
		justify-content: space-between;
	}
	.bl-an__btn {
		flex: 1 1 auto;
		justify-content: center;
	}
	.bl-an__filter {
		flex: 1 1 auto;
		display: flex;
	}
	.bl-an__title {
		font-size: 24px;
	}
	.bl-hero__value {
		font-size: 38px;
	}
	.bl-ov__stats,
	.bl-sov__stats,
	.bl-an__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	// The link card's identity and URL fields each take a full row.
	.bl-slc__fields {
		flex-direction: column;
	}
	.bl-bars {
		min-height: 0;
	}
	// Search and bulk actions each take a full row rather than cramming.
	.bl-tbl__search {
		flex: 1 1 100%;
	}
	.bl-tbl__bulk {
		flex: 1 1 100%;

		.bl-tbl__select {
			flex: 1 1 auto;
		}
	}
	.bl-tbl__foot {
		justify-content: center;
	}
	.bl-tbl__count {
		flex: 1 1 100%;
		margin: 0 0 4px;
		text-align: center;
	}
	// Only the filter menu flips to left-anchored on small screens; the calendar
	// popover is viewport-centred (see &--calendar) so it must NOT be re-anchored.
	.bl-an__pop--menu {
		right: auto;
		left: 0;
	}
}

@media screen and (max-width: 600px) {
	.bl-hero__rail,
	.bl-hero__chart {
		padding: 18px;
	}
	.bl-stat__value {
		font-size: 26px;
	}
	.bl-stat__spark {
		flex-basis: 92px;
		max-width: 92px;
	}
}

// ---- Pro lock (free-plugin teaser) ------------------------------------------
//
// ONE wrapper around the whole run of Pro sections, not one per section. The
// real sections render underneath with sample data, softened and inert, and a
// single upgrade card floats over the block. Deliberately NOT a heavy blur: the
// whole point is that the free user can read what Pro would show them.
//
// The card deliberately mirrors the Link Scanner teaser card
// (`.btl-pro-teaser__card` in `common/_components.scss`) — one pill, big title,
// description, icon-tiled feature rows, gradient CTA — so the two upsells read
// as the same component.
//
// Nothing here may use `overflow: hidden` — the card is `position: sticky` and
// any clipping ancestor would kill that.
.bl-an-lock {
	position: relative;

	&__preview {
		filter: saturate(0.85);
		opacity: 0.5;
		pointer-events: none;
		user-select: none;
	}

	// A soft wash over the whole locked run so it reads as one blocked-off region.
	&::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(249, 250, 251, 0.55) 0%, rgba(249, 250, 251, 0.78) 50%, rgba(249, 250, 251, 0.55) 100%);
		pointer-events: none;
	}

	// Full-height column the sticky card travels down. `inset: 0` gives it the
	// block's height; the card sticks inside it and stops at the bottom edge.
	&__overlay {
		position: absolute;
		inset: 0;
		z-index: 2;
		display: flex;
		justify-content: center;
		pointer-events: none;
	}

	&__cta {
		// `top` clears the fixed admin bar (32px) plus the sticky section nav.
		position: sticky;
		top: 120px;
		align-self: flex-start;
		// Starts at the TOP of the locked run rather than centred in it: centring
		// would park the card ~900px down, so scrolling into the region would show
		// dimmed charts with no card until you reached the middle of the block.
		margin-top: 24px;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: min(470px, calc(100% - 32px));
		padding: 34px 28px 34px;
		border: 1px solid $bl-border;
		border-radius: 20px;
		background: #fff;
		box-shadow: 0 24px 60px rgba(16, 24, 40, 0.16);
		text-align: center;
		pointer-events: auto;
	}

	&__pill {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		padding: 6px 14px;
		border-radius: 999px;
		background: rgba($bl-blue, 0.1);
		color: $bl-blue;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;

		svg {
			flex: none;
		}
	}

	&__title {
		margin: 18px 0 0;
		padding: 0;
		font-family: inherit;
		font-size: 24px;
		font-weight: 800;
		line-height: 1.25;
		letter-spacing: -0.01em;
		color: $bl-title;
	}

	&__text {
		margin: 10px 0 0;
		max-width: 390px;
		font-size: 14px;
		line-height: 1.6;
		color: #667085;
	}

	&__points {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 100%;
		margin: 24px 0 0;
		padding: 0;
		list-style: none;
		text-align: left;

		li {
			display: flex;
			align-items: center;
			gap: 12px;
			margin: 0;
			padding: 0;
		}
		p {
			margin: 0;
			font-size: 14px;
			font-weight: 500;
			line-height: 1.5;
			color: #344054;
		}
	}

	&__point-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 32px;
		height: 32px;
		border-radius: 9px;
		background: rgba($bl-blue, 0.1);
		color: $bl-blue;
	}

	&__button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		height: 52px;
		margin-top: 28px;
		padding: 0 30px;
		border-radius: 12px;
		background: linear-gradient(135deg, #2f6bff 0%, #1f3fd6 100%);
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
		box-shadow: 0 12px 26px rgba(47, 107, 255, 0.36);
		transition: transform 0.15s ease, box-shadow 0.15s ease;

		img {
			width: 18px;
			height: 18px;
		}
		&:hover {
			transform: translateY(-1px);
			box-shadow: 0 16px 32px rgba(47, 107, 255, 0.44);
			color: #fff;
		}
		&:focus {
			outline: none;
			box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.3);
		}
	}

	&__note {
		margin: 16px 0 0;
		font-size: 11.5px;
		color: $bl-muted;
	}

	@media screen and (max-width: 600px) {
		&__cta {
			// The admin bar unpins on phones, so the card can sit higher.
			top: 16px;
			padding: 28px 22px 28px;
		}
		&__title {
			font-size: 20px;
		}
	}
}