/**
 * ura-orange-black-v1.css
 *
 * Post-build visual overlay for official preprod binary baseline.
 * Linked AFTER existing hashed stylesheets — does not modify them.
 *
 * Scope: swap application shell (#app / .app-shell / body when hosting swap).
 * !important used only where baseline CSS already uses !important or
 * surgical/injected rules would otherwise win (documented inline).
 */

:root {
  --color-bg: #05070a;
  --color-surface: #0d1016;
  --color-surface-elevated: #141820;
  --color-accent: #ff6a00;
  --color-accent-warm: #ff9a3d;
  --color-text: #f5f1ea;
  --color-text-secondary: #c9c2b6;
  --color-text-muted: #a39e95;
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-active: rgba(255, 106, 0, 0.85);
  --color-glow: rgba(255, 106, 0, 0.08);

  /* Remap legacy tokens consumed by baseline CSS */
  --bg: var(--color-bg);
  --bg-2: var(--color-surface);
  --panel: rgba(13, 16, 22, 0.94);
  --card: rgba(13, 16, 22, 0.96);
  --border: var(--color-border);
  --border-hover: rgba(255, 255, 255, 0.16);
  --text: var(--color-text);
  --text-soft: #d8d2c8;
  --muted: var(--color-text-muted);
  --primary: var(--color-accent);
  --primary-2: var(--color-accent-warm);
  --primary-glow: var(--color-glow);
  --secondary: var(--color-accent-warm);
  --secondary-glow: rgba(255, 154, 61, 0.18);
  --chain-midnight: var(--color-accent);
}

/* Near-black page + single faint radial atmosphere (no stacked fog) */
html,
body {
  background-color: var(--color-bg) !important; /* baseline body uses navy --bg */
  color: var(--color-text);
}

body::before {
  background: radial-gradient(
    ellipse 40% 34% at 50% 54%,
    rgba(255, 106, 0, 0.08) 0%,
    rgba(255, 106, 0, 0.035) 42%,
    transparent 72%
  ) !important; /* replaces large navy/purple vignette glow */
  opacity: 1 !important;
}

#app .pse-bg-vignette,
#app .app-shell--private-swap .pse-bg-vignette {
  background: transparent !important; /* avoid second muddy atmosphere layer */
}

/* Idle starfield canvas paints bright white dots; soften without touching JS */
canvas.idle-starfield,
#app canvas.idle-starfield,
.idle-starfield {
  opacity: 0.42 !important;
}

#app .app-shell {
  padding-inline: clamp(24px, 4.25vw, 88px);
  box-sizing: border-box;
}

/* Surfaces: charcoal, not navy/purple — keep field chrome; not outer token-input plate */
#app .amount-input-wrapper,
#app .token-selector-trigger,
#app .glass-panel,
#app .swap-card,
#app .wallet-status-chip {
  background: rgba(13, 16, 22, 0.96);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--color-text);
}

/* Outer TokenInput stack: no plate so pay/receive headers match page */
#app .token-input {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Header strip: no navy/charcoal plate — same as page atmosphere */
#app .portfolio-strip,
#app .portfolio-strip.portfolio-strip--understated,
#app .portfolio-strip.portfolio-strip--centered-brand {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Testnet banner: no navy plate — blend into page/starfield */
#app .pse-testnet-strip {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 106, 0, 0.35) !important;
}

/* "You pay" AND "You receive …" header rows (both TokenInput instances) */
#app .token-input-header {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#app .amount-input-wrapper:focus-within,
#app .token-selector-trigger[aria-expanded='true'],
#app .amount-input-wrapper:focus-within .token-selector-trigger {
  border-color: rgba(255, 106, 0, 0.85);
  box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.06);
}

#app .amount-input {
  color: var(--color-text);
}

/* Typography contrast — secondary labels must stay readable on near-black */
#app .portfolio-strip__subtitle,
#app .brand-sub,
#app .token-input-label,
#app .token-input-header,
#app .pse-dual-rail-step__label,
#app .pse-dual-rail-step__std,
#app .pse-shielded-extras-panel__privacy,
#app .ura-boot-module-status,
#app .ura-boot-form-shell__label,
#app .ura-boot-form-shell__hint {
  color: var(--color-text-secondary) !important; /* kill purple / dim navy greys */
  opacity: 1 !important;
}

#app .token-balance,
#app .balance-label,
#app .token-input-header .token-balance,
#app .amount-input-wrapper .token-balance {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

/* Route strip — near-black, not brown/purple fill */
#app .pse-private-bridge-hint--shielded {
  background: rgba(13, 16, 22, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
  color: var(--color-text-secondary);
}

