/* ============================================================================
   DESIGN TOKENS
   ----------------------------------------------------------------------------
   Three layers, in cascade order:

     1. PRIMITIVES   raw colour ramps. Theme-invariant. Never referenced by
                     rules directly — only by the semantic layer below.
     2. SEMANTIC     what a colour *means* (surface, foreground, yes/no side).
                     These are the ONLY colour tokens rules may reference.
     3. LEGACY       the original 10 token names, kept as aliases so existing
                     `var(--background)` etc. keep working during migration.

   Theming works by remapping the semantic layer — see "THEME MAPPING" below.
   Plan + rationale: ai/DARK_MODE_PLAN.md
   ============================================================================ */

:root {
	/* --- Layer 1: primitives ------------------------------------------- */

	/* Neutral ramp (0 = white … 1000 = black). */
	--neutral-0: #ffffff;
	--neutral-50: #fafafa;
	--neutral-100: #f5f5f7;
	--neutral-200: #e5e5ea;
	--neutral-300: #d5d5db;
	--neutral-400: #aaaaaa;
	--neutral-500: #8e8e93;
	--neutral-600: #666666;
	--neutral-700: #555555;
	--neutral-800: #333333;
	--neutral-900: #1c1c1e;
	--neutral-950: #12141a;
	--neutral-1000: #000000;

	/* Green — YES / success. */
	--green-300: #7ee2a0;
	--green-500: #34c759;
	--green-600: #30b050;
	--green-650: #2a8a45;
	--green-700: #237a3b;
	--green-50: #f0fff4;

	/* Red — NO / danger. */
	--red-300: #ff8a82;
	--red-500: #ff3b30;
	--red-600: #dc3545;
	--red-650: #d50000;
	--red-700: #c62828;
	--red-50: #ffebee;

	/* Blue — accent / primary. */
	--blue-300: #7db3ff;
	--blue-500: #007aff;
	--blue-600: #0051d5;
	--blue-700: #2563eb;
	--blue-50: #f0f8ff;
	--blue-100: #e2e7ff;

	/* Purple — opponent / secondary team. */
	--purple-300: #b98cff;
	--purple-500: #5000fd;
	--purple-600: #6200ea;
	--purple-550: #6700d5;
	--purple-700: #4d00a3;

	/* Amber — warnings (wide spread, staleness). */
	--amber-500: #ff9500;

	/* --- Layer 2: semantic (LIGHT values) ------------------------------- */

	/* Surfaces */
	--surface: var(--neutral-0);
	--surface-raised: var(--neutral-0);
	--surface-sunken: var(--neutral-100);
	--surface-overlay: var(--neutral-0);
	--surface-hover: var(--neutral-200);
	/* Deliberately dark in LIGHT mode (tooltips); inverts in dark mode. */
	--surface-inverse: #1f2937;

	/* Foreground / text */
	--fg: var(--neutral-1000);
	--fg-muted: var(--neutral-700);
	--fg-subtle: var(--neutral-500);
	--fg-on-accent: var(--neutral-0);
	--fg-on-inverse: var(--neutral-0);
	/* The YES fill is a LIGHT colour: white on it is only ~2.2:1, so labels
	   that sit on it get a near-black instead. Red/blue/purple fills are
	   dark enough that white stays the right choice. */
	--fg-on-yes: #0a2912;

	/* Form-control track (toggle switch, off state). */
	--control-track: var(--neutral-800);

	/* Lines / borders */
	--line: var(--neutral-200);
	--line-subtle: var(--neutral-100);
	--line-strong: var(--neutral-300);

	/* Accent */
	--accent: var(--blue-500);
	--accent-hover: var(--blue-600);
	--accent-tint: rgba(0, 122, 255, 0.1);
	--accent-surface: var(--blue-50);
	--accent-border: var(--blue-100);

	/* Trading sides — see ai/DARK_MODE_PLAN.md §6 before changing these. */
	--yes: var(--green-500);
	--yes-hover: var(--green-600);
	--yes-tint: rgba(52, 199, 89, 0.15);
	/* Accessible green for TEXT on light surfaces: --yes is only 2.3:1. */
	--yes-text: var(--green-700);
	--yes-surface: var(--green-50);
	/* Baseball defence variant — a functionally distinct button, not drift. */
	--yes-deep: var(--green-650);
	--yes-deep-hover: var(--green-700);

	--no: var(--red-500);
	--no-hover: var(--red-650);
	--no-tint: rgba(255, 59, 48, 0.15);
	--no-text: var(--red-700);
	--no-surface: var(--red-50);

	--opp: var(--purple-500);
	--opp-hover: var(--purple-550);
	--opp-tint: rgba(80, 0, 253, 0.12);
	--opp-deep: #5a00c0;
	--opp-deep-hover: var(--purple-700);

	/* Feedback */
	--warning: var(--amber-500);

	/* Elevation — colours only; each rule keeps its own offset/blur. */
	--shadow-weak: rgba(0, 0, 0, 0.08);
	--shadow: rgba(0, 0, 0, 0.15);
	--shadow-strong: rgba(0, 0, 0, 0.3);
	--shadow-heavy: rgba(0, 0, 0, 0.5);
	--scrim-soft: rgba(0, 0, 0, 0.4);
	/* Dark translucent button fills — hover vs active MUST differ. */
	--overlay-dark: rgba(0, 0, 0, 0.55);
	--overlay-dark-strong: rgba(0, 0, 0, 0.7);
	--scrim: rgba(0, 0, 0, 0.5);

	/* Translucent overlays */
	--overlay-light-faint: rgba(255, 255, 255, 0.05);
	--overlay-light: rgba(255, 255, 255, 0.3);
	/* Text sitting ON a dark scrim (stepper buttons over coloured fills).
	   Stays light in BOTH themes — it is foreground on an always-dark
	   overlay, not a surface, so it must NOT invert. */
	--fg-on-overlay: rgba(255, 255, 255, 0.9);
	--surface-translucent: rgba(255, 255, 255, 0.92);

	/* Neutral tints */
	--neutral-tint: rgba(148, 163, 184, 0.18);
	--neutral-tint-border: rgba(100, 116, 139, 0.35);

	/* Strong hue tints + status overlays */
	--accent-tint-strong: rgba(0, 122, 255, 0.2);
	--yes-tint-strong: rgba(52, 199, 89, 0.3);
	--no-tint-strong: rgba(255, 59, 48, 0.35);
	--no-overlay: rgba(220, 53, 69, 0.75);
	--warning-overlay: rgba(255, 152, 0, 0.75);

	/* Armed-button pulse: rest vs peak MUST differ or the pulse vanishes. */
	--no-glow: rgba(245, 11, 11, 0.4);
	--no-glow-strong: rgba(245, 11, 11, 0.8);

	/* Orderbook freshness ring/glow. The stale pulse animates between
	   --stale-glow/--stale-glow-soft and --stale-ring-peak/--stale-ring;
	   collapsing these to one value silently kills the animation. */
	--fresh-ring: rgba(16, 185, 129, 0.45);
	--fresh-glow: rgba(16, 185, 129, 0.35);
	--stale-ring: rgba(239, 68, 68, 0.55);
	--stale-glow: rgba(239, 68, 68, 0.45);
	--stale-glow-soft: rgba(239, 68, 68, 0.35);
	--stale-ring-peak: rgba(239, 68, 68, 0.7);

	/* --- Layer 3: legacy aliases --------------------------------------- */
	/* Kept so the ~215 existing literals can migrate incrementally rather
	   than in one rewrite. Do not add new usages of these. */
	--primary: var(--accent);
	--primary-dark: var(--accent-hover);
	--success: var(--yes);
	--danger: var(--no);
	--opponent: var(--opp);
	--background: var(--surface);
	--text: var(--fg);
	--border: var(--line);
	--gray-light: var(--surface-sunken);
	--gray-dark: var(--fg-muted);

	/* --- Non-colour tokens (theme-invariant) --------------------------- */
	--padding: 16px;
	--padding-small: 8px;
	--border-radius: 8px;
	--transition: 0.2s ease;

	/* Both schemes are real as of Phase 3, so native controls, scrollbars and
	   the on-screen keyboard follow the theme. Until then this was pinned to
	   `light`: declaring both while the dark values were still identical to
	   light would have rendered native controls dark on an OS-dark device
	   while the page stayed light. */
	color-scheme: light dark;
}

/* ============================================================================
   DARK PALETTE
   ----------------------------------------------------------------------------
   Single source of truth for every dark value. The mapping blocks below
   reference these, so a dark colour is written exactly once even though the
   mapping itself must be duplicated (see THEME MAPPING).

   This is the ONLY block that needs editing to retune dark mode: the two
   mapping blocks below are generated from it, so parity holds by
   construction.
   ============================================================================ */
:root {
	/* --- Surfaces: layered, slightly blue-tinted greys ---------------- */
	/* Not pure black: reduces halation and lets elevation read as lighter. */
	--dark-surface: #10131a;
	--dark-surface-raised: #171b24;
	--dark-surface-sunken: #0b0e14;
	--dark-surface-overlay: #1c212c;
	--dark-surface-hover: #232a37;
	/* The staleness tooltip. In light mode this is deliberately DARK; here it
	   stays dark but lifts above the page rather than flipping to white — a
	   white tooltip is a glare source on a night-time trading screen. */
	--dark-surface-inverse: #2a313f;

	/* --- Text ---------------------------------------------------------- */
	/* Off-white, not #fff: pure white on near-black smears on OLED. */
	--dark-fg: #e6e8ec;
	--dark-fg-muted: #a4abb8;
	--dark-fg-subtle: #858d9c;
	--dark-fg-on-accent: #ffffff;
	--dark-fg-on-inverse: #e6e8ec;
	--dark-fg-on-yes: #06210e;
	--dark-control-track: #464e5e;

	/* --- Lines --------------------------------------------------------- */
	--dark-line: #2a303c;
	--dark-line-subtle: #1e232c;
	--dark-line-strong: #3a4252;

	/* --- Accent -------------------------------------------------------- */
	--dark-accent: #0a84ff;
	--dark-accent-hover: #409cff;
	--dark-accent-tint: rgba(10, 132, 255, 0.18);

	/* --- Trading sides -------------------------------------------------
	   Hue is held stable per ai/DARK_MODE_PLAN.md §6 — only lightness and
	   saturation adapt. The -text variants INVERT direction relative to
	   light mode: coloured text on a dark surface must be LIGHTER than the
	   fill, where on white it had to be darker. */
	--dark-yes: #30d158;
	--dark-yes-hover: #28b84c;
	--dark-yes-tint: rgba(48, 209, 88, 0.18);

	--dark-no: #ff453a;
	--dark-no-hover: #e02f24;
	--dark-no-tint: rgba(255, 69, 58, 0.18);

	--dark-opp: #7c4dff;
	--dark-opp-hover: #9670ff;
	--dark-opp-tint: rgba(124, 77, 255, 0.18);

	--dark-accent-surface: #16253a;
	--dark-accent-border: #24405f;
	--dark-yes-text: #4ade80;
	--dark-yes-surface: #102a18;
	--dark-yes-deep: #248a43;
	--dark-yes-deep-hover: #1c6e35;
	--dark-no-text: #ff8a80;
	--dark-no-surface: #2e1315;
	--dark-opp-deep: #6a35e0;
	--dark-opp-deep-hover: #5626c4;
	--dark-warning: #ff9f0a;

	/* --- Elevation: shadows need far more alpha to register on dark ---- */
	--dark-shadow-weak: rgba(0, 0, 0, 0.35);
	--dark-shadow: rgba(0, 0, 0, 0.5);
	--dark-shadow-strong: rgba(0, 0, 0, 0.65);
	--dark-shadow-heavy: rgba(0, 0, 0, 0.8);
	--dark-scrim-soft: rgba(0, 0, 0, 0.6);
	/* hover vs active MUST stay distinct — see the §5 landmine. */
	--dark-overlay-dark: rgba(0, 0, 0, 0.6);
	--dark-overlay-dark-strong: rgba(0, 0, 0, 0.78);
	--dark-scrim: rgba(0, 0, 0, 0.7);
	--dark-overlay-light-faint: rgba(255, 255, 255, 0.06);
	--dark-overlay-light: rgba(255, 255, 255, 0.25);
	--dark-fg-on-overlay: rgba(255, 255, 255, 0.9);
	/* Inverts: a translucent LIGHT panel becomes a translucent DARK one. */
	--dark-surface-translucent: rgba(23, 27, 36, 0.92);
	--dark-neutral-tint: rgba(148, 163, 184, 0.22);
	--dark-neutral-tint-border: rgba(148, 163, 184, 0.4);
	--dark-accent-tint-strong: rgba(10, 132, 255, 0.3);
	--dark-yes-tint-strong: rgba(48, 209, 88, 0.32);
	--dark-no-tint-strong: rgba(255, 69, 58, 0.35);
	--dark-no-overlay: rgba(200, 40, 50, 0.85);
	--dark-warning-overlay: rgba(255, 159, 10, 0.8);
	/* Armed-button pulse: rest < peak, or the pulse disappears. */
	--dark-no-glow: rgba(255, 69, 58, 0.5);
	--dark-no-glow-strong: rgba(255, 69, 58, 0.95);
	/* Staleness: glow-soft < glow < ring < ring-peak must hold. */
	--dark-fresh-ring: rgba(48, 209, 88, 0.55);
	--dark-fresh-glow: rgba(48, 209, 88, 0.4);
	--dark-stale-ring: rgba(255, 69, 58, 0.65);
	--dark-stale-glow: rgba(255, 69, 58, 0.5);
	--dark-stale-glow-soft: rgba(255, 69, 58, 0.38);
	--dark-stale-ring-peak: rgba(255, 69, 58, 0.85);
}

