/* Dedicated final layer for the Confirm Position reference design.
   Every size is expressed as a multiple of --u so the whole dialog can be
   scaled from one place without changing the reference proportions. */
body #join-dialog[open] {
  --u: 1.45;
  --cp-teal: #17e0a8;
  --cp-teal-soft: rgba(23, 224, 168, 0.42);
  --cp-line: rgba(226, 240, 236, 0.09);
  --cp-muted: #6f7a7c;
  --cp-text: #dfe3e2;
  width: min(calc(430px * var(--u)), calc(100vw - 18px)) !important;
  max-width: calc(430px * var(--u)) !important;
  max-height: calc(100dvh - 14px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: auto !important;
}

/* Older graffiti/compact layers add offset text shadows, underlines and
   accent bars that double up on this flat design. */
body #join-dialog[open] * {
  text-shadow: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
}

body #join-dialog[open] > form.dialog-title {
  position: relative !important;
  display: block !important;
  padding: calc(22px * var(--u)) calc(15px * var(--u)) calc(23px * var(--u)) !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: calc(10px * var(--u)) !important;
  background: #02090b !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.82) !important;
}

/* ---------- header ---------- */
body #join-dialog[open] .eyebrow {
  display: block !important;
  margin: 0 0 calc(7px * var(--u)) !important;
  color: var(--cp-teal) !important;
  font-size: 0 !important;
}

body #join-dialog[open] .eyebrow::before {
  content: "TAKE POSITION" !important;
  font: 500 calc(9.5px * var(--u))/1 "DM Mono", monospace !important;
  letter-spacing: calc(1.1px * var(--u)) !important;
}

body #join-dialog[open] #join-title {
  margin: 0 !important;
  color: #f0efef !important;
  font: 800 calc(29px * var(--u))/1.05 "Manrope", sans-serif !important;
  letter-spacing: calc(-0.8px * var(--u)) !important;
  text-transform: none !important;
}

body #join-dialog[open] #join-title .join-side-word {
  color: inherit !important;
  font: inherit !important;
}

body #join-dialog[open]:has(#join-submit[data-side="UP"]) #join-title .join-side-word,
body #join-dialog[open]:has(#join-submit[data-side="UP"]) #join-title::after {
  color: var(--cp-teal) !important;
}

body #join-dialog[open]:has(#join-submit[data-side="DOWN"]) #join-title .join-side-word,
body #join-dialog[open]:has(#join-submit[data-side="DOWN"]) #join-title::after {
  color: #ff3f86 !important;
}

body #join-dialog[open]:has(#join-submit[data-side="UP"]) #join-title::after {
  content: " \2191" !important;
}

body #join-dialog[open]:has(#join-submit[data-side="DOWN"]) #join-title::after {
  content: " \2193" !important;
}

body #join-dialog[open] > form.dialog-title > .close {
  position: absolute !important;
  top: calc(16px * var(--u)) !important;
  right: calc(15px * var(--u)) !important;
  width: calc(34px * var(--u)) !important;
  height: calc(34px * var(--u)) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(232, 236, 234, 0.5) !important;
  border-radius: calc(6px * var(--u)) !important;
  color: #e8ecea !important;
  background: transparent !important;
  font: 400 calc(22px * var(--u))/1 Arial, sans-serif !important;
}

/* ---------- market summary ---------- */
body #join-dialog[open] .confirm-market {
  margin: calc(17px * var(--u)) 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--cp-line) !important;
  border-radius: 0 !important;
  background: none !important;
}

body #join-dialog[open] .challenge-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: calc(10px * var(--u)) !important;
  margin: 0 !important;
  padding: calc(11px * var(--u)) 0 calc(12px * var(--u)) !important;
  border-bottom: 1px solid var(--cp-line) !important;
  color: var(--cp-muted) !important;
  font: 500 calc(10px * var(--u))/1 "DM Mono", monospace !important;
  letter-spacing: calc(0.6px * var(--u)) !important;
  text-transform: uppercase !important;
}

body #join-dialog[open] .challenge-token {
  display: flex !important;
  align-items: center !important;
  gap: calc(10px * var(--u)) !important;
  color: var(--cp-text) !important;
  font: 500 calc(12px * var(--u))/1 "DM Mono", monospace !important;
  letter-spacing: calc(0.6px * var(--u)) !important;
}

body #join-dialog[open] .challenge-token i {
  flex: none !important;
  width: calc(22px * var(--u)) !important;
  height: calc(22px * var(--u)) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: linear-gradient(140deg, #a44ad2, #5c3fa2) !important;
  color: #fff !important;
  font: 700 calc(11px * var(--u))/1 "Manrope", sans-serif !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

/* ---------- challenger vs creator ---------- */
body #join-dialog[open] .prediction-flow {
  position: relative !important;
  min-height: 0 !important;
  margin: calc(16px * var(--u)) 0 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: none !important;
  gap: calc(25px * var(--u)) !important;
  align-items: stretch !important;
}

