.at-wrapper {
	--at-border: #e4e4e7;
	--at-header-bg: #f4f4f5;
	--at-text: #18181b;
	--at-muted: #52525b;
	--at-accent: #d6006e;
	--at-radius: 10px;
	font-size: 15px;
	color: var( --at-text );
	max-width: 100%;
}

.at-header-row {
	display: grid;
	grid-template-columns: 2fr repeat( var( --at-cols, 4 ), 1fr );
	background: var( --at-header-bg );
	border: 1px solid var( --at-border );
	border-radius: var( --at-radius );
	padding: 18px 20px;
	margin-bottom: 16px;
	font-weight: 500;
}

.at-header-cell {
	text-align: center;
}

.at-header-cell--label {
	text-align: left;
}

.at-section {
	border: 1px solid var( --at-border );
	border-radius: var( --at-radius );
	margin-bottom: 12px;
	background: #fff;
	overflow: hidden;
}

.at-section-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: none;
	border: 0;
	padding: 18px 20px;
	font-size: 16px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	color: var( --at-text );
}

.at-section-toggle:hover {
	background: #fafafa;
}

.at-section-icon {
	font-size: 18px;
	line-height: 1;
	color: var( --at-text );
	width: 18px;
	text-align: center;
}

.at-section-body {
	border-top: 1px solid var( --at-border );
	padding: 0 20px 8px;
}

.at-table {
	border: 1px solid var( --at-border );
	border-radius: 8px;
	overflow: hidden;
}

.at-table-head,
.at-table-row {
	display: grid;
	grid-template-columns: 2fr repeat( var( --at-cols, 4 ), 1fr );
	align-items: stretch;
}

.at-table-head {
	color: var( --at-muted );
	border-bottom: 1px solid var( --at-border );
	background: #fafafa;
}

.at-table-row {
	border-bottom: 1px solid var( --at-border );
}

.at-table-row:last-child {
	border-bottom: 0;
}

.at-cell {
	text-align: center;
	padding: 16px 12px;
	border-left: 1px solid var( --at-border );
}

.at-cell:first-child,
.at-cell--label {
	border-left: 0;
}

.at-cell--label {
	text-align: left;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.at-row-label {
	font-weight: 600;
}

.at-cell-text {
	color: var( --at-text );
}

.at-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

.at-info-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #6b7280;
	color: #fff;
	font-size: 10px;
	font-style: italic;
	font-weight: 700;
	cursor: help;
	flex: 0 0 auto;
}

.at-info-tooltip {
	position: absolute;
	bottom: 130%;
	left: 50%;
	transform: translateX( -50% );
	background: #18181b;
	color: #fff;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
	max-width: 260px;
	white-space: normal;
	width: max-content;
	max-width: 240px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 10;
}

.at-info-icon:hover .at-info-tooltip,
.at-info-icon:focus .at-info-tooltip {
	opacity: 1;
}

.at-empty {
	color: var( --at-muted );
	font-style: italic;
}

@media ( max-width: 640px ) {
	.at-header-row,
	.at-table-head {
		display: none;
	}

	.at-table-row {
		grid-template-columns: 1fr;
		row-gap: 6px;
		padding: 14px 0;
	}

	.at-cell {
		text-align: left;
		display: flex;
		justify-content: space-between;
		border-left: 0;
		border-bottom: 1px solid var( --at-border );
	}

	.at-cell:last-child {
		border-bottom: 0;
	}

	.at-cell::before {
		content: attr( data-label );
		font-weight: 500;
		color: var( --at-muted );
	}
}