/* ============================================================================
   THEME MAPPING
   ----------------------------------------------------------------------------
   Precedence, in order:
     1. OS preference applies…
     2. …unless the user explicitly chose light  (`:not([data-theme="light"])`)
     3. An explicit dark choice wins regardless of OS.

   The `:not()` guard in the media query is what lets an explicit LIGHT choice
   beat an OS dark preference. Without it the media query could not be undone.

   The two blocks MUST list the same tokens; a unit test asserts this
   (src/client/__tests__/unit/styles/theme-tokens.test.ts). Values are not
   duplicated — both blocks defer to the --dark-* palette above.
   ============================================================================ */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--surface: var(--dark-surface);
		--surface-raised: var(--dark-surface-raised);
		--surface-sunken: var(--dark-surface-sunken);
		--surface-overlay: var(--dark-surface-overlay);
		--surface-hover: var(--dark-surface-hover);
		--surface-inverse: var(--dark-surface-inverse);
		--fg: var(--dark-fg);
		--fg-muted: var(--dark-fg-muted);
		--fg-subtle: var(--dark-fg-subtle);
		--fg-on-accent: var(--dark-fg-on-accent);
		--fg-on-inverse: var(--dark-fg-on-inverse);
		--fg-on-yes: var(--dark-fg-on-yes);
		--control-track: var(--dark-control-track);
		--line: var(--dark-line);
		--line-subtle: var(--dark-line-subtle);
		--line-strong: var(--dark-line-strong);
		--accent: var(--dark-accent);
		--accent-hover: var(--dark-accent-hover);
		--accent-tint: var(--dark-accent-tint);
		--yes: var(--dark-yes);
		--yes-hover: var(--dark-yes-hover);
		--yes-tint: var(--dark-yes-tint);
		--no: var(--dark-no);
		--no-hover: var(--dark-no-hover);
		--no-tint: var(--dark-no-tint);
		--opp: var(--dark-opp);
		--opp-hover: var(--dark-opp-hover);
		--opp-tint: var(--dark-opp-tint);
		--accent-surface: var(--dark-accent-surface);
		--accent-border: var(--dark-accent-border);
		--yes-text: var(--dark-yes-text);
		--yes-surface: var(--dark-yes-surface);
		--yes-deep: var(--dark-yes-deep);
		--yes-deep-hover: var(--dark-yes-deep-hover);
		--no-text: var(--dark-no-text);
		--no-surface: var(--dark-no-surface);
		--opp-deep: var(--dark-opp-deep);
		--opp-deep-hover: var(--dark-opp-deep-hover);
		--warning: var(--dark-warning);
		--shadow-weak: var(--dark-shadow-weak);
		--shadow: var(--dark-shadow);
		--shadow-strong: var(--dark-shadow-strong);
		--shadow-heavy: var(--dark-shadow-heavy);
		--scrim-soft: var(--dark-scrim-soft);
		--overlay-dark: var(--dark-overlay-dark);
		--overlay-dark-strong: var(--dark-overlay-dark-strong);
		--scrim: var(--dark-scrim);
		--overlay-light-faint: var(--dark-overlay-light-faint);
		--overlay-light: var(--dark-overlay-light);
		--fg-on-overlay: var(--dark-fg-on-overlay);
		--surface-translucent: var(--dark-surface-translucent);
		--neutral-tint: var(--dark-neutral-tint);
		--neutral-tint-border: var(--dark-neutral-tint-border);
		--accent-tint-strong: var(--dark-accent-tint-strong);
		--yes-tint-strong: var(--dark-yes-tint-strong);
		--no-tint-strong: var(--dark-no-tint-strong);
		--no-overlay: var(--dark-no-overlay);
		--warning-overlay: var(--dark-warning-overlay);
		--no-glow: var(--dark-no-glow);
		--no-glow-strong: var(--dark-no-glow-strong);
		--fresh-ring: var(--dark-fresh-ring);
		--fresh-glow: var(--dark-fresh-glow);
		--stale-ring: var(--dark-stale-ring);
		--stale-glow: var(--dark-stale-glow);
		--stale-glow-soft: var(--dark-stale-glow-soft);
		--stale-ring-peak: var(--dark-stale-ring-peak);
	}
}

:root[data-theme="dark"] {
	--surface: var(--dark-surface);
	--surface-raised: var(--dark-surface-raised);
	--surface-sunken: var(--dark-surface-sunken);
	--surface-overlay: var(--dark-surface-overlay);
	--surface-hover: var(--dark-surface-hover);
	--surface-inverse: var(--dark-surface-inverse);
	--fg: var(--dark-fg);
	--fg-muted: var(--dark-fg-muted);
	--fg-subtle: var(--dark-fg-subtle);
	--fg-on-accent: var(--dark-fg-on-accent);
	--fg-on-inverse: var(--dark-fg-on-inverse);
	--fg-on-yes: var(--dark-fg-on-yes);
	--control-track: var(--dark-control-track);
	--line: var(--dark-line);
	--line-subtle: var(--dark-line-subtle);
	--line-strong: var(--dark-line-strong);
	--accent: var(--dark-accent);
	--accent-hover: var(--dark-accent-hover);
	--accent-tint: var(--dark-accent-tint);
	--yes: var(--dark-yes);
	--yes-hover: var(--dark-yes-hover);
	--yes-tint: var(--dark-yes-tint);
	--no: var(--dark-no);
	--no-hover: var(--dark-no-hover);
	--no-tint: var(--dark-no-tint);
	--opp: var(--dark-opp);
	--opp-hover: var(--dark-opp-hover);
	--opp-tint: var(--dark-opp-tint);
	--accent-surface: var(--dark-accent-surface);
	--accent-border: var(--dark-accent-border);
	--yes-text: var(--dark-yes-text);
	--yes-surface: var(--dark-yes-surface);
	--yes-deep: var(--dark-yes-deep);
	--yes-deep-hover: var(--dark-yes-deep-hover);
	--no-text: var(--dark-no-text);
	--no-surface: var(--dark-no-surface);
	--opp-deep: var(--dark-opp-deep);
	--opp-deep-hover: var(--dark-opp-deep-hover);
	--warning: var(--dark-warning);
	--shadow-weak: var(--dark-shadow-weak);
	--shadow: var(--dark-shadow);
	--shadow-strong: var(--dark-shadow-strong);
	--shadow-heavy: var(--dark-shadow-heavy);
	--scrim-soft: var(--dark-scrim-soft);
	--overlay-dark: var(--dark-overlay-dark);
	--overlay-dark-strong: var(--dark-overlay-dark-strong);
	--scrim: var(--dark-scrim);
	--overlay-light-faint: var(--dark-overlay-light-faint);
	--overlay-light: var(--dark-overlay-light);
	--fg-on-overlay: var(--dark-fg-on-overlay);
	--surface-translucent: var(--dark-surface-translucent);
	--neutral-tint: var(--dark-neutral-tint);
	--neutral-tint-border: var(--dark-neutral-tint-border);
	--accent-tint-strong: var(--dark-accent-tint-strong);
	--yes-tint-strong: var(--dark-yes-tint-strong);
	--no-tint-strong: var(--dark-no-tint-strong);
	--no-overlay: var(--dark-no-overlay);
	--warning-overlay: var(--dark-warning-overlay);
	--no-glow: var(--dark-no-glow);
	--no-glow-strong: var(--dark-no-glow-strong);
	--fresh-ring: var(--dark-fresh-ring);
	--fresh-glow: var(--dark-fresh-glow);
	--stale-ring: var(--dark-stale-ring);
	--stale-glow: var(--dark-stale-glow);
	--stale-glow-soft: var(--dark-stale-glow-soft);
	--stale-ring-peak: var(--dark-stale-ring-peak);
	/* Pin the UA scheme so native controls follow the explicit choice. */
	color-scheme: dark;
}

/* Explicit light choice pins the UA scheme too, so native controls don't
   follow the OS into dark while the page stays light. */
:root[data-theme="light"] {
	color-scheme: light;
}

/* === END DESIGN TOKENS ===
   Everything below is rules. Colour literals here are migrated to tokens in
   Phase 2 and are counted by the ratchet in
   src/client/__tests__/unit/styles/theme-tokens.test.ts */

/* Global Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	touch-action: manipulation;
}

body {
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
		Cantarell, sans-serif;
	background-color: var(--gray-light);
	color: var(--text);
	line-height: 1.5;
	width: 100vw;
	height: 100vh;
	overflow-x: hidden;
	touch-action: manipulation;
}

button {
	touch-action: manipulation;
}

#app {
	height: 100vh;
}

/* Page Container */
.container {
	max-width: 600px;
	margin: 0 auto;
	padding: var(--padding);
}

/* Pages */
.page {
	display: block;
	animation: fadeIn 0.3s ease;
	height: 100%;
	overflow: auto;
	overflow-x: hidden;
}

.page.hidden {
	display: none;
}

.header-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Card */
.card {
	background: var(--background);
	border-radius: var(--border-radius);
	padding: var(--padding);
	box-shadow: 0 2px 8px var(--shadow-weak);
}

.muted {
	color: var(--gray-dark);
	font-size: 12px;
	margin-top: 4px;
}

/* Login screen */
.login-container {
	min-height: 100vh;
	/* Honour the notch / home indicator on mobile. */
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: max(var(--padding), env(safe-area-inset-top));
	padding-bottom: max(var(--padding), env(safe-area-inset-bottom));
}

.login-card {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	padding: 28px 24px;
}

.login-brand {
	text-align: center;
	margin-bottom: 24px;
}

.login-title {
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 4px;
}

.login-subtitle {
	color: var(--gray-dark);
	font-size: 14px;
	margin: 0;
}

.pair-builder-summary {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 12px;
	align-items: center;
	margin: 16px 0;
}

.pair-builder-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pair-builder-panel-header h2 {
	font-size: 18px;
	margin: 0;
}

.pair-builder-panel-body {
	margin-top: 8px;
}

.pair-builder-panel.collapsed .pair-builder-panel-body {
	display: none;
}

.pair-builder-panel.collapsed {
	padding-bottom: 12px;
}

.pair-builder-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.market-list-placeholder {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.search-box.compact {
	margin: 8px 0 12px;
}

.search-box.compact input {
	padding: 8px 10px;
	font-size: 14px;
}

.market-option {
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	padding: 10px 12px;
	background: var(--background);
	transition:
		border-color var(--transition),
		box-shadow var(--transition);
	cursor: pointer;
}

.market-option:hover {
	border-color: var(--primary);
	box-shadow: 0 2px 6px var(--shadow-weak);
}

.market-option.selected {
	border-color: var(--primary);
	background: var(--accent-tint);
}

.market-option-title {
	font-weight: 600;
	font-size: 14px;
}

.market-option-subtitle {
	font-size: 12px;
	color: var(--gray-dark);
}

.filter-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 8px 0 12px;
}

.filter-row label {
	font-size: 12px;
	color: var(--gray-dark);
}

.filter-row select {
	padding: 8px 10px;
	border-radius: var(--border-radius);
	border: 1px solid var(--border);
	font-size: 14px;
}

/* Header */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.header-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* The text nav buttons keep their labels on a single line. */
.header-actions .btn {
	white-space: nowrap;
}

/*
 * Responsive nav-button labels. Wide is the default; the narrow variant is
 * swapped in below 600px, where the header has to fit on one row. Exactly one
 * is in the layout at any width, so the button is only ever as wide as the
 * label it is actually showing.
 */
.label-narrow {
	display: none;
}

.header h1 {
	flex: 1;
	font-size: 28px;
	font-weight: 600;
}

/* Slippage Slider */
.slippage-slider-container {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	justify-content: center;
}

.pair-builder-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 16px;
}

.market-list-placeholder {
	min-height: 120px;
	border: 1px dashed var(--border);
	border-radius: var(--border-radius);
	margin-top: 8px;
	background: var(--gray-light);
}