body #join-dialog[open] .prediction-choice {
  width: 100% !important;
  height: auto !important;
  min-height: calc(105px * var(--u)) !important;
  display: grid !important;
  grid-template-rows: none !important;
  align-content: center !important;
  justify-items: center !important;
  gap: calc(14px * var(--u)) !important;
  padding: calc(14px * var(--u)) calc(10px * var(--u)) !important;
  border-radius: calc(8px * var(--u)) !important;
  transform: none !important;
  rotate: 0deg !important;
  clip-path: none !important;
}

body #join-dialog[open] .prediction-choice span {
  align-self: center !important;
  justify-self: center !important;
  font: 500 calc(10px * var(--u))/1 "DM Mono", monospace !important;
  letter-spacing: calc(0.7px * var(--u)) !important;
  text-transform: uppercase !important;
}

body #join-dialog[open] .prediction-choice span::before {
  content: none !important;
  display: none !important;
}

body #join-dialog[open] .prediction-choice span em {
  font-style: normal !important;
}

body #join-dialog[open] .prediction-choice b {
  align-self: center !important;
  justify-self: center !important;
  font: 800 calc(33px * var(--u))/1 "Manrope", sans-serif !important;
  letter-spacing: calc(-0.5px * var(--u)) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

body #join-dialog[open] .prediction-choice small {
  display: none !important;
}

body #join-dialog[open] .prediction-choice.challenger {
  order: 1 !important;
  border: 1px solid var(--cp-teal-soft) !important;
  background: rgba(23, 224, 168, 0.06) !important;
  transform: none !important;
  rotate: 0deg !important;
}

body #join-dialog[open] .prediction-choice.creator {
  order: 3 !important;
  border: 1px solid rgba(226, 240, 236, 0.08) !important;
  background: #0b0f12 !important;
  transform: none !important;
  rotate: 0deg !important;
}

body #join-dialog[open] .prediction-choice.creator span {
  color: #7c8688 !important;
}

body #join-dialog[open] .prediction-choice.creator b {
  color: #454b4d !important;
}

body #join-dialog[open] .prediction-choice.challenger span,
body #join-dialog[open] .prediction-choice.challenger b {
  color: var(--cp-teal) !important;
}

body #join-dialog[open]:has(#join-submit[data-side="DOWN"]) .prediction-choice.challenger {
  border-color: rgba(255, 63, 134, 0.45) !important;
  background: rgba(255, 63, 134, 0.08) !important;
}

body #join-dialog[open]:has(#join-submit[data-side="DOWN"]) .prediction-choice.challenger span,
body #join-dialog[open]:has(#join-submit[data-side="DOWN"]) .prediction-choice.challenger b {
  color: #ff3f86 !important;
}

body #join-dialog[open]:has(#join-submit[data-side="UP"]) .prediction-choice.challenger b::after,
body #join-dialog[open]:has(#join-submit[data-side="DOWN"]) .prediction-choice.creator b::after {
  content: " \2191" !important;
}

body #join-dialog[open]:has(#join-submit[data-side="DOWN"]) .prediction-choice.challenger b::after,
body #join-dialog[open]:has(#join-submit[data-side="UP"]) .prediction-choice.creator b::after {
  content: " \2193" !important;
}

body #join-dialog[open] .flow-arrow {
  order: 2 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: calc(33px * var(--u)) !important;
  height: calc(33px * var(--u)) !important;
  display: grid !important;
  place-items: center !important;
  transform: translate(-50%, -50%) !important;
  border: 1px solid rgba(226, 240, 236, 0.09) !important;
  border-radius: 50% !important;
  background: #0b1114 !important;
  color: #7c8688 !important;
  font: 700 calc(12px * var(--u))/1 "DM Mono", monospace !important;
  letter-spacing: calc(0.5px * var(--u)) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

body #join-dialog[open] .flow-arrow::before,
body #join-dialog[open] .flow-arrow::after {
  content: none !important;
  display: none !important;
}

/* ---------- target price ---------- */
body #join-dialog[open] .target-strip {
  min-height: calc(45px * var(--u)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: stretch !important;
  margin: calc(14px * var(--u)) 0 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(226, 240, 236, 0.1) !important;
  border-radius: calc(8px * var(--u)) !important;
  background: transparent !important;
}

body #join-dialog[open] .target-strip > div:first-child {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: calc(12px * var(--u)) !important;
  padding: 0 calc(15px * var(--u)) !important;
  text-align: left !important;
}

body #join-dialog[open] .target-strip > div:first-child::before {
  content: none !important;
}

body #join-dialog[open] .target-strip span {
  color: var(--cp-muted) !important;
  font: 500 calc(10px * var(--u))/1 "DM Mono", monospace !important;
  letter-spacing: calc(0.7px * var(--u)) !important;
  text-transform: uppercase !important;
}

body #join-dialog[open] .target-strip b {
  color: var(--cp-teal) !important;
  font: 500 calc(15px * var(--u))/1 "DM Mono", monospace !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

