/* ==========================================================================
   Betting Tools — Minimal (Suite 1)
   Design approach: Minimalist — generous whitespace, single accent color,
   no borders/shadows, restrained type scale, system font stack.
   ========================================================================== */

.bts-page {
	--bts-ink: #1a1a1a;
	--bts-muted: #767676;
	--bts-accent: #0b5fff;
	--bts-bg: #ffffff;
	--bts-hair: #ececec;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--bts-ink);
	background: var(--bts-bg);
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 24px 64px;
	line-height: 1.65;
	font-size: 16px;
}

.bts-title {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
}

.bts-byline {
	font-size: 13px;
	color: var(--bts-muted);
	margin-bottom: 28px;
}
.bts-byline a { color: var(--bts-muted); }

.bts-intro {
	font-size: 17px;
	color: #333;
	margin-bottom: 24px;
}

/* Currency picker — quiet, right-aligned, text-first */
.bts-currency-picker {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--bts-muted);
	margin-bottom: 20px;
}
.bts-currency-picker label { font-weight: 500; }
.bts-currency-picker select {
	border: none;
	border-bottom: 1px solid var(--bts-ink);
	background: transparent;
	padding: 2px 18px 2px 2px;
	font-size: 13px;
	color: var(--bts-ink);
	cursor: pointer;
}
.bts-currency-note { font-size: 11px; color: #aaa; }

.bts-toc {
	font-size: 13px;
	color: var(--bts-muted);
	border-top: 1px solid var(--bts-hair);
	border-bottom: 1px solid var(--bts-hair);
	padding: 12px 0;
	margin-bottom: 32px;
}
.bts-toc strong { display: block; color: var(--bts-ink); margin-bottom: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.bts-toc ol { margin: 0; padding: 0 0 0 18px; }
.bts-toc a { color: var(--bts-muted); text-decoration: none; }
.bts-toc a:hover { color: var(--bts-accent); }

/* Calculator */
.bts-grid { display: flex; flex-direction: column; gap: 32px; margin-bottom: 40px; }
.bts-inputs { display: flex; flex-direction: column; gap: 18px; }
.bts-inputs label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--bts-muted); font-weight: 500; }
.bts-inputs input, .bts-inputs select {
	font-size: 16px;
	padding: 10px 0;
	border: none;
	border-bottom: 1px solid #ddd;
	background: transparent;
	color: var(--bts-ink);
	font-family: inherit;
}
.bts-inputs input:focus, .bts-inputs select:focus { outline: none; border-bottom-color: var(--bts-accent); }

.bts-parlay-legs { display: flex; flex-direction: column; gap: 14px; }
.bts-add-leg {
	align-self: flex-start;
	background: none;
	border: none;
	color: var(--bts-accent);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	padding: 0;
}
.bts-add-leg:hover { text-decoration: underline; }

.bts-outputs { display: flex; flex-direction: column; }
.bts-output-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--bts-hair);
}
.bts-output-label { font-size: 14px; color: var(--bts-muted); }
.bts-output-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }

.bts-notice { font-size: 13px; color: #c0392b; margin: 8px 0 0; }
.bts-notice:empty { display: none; }

/* Content sections */
.bts-definitions, .bts-formula-guide, .bts-worked-example, .bts-ref-table, .bts-faq, .bts-related {
	margin-bottom: 40px;
}
.bts-definitions h2, .bts-formula-guide h2, .bts-worked-example h2, .bts-ref-table h2, .bts-faq h2, .bts-related h2 {
	font-size: 19px;
	font-weight: 600;
	margin-bottom: 14px;
}
.bts-definitions h3, .bts-formula-guide h3 { font-size: 15px; font-weight: 600; margin: 20px 0 6px; }
.bts-definitions p, .bts-formula-guide p, .bts-worked-example p { color: #333; }
.bts-formula-guide ul { padding-left: 18px; color: #333; }
.bts-formula-guide li { margin-bottom: 6px; }

.bts-ref-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bts-ref-table th, .bts-ref-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bts-hair); }
.bts-ref-table th { color: var(--bts-muted); font-weight: 500; }

.bts-faq-item { margin-bottom: 18px; }
.bts-faq-item h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.bts-faq-item p { color: #333; margin: 0; }

.bts-disclaimer { font-size: 12px; color: #999; padding: 16px 0; border-top: 1px solid var(--bts-hair); margin-bottom: 24px; }
.bts-disclaimer a { color: #999; }

.bts-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bts-related a { color: var(--bts-accent); text-decoration: none; font-size: 14px; }
.bts-related a:hover { text-decoration: underline; }

@media (min-width: 600px) {
	.bts-grid { flex-direction: row; align-items: flex-start; }
	.bts-inputs, .bts-outputs { flex: 1; }
}