.muted {
	color: var(--gray-dark);
	font-size: 14px;
}

@media (min-width: 900px) {
	.container {
		max-width: 960px;
	}

	.pair-builder-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.slippage-slider-container label {
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--gray-dark);
	margin-bottom: 0;
}

.slippage-slider {
	width: 85vw;
	height: 4px;
	border-radius: 2px;
	background: var(--border);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.slippage-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--primary);
	cursor: pointer;
	box-shadow: 0 2px 4px var(--shadow);
	transition: background-color var(--transition);
}

.slippage-slider::-webkit-slider-thumb:active {
	background: var(--accent-hover);
}

.slippage-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--primary);
	cursor: pointer;
	border: none;
	box-shadow: 0 2px 4px var(--shadow);
	transition: background-color var(--transition);
}

.slippage-slider::-moz-range-thumb:active {
	background: var(--accent-hover);
}

.slippage-slider::-moz-range-track {
	background: transparent;
	border: none;
}

.slippage-value {
	font-size: 12px;
	font-weight: 600;
	color: var(--primary);
	min-width: 32px;
	text-align: right;
}

.slippage-control-btn {
	padding: 4px 8px;
	font-size: 14px;
	font-weight: 600;
	min-width: 32px;
	height: 32px;
	border-radius: 4px;
	background-color: var(--primary);
	color: var(--fg-on-accent);
	border: none;
	cursor: pointer;
	transition: all var(--transition);
}

.slippage-control-btn:hover {
	background-color: var(--primary-dark);
	transform: scale(1.05);
}

.slippage-control-btn:active {
	transform: scale(0.98);
}

.slippage-control-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Independent Slippage Container */
.independent-slippage-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 6px;
	row-gap: 4px;
	align-items: center;
	width: 100%;
}

.independent-slippage-row {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) 30px 28px;
	align-items: center;
	gap: 6px;
	width: 100%;
}

.independent-slippage-row .slippage-slider {
	width: 100%;
	min-width: 0;
}

.independent-slippage-row .slippage-control-btn {
	min-width: 28px;
	height: 28px;
	padding: 2px 6px;
	font-size: 13px;
}

.independent-slippage-row .slippage-value {
	min-width: 30px;
	font-size: 11px;
	text-align: center;
}

.independent-slippage-back-btn {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	justify-self: center;
}

/* Side A (Yes/Green) slider */
.slippage-slider-a::-webkit-slider-thumb {
	background: var(--success);
}

.slippage-slider-a::-webkit-slider-thumb:active {
	background: var(--yes-hover);
}

.slippage-slider-a::-moz-range-thumb {
	background: var(--success);
}

.slippage-slider-a::-moz-range-thumb:active {
	background: var(--yes-hover);
}

.slippage-value-a {
	color: var(--success);
}

.slippage-control-btn-a {
	background-color: var(--success);
}

.slippage-control-btn-a:hover {
	background-color: var(--yes-hover);
}

/* Side B (No/Purple) slider */
.slippage-slider-b::-webkit-slider-thumb {
	background: var(--opponent);
}

.slippage-slider-b::-webkit-slider-thumb:active {
	background: var(--opp-hover);
}

.slippage-slider-b::-moz-range-thumb {
	background: var(--opponent);
}

.slippage-slider-b::-moz-range-thumb:active {
	background: var(--opp-hover);
}

.slippage-value-b {
	color: var(--opponent);
}

.slippage-control-btn-b {
	background-color: var(--opponent);
}

.slippage-control-btn-b:hover {
	background-color: var(--opp-hover);
}

/* A/B toggle button */
.slippage-toggle-btn {
	font-size: 11px;
	min-width: 28px;
	height: 28px;
	padding: 2px 6px;
}

/* Typography */
h1 {
	font-size: 32px;
	font-weight: 600;
	margin-bottom: 24px;
	text-align: center;
}

h2 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 16px;
}

p {
	margin-bottom: 8px;
}

/* Forms */
.form-group {
	margin-bottom: 16px;
}

label {
	display: block;
	font-weight: 500;
	margin-bottom: 8px;
	font-size: 14px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="email"] {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	/* 16px keeps iOS Safari from zooming the viewport on focus. */
	font-size: 16px;
	font-family: inherit;
	transition: border-color var(--transition);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Buttons */
.btn {
	padding: 12px 16px;
	border: none;
	border-radius: var(--border-radius);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	/*
	 * Buttons without a variant used to fall through to the UA's default
	 * button face. Once `color-scheme: light dark` landed that face turned
	 * mid-grey in dark mode, leaving the coloured labels on the manual-price
	 * steppers at ~1.1:1. Every variant that sets its own background is
	 * declared later and still wins.
	 */
	background-color: var(--surface-sunken);
	color: var(--fg);
	transition: all var(--transition);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

@keyframes pulse-glow {
	0% {
		box-shadow: 0 0 10px var(--no-glow);
	}
	50% {
		box-shadow: 0 0 40px var(--no-glow-strong);
	}
	100% {
		box-shadow: 0 0 10px var(--no-glow);
	}
}

.confirm-pending {
	background-color: var(--danger) !important; /* Amber color */
	color: var(--fg-on-accent);
	animation: pulse-glow 0.75s infinite ease-in-out;
	transform: scale(1.02);
}

/*
 * 2-click guard OFF: a red border warns the operator that order buttons fire on
 * a single tap. Applied to every order button while the confirm toggle is off
 * (see updateConfirmToggle in handlers/order-handler.ts). Border-only so it
 * never fights the confirm-pending fill (which only appears when the guard is
 * ON, so the two never coexist).
 */
.confirm-guard-off {
	border: 2px solid var(--danger) !important;
}

.btn:active {
	transform: scale(0.98);
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-primary {
	background-color: var(--primary);
	color: var(--fg-on-accent);
}

.btn-primary:hover:not(:disabled) {
	background-color: var(--accent-hover);
}

.btn-danger {
	background-color: var(--danger);
	color: var(--fg-on-accent);
}

.btn-danger:hover:not(:disabled) {
	background-color: var(--no-hover);
}

.btn-opponent {
	background-color: var(--opponent);
	color: var(--fg-on-accent);
}

.btn-opponent:hover:not(:disabled) {
	background-color: var(--opp-hover);
}

.btn-enable {
	margin-bottom: 12px;
}

.order-controls {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 12px;
}

.order-controls .btn-enable {
	margin-bottom: 0;
	flex: 1;
	width: auto;
}
.order-controls .btn-2c {
	padding: 12px 12px !important;
	font-size: 16px !important;
}
.order-controls .btn-2c[aria-pressed="false"] {
	background-color: var(--no) !important;
	color: var(--fg-on-accent) !important;
}

.order-controls .btn-delayed-price {
	padding: 12px 12px !important;
	font-size: 16px !important;
}
.order-controls .btn-delayed-price[aria-pressed="true"] {
	background-color: var(--primary) !important;
	color: var(--fg-on-accent) !important;
}

.btn-success {
	background-color: var(--success);
	color: var(--fg-on-yes);
	flex: 1;
	padding: 16px;
	font-size: 18px;
}

.btn-success:hover:not(:disabled) {
	background-color: var(--yes-hover);
}

.btn-secondary {
	background-color: var(--border);
	color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
	background-color: var(--line-strong);
}

.btn-full {
	width: 100%;
}

.btn-icon {
	width: 44px;
	height: 30px;
	padding: 0;
	border-radius: 50%;
	background-color: var(--gray-light);
	color: var(--text);
	font-size: 20px;
}

.btn-icon:hover {
	background-color: var(--border);
}

.btn-danger-icon {
	font-size: 16px;
	color: var(--no);
}

.btn-danger-icon:hover {
	background-color: var(--no-surface);
}

/* Search Box */
.search-box {
	margin-bottom: 16px;
}

.search-box input {
	width: 100%;
}

/* Markets List */
.events-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.market-item {
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	padding: var(--padding);
	cursor: pointer;
	transition: all var(--transition);
}

.market-item:hover {
	border-color: var(--primary);
	box-shadow: 0 4px 12px var(--accent-tint-strong);
	transform: translateY(-2px);
}

.market-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 8px;
}

.market-title {
	font-weight: 600;
	font-size: 16px;
}

.market-status {
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 4px;
	background-color: var(--gray-light);
	color: var(--gray-dark);
}

.market-subtitle {
	font-size: 14px;
	color: var(--gray-dark);
	margin-bottom: 8px;
}

.market-spread {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
}

/* Event Items */
.event-item {
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	padding: var(--padding);
	cursor: pointer;
	transition: all var(--transition);
	margin-bottom: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.event-item:hover {
	border-color: var(--primary);
	box-shadow: 0 4px 12px var(--accent-tint-strong);
	transform: translateY(-2px);
	background: var(--gray-light);
}

.event-item:active {
	transform: translateY(0);
}

.event-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
}

.event-title {
	font-weight: 600;
	font-size: 16px;
	flex: 1;
	line-height: 1.4;
}

.event-category {
	display: inline-block;
	padding: 4px 8px;
	background: var(--primary);
	color: var(--fg-on-accent);
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.event-subtitle {
	font-size: 14px;
	color: var(--gray-dark);
}

.event-date {
	font-size: 14px;
	color: var(--primary);
	font-weight: 500;
	margin-top: 4px;
}

.event-details {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13px;
}

.event-ticker {
	display: flex;
	gap: 8px;
}

.event-ticker .label,
.event-competition .label {
	font-weight: 500;
	color: var(--fg-subtle);
	min-width: 70px;
}

.event-ticker .value,
.event-competition .value {
	font-family: "Courier New", monospace;
	color: var(--text);
}

.event-competition {
	display: flex;
	gap: 8px;
}

.event-metadata {
	display: flex;
	gap: 16px;
	padding-top: 8px;
	border-top: 1px solid var(--border);
	font-size: 12px;
}

.metadata-item {
	display: flex;
	gap: 4px;
}

.metadata-item .label {
	font-weight: 500;
	color: var(--fg-subtle);
}

.metadata-item .value {
	color: var(--text);
}

.event-status-badge {
	display: inline-block;
	padding: 4px 8px;
	background: var(--success);
	color: var(--fg-on-accent);
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: capitalize;
	align-self: flex-start;
}

/* Market Info */
.market-info {
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	padding: var(--padding);
	margin-bottom: 24px;
}

.info-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
}

.info-row:last-child {
	border-bottom: none;
}

/* Orderbook Error - Floating Overlay */
.orderbook-error,
.order-error-overlay {
	position: fixed;
	/* Top-anchored toast: clears the notch and never overlaps the
	   order buttons in the centre of the screen. */
	top: calc(env(safe-area-inset-top, 0px) + 12px);
	left: 50%;
	transform: translateX(-50%);
	/* Keep clear of the viewport edges on narrow phones. */
	width: calc(100% - 24px);
	background: var(--no-overlay); /* High opacity red */
	border: 2px solid var(--overlay-light);
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 15px;
	color: var(--fg-on-accent);
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 9999;
	box-shadow: 0 8px 32px var(--shadow-heavy);
	cursor: pointer;
	min-width: 320px;
	max-width: 500px;
	backdrop-filter: blur(4px);
	animation: fadeInError 0.3s ease-out;
	transition:
		opacity 0.2s ease-out,
		transform 0.2s ease-out;
}

.orderbook-error:hover,
.order-error-overlay:hover {
	opacity: 0.85;
	transform: translateX(-50%) scale(1.02);
}

.orderbook-error.hidden,
.order-error-overlay.hidden {
	display: none;
}

@keyframes fadeInError {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-8px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1);
	}
}

.selected-market-title {
	margin-bottom: 0;
	text-align: center;
	font-size: 0.75em;
	font-weight: 700;
}

/* Position Display */
.market-position {
	background: var(--gray-light);
	border-radius: var(--border-radius);
	margin-bottom: 4px;
}

.position-header {
	font-size: 14px;
	font-weight: 600;
	color: var(--gray-dark);
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.position-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.position-item {
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 12px;
	font-size: 13px;
	text-align: center;
	transition: all var(--transition);
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.position-item.empty {
	color: var(--gray-dark);
	background: var(--surface-sunken);
}

.position-item.held {
	background: var(--accent-surface);
	border-color: var(--primary);
	color: var(--primary);
	font-weight: 500;
}

.position-item.yes-position.held {
	background: var(--yes-surface);
	border-color: var(--success);
	color: var(--success);
}

.position-item.no-position.held {
	background: var(--no-surface);
	border-color: var(--danger);
	color: var(--danger);
}

/* Position Error - Floating Overlay */
.position-error {
	position: fixed;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--warning-overlay); /* High opacity orange */
	border: 2px solid var(--overlay-light);
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 15px;
	color: var(--fg-on-accent);
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 9999;
	box-shadow: 0 8px 32px var(--shadow-heavy);
	cursor: pointer;
	min-width: 320px;
	max-width: 500px;
	backdrop-filter: blur(4px);
	animation: fadeInError 0.3s ease-out;
	transition:
		opacity 0.2s ease-out,
		transform 0.2s ease-out;
}

.position-error:hover {
	opacity: 0.85;
	transform: translate(-50%, -50%) scale(1.02);
}

.position-error.hidden {
	display: none;
}

/* Settings Summary */
.settings-summary {
	background: var(--gray-light);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	padding: 4px 6px;
	position: relative;
}

.settings-summary p {
	margin-bottom: 0;
	font-size: 13px;
}

.settings-summary strong {
	color: var(--primary);
}

/* Order Buttons */
.order-buttons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 24px;
	height: 50vh;
}

