/*
 * The perps terminal, in the ghost lens.
 *
 * One rule decides every colour on this screen:
 *
 *   Vivid green and red belong to YOUR money. Nothing else may use them.
 *   The market ticks in drained green and red. Always.
 *
 * That is the opposite of how every exchange is built, and it is the whole
 * point. On a normal terminal the market screams in saturated green and red all
 * day, so by the time you have a position on, your own numbers are just two more
 * coloured cells in a screen full of them. Here the market is deliberately
 * quiet, which leaves the vivid palette free to mean exactly one thing: this is
 * yours. Your Long and Short buttons, a filled input, your liquidation price,
 * your open position. When you have nothing on, almost nothing on screen is
 * bright, and that is correct.
 *
 * The second idea follows from the first: because the market is quiet, a single
 * warm line can carry real weight. Type a limit price and it appears on the
 * chart exactly where your order would rest (drawMyLevels in perps-pro.js), the
 * only lit thing among the candles. That is also where an open position's entry
 * and liquidation lines will go.
 *
 * Structure, shell, sheets and the veil come from ghost-lens.css, which now maps
 * everything onto the app's own tokens from styles.css. So this file introduces
 * no colours, no radii and no type of its own, and follows the app into light
 * mode without knowing that light mode exists.
 */

/* ── header ─────────────────────────────────────────────────────────────────── */

.pp-sym {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 2px 0;
  color: var(--gl-mine);
  font: inherit;
}
.pp-sym b {
  font-family: var(--font-display, 'Space Grotesk', Inter, sans-serif);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pp-chev {
  font-size: 9px;
  font-style: normal;
  color: var(--gl-market-faint);
}
.pp-chg {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* Market data, so it takes the drained pair via .pp-up / .pp-down and never
     the vivid one. Stated here because a percentage next to a big number is the
     first thing anyone is tempted to make loud. */
}

/* Two icons in one pill: chart, or the order form. */
.pp-modes {
  margin-left: auto;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
}
.pp-modes button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 27px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--gl-market-faint);
  transition: background 0.16s var(--gl-ease), color 0.16s var(--gl-ease);
}
.pp-modes button.on {
  background: var(--gl-panel-2);
  color: var(--gl-mine);
}

/* ── the price strip ────────────────────────────────────────────────────────
   Market data, so cool even though it is the biggest number here. Direction
   uses the drained pair; the vivid pair is not available to the market. */

.pp-strip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 14px 9px;
  flex: none;
}
.pp-last {
  min-width: 0;
}
.pp-last .pp-big {
  font-family: var(--font-display, 'Space Grotesk', Inter, sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--gl-market);
  transition: color 0.3s var(--gl-ease);
}
/* Neutral, both ways. Direction is the job of the chip next to the symbol. */
.pp-last .pp-big.pp-up,
.pp-last .pp-big.pp-down {
  color: var(--gl-mine);
}
.pp-last .pp-mark {
  font-size: 11px;
  color: var(--gl-market-faint);
  margin-top: 3px;
}
.pp-stats {
  margin-left: auto;
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 12px;
  font-size: 10.5px;
  align-items: baseline;
}
.pp-stats span:nth-child(odd) {
  color: var(--gl-market-faint);
}
.pp-stats span:nth-child(even) {
  text-align: right;
  color: var(--gl-market-dim);
  font-variant-numeric: tabular-nums;
}

/* The market's own up and down, drained. Used by the book, the stats and the
   market list, never by anything the reader owns. */
.pp-up {
  color: var(--gl-bid);
}
.pp-down {
  color: var(--gl-ask);
}

/* A single frame of colour on a tick. Barely there on purpose: a terminal that
   flashes at you is a terminal you learn to stop looking at. */
@keyframes pp-flash-up {
  from { background: var(--gl-bid-wash); }
  to { background: transparent; }
}
@keyframes pp-flash-down {
  from { background: var(--gl-ask-wash); }
  to { background: transparent; }
}
.pp-flash-up {
  animation: pp-flash-up 0.45s ease-out;
}
.pp-flash-down {
  animation: pp-flash-down 0.45s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .pp-flash-up, .pp-flash-down { animation: none; }
}

/* ── body and the split ─────────────────────────────────────────────────────── */

.pp-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
}

/* Chart mode is a viewport to fill, not a document to scroll: the chart takes
   whatever is left once the trade bar and the tabs have had their share. */
.pp-root.pp-mode-chart .pp-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pp-root.pp-mode-chart .pp-chartwrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 57/43 rather than half and half: the form has inputs that need width, the
   book needs two numbers and a bar. */
.pp-split {
  display: grid;
  grid-template-columns: 57fr 43fr;
  gap: 11px;
  padding: 0 12px 14px;
  align-items: start;
}

/* ── the order form: cold until you touch it ─────────────────────────────────
   An untouched form is not yours yet, so it sits back with the market. Filling
   a field is the moment it becomes yours, and it lights accordingly. */

.pp-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.pp-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.pp-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 42px;
  padding: 0 11px;
  border-radius: var(--gl-radius);
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
  color: var(--gl-mine);
  font: inherit;
  font-size: 13px;
}
.pp-pick span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-pick i {
  color: var(--gl-market-faint);
  font-size: 9px;
  font-style: normal;
  flex: none;
}
.pp-pick:active {
  background: var(--gl-panel-2);
}

.pp-avail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--gl-market-dim);
  padding: 0 2px;
}
.pp-avail b {
  color: var(--gl-mine);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Equity trails the available figure, quietly: margin behind an open
   position is money you have, and "available" on its own reads as though
   it were gone. */
.pp-availright {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pp-availeq:empty {
  display: none;
}
.pp-availeq {
  font-size: 10.5px;
  color: var(--gl-market-dim);
}

.pp-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 11px;
  border-radius: var(--gl-radius);
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
  transition: border-color 0.16s var(--gl-ease), background 0.16s var(--gl-ease);
}
.pp-field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--gl-market);
  font: inherit;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  transition: color 0.16s var(--gl-ease);
}
.pp-field input::placeholder {
  color: var(--gl-market-faint);
}
.pp-field input:disabled {
  color: var(--gl-market-faint);
}
/* Yours now. A number you typed is the one thing in this column that is not
   the market's, so it reads in white against a warmed edge. */
.pp-field:has(input:not(:placeholder-shown)) {
  border-color: color-mix(in srgb, var(--success, #34e8a4) 34%, transparent);
  background: var(--gl-live-soft);
}
.pp-field input:not(:placeholder-shown) {
  color: var(--gl-mine);
  font-weight: 600;
}
.pp-field:focus-within {
  border-color: color-mix(in srgb, var(--success, #34e8a4) 50%, transparent);
}
.pp-field .pp-unit {
  flex: none;
  font-size: 10.5px;
  color: var(--gl-market-faint);
  letter-spacing: 0.02em;
}
.pp-field .pp-mid {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--gl-panel-2);
  border: 0;
  color: var(--gl-market-dim);
  font-family: inherit;
}
.pp-field .pp-mid:active {
  color: var(--gl-live);
}

/* ── the size slider ────────────────────────────────────────────────────────── */

.pp-slider {
  padding: 5px 2px 1px;
}
.pp-track {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: var(--gl-edge);
}
.pp-track .pp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background: var(--gl-live);
  opacity: 0.85;
}
.pp-track .pp-notch {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gl-void);
  border: 1.5px solid var(--gl-edge);
  transform: translate(-50%, -50%);
}
.pp-track .pp-notch.on {
  border-color: var(--gl-live);
}
.pp-track .pp-knob {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gl-live);
  border: 2px solid var(--gl-void);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--success, #34e8a4) 50%, transparent), 0 1px 5px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
}
.pp-pcts {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--gl-market-faint);
}
.pp-pcts button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 2px 4px;
}
.pp-pcts button.on {
  color: var(--gl-live);
  font-weight: 600;
}

/* ── the consequences panel ─────────────────────────────────────────────────
   What this order does to you, so risk is amber: neither the market's colour
   nor a win, but the number to look at twice. */

.pp-facts {
  display: grid;
  gap: 7px;
  padding: 10px 11px;
  border-radius: var(--gl-radius);
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
}
/* Label left, number right, qualifier under the number. Baseline-aligned so
   the labels and the primary figures sit on one line however many of the
   rows carry a second. */
.pp-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 11.5px;
}
.pp-factlabel {
  color: var(--gl-market-dim);
  white-space: nowrap;
}
.pp-factval {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
  text-align: right;
}
.pp-factval b {
  font-weight: 600;
  color: var(--gl-mine);
  font-variant-numeric: tabular-nums;
}
/* The qualifier is context, not a second reading: quieter, and never the
   thing the eye lands on first. */
