/* Typography */
/* Subset of Source Han Sans JP for suits */
@font-face {
	font-family: "Source Han Suits";
	font-weight: 1 1000;
	font-style: oblique -90deg 90deg;
	src: url("fonts/suits-505e1eb1.woff2") format("woff2");
}

html {
	font-family: "Open Sans", "Source Han Suits", sans-serif;
	hyphens: auto;
}

/* 著重號 for CJK emphasis: no fake oblique, Latin keeps real italics */
em {
	font-synthesis: weight;
	text-emphasis: filled;
	text-emphasis-position: under right;
}

/* Room for the dots: below 1.75 they push their line down in Firefox */
.content p,
.content ol,
.content ul {
	line-height: 1.75;
}

/* Tables */
/* mdBook pads 20px, which wraps the five-column exercise tables */
table td,
table thead th {
	padding: 3px 12px;
}

.table-wrapper {
	margin-top: 1em;
	margin-bottom: 1em;
}

/* Suits */
.♥,
.♦ {
	color: var(--red);
}

.♠,
.♣ {
	color: var(--fg);
}

/* Suit red per theme */
html {
	--red: #b22;
}

.coal,
.navy,
.ayu {
	--red: #f66;
}

.rust {
	--red: #a21;
}

/* Dark no-script fallback = coal */
@media (prefers-color-scheme: dark) {
	html:not(.js) {
		--red: #f66;
	}
}

/* Sidebar */
.sidebar .♠,
.sidebar .♣ {
	color: inherit;
}

.rust .sidebar {
	--red: #f77;
}

.chapter a:hover,
.chapter a.active,
.chapter a.current-header {
	--red: var(--sidebar-active);
}

/* Deals */
/* Seat headers of the vulnerable side are red, as on duplicate boards.
   Columns run W N E S, so N-S are the even ones. */
.vul-ns th:nth-child(even),
.vul-ew th:nth-child(odd) {
	background: #b22;
	color: #fff;
}

/* Rust's header is a warm tan that reads as faded red next to the red */
.rust .deal {
	--table-header-bg: hsl(60, 5%, 70%);
}

/* Circle the dealer's seat */
.dealer-w th:nth-child(1),
.dealer-n th:nth-child(2),
.dealer-e th:nth-child(3),
.dealer-s th:nth-child(4) {
	background-image: radial-gradient(circle, transparent 0.75em, currentColor calc(0.75em + 0.5px) calc(0.75em + 1.5px), transparent calc(0.75em + 2px));
}

/* Reveal mode buttons, see reveal.js */
.deal button {
	font: inherit;
	color: var(--fg);
	background: var(--table-header-bg);
	border: 1px solid var(--table-border-color);
	border-radius: 4px;
	padding: 2px 12px;
	cursor: pointer;
}

@media print {
	.deal button {
		display: none;
	}
}