/**
 * The data lab (render-insights.php): insight lines, figure cards, bars and
 * columns. Loaded where a section renders, and on the Performance screen.
 * Bars and columns are plain HTML whose figures are text, so they read the
 * same without this file.
 */

.cc-ins {
	margin-block: 0 2.5rem;
}

.cc-ins__facts {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.cc-ins__facts li {
	position: relative;
	padding-inline-start: 1.4rem;
	line-height: 1.6;
}

.cc-ins__facts li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	inline-size: 0.55rem;
	block-size: 0.55rem;
	border-radius: 50%;
	background: var( --cc-primary, #d63b2f );
}

.cc-ins__facts strong {
	color: var( --cc-primary-dark, #a82a20 );
}

/* The database in numbers */
.cc-ins__cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 10.5rem, 1fr ) );
	gap: 0.85rem;
}

.cc-ins__card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.1rem 1rem;
	background: var( --cc-base, #fff );
	border: 1px solid var( --cc-border, #e5e7eb );
	border-radius: 16px;
	box-shadow: 0 10px 24px -20px rgba( 15, 23, 42, 0.4 );
}

.cc-ins__big {
	font-size: clamp( 1.4rem, 3vw, 1.9rem );
	font-weight: 800;
	line-height: 1.15;
	color: var( --cc-primary-dark, #a82a20 );
	font-variant-numeric: tabular-nums;
}

.cc-ins__what {
	font-size: 0.9rem;
	color: var( --cc-muted, #6b7280 );
}

/* Charts */
.cc-ins__chart {
	margin: 0 0 1.5rem;
	padding: 1rem 1.1rem;
	background: var( --cc-base, #fff );
	border: 1px solid var( --cc-border, #e5e7eb );
	border-radius: 16px;
}

.cc-ins__chart figcaption {
	margin-block-end: 0.8rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var( --cc-muted, #6b7280 );
}

.cc-ins__bars {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.55rem;
}

.cc-ins__bars li {
	display: grid;
	grid-template-columns: minmax( 7rem, 13rem ) 1fr auto;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.92rem;
}

.cc-ins__track {
	block-size: 0.75rem;
	background: var( --cc-surface, #f3f4f6 );
	border-radius: 999px;
	overflow: hidden;
}

.cc-ins__bar {
	display: block;
	block-size: 100%;
	background: linear-gradient( 90deg, var( --cc-primary, #d63b2f ), var( --cc-primary-dark, #a82a20 ) );
	border-radius: 999px;
}

.cc-ins__value {
	min-inline-size: 3.2rem;
	font-weight: 700;
	text-align: end;
	font-variant-numeric: tabular-nums;
}

.cc-ins__count {
	font-weight: 400;
	color: var( --cc-muted, #6b7280 );
}

.cc-ins__cols {
	display: flex;
	align-items: flex-end;
	gap: 0.3rem;
	block-size: 11rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-ins__cols li {
	flex: 1 1 0;
	min-inline-size: 0;
	block-size: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 0.25rem;
}

.cc-ins__col {
	inline-size: 100%;
	max-inline-size: 2.4rem;
	background: linear-gradient( 180deg, var( --cc-primary, #d63b2f ), var( --cc-primary-dark, #a82a20 ) );
	border-radius: 6px 6px 2px 2px;
}

.cc-ins__colval,
.cc-ins__collabel {
	font-size: 0.72rem;
	line-height: 1.1;
	color: var( --cc-muted, #6b7280 );
	white-space: nowrap;
}

.cc-ins__colval {
	font-weight: 700;
	color: inherit;
}

.cc-ins__table table {
	inline-size: 100%;
	border-collapse: collapse;
}

.cc-ins__table th,
.cc-ins__table td {
	padding: 0.6rem 0.75rem;
	text-align: start;
	border-block-end: 1px solid var( --cc-border, #e5e7eb );
}

.cc-ins__table thead th {
	font-size: 0.85rem;
	color: var( --cc-muted, #6b7280 );
}

@media ( max-width: 600px ) {
	.cc-ins__bars li {
		grid-template-columns: 1fr auto;
	}

	.cc-ins__track {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	/* 24 hours do not fit as labels on a phone: every third one. */
	.cc-ins__cols--dense li:nth-child( 3n + 2 ) .cc-ins__collabel,
	.cc-ins__cols--dense li:nth-child( 3n ) .cc-ins__collabel,
	.cc-ins__cols--dense li:nth-child( 3n + 2 ) .cc-ins__colval,
	.cc-ins__cols--dense li:nth-child( 3n ) .cc-ins__colval {
		visibility: hidden;
	}

	.cc-ins__colval,
	.cc-ins__collabel {
		font-size: 0.64rem;
	}
}