body #join-dialog[open] .target-strip b::after {
  content: " USDG" !important;
  color: var(--cp-teal) !important;
  font: 500 calc(13px * var(--u))/1 "DM Mono", monospace !important;
}

/* ---------- payment rows ---------- */
body #join-dialog[open] .payment {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 0 !important;
  margin: calc(17px * var(--u)) 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--cp-line) !important;
}

body #join-dialog[open] .payment::before,
body #join-dialog[open] .payment::after {
  content: none !important;
  display: none !important;
}

body #join-dialog[open] .payment span {
  padding: calc(11px * var(--u)) 0 !important;
  border: 0 !important;
  color: var(--cp-text) !important;
  font: 400 calc(13.5px * var(--u))/1.2 "DM Mono", monospace !important;
  letter-spacing: 0 !important;
  text-transform: capitalize !important;
}

body #join-dialog[open] .payment b {
  min-width: 0 !important;
  justify-self: end !important;
  padding: calc(11px * var(--u)) 0 !important;
  border: 0 !important;
  color: #e8e8e8 !important;
  text-align: right !important;
  font: 400 calc(13.5px * var(--u))/1.2 "DM Mono", monospace !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

body #join-dialog[open] .payment span::before,
body #join-dialog[open] .payment span::after,
body #join-dialog[open] .payment b::before,
body #join-dialog[open] .payment b::after {
  content: none !important;
  display: none !important;
}

body #join-dialog[open] .payment .if-you-win-value {
  color: var(--cp-teal) !important;
}

body #join-dialog[open] .payment span:nth-of-type(4) {
  padding-top: calc(21px * var(--u)) !important;
  border-top: 1px solid var(--cp-line) !important;
}

body #join-dialog[open] .payment b:nth-of-type(4) {
  position: relative !important;
  padding: calc(21px * var(--u)) 0 calc(8px * var(--u)) !important;
  border-top: 1px solid var(--cp-line) !important;
  border-bottom: calc(4px * var(--u)) solid var(--cp-teal) !important;
  color: #e8e8e8 !important;
  font: 700 calc(20px * var(--u))/1.1 "DM Mono", monospace !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

body #join-dialog[open] .payment b:nth-of-type(4)::before,
body #join-dialog[open] .payment b:nth-of-type(4)::after {
  content: none !important;
  display: none !important;
}

/* ---------- confirm button ---------- */
body #join-dialog[open] #join-submit {
  width: 100% !important;
  height: auto !important;
  min-height: calc(48px * var(--u)) !important;
  margin: calc(21px * var(--u)) 0 0 !important;
  padding: 0 calc(18px * var(--u)) !important;
  border: 0 !important;
  border-radius: calc(8px * var(--u)) !important;
  background: linear-gradient(180deg, #3ad8a5, #23c894) !important;
  color: #04120e !important;
  font-size: 0 !important;
  clip-path: none !important;
}

body #join-dialog[open] #join-submit::before {
  content: "CONFIRM POSITION" !important;
  color: #04120e !important;
  font: 800 calc(15px * var(--u))/1 "Manrope", sans-serif !important;
  letter-spacing: calc(0.6px * var(--u)) !important;
}

body #join-dialog[open] #join-submit::after {
  content: none !important;
  display: none !important;
}

/* ---------- footnote ---------- */
body #join-dialog[open] .form-note {
  position: relative !important;
  min-height: 0 !important;
  margin: calc(14px * var(--u)) 0 0 !important;
  padding: calc(13px * var(--u)) calc(14px * var(--u)) calc(13px * var(--u)) calc(38px * var(--u)) !important;
  border: 1px solid rgba(226, 240, 236, 0.08) !important;
  border-radius: calc(8px * var(--u)) !important;
  background: transparent !important;
  color: #6d7678 !important;
  font: 400 calc(10px * var(--u))/1.75 "Manrope", sans-serif !important;
  text-align: left !important;
}

body #join-dialog[open] .form-note::before {
  content: "i" !important;
  position: absolute !important;
  top: calc(14px * var(--u)) !important;
  left: calc(13px * var(--u)) !important;
  width: calc(15px * var(--u)) !important;
  height: calc(15px * var(--u)) !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(226, 240, 236, 0.24) !important;
  border-radius: 50% !important;
  color: #7c8688 !important;
  font: 600 calc(9px * var(--u))/1 "DM Mono", monospace !important;
}

/* ---------- fit the scaled dialog to the viewport ---------- */
@media (max-height: 1040px) {
  body #join-dialog[open] {
    --u: 1.3;
  }
}

@media (max-height: 920px) {
  body #join-dialog[open] {
    --u: 1.16;
  }
}

@media (max-height: 820px) {
  body #join-dialog[open] {
    --u: 1.04;
  }
}

@media (max-height: 720px) {
  body #join-dialog[open] {
    --u: 0.94;
  }
}

@media (max-width: 720px) {
  body #join-dialog[open] {
    --u: 1;
  }
}

@media (max-width: 480px) {
  body #join-dialog[open] {
    --u: 0.85;
  }
}