.pp-factnote {
  font-style: normal;
  font-size: 10px;
  line-height: 1.25;
  color: var(--gl-market-dim);
}
.pp-facts .pp-warn .pp-factval b,
.pp-facts .pp-liq .pp-factval b {
  color: var(--gl-risk);
}

/* ── flags ──────────────────────────────────────────────────────────────────── */

.pp-flags {
  display: grid;
  gap: 7px;
  padding: 1px 2px;
}
.pp-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gl-market-dim);
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
}
.pp-box {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.5px solid var(--gl-edge);
  display: grid;
  place-items: center;
  flex: none;
}
/* The tick is always in the DOM so the box cannot change size when toggled;
   only its ink appears. Without this an unchecked box still shows a grey tick,
   which reads as "on" and is a dangerous thing to get wrong on post-only. */
.pp-box svg {
  opacity: 0;
  transition: opacity 0.1s ease;
}
.pp-flag.on .pp-box {
  background: var(--gl-live);
  border-color: var(--gl-live);
  color: var(--bg, #050609);
}
.pp-flag.on .pp-box svg {
  opacity: 1;
}
.pp-flag.on {
  color: var(--gl-mine);
}
.pp-flag .pp-tif {
  margin-left: auto;
  color: var(--gl-market-faint);
  font-size: 11px;
}

/* ── Long and Short: the warmest things on the screen ───────────────────────
   Your action, so the vivid pair, which nothing else here is allowed to use. */

.pp-sides {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}
.pp-side {
  border: 0;
  /* A pill, like every other primary action in the app. */
  border-radius: 999px;
  padding: 14px 0 12px;
  font-family: var(--font, Inter, sans-serif);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1px;
  display: grid;
  gap: 1px;
  transition: transform 0.08s var(--gl-ease), filter 0.14s var(--gl-ease);
}
.pp-side small {
  font-family: Inter, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}
.pp-side.pp-long {
  background: var(--gl-live);
  color: var(--bg, #050609);
  box-shadow: 0 3px 18px color-mix(in srgb, var(--success, #34e8a4) 16%, transparent);
}
.pp-side.pp-short {
  background: var(--gl-loss);
  color: var(--bg, #050609);
  box-shadow: 0 3px 18px color-mix(in srgb, var(--red, #ff5c7a) 15%, transparent);
}
.pp-side:active {
  transform: scale(0.985);
  filter: brightness(1.07);
}
.pp-side[disabled] {
  opacity: 0.4;
  box-shadow: none;
}

/* ── the order book: cold, and read as a table ──────────────────────────────── */

.pp-book {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pp-fund {
  font-size: 10.5px;
  color: var(--gl-market-faint);
  text-align: right;
  line-height: 1.5;
}
.pp-fund b {
  color: var(--gl-risk);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pp-bookhead {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--gl-market-faint);
  padding: 2px 2px 1px;
  border-bottom: 1px solid var(--gl-edge-soft);
}
.pp-rows {
  display: grid;
}
.pp-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 19px;
  padding: 0 2px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.pp-row .pp-depth {
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 0;
  border-radius: 2px 0 0 2px;
  pointer-events: none;
}
.pp-row.ask .pp-depth {
  background: var(--gl-ask-wash);
}
.pp-row.bid .pp-depth {
  background: var(--gl-bid-wash);
}
.pp-row .pp-px {
  position: relative;
  font-weight: 600;
}
.pp-row.ask .pp-px {
  color: var(--gl-ask);
}
.pp-row.bid .pp-px {
  color: var(--gl-bid);
}
.pp-row .pp-sz {
  position: relative;
  color: var(--gl-market-dim);
}
.pp-row:active {
  background: var(--gl-panel);
}

/* The spread block. Market data, so the mid price is cool no matter how large. */
.pp-spread {
  padding: 5px 2px 4px;
}
.pp-mid-px {
  font-family: var(--font-display, 'Space Grotesk', Inter, sans-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gl-market);
}
.pp-mid-px.pp-up {
  color: color-mix(in srgb, var(--success, #34e8a4) 34%, var(--gl-mine));
}
.pp-mid-px.pp-down {
  color: color-mix(in srgb, var(--red, #ff5c7a) 34%, var(--gl-mine));
}
.pp-mid-sub {
  font-size: 10px;
  color: var(--gl-market-faint);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

.pp-ratio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pp-ratio .pp-bar {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.pp-ratio .pp-bar span:first-child {
  background: var(--gl-bid);
}
.pp-ratio .pp-bar span:last-child {
  background: var(--gl-ask);
}

/* ── chart ──────────────────────────────────────────────────────────────────── */

.pp-tfs {
  display: flex;
  gap: 4px;
  padding: 0 12px 8px;
  flex: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pp-tfs::-webkit-scrollbar {
  display: none;
}
.pp-tfs button {
  flex: none;
  padding: 5px 11px;
  border-radius: 8px;
  border: 0;
  background: none;
  color: var(--gl-market-faint);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}
.pp-tfs button.on {
  background: var(--gl-panel-2);
  color: var(--gl-mine);
}

.pp-chartwrap {
  position: relative;
  padding: 0 4px;
}
.pp-chartwrap canvas {
  display: block;
  width: 100%;
  touch-action: pan-y;
}
/* The crosshair readout: the only way to read a chart this size without
   pinch-zooming. */
.pp-ohlc {
  position: absolute;
  left: 10px;
  top: 6px;
  display: flex;
  gap: 9px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--gl-market-dim);
  background: rgba(4, 5, 10, 0.86);
  border: 1px solid var(--gl-edge-soft);
  border-radius: 7px;
  padding: 4px 7px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s var(--gl-ease);
}
.pp-ohlc.on {
  opacity: 1;
}
.pp-ohlc b {
  color: var(--gl-mine);
  font-weight: 600;
}

/* The trade bar under the chart, with the price on the button so you never
   wonder what you are about to pay. */
.pp-quick {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 7px;
  padding: 10px 12px;
  flex: none;
  background: linear-gradient(to top, var(--gl-void) 62%, transparent);
}
.pp-quick .pp-field {
  height: 42px;
}

/* ── positions ──────────────────────────────────────────────────────────────── */

.pp-tabs {
  display: flex;
  gap: 16px;
  padding: 6px 14px 0;
  flex: none;
  border-bottom: 1px solid var(--gl-edge-soft);
}
.pp-tabs button {
  background: none;
  border: 0;
  padding: 6px 0 9px;
  color: var(--gl-market-faint);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  position: relative;
}
.pp-tabs button.on {
  color: var(--gl-mine);
}
.pp-tabs button.on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--gl-live);
}
.pp-tabs .pp-count {
  color: var(--gl-market-faint);
  font-weight: 500;
  margin-left: 3px;
  font-variant-numeric: tabular-nums;
}

.pp-empty {
  text-align: center;
  color: var(--gl-market-faint);
  font-size: 12px;
  padding: 26px 20px 30px;
  line-height: 1.55;
}
/* In chart mode every pixel this takes is a pixel off the chart, and an empty
   panel has earned none of them. */
.pp-root.pp-mode-chart .pp-empty {
  padding: 10px 20px 12px;
  font-size: 11px;
}
.pp-root.pp-mode-chart .pp-empty div + div {
  display: none;
}

/* ── sheets: markets, leverage, order type ──────────────────────────────────── */

.pp-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 11px;
  margin-bottom: 6px;
  border-radius: var(--gl-radius);
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
  color: var(--gl-market-faint);
}
.pp-search svg {
  flex: none;
}
.pp-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--gl-mine);
  font: inherit;
  font-size: 13.5px;
}
.pp-search input::placeholder {
  color: var(--gl-market-faint);
}

.pp-list {
  max-height: 58vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pp-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gl-edge-soft);
  text-align: left;
  font: inherit;
  color: var(--gl-market-dim);
  font-size: 13px;
}
.pp-opt b {
  color: var(--gl-mine);
  font-weight: 600;
}
.pp-opt.on b {
  color: var(--gl-live);
}
.pp-opt-sub {
  display: block;
  font-size: 10.5px;
  color: var(--gl-market-faint);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.pp-opt-right {
  text-align: right;
  flex: none;
  color: var(--gl-mine);
  font-variant-numeric: tabular-nums;
}

/* Leverage as a grid of choices, with the consequence stated underneath rather
   than left for the reader to work out. */
.pp-levs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.pp-levs button {
  padding: 13px 0;
  border-radius: var(--gl-radius);
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
  color: var(--gl-market);
  font-family: var(--font-display, 'Space Grotesk', Inter, sans-serif);
  font-size: 14px;
  font-weight: 700;
}
.pp-levs button.on {
  background: var(--gl-risk-soft);
  border-color: color-mix(in srgb, var(--amber, #f0c46a) 45%, transparent);
  color: var(--gl-risk);
}

.pp-warn {
  padding: 10px 12px;
  border-radius: var(--gl-radius);
  background: color-mix(in srgb, var(--amber, #f0c46a) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber, #f0c46a) 22%, transparent);
  font-size: 11.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--amber, #f0c46a) 55%, var(--text, #f5f6f8));
}
.pp-warn b {
  color: #fff;
}

.pp-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* The drained pair is tuned for a price at 11px on a panel. At 10.5px inside a
   list row it drops to about 4:1 against the sheet background, which is thin for
   a number people actually read. Lifted here only, so the market stays quiet
   without the percentage becoming guesswork. */
.pp-opt-sub.pp-up {
  color: var(--success, #34e8a4);
}
.pp-opt-sub.pp-down {
  color: var(--red, #ff5c7a);
}

/* The way out of an empty positions panel. Lit, because funding is the reader's
   own next move rather than something the market is doing. */
.pp-fundlink {
  margin-top: 7px;
  background: none;
  border: 0;
  padding: 4px 2px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--gl-live);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── TP/SL, positions and feedback ─────────────────────────────────────────── */

.pp-brackets {
  display: grid;
  /* minmax(0, 1fr), not 1fr. A grid item's default min-width is auto, which is
     its min-content width, so a field whose placeholder is longer than the
     column refuses to shrink and overflows. "Take profit" did exactly that: the
     field measured 259px inside a 215px column and pushed its USDC label 21px
     into the order book. 1fr alone does not fix it; the explicit zero minimum
     does. */
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}
.pp-brackets .pp-field {
  min-width: 0;
}
/* Belt and braces for the whole left column: every field in the form is now
   allowed to shrink, so a future label cannot reintroduce the same bug. */
.pp-form > *,
.pp-form .pp-field {
  min-width: 0;
}

.pp-pos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gl-edge-soft);
}
.pp-pos b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gl-mine);
}
.pp-pos-sub {
  display: block;
  font-size: 11px;
  color: var(--gl-market);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.pp-pos-right {
  text-align: right;
}
/* Your money, so this is where the vivid pair belongs. */
.pp-win {
  color: var(--success, #34e8a4);
}
.pp-lose {
  color: var(--red, #ff5c7a);
}
.pp-cancel {
  flex: none;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge);
  color: var(--gl-market);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}
.pp-cancel:active {
  background: var(--gl-panel-2);
}

/* A trading screen should not open a dialog to say "order placed". */
/* The amount above the Pay-with rows. The rows themselves are the app's own
   .pk-* component, inherited rather than restyled, so this sheet follows
   whatever gifts, premium and stars follow. */
.pp-paysub {
  margin: 0 2px 12px;
}
.pp-payamt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 2px 14px;
}
.pp-payamt-l {
  font-size: 13px;
  color: var(--gl-market);
}
.pp-payinput {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--gl-edge);
  background: var(--bg-elev-2, #12151a);
  color: var(--gl-mine);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The venue's own words when it declines an order. Deliberately not a toast:
   the reason is the whole value of the message, and it has to outlive the
   glance that missed it. */
.pp-refuse {
  margin: 2px 0 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--gl-mine);
  font-weight: 600;
}
.pp-refuse-detail {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--gl-market);
  font-variant-numeric: tabular-nums;
}

.pp-toast {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 10;
  padding: 13px 16px;
  border-radius: 999px;
  background: var(--bg-elev-3, #1d2127);
  border: 1px solid var(--gl-edge);
  color: var(--gl-mine);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.7);
  animation: pp-toast-in 0.24s var(--gl-ease) both;
}
.pp-toast.going {
  animation: pp-toast-out 0.26s var(--gl-ease) both;
}
@keyframes pp-toast-in {
  from { transform: translateY(14px); opacity: 0; }
}
@keyframes pp-toast-out {
  to { transform: translateY(10px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-toast, .pp-toast.going { animation: none; }
}

/* ── header money controls and the pair row ────────────────────────────────── */

.pp-money {
  /* The only auto margin in the header. .pp-modes also had one, and two auto
     margins in a flex row share the free space between them, which parked this
     group in the middle instead of at the right edge. */
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.pp-head .pp-modes {
  margin-left: 0;
}
.pp-moneybtn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
  color: var(--gl-market);
}
.pp-moneybtn:active {
  background: var(--gl-panel-2);
}
/* Money in is the one you reach for first, so it carries the app's signature:
   the spectral silver gradient every primary action in GhosterDex uses, not the
   mint that belongs to positions and balances. Same treatment as the CTA, at
   icon size. */
.pp-moneybtn.pp-dep {
  background: var(--grad, linear-gradient(135deg, #ffffff, #dde5ee 55%, #93a2b5));
  border-color: transparent;
  color: var(--cta-text, #0a0d12);
  box-shadow:
    0 8px 20px -8px color-mix(in srgb, var(--ink, #fff) 34%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent);
}
.pp-moneybtn.pp-dep:active {
  background: var(--grad, linear-gradient(135deg, #ffffff, #dde5ee 55%, #93a2b5));
  filter: brightness(1.06);
}

/* The pair picker, given room of its own rather than crowding the back control. */
.pp-pairrow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px 8px;
  flex: none;
}
.pp-sym {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge);
  color: var(--gl-mine);
  font: inherit;
}
.pp-sym:active {
  background: var(--gl-panel-2);
}
.pp-sym b {
  font-family: var(--font-display, 'Space Grotesk', Inter, sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* ── the bracket editor ────────────────────────────────────────────────────── */

/* The armed summary in the form. One row, because the detail lives in the sheet. */
.pp-brackets {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--gl-radius);
  background: var(--gl-live-soft);
  border: 1px solid color-mix(in srgb, var(--success, #34e8a4) 28%, transparent);
  color: var(--gl-mine);
  font: inherit;
  text-align: left;
}
.pp-brackets-t {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-brackets-go {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gl-live);
}

/* The facts strip at the top of the sheet: what this bracket is measured against. */
.pp-bstrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--gl-radius);
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
}
.pp-bstrip span {
  display: block;
  font-size: 10.5px;
  color: var(--gl-market-faint);
}
.pp-bstrip b {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gl-mine);
}

.pp-srcrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.pp-srclabel {
  font-size: 12.5px;
  color: var(--gl-market);
}

/* A segmented control in the app's pill idiom. */
.pp-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
}
.pp-seg button {
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--gl-market);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.16s var(--gl-ease), color 0.16s var(--gl-ease);
}
.pp-seg button.on {
  background: var(--gl-panel-2);
  color: var(--gl-mine);
}
.pp-seg.pp-seg-sm button {
  padding: 5px 10px;
  font-size: 11px;
}

.pp-bracket {
  display: grid;
  gap: 8px;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: var(--gl-radius);
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
}
.pp-bhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pp-bhead b {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--gl-mine);
}
.pp-bracket .pp-field {
  min-width: 0;
}

.pp-bquick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.pp-bquick button {
  padding: 8px 0;
  border-radius: 999px;
  background: var(--gl-panel-2);
  border: 1px solid var(--gl-edge-soft);
  color: var(--gl-market);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pp-bquick button:active {
  color: var(--gl-mine);
}

/* The sentence. This is the feature: a stop you have read is a different thing
   from a number you typed. */
.pp-bnote {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--gl-market);
}
.pp-bnote b {
  color: var(--gl-mine);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pp-bnote.good b {
  color: var(--gl-live);
}
.pp-bnote.bad b {
  color: var(--gl-loss);
}

.pp-bclear {
  width: 100%;
  padding: 12px 0;
  border-radius: 999px;
  background: none;
  border: 1px solid var(--gl-edge);
  color: var(--gl-market);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

/* ── the right column: book or tape ────────────────────────────────────────── */

.pp-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pp-righttabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
}
.pp-righttabs button {
  flex: 1;
  padding: 5px 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--gl-market-faint);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  transition: background 0.16s var(--gl-ease), color 0.16s var(--gl-ease);
}
.pp-righttabs button.on {
  background: var(--gl-panel-2);
  color: var(--gl-mine);
}

.pp-tape .pp-bookhead {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
}
.pp-trade {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
  height: 19px;
  padding: 0 2px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
/* The aggressor's side, drained like the book: this is the market's activity,
   not yours. */
.pp-trade.bid .pp-px {
  color: var(--gl-bid);
}
.pp-trade.ask .pp-px {
  color: var(--gl-ask);
}
.pp-trade .pp-px {
  font-weight: 600;
}
.pp-trade .pp-sz {
  color: var(--gl-market-dim);
  text-align: right;
}
.pp-trade .pp-tt {
  color: var(--gl-market-faint);
  font-size: 10px;
  text-align: right;
  min-width: 46px;
}
.pp-tape-empty {
  padding: 22px 6px;
  text-align: center;
  font-size: 11px;
  color: var(--gl-market-faint);
}

/* ── TP/SL: two depths ─────────────────────────────────────────────────────── */

.pp-tpsl {
  display: grid;
  gap: 7px;
}

/* The depth switch, riding on the TP/SL row. */
.pp-depth {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gl-panel-2);
  border: 1px solid var(--gl-edge-soft);
  color: var(--gl-market);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pp-depth:active {
  color: var(--gl-mine);
}
/* The flag row puts its TIF label in the same slot, so only one can claim it. */
.pp-flag .pp-depth + .pp-tif {
  margin-left: 8px;
}

/* Basic: the two prices, in the form, where the common case belongs. */
.pp-basic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}
.pp-basicrow {
  min-width: 0;
}
.pp-basicfield {
  min-width: 0;
}
/* Which price is watched. A label, not a control: the venue takes no
   instruction about it. */
.pp-srcpill {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--gl-panel-2);
  color: var(--gl-market-dim);
}
.pp-srcnote {
  background: none;
  border: 0;
  padding: 2px;
  text-align: left;
  font: inherit;
  font-size: 10.5px;
  color: var(--gl-market-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── the market's mark, its star, and the favourites tabs ─────────────────────
 *
 * The logo comes from the app's own /api/icon route, same origin, so watching a
 * market tells no one outside the app which one. Perps list far more markets
 * than the wallet has coins for, indices among them, so the ticker fallback is
 * the ordinary case rather than an error state and is styled to look intended.
 */

.pp-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gl-panel-2);
}
.pp-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-logo.fallback {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gl-market-dim);
}

.pp-sym .pp-logo.fallback {
  font-size: 8.5px;
}

/* Big enough to hit without magnifying the row: the star is the smallest
   target in the sheet and sits next to a control that navigates away, so a
   near miss costs you the screen you were on. */
.pp-star {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: -6px;
  border-radius: 50%;
  color: var(--gl-market-dim);
  opacity: 0.55;
}
.pp-star.on {
  color: var(--gl-warn, #f5b73d);
  opacity: 1;
}
.pp-star.on svg {
  fill: currentColor;
}
.pp-star:active {
  transform: scale(0.88);
}

.pp-opt-name {
  flex: 1 1 auto;
  min-width: 0;
}

.pp-mkttabs {
  display: flex;
  gap: 6px;
  margin: 10px 0 2px;
  /* Scrolls itself. It used to simply overflow, so the only thing that
     could move to reveal the far end of it was the CARD, which took the
     whole list sideways with it. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pp-mkttabs::-webkit-scrollbar {
  display: none;
}
.pp-mkttabs button {
  flex: none;
}
.pp-mkttabs button {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--gl-edge);
  background: none;
  color: var(--gl-market-dim);
  font: inherit;
  font-size: 12.5px;
}
.pp-mkttabs button.on {
  background: var(--gl-panel-2);
  border-color: var(--gl-edge-strong, var(--gl-edge));
  color: var(--gl-mine);
  font-weight: 700;
}

.pp-mktempty {
  padding: 26px 4px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gl-market-dim);
}

/* ── the maker's mark ────────────────────────────────────────────────────────── */

.pp-head {
  position: relative;
}
.pp-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  pointer-events: none;
}
.pp-brand img {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  object-fit: cover;
}
/* On a narrow phone the right-hand cluster closes in on the centre; the mark
   yields rather than overlaps. It is decoration, and decoration goes first. */
@media (max-width: 379px) {
  .pp-brand {
    display: none;
  }
}

/* ── chart tools and the account tabs ────────────────────────────────────────── */

/* The style and indicator buttons ride the timeframe row, pushed to its far
   end so the timeframes keep their muscle memory. */
.pp-tfs .pp-tool {
  margin-left: auto;
  width: auto;
  padding: 0 11px;
  font-size: 11px;
  color: var(--gl-market-dim);
}
.pp-tfs .pp-tool + .pp-tool {
  margin-left: 4px;
}

.pp-pill {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gl-panel-2);
  border: 1px solid var(--gl-edge);
  color: var(--gl-market-faint);
}
.pp-pill.on {
  background: var(--gl-live-soft);
  border-color: color-mix(in srgb, var(--success, #34e8a4) 40%, transparent);
  color: var(--gl-live);
}

.pp-posact {
  display: flex;
  gap: 7px;
  padding: 2px 0 10px;
}
.pp-balrow {
  border-bottom: 1px solid var(--gl-edge-soft);
}

/* ── the chart, alone ────────────────────────────────────────────────────────
 *
 * Expand hides everything that is not the price, and turning the phone gives a
 * genuine landscape chart: MainActivity is not orientation-locked and already
 * handles `orientation` in configChanges, so a rotation resizes the WebView
 * without recreating anything.
 *
 * Deliberately NOT a CSS rotation of the canvas. That trick makes a landscape
 * chart on a portrait phone, and it silently breaks every pointer coordinate on
 * the screen: getBoundingClientRect returns an axis-aligned box for a rotated
 * element, so the crosshair, the pan and every drawn line would land somewhere
 * other than the finger. Hiding the chrome is honest and keeps the maths true.
 */
/* Full screen means the chart and its tools, nothing else. The sub-tabs pick
   what the pane shows, and in full screen the answer is always the chart. */
html.pp-fullchart .pp-charttabs,
html.pp-fullchart .pp-strip,
html.pp-fullchart .pp-tabs,
html.pp-fullchart .pp-quick,
html.pp-fullchart .pp-split,
html.pp-fullchart .pp-pairrow,
html.pp-fullchart .pp-positions {
  display: none !important;
}
html.pp-fullchart .pp-head {
  padding-top: 2px;
  padding-bottom: 2px;
}
html.pp-fullchart .pp-chartwrap {
  flex: 1 1 auto;
  min-height: 0;
}
html.pp-fullchart .pp-tool.on,
.pp-tfs .pp-tool.on {
  background: var(--gl-panel-2);
  color: var(--gl-mine);
}
/* In landscape the toolbar and the header are the only chrome left, so they
   shrink to give the price the screen. */
@media (orientation: landscape) {
  html.pp-fullchart .pp-tfs {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  html.pp-fullchart .gl-head {
    display: none;
  }
}
.pp-rotatehint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--gl-panel-2);
  border: 1px solid var(--gl-edge);
  color: var(--gl-market-dim);
  font-size: 11.5px;
  pointer-events: none;
  animation: gl-fade 0.3s var(--gl-ease) both;
}
@media (orientation: landscape) {
  .pp-rotatehint {
    display: none;
  }
}

/* ── the drawing toolbar ─────────────────────────────────────────────────────
   Fifty tools is too many to scan as one list, so they arrive grouped, with the
   two destructive actions pinned above the groups where they can be reached
   without scrolling past every Fibonacci variant to undo a stray line. */
.pp-drawbar {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.pp-drawact {
  flex: 1;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid var(--gl-market-line, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.03);
  color: var(--gl-market-text, #dde5f2);
  font: 600 12px Inter, system-ui, sans-serif;
}
.pp-drawact:disabled {
  opacity: 0.4;
}
.pp-drawgroup {
  font: 700 10px Inter, system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gl-market-faint, #7c8798);
  margin: 14px 2px 4px;
}
.pp-drawgroup:first-child {
  margin-top: 4px;
}

/* Text for the annotation tools. Asked for after the shape is placed, so the
   keyboard never covers the spot being annotated. */
.pp-textwrap {
  margin: 2px 0 10px;
}
.pp-textin {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--gl-market-line, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.04);
  color: var(--gl-market-text, #dde5f2);
  font: 600 15px Inter, system-ui, sans-serif;
}
.pp-textin:focus {
  outline: none;
  border-color: var(--gl-accent, #34e8a4);
}

/* Where TradingView's widget lives when the licensed library is installed. It
   fills the same box our own canvas would, so landscape and the expand toggle
   behave identically whichever engine is drawing. */
.pp-tvhost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* TradingView's lightweight-charts renders here; our canvas sits directly over
   it as the tool surface, transparent until a tool is armed. */
.pp-lwc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pp-chartwrap canvas.pp-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
}

/* The mode toggle says what it does. Icon-only, it was undiscoverable enough
   that the audit suite could not find it either. */
.pp-modelabel {
  font: 700 11px Inter, system-ui, sans-serif;
  letter-spacing: 0.01em;
  margin-left: 5px;
}
/* Rotation is lit while it is holding the screen, so the button reads as a
   state rather than as a thing that might or might not have worked. */
.pp-tool.pp-rot.on {
  background: var(--gl-accent, #34e8a4);
  color: #08120d;
  border-color: transparent;
}

/* Book mode: the chart keeps a compact strip above the ticket rather than
   disappearing, so the price stays in sight while the order is being set. The
   toggle chooses emphasis, not presence. */
.pp-root.pp-compactchart .pp-chartwrap {
  height: 190px;
  min-height: 190px;
  flex: none;
  overflow: hidden;
}
.pp-root.pp-compactchart .pp-tfs {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pp-root.pp-compactchart .pp-tfs::-webkit-scrollbar {
  display: none;
}
/* The compact strip keeps its controls.

   An earlier rule hid every .pp-tool here to save width, which took the
   pencil and More with it: the drawing tools became unreachable by finger in
   book mode, and only a script could open them. The rail scrolls instead, so
   width is not actually scarce. Only the separate Landscape button goes,
   since the fullscreen button already does both. */
.pp-root.pp-compactchart .pp-tool.pp-rot {
  display: none;
}

/* Conditional and Scaled only show their own controls when chosen, so the
   ticket stays a ticket rather than a settings page. */
.pp-trigwrap,
.pp-scalewrap {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.pp-scalewrap {
  grid-template-columns: 1fr 1fr;
}
.pp-trigstyle {
  display: flex;
  gap: 8px;
}
.pp-trigbtn {
  flex: 1;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--gl-edge-soft, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.03);
  color: var(--gl-market-dim, #9aa7bb);
  font: 600 12px Inter, system-ui, sans-serif;
}
.pp-trigbtn.on {
  background: var(--gl-mine, #eef2f8);
  color: #10151d;
  border-color: transparent;
}
.pp-scaleinfo {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--gl-market-faint, #7c8798);
}

/* Depth grouping sits on the book's own tab strip. */
.pp-group {
  margin-left: auto;
  min-width: 34px;
  height: 26px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid var(--gl-edge-soft, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.04);
  color: var(--gl-market-dim, #9aa7bb);
  font: 700 11px Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
/* Which way the visible book leans. */
.pp-ratio {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 2px 2px;
  font: 700 10px Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.pp-ratio-b { color: var(--gl-accent, #34e8a4); }
.pp-ratio-s { color: #ff5c7a; }
.pp-ratio-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 92, 122, 0.55);
  overflow: hidden;
}
.pp-ratio-fill {
  height: 100%;
  width: 50%;
  background: var(--gl-accent, #34e8a4);
}

/* Working-order settings, and the strip a running one keeps on screen. */
.pp-algowrap {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.pp-algobar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--gl-accent, #34e8a4) 35%, transparent);
  background: color-mix(in srgb, var(--gl-accent, #34e8a4) 8%, transparent);
}
.pp-algotext {
  font: 600 11px Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--gl-mine, #eef2f8);
  white-space: nowrap;
}
.pp-algotrack {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.pp-algofill {
  height: 100%;
  width: 0%;
  background: var(--gl-accent, #34e8a4);
  transition: width 0.3s ease;
}
.pp-algostop {
  flex: none;
  height: 26px;
  padding: 0 12px;
  border-radius: 8px;
  border: 0;
  background: #ff5c7a;
  color: #10151d;
  font: 700 11px Inter, system-ui, sans-serif;
}

/* ── the chart's own controls ────────────────────────────────────────────────
   Five intervals on the rail and the rest behind More, because fifteen buttons
   do not fit a phone and the sixth one along is the one nobody can reach. */
.pp-tfrail {
  display: inline-flex;
  gap: 2px;
}
.pp-tfgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 4px 0 8px;
}
.pp-tfcell {
  height: 42px;
  border-radius: 11px;
  border: 1px solid var(--gl-edge-soft, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.03);
  color: var(--gl-market-dim, #9aa7bb);
  font: 700 12px Inter, system-ui, sans-serif;
}
.pp-tfcell.on {
  background: var(--gl-mine, #eef2f8);
  color: #10151d;
  border-color: transparent;
}

/* The pencil's strip: tools on the chart, not over it. */
.pp-drawbarstrip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--gl-edge-soft, rgba(255, 255, 255, 0.06));
}
.pp-drawbarstrip::-webkit-scrollbar { display: none; }
.pp-drawtool {
  flex: none;
  height: 30px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid var(--gl-edge-soft, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.03);
  color: var(--gl-market-dim, #9aa7bb);
  font: 600 11.5px Inter, system-ui, sans-serif;
  white-space: nowrap;
}
.pp-drawtool.on {
  background: var(--gl-accent, #34e8a4);
  color: #08120d;
  border-color: transparent;
}
.pp-drawall {
  border-style: dashed;
}
.pp-tool.pp-pencil.on {
  background: var(--gl-accent, #34e8a4);
  color: #08120d;
  border-color: transparent;
}
/* Hiding the chart is a state, so the control reads as one. */
.pp-hidechart.on {
  color: var(--gl-mine, #eef2f8);
  border-color: color-mix(in srgb, var(--gl-mine, #eef2f8) 30%, transparent);
}

/* Square, so a row of marks reads as a toolbar rather than a row of chips. */
.pp-drawtool {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
}
.pp-drawtool svg {
  display: block;
}
.pp-drawclear {
  color: #ff5c7a;
}

/* The chart view's sub-tabs, and the panes behind them. */
.pp-charttabs {
  display: flex;
  gap: 18px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--gl-edge-soft, rgba(255, 255, 255, 0.06));
}
.pp-charttabs button {
  background: none;
  border: 0;
  padding: 0 0 6px;
  color: var(--gl-market-faint, #7c8798);
  font: 700 14px Inter, system-ui, sans-serif;
  border-bottom: 2px solid transparent;
}
.pp-charttabs button.on {
  color: var(--gl-mine, #eef2f8);
  border-bottom-color: var(--gl-mine, #eef2f8);
}
.pp-chartpane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 20px);
}
.pp-panefacts {
  display: flex;
  flex-direction: column;
}
/* The tape: price, size, time, colour-coded by the side that took it. */
.pp-tape {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pp-taperow {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  padding: 7px 2px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.pp-taperow.up > :first-child { color: var(--gl-accent, #34e8a4); }
.pp-taperow.down > :first-child { color: #ff5c7a; }
.pp-taperow > :nth-child(2) { text-align: right; color: var(--gl-market-dim, #9aa7bb); }
.pp-tapetime { color: var(--gl-market-faint, #7c8798); font-size: 11.5px; }

.pp-panefacts .pp-fact {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  font-size: 13.5px;
  color: var(--gl-market-dim, #9aa7bb);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pp-panefacts .pp-fact .pp-num {
  color: var(--gl-mine, #eef2f8);
  font-weight: 650;
}

/* The denomination is a control, so it reads as one. */
.pp-unitswap {
  cursor: pointer;
  padding: 4px 8px;
  margin: -4px -4px -4px 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}
.pp-unitswap:active {
  background: rgba(255, 255, 255, 0.12);
}

/* The time-in-force reads as the control it now is. */
.pp-tifbtn {
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
}
.pp-tifbtn:active { background: rgba(255, 255, 255, 0.14); }

/* ── the account strip stays in reach ────────────────────────────────────────
   Positions, orders, history and balances were the last thing in a scrolling
   column, so whether you could see them depended on how tall the ticket
   happened to be on your phone: fine on one device, entirely below the fold on
   the next. Two pinned versions tried to fix that and both lost: sticky
   floated the strip over the last rows of the bids, and a reserved footer
   swallowed the Long and Short buttons on shorter phones. The venue apps
   do neither. They cap the book at six rows a side so the terminal is
   short, and let the strip sit UNDER it in plain flow, on screen because
   the content above it is, and wearing the page's own background because
   it has none of its own to get the theme wrong with. */
.pp-root .pp-tabs {
  border-top: 1px solid var(--gl-edge-soft);
  border-bottom: 0;
}
/* Room for the empty line without a jolt when real rows replace it. */
.pp-root:not(.pp-mode-chart) .pp-positions {
  min-height: 84px;
}

/* Three pickers share the row now, so they shrink together rather than one of
   them pushing the others off. */
.pp-root .pp-pick {
  flex: 1 1 0;
  min-width: 0;
}
.pp-root .pp-pick > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── the position card, in the venue apps' anatomy ───────────────────── */

.pp-poscard {
  margin: 10px 14px;
  padding: 12px 14px;
  border-radius: var(--gl-radius-lg);
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
}
.pp-poshead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.pp-posid {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.pp-posid b {
  font-size: 15px;
  color: var(--gl-mine);
}
.pp-sidechip {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.pp-sidechip.long {
  color: var(--gl-live);
  background: var(--gl-live-soft);
}
.pp-sidechip.short {
  color: var(--gl-loss);
  background: var(--gl-loss-soft);
}
.pp-levchip {
  font: inherit;
  font-size: 11px;
  color: var(--gl-market-dim);
  background: var(--gl-panel-2);
  border: 1px solid var(--gl-edge-soft);
  border-radius: 999px;
  padding: 2px 8px;
}
.pp-pospnl {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: none;
}
.pp-pospnl b {
  font-size: 17px;
}
.pp-pospnl span {
  font-size: 11.5px;
  opacity: 0.85;
}
.pp-posgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 8px;
  margin: 12px 0 2px;
}
.pp-poscell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  min-width: 0;
}
.pp-poscell span {
  font-size: 10.5px;
  color: var(--gl-market-faint);
  white-space: nowrap;
}
.pp-poscell b {
  font-size: 12.5px;
  color: var(--gl-market);
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-poscell.pp-risk b {
  color: var(--gl-risk);
}
.pp-closebtn {
  color: var(--gl-mine);
}

/* ── the close sheet ─────────────────────────────────────────────── */

.pp-closeseg {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
  margin-bottom: 12px;
}
.pp-closeseg button {
  flex: 1;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--gl-market-faint);
}
.pp-closeseg button.on {
  background: var(--gl-panel-2);
  color: var(--gl-mine);
}
.pp-closefield {
  margin-top: 10px;
}
.pp-unit {
  color: var(--gl-market-faint);
  font-size: 12px;
  flex: none;
}
.pp-closechips {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.pp-closechips button {
  flex: 1;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 0;
  border-radius: 999px;
  border: 1px solid var(--gl-edge-soft);
  background: var(--gl-panel);
  color: var(--gl-market-dim);
}
.pp-closechips button.on {
  color: var(--gl-mine);
  border-color: var(--gl-edge);
  background: var(--gl-panel-2);
}
.pp-closeproj {
  margin-top: 12px;
  font-size: 12.5px;
  min-height: 18px;
}
.pp-tpsl-label {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gl-mine);
}
.pp-tpsl-note {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--gl-market-faint);
}

/* Live brackets on the card: visible guards, tap to edit in place.
   pp-poschips, not pp-brackets: that name already belongs to the entry
   ticket's bracket panel, and the last identical collision shipped a
   broken build. Grep before naming. */
.pp-poschips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 2px;
}
.pp-bracketchip {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--gl-edge-soft);
  background: var(--gl-panel-2);
}
.pp-bracketchip.tp {
  color: var(--gl-live);
}
.pp-bracketchip.sl {
  color: var(--gl-loss);
}
.pp-quietcta {
  background: var(--gl-panel-2);
  color: var(--gl-loss);
  border: 1px solid var(--gl-edge);
  box-shadow: none;
  margin-top: 10px;
}

/* ── the market list ─────────────────────────────────────────────────────────
   474 markets across ten venues: crypto on Hyperliquid's own book, and
   equities, indices, commodities, FX, rates and pre-IPO names on the HIP-3
   builder DEXs.

   The shape of the problem is choosing, not browsing, so everything above
   the rows is fixed and only the rows move: category, venue and sort stay
   under the thumb while a list of hundreds scrolls past them. Each row
   answers three questions in the order they are asked — what is it, is
   anyone trading it, and what has it done today. */

.pp-mkthead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--gl-deep);
  padding-bottom: 6px;
  margin-bottom: 2px;
}

.pp-mktsub,
.pp-mktsort {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* A rail that has reached its end must stop, not hand the gesture to
     whatever is behind it. Without this the swipe chains outward and the
     sheet itself travels. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 0 2px;
}
.pp-mktsub::-webkit-scrollbar,
.pp-mktsort::-webkit-scrollbar {
  display: none;
}
.pp-mktsub {
  padding-bottom: 8px;
}
.pp-mktsub button,
.pp-mktsort button {
  flex: none;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--gl-edge-soft);
  background: none;
  color: var(--gl-market-dim);
}
.pp-mktsub button.on {
  color: var(--gl-mine);
  border-color: var(--gl-edge);
  background: var(--gl-panel-2);
}

/* Sort reads as a set of questions rather than a control: the active one
   carries the direction it is answering in. */
.pp-mktsort {
  padding-top: 2px;
  padding-bottom: 6px;
  border-top: 1px solid var(--gl-edge-soft);
  margin-top: 2px;
}
.pp-mktsort button.on {
  color: var(--gl-live);
  border-color: color-mix(in srgb, var(--gl-live) 34%, transparent);
  background: var(--gl-live-soft);
}
.pp-sortdir {
  font-style: normal;
  margin-left: 4px;
  font-size: 10px;
}

/* The count beside a category, so the rail says how much is behind it. */
.pp-mktn {
  margin-left: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--gl-market-faint);
  font-variant-numeric: tabular-nums;
}
.pp-mkttabs button.on .pp-mktn {
  color: var(--gl-market-dim);
}

/* ── a row ─────────────────────────────────────────────────────────────── */

.pp-mktlist {
  padding-bottom: 4px;
}
.pp-mktrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 6px;
  border: 0;
  border-bottom: 1px solid var(--gl-edge-soft);
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}
.pp-mktrow:active {
  background: var(--gl-panel);
}
/* Where you already are, marked by a rail rather than a fill: the row is
   still a row, it just knows it is the one on screen behind this sheet. */
.pp-mktrow.on {
  background: var(--gl-panel);
  box-shadow: inset 2px 0 var(--gl-live);
}

.pp-mktleft {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pp-mkttitle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.pp-mkttitle b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gl-mine);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-mktsub {
  font-size: 11px;
  color: var(--gl-market-faint);
}
.pp-mktrow .pp-mktsub {
  display: block;
  padding: 0;
  overflow: visible;
}

/* Leverage and venue, as chips: both change how a market behaves, and both
   are things the venue itself puts on the row. */
.pp-lev,
.pp-dex {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1.5px 5px;
  border-radius: 5px;
  text-transform: uppercase;
}
.pp-lev {
  background: color-mix(in srgb, var(--gl-live) 16%, transparent);
  color: var(--gl-live);
}
.pp-dex {
  background: var(--gl-panel-2);
  color: var(--gl-market-faint);
  border: 1px solid var(--gl-edge-soft);
}

.pp-mktright {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.pp-mktpx {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gl-mine);
}
/* The day's move as a filled pill: it is the one number on the row that is
   read by colour before it is read by value. */
.pp-chgpill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  line-height: 1.35;
}
.pp-chgpill.up {
  color: var(--gl-live);
  background: var(--gl-live-soft);
}
.pp-chgpill.down {
  color: var(--gl-loss);
  background: var(--gl-loss-soft);
}

/* A drawn mark for the markets the venue has no artwork for, coloured from
   the ticker so the same market is the same colour everywhere and a long
   list does not read as rows of identical grey. */
.pp-logo.pp-mark {
  background: hsl(var(--mark-h, 210) 46% 26%);
  color: hsl(var(--mark-h, 210) 82% 86%);
  border: 1px solid hsl(var(--mark-h, 210) 42% 38%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.pp-logo.pp-mark-long {
  font-size: 7.5px;
  letter-spacing: -0.04em;
}

.pp-mktmore {
  width: 100%;
  margin: 10px 0 2px;
  padding: 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  border: 1px dashed var(--gl-edge);
  border-radius: var(--gl-radius);
  background: none;
  color: var(--gl-market-dim);
}

/* A setting that has been proposed but not yet confirmed by the venue. It
   must not look chosen: the whole bug this marks was a chip lighting up over
   a change the venue never accepted. */
.pp-levs button.pending {
  opacity: 0.55;
  border-style: dashed;
}

/* The order's own progress trail, in the app's trail language. Sits under the
   side buttons, where near.com puts it, and only exists while a tap is being
   carried out in more than one instruction. */
.pp-trailbox {
  margin: 12px 2px 2px;
}
.pp-trailbox .trail-label {
  font-size: 13px;
}

/* A book holding collateral of its own, with the way back. Laid out like a
   position row rather than a fact row, because it carries an action. */
.pp-balbook {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pp-balbook > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* ── account health ─────────────────────────────────────────────────────────
   The whole account's risk in one slim strip above the position cards:
   margin usage as the bar, the nearest liquidation anywhere as the words.
   Colored by tier, not by decoration. */
.pp-health {
  margin: 2px 2px 10px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--gl-edge);
  background: var(--bg-elev-1, #0d1014);
}
.pp-health-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--gl-market);
  margin-bottom: 8px;
}
.pp-health-bar {
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gl-edge) 60%, transparent);
  overflow: hidden;
}
.pp-health-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s var(--gl-ease);
}
.pp-health-ok .pp-health-fill { background: var(--gl-live); }
.pp-health-warm .pp-health-fill { background: var(--gl-risk); }
.pp-health-hot .pp-health-fill { background: var(--gl-loss); }
.pp-health-hot .pp-health-head span:last-child { color: var(--gl-loss); }

/* ── the Ghost receipt ──────────────────────────────────────────────────────
   A closed trade as a card worth showing someone. Leads with the move,
   keeps the dollars behind a tap: the flex without the disclosure. */
.pp-pos-tap { cursor: pointer; }
.pp-receiptwrap {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pp-receipt {
  position: relative;
  width: min(340px, 92vw);
  padding: 26px 24px 20px;
  border-radius: 22px;
  border: 1px solid var(--gl-edge);
  background:
    radial-gradient(120% 90% at 50% -20%,
      var(--gl-live-soft) 0%, transparent 55%),
    var(--bg-elev-2, #12151a);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  text-align: center;
}
.pp-receipt.lose {
  background:
    radial-gradient(120% 90% at 50% -20%,
      var(--gl-loss-soft) 0%, transparent 55%),
    var(--bg-elev-2, #12151a);
}
.pp-receipt-ghost {
  position: absolute;
  right: -28px;
  bottom: -34px;
  width: 150px;
  height: 150px;
  fill: color-mix(in srgb, var(--gl-mine) 5%, transparent);
}
.pp-receipt-ghost .eye {
  fill: var(--bg-elev-2, #12151a);
}
.pp-receipt-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 15px;
  color: var(--gl-mine);
}
.pp-receipt-move {
  margin-top: 18px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gl-live);
}
.pp-receipt.lose .pp-receipt-move { color: var(--gl-loss); }
.pp-receipt-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--gl-market);
}
.pp-receipt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 20px 4px 0;
  text-align: left;
}
.pp-receipt-grid div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pp-receipt-grid span {
  font-size: 11px;
  color: var(--gl-market-dim);
}
.pp-receipt-grid b {
  font-size: 14px;
  color: var(--gl-mine);
}
.pp-receipt-pnl {
  margin-top: 18px;
  width: 100%;
  padding: 11px 0;
  border-radius: 12px;
  border: 1px dashed var(--gl-edge);
  background: transparent;
  color: var(--gl-market);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.pp-receipt-brand {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.34em;
  color: var(--gl-mine);
}
.pp-receipt-tag {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gl-market-dim);
}
.pp-receipt-close {
  margin-top: 16px;
  padding: 10px 26px;
  border-radius: 999px;
  border: 1px solid var(--gl-edge);
  background: var(--bg-elev-2, #12151a);
  color: var(--gl-mine);
  font-size: 13px;
}

/* The shared card's preview: the PNG itself, at phone width, with the two
   decisions under it. What you see is byte-for-byte what leaves. */
.pp-cardpreview {
  width: min(320px, 86vw);
  border-radius: 18px;
  border: 1px solid var(--gl-edge);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.pp-cardshare {
  margin-top: 16px;
  width: min(320px, 86vw);
}

/* Everything in the receipt overlay rides above its own scrim. The scrim is
   a positioned element, so it paints over static siblings: the card escaped
   by being position relative while the Share and Close buttons sat behind
   the veil, styled correctly and unreadable. */
.pp-receiptwrap > *:not(.gl-scrim) {
  position: relative;
}

/* ── the chart's risk layer ─────────────────────────────────────────────────
   Prices that are yours, riding the chart at their own height: the entry
   with its live PnL, the liquidation, and the brackets, which carry a grab
   handle because dragging one IS the edit. */
.pp-risklayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.pp-riskchip {
  position: absolute;
  left: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(10, 13, 17, 0.88);
  border: 1px solid var(--gl-edge);
  color: var(--gl-mine);
  white-space: nowrap;
}
.pp-riskchip.entry.win { border-color: color-mix(in srgb, var(--gl-live) 45%, transparent); color: var(--gl-live); }
.pp-riskchip.entry.lose { border-color: color-mix(in srgb, var(--gl-loss) 45%, transparent); color: var(--gl-loss); }
.pp-riskchip.liq { border-color: color-mix(in srgb, var(--gl-loss) 55%, transparent); color: var(--gl-loss); }
.pp-riskchip.tp { border-color: color-mix(in srgb, var(--gl-live) 55%, transparent); color: var(--gl-live); }
.pp-riskchip.sl { border-color: color-mix(in srgb, var(--gl-risk) 60%, transparent); color: var(--gl-risk); }
.pp-riskdrag {
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  padding-right: 9px;
}
.pp-riskchip.dragging {
  cursor: grabbing;
  box-shadow: 0 6px 22px -6px rgba(0, 0, 0, 0.8);
  border-style: solid;
  z-index: 6;
}

/* The measure toggle, in the chart's corner where rulers live. */
.pp-measurebtn {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 5;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--gl-edge);
  background: rgba(10, 13, 17, 0.7);
  color: var(--gl-market);
}
.pp-measurebtn.on {
  color: var(--gl-live);
  border-color: color-mix(in srgb, var(--gl-live) 45%, transparent);
}

/* The long-press menu's rows. */
.pp-stagebtn {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 13px 14px;
  border-radius: 13px;
  border: 1px solid var(--gl-edge);
  background: var(--bg-elev-2, #12151a);
  color: var(--gl-mine);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

/* A chip whose price lies beyond the window: pinned to the edge, arrowed. */
.pp-riskchip.pin-up::before,
.pp-riskchip.pin-down::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.pp-riskchip.pin-up::before { border-bottom: 5px solid currentColor; }
.pp-riskchip.pin-down::before { border-top: 5px solid currentColor; }

/* ── the mode switch, redesigned ────────────────────────────────────────────
   A segmented pill of two glyphs: candles for the chart, the ladder for the
   book. The active cell is lifted, not labelled. */
.pp-modes {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-left: auto;
  border-radius: 12px;
  border: 1px solid var(--gl-edge);
  background: color-mix(in srgb, var(--gl-edge) 35%, transparent);
}
.pp-modes button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--gl-market-dim);
  transition: background 0.15s var(--gl-ease), color 0.15s var(--gl-ease);
}
.pp-modes button.on {
  background: var(--bg-elev-3, #1d2127);
  color: var(--gl-mine);
  box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.65);
}

/* ── perps in the Activity page ─────────────────────────────────────────────
   Drawn in the APP's variables and the app's own row classes, not the
   terminal's: these rows sit among the wallet's own history, and a block
   wearing the trading palette would read as a widget dropped onto the page.
   Only what the app has no rule for is styled here. */
.pp-acthost {
  display: block;
}
.pp-acthost[hidden] { display: none; }
.pp-actblock {
  margin-top: 4px;
}
.pp-acthead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 2px 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}
.pp-acthead i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-faint);
}
/* Pushed to the far edge so the header reads "Perps ... See all 17" rather
   than crowding the label it belongs to. */
.pp-actmore {
  margin-left: auto;
  padding: 4px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}
.pp-actmore:active { opacity: 0.6; }

/* The round face. A fill wears the market's artwork through .token-icon, so
   only the two cases the app has no picture for are drawn here. */
.pp-actbadge,
.pp-actmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 13%, transparent);
}
.pp-actbadge.in { color: var(--success); }
.pp-actbadge.out { color: var(--red); }
.pp-actbadge.move { color: var(--text-dim); }
.pp-actmark {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: hsl(var(--mark-h, 210) 70% 72%);
  background: hsl(var(--mark-h, 210) 45% 22%);
}
.pp-actrow .pp-acttitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The venue's own size and price, which is detail rather than headline: the
   app's .l2 is its loudest line, and a fill's amount does not deserve that. */
.pp-actrow .pp-actsub {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
}
.pp-actval.win { color: var(--success); }
.pp-actval.lose { color: var(--red); }

/* Rows that open a card answer the finger the way the app's rows do. */
.pp-acttap { transition: opacity 0.15s; }
.pp-acttap:active { opacity: 0.65; }

/* ── the demo account ───────────────────────────────────────────────────────
 *
 * Off: one small outlined word beside the balance. No colour, no fill, no
 * call to action, so someone who came here to trade is not sold a tutorial.
 * On: it lights, and a hairline runs across the top of the screen, because
 * trading paper money while believing it is real is the one mistake this
 * feature could cause and it must be impossible to hold that belief.
 */
/* In the header's money group, beside deposit and withdraw: sized to sit with
   those icon buttons rather than to compete with them. */
.pp-demochip {
  align-self: center;
  margin-right: 2px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--gl-edge);
  background: transparent;
  color: var(--gl-market-dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.pp-demochip:active { opacity: 0.6; }
.pp-demochip.on {
  color: var(--gl-warn, #f0c46a);
  border-color: color-mix(in srgb, var(--gl-warn, #f0c46a) 55%, transparent);
  background: color-mix(in srgb, var(--gl-warn, #f0c46a) 14%, transparent);
}
/* The whole screen wears it, quietly: a single lit hairline along the top. */
.pp-root.pp-demo::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 40;
  pointer-events: none;
  background: linear-gradient(90deg, transparent,
    var(--gl-warn, #f0c46a) 25%, var(--gl-warn, #f0c46a) 75%, transparent);
  opacity: 0.75;
}

/* ── the open position, as a live ticket ───────────────────────────────────
 *
 * Not a row. Pinned above the wallet's history in the wallet's own row
 * anatomy, an open trade read as the first entry OF that history - two
 * rounded panels touching, same background, nothing saying where one ended.
 * A position is the one thing on this page that has not finished happening,
 * so it is shaped like a thing rather than like an entry, and the lane it
 * sits in closes with a rule so the history below STARTS rather than
 * continues.
 */
.pp-livelane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 0;
}
.pp-lanerule {
  height: 1px;
  margin: 18px 0 4px;
  background: linear-gradient(90deg, transparent, var(--stroke), transparent);
}
.pp-live {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 15px 15px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(120% 100% at 100% 0%, var(--pp-live-wash), transparent 62%),
    var(--bg-elev);
  box-shadow: inset 0 1px 0 var(--bump-hi), 0 10px 26px -18px rgba(0, 0, 0, 0.9);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.pp-live:active { transform: scale(0.988); opacity: 0.9; }
.pp-live.win {
  --pp-live-wash: color-mix(in srgb, var(--success) 16%, transparent);
  border-color: color-mix(in srgb, var(--success) 34%, var(--stroke));
}
.pp-live.lose {
  --pp-live-wash: color-mix(in srgb, var(--red) 15%, transparent);
  border-color: color-mix(in srgb, var(--red) 32%, var(--stroke));
}

.pp-live-head { display: flex; align-items: center; gap: 11px; }
.pp-live-head .token-icon-wrap { flex: none; }
.pp-live-head .token-icon,
.pp-live-head .pp-actmark { width: 34px; height: 34px; }
.pp-live-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pp-live-name > b {
  font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em;
}
.pp-live-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-live-tags i {
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 2.5px 7px; border-radius: 999px;
  border: 1px solid var(--stroke-soft); color: var(--text-dim);
}
.pp-live-side.long {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
}
.pp-live-side.short {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
}

/* The one thing on this screen that is genuinely still moving, saying so. */
.pp-live-beat {
  display: flex; align-items: center; gap: 5px; flex: none;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em;
  color: var(--text-faint);
}
.pp-live-beat i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  animation: pp-beat 1.6s ease-in-out infinite;
}
@keyframes pp-beat {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); }
  50% { opacity: 0.45; box-shadow: 0 0 0 5px transparent; }
}

.pp-live-body {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; margin-top: 13px;
}
.pp-live-pct {
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1;
}
.pp-live.win .pp-live-pct { color: var(--success); }
.pp-live.lose .pp-live-pct { color: var(--red); }
.pp-live-legs { display: flex; gap: 16px; padding-bottom: 2px; }
.pp-live-legs span { display: flex; flex-direction: column; gap: 2px; }
.pp-live-legs i {
  font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint);
}
.pp-live-legs b {
  font-size: 13px; font-weight: 700; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ── the position sheet ─────────────────────────────────────────────────────
   Tapping a row opens a receipt everywhere else in this app; a position
   behaves the same way. Read it first, then decide - and the three decisions
   worth having are show someone, get out, or go and work the market. */
.pp-possheet {
  position: fixed; inset: 0; z-index: 62;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.pp-possheet > *:not(.gl-scrim) { position: relative; }
.pp-posbody {
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0;
  border-top: 1px solid var(--stroke);
  background:
    radial-gradient(120% 70% at 50% 0%, var(--pp-live-wash), transparent 70%),
    var(--bg-elev);
  animation: pp-posrise 0.24s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.pp-posbody.win { --pp-live-wash: color-mix(in srgb, var(--success) 14%, transparent); }
.pp-posbody.lose { --pp-live-wash: color-mix(in srgb, var(--red) 13%, transparent); }
@keyframes pp-posrise { from { transform: translateY(14px); opacity: 0; } }
/* A handle that means it: the sheet is dragged away from anywhere on it, and
   the gesture is claimed from the first frame so a downward pull is never
   half-given to a scroll underneath. */
.pp-posbody { touch-action: none; }
.pp-posgrip {
  display: block; width: 42px; height: 4px; border-radius: 999px;
  margin: 2px auto 14px; background: var(--stroke);
}
.pp-posbody:active .pp-posgrip { background: var(--text-faint); }
.pp-poshead { display: flex; align-items: center; gap: 12px; }
.pp-poshead .token-icon, .pp-poshead .pp-actmark { width: 38px; height: 38px; }
/* Left, explicitly. The sheet sits inside a centring flex column, and without
   this the name and its chips drift to the far edge away from their own
   icon. */
.pp-poswho {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1; min-width: 0; align-items: flex-start; text-align: left;
}
.pp-poswho > b { font-size: 17px; font-weight: 700; color: var(--text); }
.pp-poshead { align-items: center; }
.pp-pospct {
  font-family: var(--font-display); font-size: 42px; font-weight: 700;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
  margin-top: 16px; line-height: 1;
}
.pp-posbody.win .pp-pospct { color: var(--success); }
.pp-posbody.lose .pp-pospct { color: var(--red); }
.pp-possub { font-size: 12.5px; color: var(--text-faint); margin-top: 5px; }
.pp-posfacts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 18px;
}
.pp-posfacts > div {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border-radius: 13px;
  border: 1px solid var(--stroke-soft); background: var(--glass-2);
}
.pp-posfacts span { font-size: 10.5px; color: var(--text-faint); font-weight: 600; }
.pp-posfacts b {
  font-size: 14px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* The dollars: revealed on purpose, never sitting there for a passing glance. */
.pp-posmoney {
  width: 100%; margin-top: 12px; padding: 12px;
  border-radius: 13px; border: 1px dashed var(--stroke);
  background: transparent; color: var(--text-dim);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pp-posacts { display: flex; align-items: stretch; gap: 9px; margin-top: 16px; }
/* Three equal pills with their labels dead centre.
 *
 * `flex: 1` alone was not enough for either half of that. The basis defaults
 * to `auto`, so each pill was sized by its own text and "Share" came out
 * narrower than "Close position"; and the app resets button text alignment,
 * so every label sat against its own left edge instead of in the middle. Flex
 * centring rather than `text-align` because these are flex containers, and
 * `min-width: 0` so the longest label cannot push its neighbours narrower. */
.pp-posact {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  padding: 13px 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--bg-elev-2);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.1;
  transition: opacity 0.15s;
}
.pp-posact:active { opacity: 0.65; }
.pp-posact.close {
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  color: var(--red);
}
.pp-posact.go { background: var(--ink); color: var(--bg); border-color: transparent; }

/* ── Edit activity: the row in the air follows the finger ───────────────────
 *
 * `.aes-row` carries `transition: transform 0.18s ease` so that settling rows
 * ease into place. Applied to the row being DRAGGED, that same rule makes it
 * trail the finger by a fifth of a second: measured at 270px of travel, the
 * row had moved 52px. It reads as lag, and it made every threshold in the
 * reorder fire late and in bursts.
 *
 * The dragged row is the one element that must be exactly where the finger
 * is, so it opts out. Everything else keeps its easing. This applies to the
 * sheet's own rows as well as the beta's, because the rule was never right
 * for either.
 */
.aes-row.lift {
  transition: box-shadow 0.22s ease, border-color 0.2s ease, background 0.2s ease;
  will-change: transform;
}
/* The grip is the one control here that must never be read as a scroll, a
   text selection or a long-press callout. */
.pp-aesrow .aes-grip,
.pp-aesrow .aes-btn {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* A wider target than the dots suggest: six 4px dots is a 20px column, and a
   thumb is nearer 40. Padding rather than size, so nothing moves. */
.pp-aesrow .aes-grip { padding: 10px 9px; margin: -10px -9px; }

/* Nothing in this block is text to be selected, and on Android a long press
   that starts a selection freezes touch until the callout is dismissed. The
   app's own controls are React elements that prevent it in JS; these say it
   in CSS as well, so a press that misses the chip and lands on a row cannot
   raise the callout either. */
.pp-actchip,
.pp-actrow,
.pp-acthead {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Perps selected: the app's own list stands down. Done with a class on the
   page rather than by hiding the list itself, which React rebuilds. The
   child combinator matters - the block's own .asset-list is nested. */
.page.pp-perpsonly > .asset-list,
.page.pp-perpsonly > .empty-state { display: none; }