.order-buttons .btn {
	width: 100%;
	height: 100%;
	padding: 16px;
	font-size: 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-weight: 600;
}

.order-buttons .btn span {
	display: block;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Order Status */
.order-status {
	background: var(--gray-light);
	border-radius: var(--border-radius);
	padding: var(--padding);
	margin-bottom: 16px;
	text-align: center;
}

.order-status:not(.hidden) {
	display: block;
}

.order-status.success {
	background-color: var(--yes-tint);
	color: var(--yes-hover);
}

.order-status.error {
	background-color: var(--no-tint);
	color: var(--no-text);
}

.order-status.loading {
	background-color: var(--accent-tint);
	color: var(--primary);
}

/* Messages */
.loading,
.error-message {
	padding: 12px;
	border-radius: var(--border-radius);
	text-align: center;
}

.loading {
	background-color: var(--accent-tint);
	color: var(--primary);
}

.error-message {
	background-color: var(--no-tint);
	color: var(--no-text);
}

.error-message.hidden,
.loading.hidden {
	display: none;
}

/* Modal */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal.hidden {
	display: none;
}

.modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--scrim-soft);
	z-index: 999;
}

.modal-content {
	position: relative;
	background: var(--background);
	border-radius: var(--border-radius);
	max-width: 500px;
	width: 90%;
	max-height: 90vh;
	overflow: hidden;
	box-shadow: 0 20px 60px var(--shadow-strong);
	z-index: 1000;
	display: flex;
	flex-direction: column;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--padding);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;

	.text-muted {
		font-size: 12px;
		color: var(--gray-dark);
	}
}

.modal-header h2 {
	margin-bottom: 0;
}

.modal-body {
	padding: var(--padding);
	overflow-y: auto;
	flex: 1;
	-webkit-overflow-scrolling: touch;
}

.modal-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}

.modal-actions > div {
	display: flex;
	gap: 12px;
}

.modal-actions .btn {
	flex: 1;
}

#reset-defaults-btn {
	width: 100%;
}

.market-orderbook {
	/* Uses flexbox to place YES and NO sides next to each other */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 20px;
	margin: 3px 0;
	border-top: 1px solid var(--line);
	/* Anchor the absolutely-positioned staleness icon and give the glow room. */
	position: relative;
	border-radius: 10px;
	/* Smoothly cross-fade between neutral / fresh (green) / stale (red). */
	transition: box-shadow 0.35s ease;
}

/* Fresh: a soft green glow says "this book is live". */
.market-orderbook.is-fresh {
	box-shadow:
		0 0 0 1px var(--fresh-ring),
		0 0 10px 1px var(--fresh-glow);
}

/* Stale/error: red glow, gently pulsing to draw the eye. */
.market-orderbook.is-stale {
	box-shadow:
		0 0 0 1px var(--stale-ring),
		0 0 12px 2px var(--stale-glow);
	animation: orderbook-stale-pulse 1.6s ease-in-out infinite;
}

@keyframes orderbook-stale-pulse {
	0%,
	100% {
		box-shadow:
			0 0 0 1px var(--stale-glow),
			0 0 10px 1px var(--stale-glow-soft);
	}
	50% {
		box-shadow:
			0 0 0 1px var(--stale-ring-peak),
			0 0 16px 3px var(--stale-ring);
	}
}

@media (prefers-reduced-motion: reduce) {
	.market-orderbook.is-stale {
		animation: none;
	}
}

/* --- Staleness info icon + tooltip --- */

.orderbook-staleness {
	position: absolute;
	top: -9px;
	right: -9px;
	z-index: 3;
	/* Hidden until stale; the monitor toggles .visible. */
	display: none;
}

.orderbook-staleness.visible {
	display: block;
}

.orderbook-staleness-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--no);
	color: var(--fg-on-accent);
	font-size: 0.72rem;
	font-weight: 700;
	font-style: italic;
	font-family: Georgia, "Times New Roman", serif;
	line-height: 1;
	cursor: help;
	box-shadow: 0 1px 3px var(--shadow-strong);
}

.orderbook-staleness-tooltip {
	position: absolute;
	top: 50%;
	right: calc(100% + 8px);
	transform: translateY(-50%);
	white-space: nowrap;
	background: var(--surface-inverse);
	color: var(--fg-on-inverse);
	font-size: 0.72rem;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 6px;
	box-shadow: 0 2px 8px var(--shadow-strong);
	/* Revealed on hover/focus of the indicator. */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.orderbook-staleness:hover .orderbook-staleness-tooltip,
.orderbook-staleness:focus-within .orderbook-staleness-tooltip {
	opacity: 1;
}

.orderbook-side {
	/* Each side takes up half the available space */
	flex: 1;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 12px;
	min-width: 0;
	overflow: hidden;
}

/* Specific color for the 'Yes' side (often green for positive/buy) */
.yes-side .side-header {
	color: var(--yes-text); /* Tailwind green-500 */
}

/* Specific color for the 'No' side (often red for negative/sell) */
.no-side .side-header {
	color: var(--no-text); /* Tailwind red-500 */
}

/* --- Header Styling --- */

.side-header {
	font-size: 1.1rem;
	font-weight: bold;
	/* margin-bottom: 10px; */
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Grid Structure for Prices/Volumes --- */

.orderbook-grid {
	display: flex;
	flex-direction: column;
	gap: 8px; /* Space between the Bid and Ask levels */
}

.price-level {
	/* Defines a 3-column grid for Label, Value, and Volume */
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--surface-sunken);
	border-radius: 4px;
}

/* --- Content Alignment --- */

.price-label {
	/* Aligns "Bid/Ask" label to the left */
	text-align: left;
	font-weight: 500;
	display: flex;
	align-items: center;
}

.price-value {
	/* Centers the price value */
	text-align: center;
	font-weight: bold;
	color: var(--fg);
}

.price-volume {
	/* Aligns volume to the right */
	text-align: right;
	font-size: 0.85rem;
	color: var(--fg-muted);
	position: relative;
}

.level-price {
	position: absolute;
	bottom: -0.55em;
	right: -0.3em;
	font-size: 0.55rem;
	line-height: 1;
	color: var(--fg-muted);
	background: var(--surface-translucent);
	padding: 1px 2px;
	border-radius: 3px;
	font-weight: 500;
	white-space: nowrap;
	pointer-events: none;
	display: inline;
}

.extra-info.hide-prices .level-price {
	display: none;
}

.extra-info {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* --- Icons --- */

.bid-icon,
.ask-icon {
	margin-right: 6px;
	font-size: 1rem; /* Adjust emoji size */
}

/* Responsive Design */
@media (max-width: 600px) {
	.container {
		padding: var(--padding-small);
	}

	h1 {
		font-size: 20px;
	}

	.header h1 {
		font-size: 20px;
		/* Global h1 centres; the header title stays left-aligned. */
		text-align: left;
		margin-bottom: 0;
	}

	/*
	 * Single-row events header on mobile: title, nav buttons, tier badge,
	 * gear. Measured at 375px (359px of usable width): the actions cluster
	 * needs ~237px with the narrow labels, and a worst-case
	 * "Lvl 99 · $10000" badge still leaves ~20px of slack. The title takes
	 * whatever is left and ellipsises rather than pushing anything onto a
	 * second row.
	 *
	 * Scoped to this page on purpose — the order header packs a market
	 * selector and an event-type chip, and it must stay free to wrap.
	 */
	#events-page .header {
		flex-wrap: nowrap;
		gap: 6px;
	}

	#events-page .header h1 {
		/* Shrinkable, so the actions always get the width they need. */
		flex: 0 1 auto;
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.header-actions {
		/* Sized by its content — never compressed to fit the title. */
		flex: 0 0 auto;
		gap: 6px;
	}

	/* Short labels only: the wide ones do not fit on one row at 375px. */
	.label-wide {
		display: none;
	}

	.label-narrow {
		display: inline;
	}

	/*
	 * Compact nav buttons. Horizontal padding shrinks to buy row width, but
	 * the 44px tap-target height is kept — it costs nothing on this axis.
	 */
	.header-actions .btn-small {
		flex: 0 0 auto;
		min-height: 44px;
		padding: 0 10px;
		font-size: 12px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Badge and gear stay their natural size, pinned to the right. */
	.header-actions .permission-level-badge {
		flex: 0 0 auto;
	}

	.header-actions .btn-icon {
		flex: 0 0 auto;
		height: 44px;
		width: 36px;
	}

	.modal-content {
		width: 95%;
	}

	.orderbook-side {
		/* Removes padding on mobile if needed to save space */
		padding: 10px;
	}

	.btn-small {
		font-size: 13px;
		padding: 6px 8px;
	}

	.pnl-btn {
		max-width: 75px;
	}

	.data-source-selector label,
	.category-selector label {
		font-size: 12px;
	}

	.data-source-selector select,
	.category-selector select {
		font-size: 12px;
		padding: 6px 8px;
	}

	.event-title {
		font-size: 14px;
	}

	.event-category,
	.event-date,
	.event-details {
		font-size: 12px;
	}

	.market-title {
		font-size: 14px;
	}

	.market-subtitle,
	.market-details,
	.market-status-badge {
		font-size: 12px;
	}
}

/* Utilities */
.hidden {
	display: none !important;
}

/*
 * Permission gating: controls a user's tier may not use are hidden with a
 * DEDICATED class (not `.hidden`) so it never collides with the app's own
 * `.hidden` toggling (e.g. manual-price visibility). Both use !important;
 * gating wins because this rule is declared later in the source. See
 * src/client/gates.ts.
 */
.permission-gated-hidden {
	display: none !important;
}

/*
 * The shared toggle turns RED when checked, which reads as "warning: this
 * trading setting is active" — correct for manual-price/sell-mode, wrong for
 * a display preference. Dark Mode gets the accent colour instead.
 */
#dark-mode-toggle:checked + .toggle-slider {
	background-color: var(--accent);
}

/* App version in the settings-modal header (was an inline #999). */
.app-version {
	color: var(--fg-subtle);
	font-size: 0.8em;
}

/* Compact tier badge in the header (e.g. "Lvl 2 · $100"). */
.permission-level-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	/* Slate-on-white: the previous #cbd5e1 was written for a dark
	   background and was illegible on the light header. */
	color: var(--fg-muted);
	background: var(--neutral-tint);
	border: 1px solid var(--neutral-tint-border);
	white-space: nowrap;
}

/* Per-order cap hint next to the order dollar amount. */
.bet-cap-hint {
	font-size: 12px;
	color: var(--gray-dark);
	white-space: nowrap;
}

/* Tier badge row inside the settings modal (label left, badge right). */
.settings-permission-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 14px;
	color: var(--text);
}

/* Phase 3: API Integration Styles */

/* Market Controls */
.market-controls {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	justify-content: space-between;
}

.market-controls button {
	flex: 1;
	font-size: 12px;
	padding: 8px 12px;
}

.btn-small {
	padding: 8px 12px;
	font-size: 12px;
}

/* Category Selector */
.data-source-selector {
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.data-source-selector label {
	font-weight: 600;
	font-size: 14px;
}

.data-source-selector select {
	min-width: 140px;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 14px;
	background-color: var(--background);
	cursor: pointer;
}

.category-selector {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	/* Keep the prefix/suffix selects and the icon buttons on one line: the
	   selects shrink to share the row rather than wrapping the star below. */
	flex-wrap: nowrap;
}

.category-selector label {
	font-weight: 600;
	font-size: 14px;
}

.category-selector select {
	/* Both selects flex-shrink from a 0 basis so they split the available
	   width evenly; min-width:0 lets them shrink past their content (the full
	   label is still visible once the dropdown is opened). */
	flex: 1 1 0;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 14px;
	background-color: var(--background);
	cursor: pointer;
}

/* Icon buttons keep their intrinsic size and never shrink out of the row. */
.category-selector .btn-icon {
	flex: 0 0 auto;
}

/* Market Switcher Dropdown */
.market-selector-wrapper {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 4px;
	min-height: 30px;
}

.market-selector-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.btn-market-selection {
	padding: 4px 4px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	box-shadow: 0 2px 8px var(--shadow-weak);
}

.btn-market-nav {
	width: 28px;
	height: 28px;
	padding: 0;
	font-size: 25px;
	line-height: 1;
	border-radius: 50%;
	flex-shrink: 0;
}

.inverse-market-indicator {
	margin-left: 2px;
	padding: 2px 4px;
	border-radius: 999px;
	background: var(--no);
	color: var(--fg-on-accent);
	font-size: 9%;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 2px 6px var(--no-tint-strong);
}

.event-type-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 2px;
	border-radius: 999px;
	background: var(--accent-surface);
	font-size: 16px;
	line-height: 1;
	box-shadow: 0 2px 6px var(--accent-tint-strong);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition:
		transform 0.15s,
		box-shadow 0.15s;
}

