/*
 * [bd_chinese_gender_calendar] — extra styling on top of kdtc-shared.css.
 * The calculator half of this tool fits the standard 640px card fine, but
 * the full 13-column reference chart underneath needs real room, so this
 * one instance widens its own card rather than changing the shared default.
 */

.kdtc-calc.kdtc-chinese-chart {
	max-width: 900px;
}

.kdtc-chinese-chart__transition {
	margin: 1.6em 0 0.9em;
	font-weight: 600;
	color: var(--kdtc-ink);
}

.kdtc-chinese-legend {
	display: flex;
	gap: 1.4em;
	margin-bottom: 0.8em;
	font-size: 0.88em;
	color: var(--kdtc-muted);
}

.kdtc-chinese-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

.kdtc-chinese-legend__swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 1px solid var(--kdtc-border);
}

.kdtc-chinese-legend__swatch--girl {
	background: #f6d3e4;
}

.kdtc-chinese-legend__swatch--boy {
	background: #cfe0f5;
}

.kdtc-chinese-chart__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--kdtc-border);
	border-radius: var(--kdtc-radius-sm);
}

.kdtc-chinese-chart__table {
	border-collapse: collapse;
	width: 100%;
	min-width: 720px;
}

.kdtc-chinese-chart__table th,
.kdtc-chinese-chart__table td {
	border: 1px solid var(--kdtc-border);
	padding: 0.5em 0.35em;
	text-align: center;
	font-size: 0.85em;
}

.kdtc-chinese-chart__table thead th {
	background: var(--kdtc-accent);
	color: #fff;
	font-weight: 700;
	position: sticky;
	top: 0;
	z-index: 1;
}

.kdtc-chinese-chart__age-head {
	left: 0;
	z-index: 3 !important;
}

.kdtc-chinese-chart__age {
	position: sticky;
	left: 0;
	background: var(--kdtc-panel-bg);
	font-weight: 700;
	z-index: 2;
	box-shadow: 1px 0 0 var(--kdtc-border);
}

.kdtc-chinese-chart__cell--girl {
	background: #f6d3e4;
	color: #7a2c56;
	font-weight: 700;
}

.kdtc-chinese-chart__cell--boy {
	background: #cfe0f5;
	color: #1f3f66;
	font-weight: 700;
}

.kdtc-chinese-chart__cell--active {
	outline: 3px solid var(--kdtc-accent-dark);
	outline-offset: -3px;
}

@media (prefers-color-scheme: dark) {
	.kdtc-calc.kdtc-auto-dark .kdtc-chinese-chart__age {
		background: #232c3b;
	}
	.kdtc-calc.kdtc-auto-dark .kdtc-chinese-chart__transition {
		color: #e7ebf1;
	}
}