#app .pse-private-bridge-pill.chain-pill--cardano {
  background: #000;
  color: var(--color-text);
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

#app .pse-private-bridge-wrap-tag {
  color: var(--color-accent) !important; /* was purple */
}

/* Hide options / privacy / manual address — orange + warm gray */
#app .pse-shielded-extras-toggle {
  color: var(--color-accent) !important;
}

#app .pse-shielded-extras-toggle:hover {
  color: var(--color-accent-warm) !important;
}

#app .pse-shielded-extras-toggle:focus-visible {
  outline: 2px solid var(--color-border-active);
  outline-offset: 2px;
}

#app .pse-shielded-extras-panel {
  border-top-color: rgba(255, 255, 255, 0.10);
}

#app .pse-manual-midnight-details summary,
#app .pse-inline-manual-midnight summary,
#app .pse-shielded-extras-panel summary {
  color: var(--color-text-secondary) !important;
  opacity: 1 !important;
}

#app .pse-manual-midnight-details summary:hover,
#app .pse-inline-manual-midnight summary:hover {
  color: var(--color-accent) !important;
}

/* MAX + selected ADA */
#app .max-button {
  background: transparent;
  border: 1px solid var(--color-border-active);
  color: var(--color-accent);
}

#app .max-button:hover:not(:disabled) {
  background: rgba(255, 106, 0, 0.10);
  border-color: var(--color-accent);
}

/*
 * ADA / chain PNG badges ship as dark marks on white poster tiles.
 * Baseline uses mix-blend-mode:multiply for purple tracks; on near-black
 * selected wraps that multiply makes the mark invisible. CSS filters on the
 * <img> also fail to yield a readable mark at 24px in Chromium.
 * Solution for Cardano/ADA: hide the poster PNG and paint an ivory-on-transparent
 * derivative as the wrap background (new asset; original PNG untouched).
 */
#app .shielded-chain-badge-strip--png-badges .shielded-chain-badge-strip__img,
#app .shielded-chain-badge-strip__img {
  mix-blend-mode: normal !important;
}

#app .shielded-chain-badge-strip__item--selected .shielded-chain-badge-strip__img-hit,
#app .shielded-chain-badge-strip__item--selected .shielded-chain-badge-strip__img-wrap {
  box-shadow:
    0 0 0 1px var(--color-border-active),
    0 0 6px rgba(255, 106, 0, 0.12);
  background-color: rgba(13, 16, 22, 0.96) !important;
}

#app .shielded-chain-badge-strip__item--selected:has(img[src*='cardano']) .shielded-chain-badge-strip__img-wrap,
#app .shielded-chain-badge-strip__item--selected:has(img[src*='cardano']) .shielded-chain-badge-strip__img-hit {
  background-image: url('/images/shielded-chain-badges/cardano-ivory.png?v=2') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 90% !important;
}

#app .shielded-chain-badge-strip__item--selected:has(img[src*='cardano']) .shielded-chain-badge-strip__img,
#app .shielded-chain-badge-strip__item--selected:has(img[src*='cardano']) .shielded-chain-badge-strip__img-hit img {
  opacity: 0 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* Unselected PNG badges: keep readable on near-black (no multiply) */
#app .shielded-chain-badge-strip--png-badges .shielded-chain-badge-strip__item:not(.shielded-chain-badge-strip__item--selected) .shielded-chain-badge-strip__img {
  mix-blend-mode: normal !important;
  filter: invert(1) contrast(1.05) !important;
  opacity: 0.88 !important;
}

/* Pay/receive ADA token circles — only Cardano src */
#app .token-icon-circle--shielded-bw:has(img[src*='cardano']),
#app .token-selector-trigger .token-icon-circle--shielded-bw:has(img[src*='cardano']) {
  background-color: rgba(13, 16, 22, 0.96) !important;
  background-image: url('/images/shielded-chain-badges/cardano-ivory.png?v=2') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 85% !important;
}

#app .token-icon-circle--shielded-bw:has(img[src*='cardano']) .token-icon-circle__img,
#app .token-selector-dropdown .token-icon-circle--shielded-bw:has(img[src*='cardano']) .token-icon-circle__img,
#app .token-selector-trigger .token-icon-circle--shielded-bw:has(img[src*='cardano']) .token-icon-circle__img {
  opacity: 0 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

#app .shielded-chain-badge-strip__item--selected .shielded-chain-badge-strip__label {
  color: var(--color-accent);
  font-weight: 700;
}

