/* orbit-deck.css — the terminal's execution surfaces in the Orbit Deck discipline.
 *
 * Rules of the house, applied here:
 *   - no native OS look: no pill radii, no white circular thumbs, no pastel fills
 *   - 2px chamfer everywhere a control sits; 0px where a value is read, not pressed
 *   - gold is a signal, never a background: active borders and active text only
 *   - the numbers are the highest-contrast thing on screen; decoration recedes
 *
 * Selectors key off the utility classes and data attributes the build actually emits
 * (verified against the live DOM), so a rebuild keeps working as long as the components do.
 */

:root {
	--od-gold: #d8b26a;
	--od-gold-bright: #f0d79a;
	--od-gold-dim: rgba(216, 178, 106, 0.35);
	--od-steel: #a9b8c7;
	--od-ink: rgba(6, 14, 20, 0.88);
	--od-line: rgba(255, 255, 255, 0.14);
	--od-line-soft: rgba(255, 255, 255, 0.08);
}

/* ── 1. execution triggers: Long / Short and any 2.5-padded action ───────────── */
button[class*="rounded-full"][class*="py-2.5"] {
	border-radius: 2px !important;
	border: 1px solid var(--od-line) !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)) !important;
	color: var(--od-steel) !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.72rem; /* uppercase + tracking must still fit a half-width segment */
	font-weight: 700;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	transition:
		border-color 120ms ease,
		color 120ms ease,
		background 120ms ease;
}

button[class*="rounded-full"][class*="py-2.5"] > * {
	overflow: visible;
}

button[class*="rounded-full"][class*="py-2.5"]:hover {
	border-color: var(--od-gold-dim) !important;
	color: #e6edf4 !important;
}

button[class*="rounded-full"][class*="py-2.5"][data-active],
button[class*="rounded-full"][class*="py-2.5"][aria-pressed="true"] {
	border-color: var(--od-gold) !important;
	color: var(--od-gold-bright) !important;
	background:
		linear-gradient(180deg, rgba(216, 178, 106, 0.16), rgba(216, 178, 106, 0.04)) !important;
	box-shadow:
		inset 0 0 0 1px rgba(216, 178, 106, 0.18),
		0 0 10px rgba(216, 178, 106, 0.12);
}

/* the filled Buy/Sell actions, once size exists: chamfered, dark, bordered */
button[class*="bg-[var(--long]"],
button[class*="bg-[var(--short]"] {
	border-radius: 2px !important;
	border: 1px solid currentColor !important;
	background: var(--od-ink) !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55);
}