.event-type-indicator:hover {
	transform: scale(1.1);
	box-shadow: 0 3px 10px var(--accent-tint-strong);
}

.event-type-indicator:active {
	transform: scale(0.95);
}

.market-switcher {
	padding: 6px 10px;
	border: 1px solid var(--primary);
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	background-color: var(--background);
	color: var(--text);
	cursor: pointer;
	max-width: 260px;
	transition: all var(--transition);
	box-shadow: 0 2px 4px var(--accent-tint);
}

.market-switcher:hover:not(.hidden) {
	border-color: var(--accent-hover);
	box-shadow: 0 4px 8px var(--accent-tint-strong);
	background-color: var(--accent-surface);
}

.market-switcher:focus {
	outline: none;
	border-color: var(--accent-hover);
	box-shadow: 0 0 0 3px var(--accent-tint);
}

.market-switcher:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.market-switcher.hidden {
	display: none;
}

.inverse-market-switcher {
	border-color: var(--border);
	font-size: 12px;
	max-width: 240px;
}

.market-selection-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 8px;
	background: var(--accent-surface);
	border: 1px solid var(--accent-border);
	border-radius: 10px;
	padding: 8px 10px;
	margin: 0 0 8px;
	font-size: 12.5px;
}

.market-selection-summary.hidden {
	display: none;
}

.parallel-market-actions {
	justify-content: flex-start;
	padding-top: 8px;
}

.parallel-markets-modal-content {
	max-width: 760px;
}

.parallel-markets-modal-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.parallel-markets-selected {
	border: 1px solid var(--gray-light);
	border-radius: 10px;
	padding: 10px;
	background: var(--overlay-light-faint);
}

.parallel-markets-selected-header,
.parallel-markets-venue-row,
.parallel-markets-search-row,
.parallel-markets-selected-item,
.parallel-markets-event-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.parallel-markets-venue-row,
.parallel-markets-search-row {
	flex-wrap: wrap;
}

.parallel-markets-search-panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.parallel-markets-venue-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

#parallel-markets-selected-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 140px;
	overflow-y: auto;
}

.parallel-markets-selected-item,
.parallel-markets-event-item,
.parallel-markets-market-list {
	border: 1px solid var(--gray-light);
	border-radius: 8px;
	padding: 8px 10px;
}

.parallel-markets-selected-title,
.parallel-markets-event-title,
.parallel-markets-market-title {
	display: block;
	font-weight: 600;
	line-height: 1;
	font-size: 14px;
}

.parallel-markets-selected-meta,
.parallel-markets-event-meta,
.parallel-markets-market-meta,
.parallel-markets-empty {
	color: var(--gray-dark);
	font-size: 0.9rem;
}

.parallel-markets-input {
	flex: 1 1 260px;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid var(--gray-light);
	border-radius: 8px;
	color: inherit;
}

.parallel-markets-custom-input {
	flex-basis: 220px;
	text-transform: uppercase;
}

.parallel-markets-event-search-input {
	flex: 0 0 auto;
	width: 100%;
	box-sizing: border-box;
	padding: 5px 10px;
	font-size: 0.85rem;
}

.parallel-markets-results {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 44vh;
	overflow-y: auto;
}

.parallel-markets-event-header {
	width: 100%;
	background: transparent;
	border: none;
	color: inherit;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.parallel-markets-market-list {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.parallel-markets-market-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.parallel-markets-market-filter {
	padding-bottom: 4px;
}

.parallel-markets-selected-header h3 {
	margin: 0;
	font-size: 1.1rem;
}

.parallel-markets-selected-item > div,
.parallel-markets-event-header > span:first-child,
.parallel-markets-market-item > span {
	flex: 1;
	min-width: 0;
}

.parallel-markets-selected-item .btn,
.parallel-markets-selected-header .btn,
.parallel-markets-search-row .btn,
.parallel-markets-venue-row .btn {
	padding: 8px 12px;
	font-size: 0.95rem;
}

.parallel-markets-modal-content .modal-actions {
	flex-direction: row;
	gap: 10px;
	margin-top: 16px;
	padding-top: 12px;
}

.parallel-markets-modal-content .modal-actions .btn {
	min-height: 44px;
}

@media (max-width: 640px) {
	.parallel-markets-search-row {
		align-items: stretch;
	}

	.parallel-markets-search-row .btn {
		width: 100%;
	}
}

.market-selection-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 4px 6px;
	background: var(--surface);
	border-radius: 8px;
	border: 1px solid var(--accent-border);
}

.market-selection-row .label {
	font-weight: 600;
	color: var(--fg);
}

.market-selection-row .value {
	color: var(--fg-muted);
	font-family: "Courier New", monospace;
	text-align: right;
	flex: 1;
}

.market-selection-modal-content {
	max-width: 640px;
	width: 92%;
}

.market-selection-modal-body {
	display: grid;
	gap: 12px;
	max-height: 65vh;
	overflow-y: auto;
	padding-right: 4px;
	padding-left: 4px;
}

.modal-selector-row {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	background: var(--surface-sunken);
	border: 1px solid var(--line);
	padding: 10px 12px;
	border-radius: 10px;
	gap: 6px;
}

.modal-selector-row .market-switcher {
	flex: none;
	width: 100%;
	min-width: 0;
}

.modal-selector-row .inverse-market-switcher {
	max-width: none;
}

.market-selector-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--fg-muted);
	min-width: 110px;
}

/* Market switcher options styling */
.market-switcher option {
	padding: 8px 12px;
	background-color: var(--background);
	color: var(--text);
	border-radius: 4px;
}

/* Credentials Modal */
#credentials-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	pointer-events: none;
}

#credentials-modal .modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--scrim);
	z-index: 1999;
	pointer-events: auto;
}

#credentials-modal .modal-content {
	background: var(--surface);
	border-radius: 8px;
	padding: 24px;
	max-width: 500px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 10px 40px var(--shadow);
	z-index: 2001;
	pointer-events: auto;
	position: relative;
}

#credentials-modal.hidden {
	display: none;
}

.modal-info {
	background: var(--accent-surface);
	border-left: 4px solid var(--primary);
	padding: 12px;
	border-radius: 4px;
	font-size: 13px;
	margin-bottom: 16px;
}

.modal-info a {
	color: var(--primary);
	text-decoration: none;
	font-weight: 600;
}

.modal-info a:hover {
	text-decoration: underline;
}

#credentials-form .form-group textarea {
	font-family: "Courier New", monospace;
	font-size: 12px;
	line-height: 1.4;
	resize: vertical;
}

#credentials-form .form-group small {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--fg-subtle);
}

/* Order Details Display */
.order-details-section {
	background: var(--surface-sunken);
	border-radius: 8px;
	padding: 16px;
	margin: 16px 0;
	display: none;
}

.order-details-section:not(:empty) {
	display: block;
}

.order-detail-row {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}

.order-detail-row:last-child {
	border-bottom: none;
}

.order-detail-row .label {
	font-weight: 600;
	color: var(--fg);
	min-width: 100px;
}

.order-detail-row .value {
	color: var(--fg-muted);
	font-family: "Courier New", monospace;
	text-align: right;
	flex: 1;
}

/* Enhanced Market List */
.market-item {
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	padding: var(--padding);
	margin-bottom: 12px;
	cursor: pointer;
	transition: all var(--transition);
}

.market-item:hover {
	background-color: var(--gray-light);
	border-color: var(--primary);
	box-shadow: 0 2px 8px var(--accent-tint);
}

.market-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 8px;
}

.market-title {
	font-weight: 600;
	font-size: 15px;
	flex: 1;
	color: var(--text);
}

.market-price {
	font-weight: 600;
	color: var(--primary);
	font-size: 14px;
	min-width: 80px;
	text-align: right;
}

.market-subtitle {
	font-size: 13px;
	color: var(--fg-subtle);
	margin-bottom: 8px;
}

.market-details {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	gap: 12px;
}

.market-bid-ask {
	display: flex;
	gap: 12px;
	flex: 1;
	color: var(--fg-muted);
}

.market-bid-ask .bid {
	color: var(--no-text);
}

.market-bid-ask .ask {
	color: var(--yes-text);
}

.market-spread {
	font-size: 12px;
	color: var(--fg-subtle);
}

.market-status-badge {
	display: inline-block;
	padding: 4px 8px;
	background: var(--success);
	color: var(--fg-on-accent);
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: capitalize;
}

/* Loading Spinner */
.loading-spinner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--surface-translucent);
	z-index: 2000;
}

.loading-spinner.hidden {
	display: none;
}

.spinner {
	width: 40px;
	height: 40px;
	border: 4px solid var(--line);
	border-top-color: var(--primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

#loading-spinner-text {
	margin-top: 16px;
	color: var(--text);
	font-size: 14px;
}

/* Error Messages - Enhanced */
.error-message {
	background: var(--no-surface);
	color: var(--no-text);
	padding: 12px;
	border-radius: 6px;
	font-size: 14px;
	margin-bottom: 12px;
	border-left: 4px solid var(--no-text);
}

.error-message.hidden {
	display: none;
}

/* Utilities */
.hidden {
	display: none !important;
}

/* Border Glow Effects */
body.border-glow-success {
	animation: glowPulseSuccess 0.8s ease-out;
}

body.border-glow-error {
	animation: glowPulseError 0.8s ease-out;
}

@keyframes glowPulseSuccess {
	0% {
		box-shadow: inset 0 0 0 0px var(--success);
	}
	30% {
		box-shadow: inset 0 0 40px 8px var(--success);
	}
	100% {
		box-shadow: inset 0 0 0 0px var(--success);
	}
}

@keyframes glowPulseError {
	0% {
		box-shadow: inset 0 0 0 0px var(--danger);
	}
	30% {
		box-shadow: inset 0 0 40px 8px var(--danger);
	}
	100% {
		box-shadow: inset 0 0 0 0px var(--danger);
	}
}

/* ── Fill Count Badge ── */

@keyframes fillBadgeFloatUp {
	0% {
		opacity: 0.9;
		transform: translateY(0);
	}
	60% {
		opacity: 0.9;
		transform: translateY(-36px);
	}
	100% {
		opacity: 0;
		transform: translateY(-56px);
	}
}

.fill-count-badge {
	position: fixed;
	top: 36px;
	right: 12px;
	padding: 3px 10px;
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 600;
	pointer-events: none;
	z-index: 9999;
	animation: fillBadgeFloatUp 3s ease-out forwards;
}

.fill-count-badge--yes {
	background-color: var(--yes-tint);
	color: var(--yes-text);
	border: 1px solid var(--yes-tint-strong);
}

.fill-count-badge--no {
	background-color: var(--no-tint);
	color: var(--no-text);
	border: 1px solid var(--no-tint-strong);
}

/* ── Order Mode Toggle ── */

.order-mode-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.order-mode-label {
	font-size: 0.85rem;
	color: var(--fg-subtle);
}

.order-mode-value {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--fg-subtle);
	min-width: 2.8rem;
	transition: color 0.2s;
}

.order-mode-value.order-mode-real {
	color: var(--no);
}

/* Toggle switch (iOS-style) */
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	flex-shrink: 0;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background-color: var(--control-track);
	border-radius: 22px;
	transition: background-color 0.25s;
}

.toggle-slider::before {
	content: "";
	position: absolute;
	height: 16px;
	width: 16px;
	left: 3px;
	bottom: 3px;
	background-color: var(--surface);
	border-radius: 50%;
	transition: transform 0.25s;
}

.toggle-switch input:checked + .toggle-slider {
	background-color: var(--no);
}

.toggle-switch input:checked + .toggle-slider::before {
	transform: translateX(18px);
}

