/**
 * Fight Story–style type studio. Staging only. Not the design.
 */

#bd-studio {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10040;
	font-family: var(--font-label), ui-monospace, monospace;
	display: flex;
	align-items: stretch;
	flex-direction: row-reverse;
}

#bd-studio-tab {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	background: #111;
	color: #fff;
	border: 0;
	cursor: pointer;
	padding: 1.1rem 0.5rem;
	font: inherit;
	font-size: 0.58rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

#bd-studio-panel {
	width: 250px;
	background: #111;
	color: #fff;
	padding: 1.1rem 1.1rem 1.3rem;
	max-height: 86vh;
	overflow-y: auto;
	display: none;
}

#bd-studio.is-open #bd-studio-panel {
	display: block;
}

#bd-studio h5 {
	margin: 0 0 0.6rem;
	font-size: 0.56rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	opacity: 0.45;
	font-weight: 400;
}

#bd-studio .grp {
	margin-bottom: 1.4rem;
}

#bd-studio .row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.35rem;
}

#bd-studio button.sw {
	background: #1e1e1e;
	border: 1px solid #2f2f2f;
	color: #fff;
	font: inherit;
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.55rem 0.3rem;
	cursor: pointer;
}

#bd-studio button.sw:hover {
	background: #2a2a2a;
}

#bd-studio button.sw[aria-pressed="true"] {
	background: #fff;
	color: #111;
	border-color: #fff;
}

#bd-studio .note {
	font-size: 0.55rem;
	line-height: 1.5;
	opacity: 0.45;
	letter-spacing: 0.04em;
	text-transform: none;
	margin: 0.55rem 0 0;
}

#bd-studio .note a {
	color: #fff;
}

@media (max-width: 720px) {
	#bd-studio {
		top: auto;
		bottom: 4.5rem;
		transform: none;
	}
}

/* Role swaps — beat the !important type rules by matching specificity + vars.
   Studio default is Fight Story Record (Schibsted) until a button is picked. */
html,
html[data-bd-display="schibsted"] {
	--font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
}
html[data-bd-display="barlow"] {
	--font-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
}
html[data-bd-display="oswald"] {
	--font-display: "Oswald", "Arial Narrow", sans-serif;
}
html[data-bd-display="archivo"] {
	--font-display: "Archivo Narrow", "Arial Narrow", sans-serif;
}
html[data-bd-display="bricolage"] {
	--font-display: "Bricolage Grotesque", sans-serif;
}

html[data-bd-body="newsreader"] {
	--font-body: "Newsreader", Georgia, "Times New Roman", serif;
	--font-quote: "Newsreader", Georgia, "Times New Roman", serif;
}
html[data-bd-body="lora"] {
	--font-body: "Lora", Georgia, serif;
	--font-quote: "Lora", Georgia, serif;
}
html[data-bd-body="source"] {
	--font-body: "Source Serif 4", Georgia, serif;
	--font-quote: "Source Serif 4", Georgia, serif;
}
html[data-bd-body="inter"] {
	--font-body: "Inter Tight", system-ui, sans-serif;
	--font-quote: "Inter Tight", system-ui, sans-serif;
}

html[data-bd-mono="dm"] {
	--font-label: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
html[data-bd-mono="fragment"] {
	--font-label: "Fragment Mono", ui-monospace, monospace;
}
html[data-bd-mono="jetbrains"] {
	--font-label: "JetBrains Mono", ui-monospace, monospace;
}
html[data-bd-mono="azeret"] {
	--font-label: "Azeret Mono", ui-monospace, monospace;
}
html[data-bd-mono="roboto"] {
	--font-label: "Roboto Mono", ui-monospace, monospace;
}