/*
 * Centered Ura mark: baseline uses the PNG as a CSS mask with a light fill,
 * which paints a solid plate (and read as white/gray halo on dark chrome).
 * The packaged PNG is already orange (#ff6a00 family) with transparent
 * surroundings — show it directly, no mask plate/shadow/filter.
 */
#app .portfolio-strip__brand-mark,
#app .portfolio-strip--centered-brand .portfolio-strip__brand-mark {
  background-color: transparent !important;
  background-image: url('/images/ura-finance-logo.png?v=7') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  /* keep vertical size; shrink width so no empty plate spans the strip */
  width: 48px !important;
  min-width: 48px !important;
  max-width: 56px !important;
  height: 48px !important;
  max-height: 56px !important;
}

#app .portfolio-strip__brand-mark::before,
#app .portfolio-strip__brand-mark::after,
#app .portfolio-strip--centered-brand .portfolio-strip__brand-mark::before,
#app .portfolio-strip--centered-brand .portfolio-strip__brand-mark::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Boot readiness shell (shown while ZeroOne chunk prepares) */
#app .ura-boot-form-shell {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#app .ura-boot-form-shell__field {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(13, 16, 22, 0.96);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  min-height: 4.25rem;
}

#app .ura-boot-form-shell__label {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.35rem;
}

#app .ura-boot-form-shell__value {
  color: var(--color-text);
  opacity: 0.55;
  font-size: 1.15rem;
}

#app .ura-boot-form-shell__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

#app .ura-boot-retry-btn {
  appearance: none;
  border: 1px solid rgba(255, 106, 0, 0.85);
  background: rgba(13, 16, 22, 0.96);
  color: var(--color-text);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  font: inherit;
}

#app .ura-boot-retry-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-warm);
}

#app .ura-boot-module-status {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}

/* Join Relay Club — orange pill, black text (surgical CSS may already set this; force hierarchy) */
#app .join-relay-club-cta,
.join-relay-club-cta {
  background: #ff6a00 !important;
  border: 1px solid #ff6a00 !important;
  color: #05070a !important;
  box-shadow: 0 0 16px rgba(255, 106, 0, 0.16);
}

#app .join-relay-club-cta:hover,
.join-relay-club-cta:hover {
  background: #ff9a3d !important;
  border-color: #ff9a3d !important;
  color: #05070a !important;
}

/* Midnight receive info "i" — orange, not purple */
#app .pse-midnight-receive-info {
  border-color: rgba(255, 106, 0, 0.55) !important;
  background: rgba(255, 106, 0, 0.12) !important;
  color: #ff6a00 !important;
  fill: #ff6a00 !important;
}

#app .pse-midnight-receive-info:hover,
#app .pse-midnight-receive-info:focus-visible {
  border-color: rgba(255, 154, 61, 0.75) !important;
  background: rgba(255, 154, 61, 0.16) !important;
  color: #ff9a3d !important;
  fill: #ff9a3d !important;
  outline-color: rgba(255, 106, 0, 0.55);
}

#app .pse-midnight-receive-info svg,
#app .pse-midnight-receive-info svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
  color: inherit !important;
}

/* Generate / primary private CTA — charcoal + orange border (baseline uses purple gradients !important) */
#app .pse-midnight-receive-generate-btn,
#app button.pse-midnight-receive-generate-btn {
  background: rgba(13, 16, 22, 0.96) !important;
  border: 1px solid rgba(255, 106, 0, 0.85) !important;
  color: var(--color-text) !important;
  box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.06) !important;
}

#app .pse-midnight-receive-generate-btn:hover:not(:disabled),
#app button.pse-midnight-receive-generate-btn:hover:not(:disabled) {
  background: rgba(20, 24, 32, 0.98) !important;
  border-color: var(--color-accent) !important;
}

#app .btn.btn-primary.swap-action-button--private {
  background: rgba(13, 16, 22, 0.96) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid rgba(255, 106, 0, 0.85) !important;
  box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.06) !important;
  background-image: none !important; /* kill purple gradient */
}

/* Testnet / brand accents */
#app .pse-testnet-pill,
#app .portfolio-strip__network,
#app .sidebar__brand-text--ura {
  color: var(--color-accent-warm);
}

/* Kill remaining purple/violet on interactive swap surfaces */
#app a,
#app .pse-capacity-router-advanced-link {
  color: var(--color-accent-warm);
}

#app .token-selector-trigger:disabled,
#app .token-selector-trigger[aria-disabled='true'] {
  opacity: 0.78;
  color: var(--color-text-secondary);
  background: rgba(13, 16, 22, 0.96);
  border-color: rgba(255, 255, 255, 0.10);
}

/* Route chooser presentation moved to ura-route-cards-v1.css */