.toggle-switch input:focus-visible + .toggle-slider {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ============================================================================
   Manual Price Control
   ============================================================================ */

.form-group-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.form-group-toggle label:first-child {
	margin-bottom: 0;
}

/* Manual Price Sliders Container */
.manual-price-container {
	margin-bottom: 6px;
	padding: 6px;
	background: var(--surface-sunken);
	border-radius: var(--border-radius, 8px);
	border: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.manual-price-summary-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.manual-price-value-card {
	padding: 2px 3px;
	border-radius: 8px;
	background: var(--surface-translucent);
	border: 1px solid var(--shadow-weak);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	min-width: 0;
}

.manual-price-side-yes {
	border-left: 3px solid var(--yes);
}

.manual-price-side-no {
	border-left: 3px solid var(--opp);
}

.manual-price-side-unset {
	box-shadow: inset 0 0 0 1px var(--no-tint);
}

.manual-price-value-meta {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.manual-price-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 18px;
	padding: 0 6px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.3px;
	color: var(--fg-on-accent);
	flex-shrink: 0;
}

.manual-price-chip.yes-chip {
	background: var(--yes);
	color: var(--fg-on-yes);
}

.manual-price-chip.no-chip {
	background: var(--opp);
}

.manual-price-team {
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.manual-price-team.yes-label {
	color: var(--yes);
}

.manual-price-team.no-label {
	color: var(--opp);
}

.manual-price-status {
	display: flex;
	align-items: center;
	gap: 3px;
	flex-shrink: 0;
}

.manual-price-alert {
	color: var(--no-text);
	font-size: 14px;
	line-height: 1;
}

.manual-price-controls {
	display: none;
}

.manual-price-slider-row {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 2px 0;
}

.manual-price-inline-label {
	font-size: 11px;
	font-weight: 800;
	min-width: 24px;
	text-align: left;
	flex-shrink: 0;
}

.manual-price-btn {
	padding: 2px 0 !important;
	font-size: 14px !important;
	font-weight: 700;
	min-width: 24px;
	min-height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	touch-action: manipulation;
	flex-shrink: 0;
}

.manual-price-btn-yes {
	color: var(--yes);
	border-color: var(--yes);
}

.manual-price-btn-no {
	color: var(--opp);
	border-color: var(--opp);
}

.manual-price-input {
	width: 34px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	padding: 2px 1px !important;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface);
	-moz-appearance: textfield;
}

.manual-price-input::-webkit-outer-spin-button,
.manual-price-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.manual-price-input.yes-input {
	color: var(--yes);
}

.manual-price-input.no-input {
	color: var(--opp);
}

.manual-price-unit {
	font-size: 11px;
	font-weight: 600;
	color: var(--fg-muted);
}

.manual-price-slider {
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	border-radius: 4px;
	background: var(--line);
	outline: none;
	min-width: 0;
}

.manual-price-side-unset .manual-price-slider {
	opacity: 0.55;
}

.manual-price-slider.yes-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--yes);
	cursor: pointer;
}

.manual-price-slider.no-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--opp);
	cursor: pointer;
}

.manual-price-slider.yes-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--yes);
	cursor: pointer;
	border: none;
}

.manual-price-slider.no-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--opp);
	cursor: pointer;
	border: none;
}

/* Mobile Optimization for Position and Orderbook */
@media (max-width: 600px) {
	.market-position {
		margin-bottom: 2px;
	}

	.position-item {
		padding: 2px;
		font-size: 12px;
		min-height: 32px;
	}

	.position-row {
		gap: 6px;
	}

	.orderbook-side {
		padding: 6px;
	}

	.orderbook-grid {
		gap: 4px;
	}

	.manual-price-container {
		padding: 0px;
	}

	.manual-price-summary-row {
		gap: 5px;
	}

	.manual-price-btn {
		min-width: 22px;
		min-height: 22px;
		font-size: 13px !important;
	}

	.manual-price-input {
		width: 32px;
		font-size: 12px;
	}

	.manual-price-team {
		font-size: 10px;
	}

	.manual-price-chip {
		min-width: 30px;
		height: 17px;
		font-size: 9px;
	}
}

/* ============================================================================
   Partial Sell Badge
   ============================================================================ */

.sell-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	background: var(--no);
	color: var(--fg-on-accent);
	border-radius: 4px;
	padding: 1px 5px;
	margin-left: 4px;
	vertical-align: middle;
	line-height: 1.3;
}

/* ============================================================================
   Baseball Mode
   ============================================================================ */

.baseball-mode-container {
	margin-bottom: 24px;
}

.baseball-factor-control {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	padding: 4px 6px;
	background: var(--surface-sunken);
	border-radius: var(--border-radius, 8px);
	overflow: hidden;
}

.baseball-factor-label {
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}

.baseball-factor-value {
	font-weight: 700;
	font-size: 18px;
	min-width: 28px;
	text-align: center;
}

.baseball-factor-btn {
	padding: 6px 12px !important;
	font-size: 16px !important;
	font-weight: 700;
	min-width: 36px;
}

.baseball-factor-slider {
	flex: 1;
	min-width: 0;
	height: 6px;
	accent-color: var(--accent);
}

/* Side-by-side columns layout for baseball buttons */
.baseball-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 8px;
}

.baseball-column {
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* Grid items default to min-width: auto, which would let a long side label
	   widen its own column and squeeze the other side. */
	min-width: 0;
}

.baseball-side-label {
	font-weight: 700;
	/* ui/side-label.ts fits the text down to 10px before the ellipsis. */
	font-size: 13px;
	/* Fixed px, not a ratio: the height must not follow the fitted font size,
	   or the two columns' buttons stop lining up. */
	line-height: 20px;
	min-height: 20px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0;
	text-align: center;
	/* Anchors .side-label-tooltip; the clipping is on the span so this box
	   does not cut it off. */
	position: relative;
	/* Stops a slightly-long tap raising the text-selection callout. */
	-webkit-user-select: none;
	user-select: none;
}

.baseball-side-label > span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Only a clipped label is a tap target. `pointer` also makes iOS dispatch
   click on a plain div. */
.baseball-side-label.is-truncated {
	cursor: pointer;
}

/* The full side name, revealed by tapping a clipped label. It overlays the top
   of the button stack, so it must stay out of flow and never take a tap:
   `position: absolute` keeps the buttons from moving under a finger mid-tap,
   `pointer-events: none` keeps a tap landing on the order button beneath. */
.side-label-tooltip {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 5;
	background: var(--surface-inverse);
	color: var(--fg-on-inverse);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	white-space: normal;
	overflow-wrap: anywhere;
	padding: 5px 7px;
	border-radius: 6px;
	box-shadow: 0 2px 8px var(--shadow-strong);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.baseball-side-label.show-full-label .side-label-tooltip {
	opacity: 1;
}

@media (hover: hover) {
	.baseball-side-label.is-truncated:hover .side-label-tooltip {
		opacity: 1;
	}
}

.baseball-side-a {
	color: var(--yes);
}

.baseball-side-b {
	color: var(--opp);
}

.baseball-sell-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin-top: 12px;
}

.btn-baseball {
	padding: 12px 6px;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 60px;
	border-radius: var(--border-radius, 8px);
	border: 2px solid transparent;
	transition:
		background-color 0.15s,
		transform 0.1s;
	width: 100%;
}

/* Basketball has fewer button rows than baseball, leaving unused vertical
   space below; taller buttons fill it (and enlarge the click targets) */
#basketball-mode-container .btn-baseball {
	min-height: 115px;
}

.btn-baseball-a {
	background-color: var(--yes);
	color: var(--fg-on-yes);
}

.btn-baseball-a:hover:not(:disabled) {
	background-color: var(--yes-hover);
}

.btn-baseball-b {
	background-color: var(--opp);
	color: var(--fg-on-accent);
}

.btn-baseball-b:hover:not(:disabled) {
	background-color: var(--opp-hover);
}

/* Defense button styles (muted/darker tones to differentiate from offense) */
.btn-baseball-a-def {
	background-color: var(--yes-deep);
	color: var(--fg-on-accent);
	border: 2px dashed var(--overlay-light);
}

.btn-baseball-a-def:hover:not(:disabled) {
	background-color: var(--yes-deep-hover);
}

.btn-baseball-b-def {
	background-color: var(--opp-deep);
	color: var(--fg-on-accent);
	border: 2px dashed var(--overlay-light);
}

.btn-baseball-b-def:hover:not(:disabled) {
	background-color: var(--opp-deep-hover);
}

/* Offense picker button */
.bb-offense-picker {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bb-pick-offense-btn {
	min-height: 80px;
	font-size: 15px !important;
	opacity: 0.9;
	border: 2px dashed var(--overlay-light) !important;
}

.bb-pick-offense-btn:hover:not(:disabled) {
	opacity: 1;
}

/* Offense/defense row containers */
#bb-offense-row-a,
#bb-offense-row-b,
#bb-defense-row-a,
#bb-defense-row-b {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bb-misc-split-row {
	display: flex;
	gap: 6px;
	width: 100%;
}

.bb-misc-split-row .btn-baseball,
.bb-misc-split-row .btn-baseball-a-def,
.bb-misc-split-row .btn-baseball-b-def {
	flex: 1 1 0;
	width: auto;
}

/* MISC sits inside a stepper wrapper; the wrapper takes the flex share and
   the button fills it so MISC and EXT stay equal-width */
.bb-misc-split-row .bb-button-wrapper {
	flex: 1 1 0;
	min-width: 0;
}

.bb-misc-split-row .bb-button-wrapper .btn-baseball {
	width: 100%;
}

/* Reset offense button in factor control row */
.baseball-reset-offense-btn {
	font-size: 14px !important;
	padding: 0px !important;
	min-width: 32px;
	min-height: 32px;
	max-width: 32px;
	flex-shrink: 0;
}

.bb-hit-label {
	font-size: 16px;
	font-weight: 800;
}

.bb-hint {
	font-size: 11px;
	font-weight: 500;
	opacity: 0.85;
}

.bb-slippage-hint {
	font-size: 11px;
	font-weight: 500;
	opacity: 0.85;
}

.baseball-sell-btn {
	min-height: 72px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 15px;
	font-weight: 700;
	/* Same grid trap as .baseball-column: the one-line label below would
	   otherwise widen this button and unbalance the sell row. */
	min-width: 0;
}

/* The side name on a sell button, held to one line so a long one cannot grow
   its button taller than the one beside it. Excludes the partial-sell badge,
   which needs to keep its own display/hidden behaviour. */
.baseball-sell-btn > span:not(.sell-badge) {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ============================================================================
   Settings Info Tooltip Button & Popup
   ============================================================================ */
.settings-info-tooltip-btn {
	padding: 2px 4px !important;
	font-size: 12px !important;
	min-width: 24px;
	min-height: 24px;
	border-radius: var(--border-radius);
	cursor: pointer;
	flex-shrink: 0;
	/* Anchors the "+" badge added when assignments exist (.am-badge is
	   absolutely positioned, exactly as on the order buttons). */
	position: relative;
}

/*
 * The shared badge is sized for the large order buttons; at 16px it covers
 * this 24px button's ℹ️ entirely. Scaled down and nudged past the corner so
 * it reads as the same "+" marker without replacing the icon.
 */
.settings-info-tooltip-btn .am-badge {
	width: 13px;
	height: 13px;
	font-size: 9px;
	top: -4px;
	right: -4px;
}

.primary-orders-toggle,
.close-opposite-toggle {
	padding: 1px 5px !important;
	font-size: 9px !important;
	font-weight: 700;
	letter-spacing: 0.06em;
	min-width: 30px;
	min-height: 24px;
	border-radius: 999px;
	border: 1px solid var(--success);
	background: var(--yes-tint);
	color: var(--success);
	flex-shrink: 0;
}

.primary-orders-toggle:hover,
.close-opposite-toggle:hover {
	background: var(--yes-tint-strong);
}

.primary-orders-toggle,
.close-opposite-toggle {
	border-color: var(--success);
	background: var(--yes-tint);
	color: var(--success);
}

.primary-orders-toggle.trade-setting-toggle-disabled,
.close-opposite-toggle.trade-setting-toggle-disabled {
	border-color: var(--danger);
	background: var(--no-tint);
	color: var(--danger);
}

.primary-orders-toggle.trade-setting-toggle-disabled:hover,
.close-opposite-toggle.trade-setting-toggle-disabled:hover {
	background: var(--no-tint-strong);
}

/*
 * The assignment list, not a tooltip. It used to be absolutely positioned
 * under the ℹ️ button, which capped its height at whatever was left below a
 * control sitting partway down the order page. Fixed + centred detaches it
 * from the button so it can use most of the viewport; it is dismissed by a
 * click anywhere outside (see setupSettingsInfoTooltip), so losing the visual
 * tether to the icon costs nothing.
 */
.settings-info-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	padding: 10px 12px;
	/* Heavier than a dropdown's: it now floats free of the info button. */
	box-shadow: 0 8px 32px var(--shadow-strong);
	min-width: 180px;
	width: min(420px, calc(100vw - 24px));
	/* Most of the screen, and scroll internally past that. */
	max-height: min(85vh, 760px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/*
 * Sits ON the "Additional Markets:" heading line, not above it: absolute so
 * it costs no vertical space in a panel whose whole point is fitting more
 * rows on screen. Deliberately NOT sticky — it would ride down the list in
 * the same column as each row's ✕ remove button, and two different ✕ in one
 * column is a bad confusion in a control that deletes things.
 */
.settings-info-close-btn {
	position: absolute;
	top: 6px;
	right: 8px;
	z-index: 1;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var(--gray-light);
	color: var(--text);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.settings-info-close-btn:hover {
	background: var(--border);
}

.settings-info-popup p {
	margin: 4px 0;
	font-size: 13px;
	white-space: nowrap;
}

/* ============================================================================
   Dollars Control (buttons + value)
   ============================================================================ */
.dollars-control {
	display: flex;
	align-items: center;
	gap: 1px;
	flex-shrink: 0;
}

.dollars-value {
	font-size: 13px;
	font-weight: 700;
	color: var(--primary);
	padding: 1px 3px;
	min-width: 0;
	text-align: center;
	user-select: none;
	-webkit-user-select: none;
	white-space: nowrap;
}

.dollars-btn {
	background: none;
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	font-size: 9px;
	padding: 1px 4px;
	cursor: pointer;
	color: var(--gray-dark);
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	line-height: 1;
	flex-shrink: 0;
}

.dollars-btn:active {
	color: var(--primary);
	background: var(--gray-light);
}

/* ============================================================================
   Scoreboard
   ============================================================================ */
.scoreboard-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 2px;
	flex: 1;
	justify-content: center;
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	padding: 2px 4px;
	position: relative;
	min-width: 0;
}

.scoreboard-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 28px;
}

.scoreboard-inning-cell {
	border-left: 1px solid var(--border);
	border-right: 1px solid var(--border);
	padding: 0 6px;
	margin: 0 2px;
}

.scoreboard-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.1;
}

