/* bitunix.css — the execution surface in Bitunix's native-app register.
 *
 * This deliberately reverses the Orbit Deck pass: soft pills, solid high-saturation fills,
 * standard inputs, a native slider with a white circular thumb. Only ONE profile should be
 * linked at a time — this file and orbit-deck.css contradict each other by design.
 */

:root {
	--bx-long: #28a745;
	--bx-short: #ff4d4f;
	--bx-ink: #1c1c1e;
	--bx-ink-2: #2a2a2e;
	--bx-text: #f2f2f4;
	--bx-text-dim: #9a9aa2;
	--bx-radius-control: 16px;
	--bx-radius-action: 24px;
	--bx-radius-input: 8px;
}

/* ── 1 + 2. triggers: deep pills, solid fills, no borders, title case ───────── */
button[class*="rounded-full"][class*="py-2.5"] {
	border-radius: var(--bx-radius-action) !important; /* 24px: the oval Bitunix uses */
	border: 0 !important;
	background: var(--bx-ink) !important;
	color: var(--bx-text) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	box-shadow: none !important;
}

button[class*="rounded-full"][class*="py-2.5"]:hover {
	background: var(--bx-ink-2) !important;
	color: #ffffff !important;
}

/* the selected side takes a solid, saturated fill with dark text */
button[class*="rounded-full"][class*="py-2.5"][data-active],
button[class*="rounded-full"][class*="py-2.5"][aria-pressed="true"] {
	color: #0d0d0f !important;
}

button[class*="rounded-full"][class*="py-2.5"][class*="long"][data-active],
button[class*="rounded-full"][class*="py-2.5"][class*="var(--long)"][data-active] {
	background: var(--bx-long) !important;
}

button[class*="rounded-full"][class*="py-2.5"][class*="short"][data-active],
button[class*="rounded-full"][class*="py-2.5"][class*="var(--short)"][data-active] {
	background: var(--bx-short) !important;
}

/* the filled buy/sell action once size exists: solid, black text, 24px */
button[class*="bg-[var(--long]"] {
	border-radius: var(--bx-radius-action) !important;
	border: 0 !important;
	background: var(--bx-long) !important;
	color: #0d0d0f !important;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 700;
	box-shadow: none !important;
}

button[class*="bg-[var(--short]"] {
	border-radius: var(--bx-radius-action) !important;
	border: 0 !important;
	background: var(--bx-short) !important;
	color: #0d0d0f !important;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 700;
	box-shadow: none !important;
}

/* segmented Cross / Isolated and the leverage chip: deep pills */
button[class*="rounded-8"][class*="py-"]:not([class*="rounded-full"]),
[class*="inline-flex"][class*="rounded-8"][class*="border"]:not([class*="rounded-full"]) {
	border-radius: var(--bx-radius-control) !important;
}

/* ── 3. order book depth: solid blocky fills again, no fade ─────────────────── */
[data-testid*="orderbook"] div[style*="width"],
[data-testid*="order-book"] div[style*="width"],
div[class*="rounded-32"] div[style*="width"] {
	opacity: 0.9 !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	border-radius: 0 !important;
}

/* ── 4. inputs: dark grey fill, 8px radius, label text inside ───────────────── */
input[data-slot="input"],
input[data-size="default"] {
	border-radius: var(--bx-radius-input) !important;
	border: 1px solid var(--bx-ink-2) !important;
	background: var(--bx-ink) !important;
	color: var(--bx-text) !important;
	padding-inline: 12px !important;
	height: 40px !important;
	font-size: 0.875rem !important;
}

input[data-slot="input"]::placeholder,
input[data-size="default"]::placeholder {
	color: var(--bx-text-dim) !important;
	text-transform: none;
}

input[data-slot="input"]:hover,
input[data-size="default"]:hover {
	border-color: #3a3a40 !important;
}

input[data-slot="input"]:focus,
input[data-size="default"]:focus {
	outline: none !important;
	border-color: #4a4a52 !important;
	box-shadow: none !important;
	background: #202024 !important;
}

