/*
 * Mobile inset, category drawer, accordion titles.
 */

/* Keep genre-note accordion label + arrows on one row (space-between). */
.accordion-title-wrapper {
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	align-items: center !important;
}

.accordion-title-wrapper > .brxe-block {
	width: auto !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.accordion-title-wrapper > .brxe-icon {
	flex: 0 0 auto !important;
}

@media (max-width: 767px) {
	#brxe-btdzur,
	#brxe-rneuqw,
	#brxe-hfmyuo,
	#brxe-dymain,
	#brxe-qmb3ny,
	#brxe-c8main,
	#brxe-c9main {
		padding: 10px !important;
		box-sizing: border-box;
	}

	/*
	 * Park at the right (width 0) then grow to 80vw.
	 * Inner tree stays 80vw the whole time so text does not reflow
	 * while the panel width animates (that was the vertical jitter).
	 * Height from top+bottom, not 100dvh (address bar was resizing the drawer).
	 * Scroll only on the inner tree — not the panel.
	 */
	#brxe-hvunai #brxe-ygormt,
	#brxe-dyroot #brxe-dypanl,
	#brxe-c8shll #brxe-c8panl,
	#brxe-ygormt,
	#brxe-dypanl,
	#brxe-c8panl {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		left: auto !important;
		bottom: 0 !important;
		width: 0 !important;
		min-width: 0 !important;
		max-width: 80vw !important;
		height: auto !important;
		z-index: 1000000 !important;
		background: #fff !important;
		overflow: hidden !important;
	}

	#brxe-hvunai #brxe-ygormt.is-open,
	#brxe-dyroot #brxe-dypanl.is-open,
	#brxe-c8shll #brxe-c8panl.is-open,
	#brxe-ygormt.is-open,
	#brxe-dypanl.is-open,
	#brxe-c8panl.is-open {
		width: 80vw !important;
		flex: 0 0 80vw !important;
		overflow: hidden !important;
		box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
	}

	#brxe-hvunai #brxe-qffadp,
	#brxe-dyroot #brxe-dytree,
	#brxe-c8shll #brxe-c8tree,
	#brxe-ygormt > .brxe-shortcode,
	#brxe-dypanl > .brxe-shortcode,
	#brxe-c8panl > .brxe-shortcode {
		width: 80vw !important;
		min-width: 80vw !important;
		max-width: 80vw !important;
		height: 100% !important;
		max-height: none !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		padding: 10px !important;
		box-sizing: border-box;
		overscroll-behavior: contain;
	}

	/* Same 75% as desktop; z-index stays above the UKA dock. */
	#brxe-pjqevg,
	#brxe-dybtn0,
	#brxe-jfzhbx,
	#brxe-c8catb {
		z-index: 1000001 !important;
		top: 75% !important;
	}
}