.scoreboard-inning-value {
	color: var(--primary);
}

.scoreboard-btn {
	background: none;
	border: none;
	font-size: 10px;
	padding: 0;
	margin: 0;
	line-height: 1;
	cursor: pointer;
	color: var(--gray-dark);
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

.scoreboard-btn:active {
	color: var(--primary);
}

.scoreboard-abbr {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0 3px;
	flex-shrink: 0;
}

.scoreboard-abbr-a {
	color: var(--yes);
}

.scoreboard-abbr-b {
	color: var(--opp);
}

.scoreboard-inning-display {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}

.scoreboard-half-indicator {
	font-size: 10px;
	color: var(--primary);
	line-height: 1;
}

.scoreboard-overlay-btn {
	position: absolute;
	z-index: 10;
	background: var(--gray-light);
	border: 1px solid var(--border);
	border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 4px;
	cursor: pointer;
	line-height: 1;
	color: var(--gray-dark);
	opacity: 0.85;
	white-space: nowrap;
}

.scoreboard-overlay-btn:hover {
	background: var(--primary);
	color: var(--fg-on-accent);
	opacity: 1;
}

.scoreboard-overlay-btn.top-left {
	top: -1px;
	left: -1px;
}

.scoreboard-overlay-btn.top-right {
	top: -1px;
	right: -1px;
}

.scoreboard-overlay-btn.bottom-right {
	bottom: -1px;
	right: -1px;
}

/* ============================================================================
   Event Type Selection Modal
   ============================================================================ */
.event-type-modal-content {
	max-width: 340px;
}

.event-type-prompt {
	text-align: center;
	font-size: 15px;
	margin-bottom: 12px;
	color: var(--gray-dark);
}

.event-type-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.btn-event-type {
	padding: 14px 8px;
	font-size: 15px;
	font-weight: 600;
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	background: var(--background);
	cursor: pointer;
	text-align: center;
	transition: all 0.15s;
}

.btn-event-type:hover,
.btn-event-type:active {
	background: var(--primary);
	color: var(--fg-on-accent);
	border-color: var(--primary);
}

/* ============================================================================
   Scoreboard Edit Modal
   ============================================================================ */
.scoreboard-edit-modal-content {
	max-width: 300px;
}

.scoreboard-edit-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.scoreboard-edit-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.scoreboard-edit-row label {
	font-weight: 600;
	font-size: 14px;
	min-width: 90px;
}

.scoreboard-edit-row input,
.scoreboard-edit-row select {
	flex: 1;
	padding: 6px 8px;
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	font-size: 14px;
}

.scoreboard-edit-row input[type="number"] {
	max-width: 70px;
}

.scoreboard-edit-row select {
	max-width: 120px;
}

/* ============================================================================
   Reduced Spacing for Order Page (fit more on screen)
   ============================================================================ */
.market-position {
	margin-bottom: 2px;
}

.position-item {
	padding: 6px 8px;
	min-height: 32px;
	font-size: 12px;
}

.position-row {
	gap: 6px;
}

.order-controls {
	margin-bottom: 6px;
}

.slippage-slider-container {
	margin-bottom: 2px;
}

.independent-slippage-container {
	margin-bottom: 2px;
}

.manual-price-container {
	margin-bottom: 4px;
}

.baseball-factor-control {
	margin-bottom: 2px;
}

/* ============================================================================
   Additional Markets Feature
   ============================================================================ */

/* Badge on baseball buttons */
.am-badge {
	position: absolute;
	top: 2px;
	right: 4px;
	background: var(--primary);
	color: var(--fg-on-accent);
	font-size: 10px;
	font-weight: 700;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	pointer-events: none;
}

.btn-baseball {
	position: relative;
}

/* "+" Markets button in market-selection modal header */
.modal-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.btn-additional-markets {
	font-size: 12px;
	padding: 4px 10px;
	white-space: nowrap;
}

/* Clear additional markets button, pinned to the far right of the factor row */
.clear-am-btn {
	font-size: 14px;
	padding: 0px;
	margin-left: auto;
}

/* Bat button next to factor slider */
.baseball-bat-btn {
	font-size: 14px !important;
	padding: 0px !important;
	min-width: 32px;
	min-height: 32px;
	max-width: 32px;
	flex-shrink: 0;
}

/* Pitch button next to bat button */
.baseball-pitch-btn {
	font-size: 14px !important;
	padding: 0px !important;
	min-width: 32px;
	min-height: 32px;
	max-width: 32px;
	flex-shrink: 0;
}

/* Total button next to pitch button */
.baseball-total-btn {
	font-size: 14px !important;
	padding: 0px !important;
	min-width: 32px;
	min-height: 32px;
	max-width: 32px;
	flex-shrink: 0;
}
.am-modal-content {
	max-width: 500px;
	width: 95vw;
	max-height: 95vh;
	overflow-y: auto;
}

.am-modal-body {
	padding: 12px;
}

.am-step-title {
	margin: 0 0 12px 0;
	font-size: 16px;
	font-weight: 600;
}

/* Step 1: Search */
.am-search-row {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.am-filter-row {
	margin-bottom: 8px;
}

.am-input {
	flex: 1;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	font-size: 14px;
	background: var(--background);
	color: var(--text);
}

.am-input-small {
	width: 100px !important;
	flex: none;
}

.am-loading {
	text-align: center;
	padding: 16px;
	color: var(--gray-dark);
	font-size: 13px;
}

.am-hint {
	text-align: center;
	padding: 16px;
	color: var(--gray-dark);
	font-size: 13px;
}

.am-error {
	color: var(--danger);
	font-size: 13px;
	padding: 4px 0;
}

.am-event-results {
	max-height: 350px;
	overflow-y: auto;
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	margin-bottom: 12px;
}

.am-event-item {
	border-bottom: 1px solid var(--border);
}

.am-event-item:last-child {
	border-bottom: none;
}

.am-event-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	cursor: pointer;
	transition: background 0.15s;
}

.am-event-header:hover {
	background: var(--gray-light);
}

.am-event-title {
	font-size: 14px;
	font-weight: 500;
}

.am-event-main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.am-event-id {
	font-size: 11px;
	color: var(--gray-dark);
	word-break: break-word;
}

.am-event-chevron {
	font-size: 12px;
	color: var(--gray-dark);
}

.am-markets-list {
	padding: 0 12px 8px 24px;
}

.am-market-filter-row {
	margin-bottom: 6px;
}

.am-market-filter-input {
	width: 100%;
	box-sizing: border-box;
	font-size: 13px;
	padding: 6px 8px;
}

/* Horizontal, scrollable category-filter chips under the market search box.
   Touchscreen-first: chips are finger-sized and the row scrolls sideways
   without wrapping, so it never reflows the market list below it. */
.am-market-category-row {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: 4px;
	margin-bottom: 6px;
}

.am-category-chip {
	flex: 0 0 auto;
	white-space: nowrap;
	min-height: 32px;
	padding: 6px 12px;
	font-size: 12px;
	line-height: 1.2;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--gray-light);
	color: var(--gray-dark);
	cursor: pointer;
	transition:
		background 0.15s,
		border-color 0.15s,
		color 0.15s;
}

.am-category-chip:hover {
	border-color: var(--primary);
}

.am-category-chip--active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--fg-on-accent);
	font-weight: 600;
}

.am-market-item {
	display: flex;
	flex-direction: column;
	padding: 8px 10px;
	margin: 4px 0;
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	cursor: pointer;
	transition:
		background 0.15s,
		border-color 0.15s;
}

.am-market-item:hover {
	background: var(--gray-light);
	border-color: var(--primary);
}

.am-market-title {
	font-size: 13px;
	font-weight: 500;
}

.am-market-subtitle {
	font-size: 11px;
	color: var(--gray-dark);
}

/* Step 2: Configure */
.am-selected-market {
	padding: 8px 10px;
	background: var(--gray-light);
	border-radius: var(--border-radius);
	margin-bottom: 12px;
	font-size: 13px;
	word-break: break-word;
}

.am-config-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

.am-config-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.am-config-row label {
	font-size: 13px;
	font-weight: 500;
	min-width: 120px;
}

.am-select {
	padding: 6px 8px;
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	font-size: 14px;
	background: var(--background);
	color: var(--text);
}

.am-buttons-title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 8px 0;
}

.am-buttons-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
	margin-bottom: 12px;
}

.am-button-label {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: 13px;
	transition: background 0.15s;
}

.am-button-label:hover {
	background: var(--gray-light);
}

.am-button-offense {
	border-left: 3px solid var(--success);
}

.am-button-defense {
	border-left: 3px solid var(--opponent);
}

/*
 * Single-side buttons (traditional, basketball) are colored by the side they
 * represent, matching the physical button's own color — not by offense/
 * defense grouping, which only applies to baseball's merged (both-sides)
 * checkboxes above.
 */
.am-button-side-yes {
	border-left: 3px solid var(--success);
}

.am-button-side-no {
	border-left: 3px solid var(--opponent);
}

/* Edit mode: buttons from a layout other than the visible one (dormant) */
.am-button-offlayout {
	opacity: 0.55;
	font-style: italic;
}

.am-offlayout-divider {
	grid-column: 1 / -1;
	font-size: 12px;
	color: var(--gray-dark);
	border-top: 1px solid var(--border);
	padding-top: 4px;
	margin-top: 2px;
}

.am-button-checkbox {
	width: 16px;
	height: 16px;
}

.am-step-actions {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-top: 12px;
}

/* Step 3: Confirmation */
.am-confirmation-details {
	padding: 12px;
	background: var(--gray-light);
	border-radius: var(--border-radius);
	margin-bottom: 12px;
}

.am-confirm-row {
	font-size: 13px;
	padding: 4px 0;
}

.am-confirm-row strong {
	display: inline-block;
	min-width: 100px;
}

/* Step 1: Venue buttons */
.am-venue-buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	padding: 24px 0;
}

.am-venue-btn {
	flex: 1;
	max-width: 200px;
	padding: 24px 16px;
	font-size: 18px;
	font-weight: 600;
	border: 2px solid var(--primary);
	border-radius: var(--border-radius);
	background: var(--background);
	color: var(--primary);
	cursor: pointer;
	transition:
		background 0.2s,
		color 0.2s;
}

.am-venue-btn:hover {
	background: var(--primary);
	color: var(--fg-on-accent);
}

/* Step 2: Preset grid */
.am-preset-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 12px;
}

.am-preset-btn {
	padding: 10px 6px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	background: var(--background);
	color: var(--text);
	cursor: pointer;
	transition:
		background 0.15s,
		border-color 0.15s;
	word-break: break-word;
}

.am-preset-btn:hover {
	background: var(--gray-light);
	border-color: var(--primary);
}

/* Full-width league header above each group of preset buttons. The shared
   prefix lives here so buttons carry only the market-type suffix. */
.am-preset-group-header {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}

.am-preset-group-header:first-child {
	margin-top: 0;
}

.am-preset-group-prefix {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 500;
	color: var(--gray-dark);
}

/* Step 3: Market checkbox items */
.am-market-checkbox-item {
	display: flex;
	flex-direction: column;
	padding: 8px 10px;
	margin: 4px 0;
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	transition:
		background 0.15s,
		border-color 0.15s;
}

