/* the order ticket at the top of the front page */
.stage { position: relative; margin: 26px 0 20px; z-index: 5; }
.tk-panel {
  display: grid; grid-template-columns: minmax(200px, 1fr) minmax(240px, 1fr) minmax(320px, 1.6fr) auto; grid-template-areas: "m s l g";
  column-gap: 40px; row-gap: 18px; align-items: end; padding: 20px 22px; border-radius: 24px;
  background: var(--glass); box-shadow: inset 0 0 0 1px rgba(246, 254, 253, .06), 0 24px 60px rgba(0, 0, 0, .3);
}
.tk-m { grid-area: m; } .tk-s { grid-area: s; } .tk-lev { grid-area: l; } .tk-go { grid-area: g; }
.tk-label { display: block; color: var(--muted); font-size: 13px; font-weight: 600; margin: 0 0 8px 2px; }
.tk-field { position: relative; min-width: 0; }

.tk-market {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 64px; padding: 0 14px 0 16px; cursor: pointer; text-align: left;
  background: var(--tile); border: 1px solid var(--tile2); border-radius: 16px; color: var(--ink); font-family: 'Geist', sans-serif;
  transition: border-color 150ms ease, background 150ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.tk-market:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .tk-market:hover { border-color: #3a464c; background: #1f2a30; } }
.tk-market[aria-expanded=true] { border-color: var(--up); }
.tk-market b { font-size: 26px; font-weight: 800; letter-spacing: -.035em; }
.tk-market .px { font: 600 13px 'Geist Mono', ui-monospace, monospace; color: var(--muted); font-variant-numeric: tabular-nums; transition: color 400ms ease; }
.tk-market .px.up { color: var(--up); transition: none; }
.tk-market .px.down { color: var(--down); transition: none; }
.tk-market svg { margin-left: auto; color: var(--muted); transition: transform 200ms cubic-bezier(.23, 1, .32, 1); flex: none; }
.tk-market[aria-expanded=true] svg { transform: rotate(180deg); color: var(--ink); }
.mlist .msearch {
  width: 100%; height: 42px; margin-bottom: 6px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--tile2); background: var(--card);
  color: var(--ink); font: 600 15px 'Geist', sans-serif; outline: none;
}
.mlist .msearch:focus { border-color: var(--up); }
/* the options scroll inside the list; the list never runs down the page */
#tk-options { max-height: min(340px, 52vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--tile2) transparent; }
#tk-options::-webkit-scrollbar { width: 8px; }
#tk-options::-webkit-scrollbar-thumb { background: var(--tile2); border-radius: 8px; }
.tk-m .mlist { right: 0; min-width: 300px; }

.ticket .ls-sides { height: 64px; padding: 5px; border-radius: 16px; }
.ticket .ls-sides button { padding: 0; font-size: 20px; }
.ticket .ls-pill { top: 5px; bottom: 5px; left: 5px; border-radius: 12px; }
.ticket .ls-sides[data-side=short] .ls-pill { right: 5px; }

.tk-levhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.tk-levnum { display: inline-flex; align-items: baseline; font: 800 30px/1 'Geist', sans-serif; letter-spacing: -.04em; color: var(--up); transition: color 200ms ease; }
.tk-levnum .x { font-size: .6em; margin-left: 1px; }
[data-side=short] .tk-levnum { color: var(--down); }
.ticket .lev-slider { margin: 0 10px; }

.tk-go { height: 64px; padding: 0 28px; font-size: 18px; border-radius: 16px; white-space: nowrap; }
.tk-go:active { transform: scale(.97); }

/* the position preview */
.pv { min-width: 0; background: var(--bg); border-radius: 16px; padding: 12px 14px 10px; box-shadow: inset 0 0 0 1px var(--line); }
.pv-head { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-entry { color: var(--muted); white-space: nowrap; }
.pv-val { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; }
.pv-usd { font: 800 30px/1 'Geist', sans-serif; letter-spacing: -.04em; color: var(--ink); transition: color 250ms ease; }
.pv-pct { font: 700 15px 'Geist', sans-serif; color: var(--muted); font-variant-numeric: tabular-nums; transition: color 250ms ease; }
.pv[data-state=up] .pv-usd, .pv[data-state=up] .pv-pct { color: var(--up); }
.pv[data-state=down] .pv-usd, .pv[data-state=down] .pv-pct, .pv[data-state=dead] .pv-usd, .pv[data-state=dead] .pv-pct { color: var(--down); }
.pv-meter { position: relative; height: 8px; }
.pv-track { position: absolute; inset: 2px 0; border-radius: 4px; background: linear-gradient(90deg, rgba(237, 112, 136, .85), rgba(237, 112, 136, .12) 45%, rgba(80, 210, 193, .12) 55%, rgba(80, 210, 193, .85)); }
.pv-zero { position: absolute; left: -1px; top: -3px; width: 2px; height: 14px; border-radius: 1px; background: rgba(246, 254, 253, .45); transition: transform 500ms cubic-bezier(.23, 1, .32, 1); }
.pv-dot {
  position: absolute; left: -7px; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 3px rgba(80, 210, 193, .35), 0 0 14px rgba(80, 210, 193, .6);
  transition: transform 600ms cubic-bezier(.23, 1, .32, 1), box-shadow 250ms ease;
}
.pv[data-state=down] .pv-dot, .pv[data-state=dead] .pv-dot { box-shadow: 0 0 0 3px rgba(237, 112, 136, .35), 0 0 14px rgba(237, 112, 136, .6); }
.pv-ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font: 600 11px 'Geist Mono', ui-monospace, monospace; }
.pv-l { color: var(--down); }
.pv-r { color: var(--up); }
.preview .pv { background: var(--glass); box-shadow: var(--shadow); padding: 16px 18px 14px; }

@media (max-width: 1100px) {
  .tk-panel { grid-template-columns: 1fr 1fr; grid-template-areas: "m s" "l l" "g g"; column-gap: 24px; }
  .tk-go { width: 100%; height: 54px; }
}
@media (max-width: 760px) {
  .tk-panel { padding: 16px; column-gap: 12px; row-gap: 14px; border-radius: 20px; }
}
@media (max-width: 640px) {
  .stage { margin: 14px 0 14px; }
  .tk-market b { font-size: 22px; }
  .tk-market .px { display: none; }
  .ticket .ls-sides button { font-size: 18px; }
  .pv-ends { font-size: 10px; }
  .tk-go { height: 50px; }
}

.roll { display: inline-flex; height: 1em; overflow: visible; transition: filter 200ms ease; line-height: 1; font-variant-numeric: tabular-nums; }
.rd { display: inline-block; height: 1em; overflow: hidden; }
.rd-strip { display: flex; flex-direction: column; transition: transform 460ms cubic-bezier(.23, 1, .32, 1); will-change: transform; }
.rd-strip span { display: block; height: 1em; line-height: 1; text-align: center; }

.rs { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .rd-strip, .pv-dot, .pv-zero { transition: none; } }

.mlist {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 30; min-width: min(280px, calc(100vw - 150px)); background: var(--tile); border-radius: 16px;
  box-shadow: 0 0 0 1px var(--tile2), 0 24px 60px rgba(0, 0, 0, .55); padding: 6px; letter-spacing: 0;
  transform-origin: top left; opacity: 0; transform: scale(.97) translateY(-4px); pointer-events: none;
  transition: opacity 160ms ease-out, transform 180ms cubic-bezier(.23, 1, .32, 1);
}
.mlist.open { opacity: 1; transform: none; pointer-events: auto; }
.mlist button {
  display: flex; width: 100%; align-items: center; gap: 12px; border: 0; background: transparent; color: var(--ink);
  padding: 10px 12px; border-radius: 10px; cursor: pointer; font: 700 16px 'Geist', sans-serif; text-align: left;
}
.mlist button:hover, .mlist button.hi { background: var(--tile2); }
.mlist button span { margin-left: auto; color: var(--muted); font: 600 13px 'Geist Mono', monospace; }
.mlist button em { font-style: normal; font: 700 11px 'Geist Mono', monospace; color: var(--mint); background: rgba(151, 252, 228, .1); padding: 3px 7px; border-radius: 6px; }
.mlist .none { padding: 12px; color: var(--muted); font: 600 14px 'Geist', sans-serif; }


.cmp-levhead { display: flex; align-items: baseline; justify-content: space-between; }
.cmp-levnum { font: 800 56px/1 'Geist', sans-serif; letter-spacing: -.05em; color: var(--up); transition: color 200ms ease; }
.cmp-levnum small { font-size: .5em; margin-left: 2px; }
[data-side=short] .cmp-levnum { color: var(--down); }


/* long/short switch and leverage bar (launch page) */
.ls-sides { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); border-radius: 20px; padding: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.ls-sides button {
  position: relative; z-index: 1; border: 0; background: transparent; padding: 18px 0; cursor: pointer;
  font: 800 24px 'Geist', sans-serif; letter-spacing: -.02em; color: var(--muted); transition: color .3s;
}
.ls-sides button.on { color: var(--on-mint); }
.ls-pill {
  position: absolute; top: 6px; bottom: 6px; left: 6px; right: 50%; border-radius: 15px; background: var(--up);
  box-shadow: 0 8px 30px rgba(80, 210, 193, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: left .5s cubic-bezier(.6, 0, .2, 1) .04s, right .28s cubic-bezier(.3, .8, .3, 1), background .35s, box-shadow .35s;
}
.ls-sides[data-side=long] .ls-pill { transition: left .28s cubic-bezier(.3, .8, .3, 1), right .5s cubic-bezier(.6, 0, .2, 1) .04s, background .35s, box-shadow .35s; }
.ls-sides[data-side=short] .ls-pill { left: 50%; right: 6px; background: var(--down); box-shadow: 0 8px 30px rgba(237, 112, 136, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }

.lev-slider { position: relative; height: 46px; touch-action: none; cursor: pointer; user-select: none; --side: 80, 210, 193; }
.lev-slider[data-side=short] { --side: 237, 112, 136; }
.ls-track { position: absolute; top: 9px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--tile2); }
.ls-fill {
  position: absolute; inset: 0; border-radius: 2px; background: rgb(var(--side)); transform-origin: left center;
  transition: transform 220ms cubic-bezier(.23, 1, .32, 1), background-color 200ms ease;
}
.ls-dots i {
  position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--card); box-shadow: inset 0 0 0 2px var(--tile2); transition: box-shadow 200ms ease, background-color 200ms ease;
}
.ls-dots i.past { background: rgb(var(--side)); box-shadow: inset 0 0 0 2px rgb(var(--side)); }
.ls-thumb {
  position: absolute; top: 1px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; outline: none;
  background: var(--ink); box-shadow: 0 0 0 3px rgb(var(--side)), 0 2px 8px rgba(0, 0, 0, .45);
  transition: left 220ms cubic-bezier(.23, 1, .32, 1), transform 150ms cubic-bezier(.23, 1, .32, 1), box-shadow 200ms ease;
}
.lev-slider.drag .ls-fill { transition: none; }
.lev-slider.drag .ls-thumb { transition: transform 150ms cubic-bezier(.23, 1, .32, 1), box-shadow 200ms ease; transform: scale(1.12); box-shadow: 0 0 0 3px rgb(var(--side)), 0 0 0 9px rgba(var(--side), .14), 0 2px 8px rgba(0, 0, 0, .45); }
.ls-thumb:focus-visible { box-shadow: 0 0 0 3px rgb(var(--side)), 0 0 0 9px rgba(var(--side), .22); }
.ls-ticks { position: absolute; left: 0; right: 0; top: 26px; height: 18px; }
.ls-ticks button {
  position: absolute; transform: translateX(-50%); border: 0; background: none; color: var(--muted); cursor: pointer;
  font: 600 12px 'Geist', sans-serif; padding: 2px 4px; transition: color 150ms ease; font-variant-numeric: tabular-nums;
}
.ls-ticks button.on { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .ls-ticks button:hover { color: var(--ink); } }