.tbpr {
	--tbpr-fg: #1a1a1a;
	--tbpr-muted: #6b7280;
	--tbpr-line: rgba(128, 128, 128, 0.25);
	--tbpr-us: #1f3a68;
	--tbpr-muted-point: #c4c7cc;

	color: var(--tbpr-fg);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-variant-numeric: tabular-nums;
	max-width: 100%;
}

.tbpr-title { font-size: 1.25rem; font-weight: 600; }
.tbpr-stand { color: var(--tbpr-muted); font-size: .85rem; margin-top: .15rem; }

.tbpr-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .5rem; }
.tbpr-tab {
	font: inherit;
	font-size: .85rem;
	padding: .35rem .8rem;
	border: 1px solid var(--tbpr-line);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.tbpr-tab[aria-selected="true"] { background: var(--tbpr-us); border-color: var(--tbpr-us); color: #fff; }
.tbpr-tab:focus-visible { outline: 2px solid var(--tbpr-us); outline-offset: 1px; }

.tbpr-panels { display: grid; gap: 1.5rem; margin-top: 1rem; }
.tbpr-panel { min-width: 0; }
.tbpr-panel-title { font-size: .95rem; font-weight: 600; margin: 0 0 .35rem; }
.tbpr-canvas-wrap { position: relative; height: 320px; }
.tbpr-canvas-wrap[data-role="scatter"] { height: 420px; }

.tbpr-note { color: var(--tbpr-muted); font-size: .8rem; margin: .35rem 0 0; }
.tbpr-howto { font-size: .85rem; line-height: 1.5; margin: .5rem 0 0; }
.tbpr-error { padding: .75rem 1rem; border: 1px solid var(--tbpr-line); border-radius: 6px; color: var(--tbpr-muted); }
.tbpr-disclaimer { color: var(--tbpr-muted); font-size: .75rem; margin-top: 1.25rem; }

@media (max-width: 560px) {
	.tbpr-canvas-wrap { height: 260px; }
	.tbpr-canvas-wrap[data-role="scatter"] { height: 340px; }
}