.am-market-checkbox-item:hover {
	background: var(--gray-light);
}

.am-market-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.am-market-select-cb {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Step 4: Dollar adjust buttons */
.am-dollar-adjust {
	display: flex;
	align-items: center;
	gap: 6px;
}

.am-selected-count {
	font-size: 13px;
	color: var(--gray-dark);
	margin-bottom: 8px;
}

/* Settings info tooltip – additional markets section */
/*
 * No top separator: it divided this section from the shares / slippage /
 * timeout rows, which no longer exist. Unconditional on purpose — a
 * `:first-child` guard silently stopped applying once the close button was
 * added ahead of the section.
 *
 */
.am-tooltip-section {
	margin: 0;
}

/*
 * Only the heading shares its line with the close button, so only the
 * heading gets the clearance — putting it on the section would indent every
 * row's ✕ remove button too.
 */
.am-tooltip-section > p:first-child {
	padding-right: 32px;
}

.am-tooltip-empty {
	margin: 0;
	padding: 4px 32px 4px 2px;
	font-size: 13px;
	color: var(--gray-dark);
}

.am-tooltip-row {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 6px;
	padding: 6px 0;
	font-size: 12px;
	border-bottom: 1px solid var(--border);
}

.am-tooltip-row:last-child {
	border-bottom: none;
}

.am-tooltip-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	line-height: 1.3;
}

.am-tooltip-info-editable {
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 6px;
	transition: background-color var(--transition);
}

.am-tooltip-info-editable:hover {
	background-color: var(--accent-tint);
}

/* Ticker: shared prefix muted, distinguishing suffix bold. */
.am-ticker {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	word-break: break-all;
	line-height: 1.25;
}

.am-ticker-prefix {
	color: var(--gray-dark);
	opacity: 0.7;
}

.am-ticker-suffix {
	color: var(--text);
	font-weight: 700;
}

/* Meta chips: side / dollar amount / manual price. */
.am-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.am-chip {
	display: inline-flex;
	align-items: center;
	padding: 1px 6px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	background: var(--gray-light);
	color: var(--gray-dark);
}

.am-chip-side-yes {
	background: var(--yes-tint);
	color: var(--yes-text);
}

.am-chip-side-no {
	background: var(--no-tint);
	color: var(--no-text);
}

/* Assignment: which order button(s) this market fires with. */
.am-assign {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.am-assign-arrow {
	color: var(--gray-dark);
	font-weight: 700;
}

.am-assign-pill {
	display: inline-flex;
	align-items: center;
	padding: 1px 8px;
	/* Transparent by default so the dashed defense variant below does not
	   change the pill's box size. */
	border: 1px solid transparent;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	background: var(--primary);
	color: var(--fg-on-accent);
}

/*
 * Pill colour matches the PHYSICAL button it names, not the assignment's
 * market side. Every layout paints side A / yes with --success and side B /
 * no with --opponent, so those are the only two colours a button can be;
 * --danger would point at a button that is not red.
 *
 * Baseball's descriptors are merged across both sides and have no side of
 * their own, so they are toned by offense/defense — same pairing the modal's
 * selection grid uses (.am-button-offense / .am-button-defense).
 */
.am-assign-pill-yes,
.am-assign-pill-offense {
	background: var(--success);
}

.am-assign-pill-no,
.am-assign-pill-defense {
	background: var(--opponent);
}

/* Defense buttons carry a dashed border physically; the pills echo it. */
.am-assign-pill-defense {
	border-color: var(--overlay-light);
	border-style: dashed;
}

/*
 * A parked market has no button yet. Its pill names no physical button, so it
 * gets no button colour — a muted, dashed placeholder that reads as "still to
 * be wired up" rather than an accent-coloured pill pointing at a real button.
 */
.am-assign-unassigned {
	background: transparent;
	color: var(--gray-dark);
	border-color: var(--overlay-light);
	border-style: dashed;
	font-weight: 600;
	font-style: italic;
}

.am-tooltip-remove-btn {
	border: none;
	background: none;
	color: var(--danger);
	cursor: pointer;
	font-size: 16px;
	padding: 4px 8px;
	line-height: 1;
	flex-shrink: 0;
	align-self: center;
}

.am-tooltip-remove-btn:hover {
	opacity: 0.7;
}

/* ============================================================================
   Baseball Per-Button Price Stepper Controls
   Overlays three small buttons (+ / • / −) on the right side of each button.
   ============================================================================ */

/* Wrapper for each baseball button + its stepper overlay */
.bb-button-wrapper {
	position: relative;
}

/* The stepper column sits absolutely on the right edge of the wrapper */
.bb-price-stepper {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	z-index: 2;
	pointer-events: auto;
}

/* Individual +/•/− buttons */
.bb-stepper-btn {
	flex: 1;
	min-width: 20px;
	max-width: 24px;
	padding: 0;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	border-radius: 0;
	border: none;
	background: var(--shadow-strong);
	color: var(--fg-on-overlay);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.1s;
}

.bb-stepper-btn:first-child {
	border-top-right-radius: var(--border-radius, 6px);
}

.bb-stepper-btn:last-child {
	border-bottom-right-radius: var(--border-radius, 6px);
}

.bb-stepper-btn:hover:not(:disabled) {
	background: var(--overlay-dark);
}

.bb-stepper-btn:active:not(:disabled) {
	background: var(--overlay-dark-strong);
}

/* ============================================================================
   Baseball Per-Button Price Modal (slider modal)
   ============================================================================ */

/* Compact modal content for the price slider */
.bb-price-modal-content {
	max-width: 320px;
	width: 90%;
	padding: 0;
}

.bb-price-modal-content .modal-header {
	padding: 14px 18px 10px;
	border-bottom: 1px solid var(--border);
}

.bb-price-modal-content .modal-header h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--text);
	letter-spacing: 0.01em;
}

.bb-price-modal-body {
	padding: 20px 18px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* Price value display above the slider */
.bb-price-modal-body .price-display {
	font-size: 28px;
	font-weight: 800;
	color: var(--accent);
	letter-spacing: -0.02em;
}

/* Slider styling */
.bb-price-modal-body input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: var(--line);
	outline: none;
	cursor: pointer;
}

.bb-price-modal-body input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--accent);
	border: 2px solid var(--surface);
	box-shadow: 0 1px 4px var(--shadow);
	cursor: pointer;
}

.bb-price-modal-body input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--accent);
	border: 2px solid var(--surface);
	box-shadow: 0 1px 4px var(--shadow);
	cursor: pointer;
}

/* Cents readout row */
.bb-price-modal-value-row {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

#bb-price-modal-value {
	font-size: 32px;
	font-weight: 800;
	color: var(--accent);
}

.bb-price-modal-cents-label {
	font-size: 18px;
	color: var(--fg-muted);
}

/* Action buttons row */
.bb-price-modal-content .modal-actions {
	padding: 12px 18px 16px;
	margin-top: 0;
	border-top: 1px solid var(--border);
	flex-direction: row;
	gap: 10px;
}

.bb-price-modal-content .modal-actions .btn {
	flex: 1;
	padding: 10px;
	font-size: 14px;
}

/* ============================================================================
   Phone-OTP login (login page + re-auth modal)
   ============================================================================ */

.otp-status {
	margin-top: 8px;
	font-size: 0.85rem;
	color: var(--text);
	opacity: 0.7;
}

.otp-actions {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

/* ==========================================================================
   Venue Status Indicator
   Unobtrusive corner health dot; hidden entirely when both venues healthy.
   ========================================================================== */

.venue-status-indicator {
	position: fixed;
	bottom: 16px;
	right: 16px;
	z-index: 1200;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.venue-status-indicator.hidden {
	display: none;
}

/*
 * Transparent click catcher, shown only while the venue panel is open. Sits one
 * level below .venue-status-indicator (1200) so the dot and panel stay
 * clickable, and above the page so an outside tap lands here instead of on the
 * control underneath — including disabled order buttons, which dispatch no
 * click event of their own.
 */
.venue-status-scrim {
	position: fixed;
	inset: 0;
	z-index: 1199;
	background: transparent;
}

.venue-status-scrim.hidden {
	display: none;
}

.venue-status-dot {
	width: 14px;
	height: 14px;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background: var(--danger);
	box-shadow: 0 0 0 0 var(--danger);
	animation: venue-status-pulse 1.8s ease-out infinite;
}

.venue-status-dot:hover {
	filter: brightness(1.1);
}

@keyframes venue-status-pulse {
	0% {
		box-shadow: 0 0 0 0 var(--warning-overlay);
	}
	70% {
		box-shadow: 0 0 0 10px transparent;
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.venue-status-dot {
		animation: none;
	}
}

.venue-status-panel {
	min-width: 240px;
	padding: 12px;
	border-radius: 8px;
	background: var(--surface-raised);
	color: var(--fg);
	border: 1px solid var(--border);
	box-shadow: 0 6px 24px var(--shadow-strong);
	font-size: 0.82rem;
}

.venue-status-panel.hidden {
	display: none;
}

.venue-status-panel-title {
	font-weight: 600;
	margin-bottom: 8px;
}

.venue-status-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"dot name checked"
		"dot state state";
	align-items: center;
	column-gap: 8px;
	padding: 6px 0;
	border-top: 1px solid var(--border);
}

.venue-status-row-dot {
	grid-area: dot;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--yes);
}

.venue-status-row.impaired .venue-status-row-dot {
	background: var(--danger);
}

.venue-status-row-name {
	grid-area: name;
	font-weight: 600;
}

.venue-status-row-state {
	grid-area: state;
	color: var(--fg-muted);
}

.venue-status-row.impaired .venue-status-row-state {
	color: var(--danger);
}

.venue-status-row-checked {
	grid-area: checked;
	color: var(--fg-subtle, var(--fg-muted));
	font-size: 0.74rem;
	white-space: nowrap;
}

.venue-status-snooze {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
}

.venue-status-snooze-note {
	color: var(--fg-muted);
	font-size: 0.76rem;
}

.venue-status-snooze-btn {
	padding: 5px 10px;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: var(--surface-hover, transparent);
	color: var(--fg);
	cursor: pointer;
	font-size: 0.76rem;
}

.venue-status-snooze-btn:hover {
	filter: brightness(1.05);
}

/* ---------------------------------------------------------------------------
 * PNL (bet-performance) page
 * ------------------------------------------------------------------------- */

.pnl-pos {
	color: var(--success);
	font-weight: 600;
}
.pnl-neg {
	color: var(--danger);
	font-weight: 600;
}
.pnl-zero {
	color: var(--text);
	font-weight: 600;
}

.pnl-empty {
	padding: 24px 8px;
	text-align: center;
}

/*
 * Self-contained styling — deliberately NOT `.event-item`, so the events page's
 * document-level `.event-item` click handler never hijacks a PNL row.
 */
.pnl-event-item {
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--border-radius);
	padding: var(--padding);
	cursor: pointer;
	transition: all var(--transition);
	margin-bottom: 12px;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"title value"
		"meta value";
	gap: 2px 12px;
	align-items: center;
}

.pnl-event-item:hover {
	border-color: var(--primary);
	box-shadow: 0 4px 12px var(--accent-tint-strong);
	background: var(--gray-light);
}

.pnl-event-item:active {
	transform: translateY(0);
}
.pnl-event-title {
	grid-area: title;
	font-weight: 600;
	word-break: break-word;
}
.pnl-event-meta {
	grid-area: meta;
}
.pnl-event-value {
	grid-area: value;
	font-size: 16px;
	white-space: nowrap;
}

/* Detail view */
#pnl-detail {
	margin-top: 12px;
}
.pnl-detail-title {
	margin: 12px 0 8px;
	font-size: 18px;
	word-break: break-word;
}
.pnl-summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 12px;
}
.pnl-tile {
	background: var(--surface-sunken);
	border-radius: var(--border-radius);
	padding: 10px;
	text-align: center;
}
.pnl-tile-value {
	font-size: 18px;
	margin-top: 4px;
}
.pnl-market-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 4px;
	border-bottom: 1px solid var(--border);
}
/* "open" = market not yet resolved; its realized figure is cash-so-far. */
.pnl-open-badge {
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 1px 5px;
	margin-left: 6px;
	border-radius: 4px;
	background: var(--border);
	color: var(--gray-dark);
	vertical-align: middle;
}
.pnl-trades-heading {
	margin: 16px 0 8px;
}
.pnl-table-scroll {
	overflow-x: auto;
}
.pnl-trades-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.pnl-trades-table th,
.pnl-trades-table td {
	padding: 6px 8px;
	text-align: left;
	white-space: nowrap;
	border-bottom: 1px solid var(--border);
}
.pnl-trades-table .pnl-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.pnl-load-more {
	display: block;
	width: 100%;
	margin-top: 12px;
}