/* ── 2. amount slider: a caliper tick, not an OS thumb ──────────────────────── */
/* the thumb: base-ui positions it inline at inset-inline-start: N% */
div[class*="rounded-full"][class*="bg-white"][class*="border-2"] {
	width: 2px !important;
	height: 18px !important;
	border-radius: 0 !important;
	border: 0 !important;
	background: linear-gradient(180deg, var(--od-gold-bright), #a9791f) !important;
	box-shadow:
		0 0 6px rgba(216, 178, 106, 0.85),
		0 0 14px rgba(216, 178, 106, 0.35) !important;
}

/* the track: a hairline, sharp */
div[class*="rounded-32"][class*="bg-fill-weak"] {
	height: 3px !important;
	border-radius: 0 !important;
	background: rgba(255, 255, 255, 0.07) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* the active span: gold, glowing, squared off */
div[class*="rounded-32"][class*="bg-fill-selected"] {
	border-radius: 0 !important;
	background: linear-gradient(90deg, rgba(216, 178, 106, 0.22), var(--od-gold-bright)) !important;
	box-shadow: 0 0 8px rgba(216, 178, 106, 0.5);
}

/* the 0/25/50/75/100 marks: micro-ticks, not words */
div[class*="justify-between"][class*="text-3xs"] {
	letter-spacing: 0.08em;
	color: rgba(169, 184, 199, 0.55) !important;
	font-variant-numeric: tabular-nums;
}

/* ── 3. header and nav: strip the bubbles ───────────────────────────────────── */
nav a,
nav button,
[class*="nav"] a[class*="rounded"] {
	border-radius: 2px !important;
}

/* any bright brand-filled pill becomes an outlined control */
a[class*="bg-brand"],
button[class*="bg-brand"],
a[class*="rounded-full"][class*="bg-"],
button[class*="rounded-full"][class*="bg-"] {
	border-radius: 2px !important;
	border: 1px solid var(--od-gold-dim) !important;
	background: transparent !important;
	color: var(--od-gold-bright) !important;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

a[class*="bg-brand"]:hover,
button[class*="bg-brand"]:hover {
	border-color: var(--od-gold) !important;
	color: #fff5df !important;
	background: rgba(216, 178, 106, 0.08) !important;
}

/* ── 4. order book: Bitunix-style depth ─────────────────────────────────────── */
/* The build draws one absolutely-positioned bar per row (.depth-bar-ask / .depth-bar-bid)
 * with an inline cumulative width. Exchange style: both sides grow from the right edge,
 * a flat translucent fill (no fade into nothing), a hairline gap between rows, and the
 * width eases between book updates so the book breathes instead of jumping. */
.depth-bar-ask,
.depth-bar-bid {
	left: auto !important;
	right: 0 !important;
	top: 1px !important;
	bottom: 1px !important;
	border-radius: 1px 0 0 1px;
	transition: width 260ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
	will-change: width;
}
.depth-bar-ask,
.dark .depth-bar-ask {
	background: rgba(246, 70, 93, 0.17) !important;
	background: oklch(from var(--text-error) l c h / 0.26) !important;
}
.depth-bar-bid,
.dark .depth-bar-bid {
	background: rgba(14, 203, 129, 0.15) !important;
	background: oklch(from var(--text-success) l c h / 0.2) !important;
}
/* the row under the cursor reads as a target, the bar stays visible through it */
.depth-bar-ask + div,
.depth-bar-bid + div,
.depth-bar-ask + div *,
.depth-bar-bid + div * {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
@media (prefers-reduced-motion: reduce) {
	.depth-bar-ask,
	.depth-bar-bid {
		transition: none !important;
	}
}

/* ── 4b. header: hide the venue's not-yet-available items ───────────────────── */
header button.cursor-not-allowed[disabled] {
	display: none !important;
}

/* ── 5. inputs: squared, dark, focused with the accent edge ─────────────────── */
input[data-slot="input"],
input[data-size="default"] {
	border-radius: 2px !important;
	border: 1px solid var(--od-line) !important;
	background: var(--od-ink) !important;
	color: #e8eef4 !important;
	transition:
		border-color 120ms ease,
		box-shadow 120ms ease;
}

input[data-slot="input"]:hover,
input[data-size="default"]:hover {
	border-color: rgba(255, 255, 255, 0.22) !important;
}

input[data-slot="input"]:focus,
input[data-size="default"]:focus,
input[data-slot="input"]:focus-visible,
input[data-size="default"]:focus-visible {
	outline: none !important;
	border-color: var(--od-gold) !important;
	box-shadow: 0 0 0 3px rgba(216, 178, 106, 0.16) !important;
}

/* inputs sitting inside the amount row keep their own frame, not a second one */
input[data-slot="input"][class*="border"] {
	border-width: 1px !important;
}

/* ── 4c. order book mid row + buy/sell ratio (painted by lf-terminal-polish.js) ── */
.lf-spread-label {
	display: none !important;
}
.lf-mid-row {
	padding-top: 7px !important;
	padding-bottom: 7px !important;
}
.lf-mid {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	color: #e8eef4;
	transition: color 150ms ease;
}
.lf-mid.up {
	color: var(--text-success, #0ecb81);
}
.lf-mid.down {
	color: var(--text-error, #f6465d);
}
.lf-ratio {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
	padding: 5px 8px 6px;
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.lf-ratio > div {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 18px;
	min-width: 64px;
	transition: flex-basis 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lf-ratio .b {
	flex: 0 0 50%;
	padding-right: 10px;
	color: var(--text-success, #0ecb81);
	background: rgba(14, 203, 129, 0.16);
	background: oklch(from var(--text-success) l c h / 0.2);
	clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.lf-ratio .s {
	flex: 1 1 auto;
	justify-content: flex-end;
	padding-left: 10px;
	color: var(--text-error, #f6465d);
	background: rgba(246, 70, 93, 0.18);
	background: oklch(from var(--text-error) l c h / 0.24);
	clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%);
}
.lf-ratio i {
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	padding: 2px 3px;
	border: 1px solid currentColor;
	border-radius: 2px;
}
.lf-ratio .b i {
	margin-left: 2px;
}
.lf-ratio .s i {
	margin-right: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.lf-ratio > div,
	.lf-mid {
		transition: none;
	}
}

/* ── 4d. book numerals: exchange sans, tabular, a size up; the mid row floats free ── */
.depth-bar-ask + div,
.depth-bar-bid + div,
.depth-bar-ask + div *,
.depth-bar-bid + div * {
	font-family: Inter, "SF Pro Text", system-ui, -apple-system, "Segoe UI", sans-serif !important;
	font-size: 12px !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}
.lf-mid-row {
	border-color: transparent !important;
	margin: 3px 0;
}
.lf-mid {
	font-family: Inter, "SF Pro Text", system-ui, -apple-system, "Segoe UI", sans-serif;
}