/* the small caps label above a field hides: its words move inside as placeholder */
label[for][class*="text-3xs"],
label[for][class*="uppercase"][class*="tracking"] {
	display: none !important;
}

/* ── 5. the standard slider returns ─────────────────────────────────────────── */
div[class*="rounded-full"][class*="bg-white"][class*="border-2"] {
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	border: 0 !important;
	background: #ffffff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

div[class*="rounded-32"][class*="bg-fill-weak"] {
	height: 4px !important;
	border-radius: 999px !important;
	background: var(--bx-ink-2) !important;
	box-shadow: none !important;
}

div[class*="rounded-32"][class*="bg-fill-selected"] {
	border-radius: 999px !important;
	background: #ffffff !important;
	box-shadow: none !important;
	opacity: 0.55;
}

/* the percentage marks read as plain grey numbers again */
div[class*="justify-between"][class*="text-3xs"] {
	letter-spacing: 0;
	color: var(--bx-text-dim) !important;
	font-variant-numeric: tabular-nums;
}

/* the dot markers injected by bitunix.js at 25/50/75/100 */
.bx-dot {
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: #4a4a52;
	box-shadow: 0 0 0 2px rgba(10, 10, 12, 0.9);
	pointer-events: none;
	z-index: 2;
}

/* nav: soft pills, no outlines */
nav a,
nav button {
	border-radius: 999px !important;
}

a[class*="bg-brand"],
button[class*="bg-brand"] {
	border-radius: 999px !important;
	border: 0 !important;
	background: var(--bx-long) !important;
	color: #0d0d0f !important;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

/* ── the triggers glow like the Deposit button ─────────────────────────────── */
/* Deposit carries a soft elevation; the triggers get that plus a coloured halo so both
   sides read as live, pressable actions rather than one filled and one inert. */
button[class*="py-2.5"][class*="rounded-full"] {
	box-shadow:
		0 4px 8px -2px rgba(0, 0, 0, 0.04),
		0 2px 4px -2px rgba(0, 0, 0, 0.08),
		0 0 18px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Long: solid green, green halo */
button[class*="py-2.5"][class*="rounded-full"][class*="long"] {
	background: var(--bx-long) !important;
	color: #0d0d0f !important;
	box-shadow:
		0 4px 8px -2px rgba(0, 0, 0, 0.04),
		0 2px 4px -2px rgba(0, 0, 0, 0.08),
		0 0 20px 0 rgba(40, 167, 69, 0.45),
		0 0 44px 0 rgba(40, 167, 69, 0.18) !important;
}

/* Short: solid red, red halo — both sides always live */
button[class*="py-2.5"][class*="rounded-full"][class*="short"] {
	background: var(--bx-short) !important;
	color: #0d0d0f !important;
	box-shadow:
		0 4px 8px -2px rgba(0, 0, 0, 0.04),
		0 2px 4px -2px rgba(0, 0, 0, 0.08),
		0 0 20px 0 rgba(255, 77, 79, 0.45),
		0 0 44px 0 rgba(255, 77, 79, 0.18) !important;
}

button[class*="py-2.5"][class*="rounded-full"][class*="long"]:hover,
button[class*="py-2.5"][class*="rounded-full"][class*="short"]:hover {
	filter: brightness(1.06);
}

/* the filled execution actions inherit the same halo */
button[class*="bg-[var(--long]"] {
	box-shadow: 0 0 20px 0 rgba(40, 167, 69, 0.45), 0 0 44px 0 rgba(40, 167, 69, 0.18) !important;
}

button[class*="bg-[var(--short]"] {
	box-shadow: 0 0 20px 0 rgba(255, 77, 79, 0.45), 0 0 44px 0 rgba(255, 77, 79, 0.18) !important;
}

/* ── segmented control: a pair of options inside one dark track ─────────────── */
/* Fires only when a container holds two or more buttons that are NOT the Long/Short
   triggers (those are solid execution actions, not a segmented control). */
div[class*="inline-flex"]:has(> button + button):not(:has(button[class*="rounded-full"])) {
	background: var(--bx-ink) !important;
	border-radius: 18px !important;
	padding: 3px !important;
	gap: 0 !important;
	border: 0 !important;
	overflow: hidden;
}

div[class*="inline-flex"]:has(> button + button):not(:has(button[class*="rounded-full"])) > button {
	background: transparent !important;
	border: 0 !important;
	border-radius: 15px !important;
	color: var(--bx-text-dim) !important;
	box-shadow: none !important;
	font-weight: 600;
}

div[class*="inline-flex"]:has(> button + button):not(:has(button[class*="rounded-full"])) > button[data-active],
div[class*="inline-flex"]:has(> button + button):not(:has(button[class*="rounded-full"])) > button[aria-pressed="true"] {
	background: #3a3a40 !important;
	color: var(--bx-text) !important;
}

/* ── merged amount field: number + asset inside one native-looking field ────── */
div[class*="mb-2.5"][class*="flex"][class*="items-center"][class*="gap-1"] {
	background: var(--bx-ink) !important;
	border: 1px solid var(--bx-ink-2) !important;
	border-radius: var(--bx-radius-input) !important;
	padding: 0 6px 0 4px !important;
	gap: 2px !important;
	height: 44px;
	box-sizing: border-box;
}

div[class*="mb-2.5"][class*="flex"][class*="items-center"][class*="gap-1"] > input[data-slot="input"],
div[class*="mb-2.5"][class*="flex"][class*="items-center"][class*="gap-1"] > input[data-size="default"] {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	height: 100% !important;
	border-radius: 0 !important;
}

div[class*="mb-2.5"][class*="flex"][class*="items-center"][class*="gap-1"] > button {
	border-radius: 999px !important;
	border: 0 !important;
	background: rgba(255, 255, 255, 0.06) !important;
	padding-inline: 10px !important;
}

/* ── execution typography: black on the solid fills ─────────────────────────── */
button[class*="py-2.5"][class*="rounded-full"][class*="long"],
button[class*="py-2.5"][class*="rounded-full"][class*="short"],
button[class*="bg-[var(--long]"],
button[class*="bg-[var(--short]"] {
	color: #000000 !important;
}

/* ── order book text: flat and sharp, no shadow, no glow ────────────────────── */
[data-testid*="orderbook"] span,
[data-testid*="order-book"] span,
[data-testid*="orderbook"] div,
[data-testid*="order-book"] div {
	text-shadow: none !important;
	filter: none !important;
}

/* ── the type / leverage row as one unified track ───────────────────────────── */
/* This build renders "Market" and "Isolated · 20x" as two separate chips sitting
   justify-between. Pulling them into a single dark pill is what makes the group read
   as one control, the way Bitunix's segmented rows do. */
div[class*="items-center"][class*="justify-between"]:has(> button):has(> div > button) {
	background: var(--bx-ink) !important;
	border-radius: 18px !important;
	padding: 3px !important;
	gap: 0 !important;
	border: 0 !important;
	overflow: hidden;
}

div[class*="items-center"][class*="justify-between"]:has(> button):has(> div > button) > div,
div[class*="items-center"][class*="justify-between"]:has(> button):has(> div > button) > button {
	background: transparent !important;
	border: 0 !important;
	border-radius: 15px !important;
	box-shadow: none !important;
	padding-inline: 10px !important;
	color: var(--bx-text) !important;
}

div[class*="items-center"][class*="justify-between"]:has(> button):has(> div > button) > button,
div[class*="items-center"][class*="justify-between"]:has(> button):has(> div > button) > div > button {
	background: #3a3a40 !important;
	color: var(--bx-text) !important;
	font-weight: 600;
	font-size: 0.78rem !important;
	white-space: nowrap !important;
	overflow: visible !important;
	text-overflow: clip !important;
	padding-inline: 8px !important;
}

div[class*="items-center"][class*="justify-between"]:has(> button):has(> div > button) > div > button {
	background: transparent !important;
}

/* ── order book depth: solid, flat, directional blocks ─────────────────────── */
/* Tagged at runtime by bitunix.js (.bx-depth / .bx-ask / .bx-bid) because the rows carry
   no stable class. No mask, no opacity drop: the block should hit with full weight. */
.bx-depth {
	opacity: 1 !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	background-image: none !important;
	background-clip: border-box !important;
	border-radius: 0 !important;
	transition: width 420ms cubic-bezier(.22, .61, .36, 1);
	will-change: width;
	transform-origin: right center;
}

/* asks: flat dark red, flush to the right edge, growing leftward */
.bx-depth.bx-ask {
	background-color: rgba(239, 83, 80, 0.22) !important;
	left: auto !important;
	right: 0 !important;
}

/* bids: flat dark green, same geometry */
.bx-depth.bx-bid {
	background-color: rgba(38, 166, 154, 0.22) !important;
	left: auto !important;
	right: 0 !important;
}

/* ── 12 Nov (owner, iPad): no ghost button behind Long/Short ─────────────────
   The Deposit-style elevation + 20/44px halos and the native track behind the pair
   rendered as a second outline on iPad. Flat solid pills, flat track, no tap flash. */
button[class*="py-2.5"][class*="rounded-full"],
button[class*="py-2.5"][class*="rounded-full"][class*="long"],
button[class*="py-2.5"][class*="rounded-full"][class*="short"] {
	box-shadow: none !important;
	border: 0 !important;
	outline: 0 !important;
	background-image: none !important;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
button[class*="py-2.5"][class*="rounded-full"]::before,
button[class*="py-2.5"][class*="rounded-full"]::after { display: none !important; }
button[class*="py-2.5"][class*="rounded-full"]:focus-visible { outline: 2px solid rgba(255,255,255,.55) !important; outline-offset: 2px; }
div:has(> button[class*="py-2.5"][class*="rounded-full"] + button[class*="py-2.5"][class*="rounded-full"]) {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* ── 12 Nov (owner): make the Long/Short selection obvious ───────────────────
   The selected side gets a bright ring outside the pill (it also covers the native
   sliding indicator behind it); the unselected side steps back. */
button[class*="py-2.5"][class*="rounded-full"][data-active],
button[class*="py-2.5"][class*="rounded-full"][aria-pressed="true"],
button[class*="py-2.5"][class*="rounded-full"][aria-selected="true"],
button[class*="py-2.5"][class*="rounded-full"][aria-checked="true"],
button[class*="py-2.5"][class*="rounded-full"][data-state="on"],
button[class*="py-2.5"][class*="rounded-full"][data-state="active"],
button[class*="py-2.5"][class*="rounded-full"][data-state="checked"] {
	box-shadow: 0 0 0 3px #0d0d0f, 0 0 0 6px #ffffff !important;
	opacity: 1 !important;
	position: relative;
	z-index: 1;
}
div:has(> button[class*="py-2.5"][class*="rounded-full"] + button[class*="py-2.5"][class*="rounded-full"]) > button[class*="py-2.5"][class*="rounded-full"]:not([data-active]):not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-checked="true"]):not([data-state="on"]):not([data-state="active"]):not([data-state="checked"]) {
	opacity: .45 !important;
}

/* ── 12 Nov (owner, iPad): the terminal tab row must not run under Deposit/Paper ──
   One line per tab, the row shrinks and scrolls sideways inside its own space,
   with a soft fade on the right edge that says "more tabs this way". */
nav:has(a[href*="challenges"]),
nav:has(a[href*="battlefield"]) {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	padding-right: 24px !important;
}
nav:has(a[href*="challenges"])::-webkit-scrollbar,
nav:has(a[href*="battlefield"])::-webkit-scrollbar { display: none; }
nav:has(a[href*="challenges"]) > *,
nav:has(a[href*="battlefield"]) > *,
nav:has(a[href*="challenges"]) a,
nav:has(a[href*="battlefield"]) a {
	white-space: nowrap !important;
	flex-shrink: 0 !important;
}