/* SENDIT v2's perp screens: the market list, the trade screen, the ticket,
 * positions, the request tracker and the vault. Built only from shell.css's
 * tokens and components; direction colour (--pep-up / --pep-down) is for
 * Long / Short and profit / loss, never for status - a closed market is
 * amber, in words. */

.pep-warn-text { color: var(--pep-warn); }

/* ------------------------------------------------------------ the list */

.pep-pcard { background: var(--pep-panel); }
.pep-pcard:hover { background: var(--pep-panel-hover); }
.pep-pcard .pep-mcard-head { display: flex; align-items: center; gap: 6px; }
.pep-pcard-terms {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 8px;
  color: var(--pep-text-2);
  font-size: 12px;
}
/* "Up to 25x" is one figure: it never breaks between "to" and its number. */
.pep-pcard-terms b { flex: none; color: var(--pep-text); white-space: nowrap; }
.pep-pcard-terms span { text-align: right; }

/* ---------------------------------------------------- the trade screen */

.pep-trade { display: grid; gap: 16px; min-width: 0; }
/* Its two columns stack their panels with the same 16 px - the chart, your positions, the market's chat; the ticket,
 * then How this market works: the with-aside columns (shell.css) set no gap, and put them edge to edge. */
.pep-trade .pep-with-aside-main,
.pep-trade .pep-with-aside-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* From 900 to 1279 px the two columns stack (shell.css .pep-with-aside): the ticket comes right after the chart, before
   the book and the chat (round 5 fix 2: it was under the chat, a thousand pixels from "Pick Long or Short"), and How this
   market works last. Each column's panels join the one stack (display: contents), in that order. */
@media (min-width: 900px) and (max-width: 1279px) {
  .pep-trade .pep-with-aside-main,
  .pep-trade .pep-with-aside-side { display: contents; }
  .pep-trade .pep-chartpanel { order: 1; }
  .pep-trade .pep-with-aside-side > * { order: 2; }
  .pep-trade .pep-book { order: 3; }
  .pep-trade .pep-chat-panel { order: 4; }
  .pep-trade .pep-with-aside-side > .pep-panel:last-child { order: 5; }
}
.pep-trade-head { display: flex; align-items: center; gap: 12px; }
.pep-trade-name { margin: 0; font-size: 24px; font-weight: 800; }
.pep-trade-title p { margin: 2px 0 0; font-size: 13px; }
/* Round 24 (the owner: "we can reduce the height of the stat boxes"): a market's and a token's stat row (StatPills,
   TokenHeader) in compact boxes, the small label over a tight figure, about 46 px; the headline (a market's price, a
   token's market cap) stays big, its figure on the boxes' figures' baseline (flex-end where last baseline is unknown). */
.pep-stats { align-items: flex-end; align-items: last baseline; }
.pep-stats .pep-pill { gap: 1px; min-width: 0; padding: 6px 12px; }
.pep-stats .pep-pill-k { line-height: 16px; white-space: nowrap; }
.pep-stats .pep-pill-v { font-size: 14px; line-height: 18px; }
.pep-stats .pep-pill-head { padding: 0 10px 0 0; }
.pep-stats .pep-pill-head .pep-pill-v { font-size: var(--pep-num-xl); line-height: 1.1; }
/* A box with a note (a token's Top 10 holding: "includes the team") puts it beside the figure, not under it. */
.pep-stats .pep-pill:has(> .pep-pill-note) { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; column-gap: 6px; }
.pep-stats .pep-pill:has(> .pep-pill-note) > .pep-pill-k { grid-column: 1 / -1; }
.pep-stats .pep-pill-note { white-space: nowrap; }
.pep-chartpanel { display: grid; gap: 12px; min-width: 0; }
.pep-chartpanel .pep-candles { margin-top: 0; }

@media (max-width: 599px) {
  .pep-stats { flex-wrap: nowrap; overflow-x: auto; }
  .pep-stats .pep-pill { flex: none; }
  /* The line under the name runs under the whole head (its own row, so the
     Watch button stays on the name's), and the button keeps its one line. */
  .pep-trade-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; }
  .pep-trade-title { display: contents; }
  .pep-trade-title p { grid-row: 2; grid-column: 1 / -1; }
}

body[data-app="pepper"] { --pep-volume: rgb(164 169 186 / 30%); }

/* -------------------------------------------------------------- banner
 * A glyph and a word-for-word reason, in the site's banner (dex.css,
 * .pep-callout): amber when the market is closed, never direction red. */

.pep-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pep-banner p { margin: 0; }

.pep-facts-list { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: var(--pep-text-2); font-size: 13px; }
/* The line under the bullets (who is on the other side, linked). */
.pep-facts-list + .pep-sub { margin: 10px 0 0; }

/* -------------------------------------------------------------- ticket */

.pep-ticket { display: grid; gap: 14px; }
.pep-ticket-top { display: flex; align-items: center; justify-content: space-between; }
.pep-ticket-top .pep-panel-title { margin: 0; }
.pep-ticket-close { display: none; }
.pep-ticket-shut { margin: 0; color: var(--pep-warn); font-weight: 700; }
.pep-ticket-block { display: grid; gap: 8px; }
.pep-ticket-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pep-ticket-k { color: var(--pep-text-2); font-size: 13px; font-weight: 700; }
.pep-ticket-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.pep-ticket-presets .pep-btn { flex: 1; }
.pep-ticket-presets .pep-btn[aria-pressed="true"] { background: var(--pep-brand); color: var(--pep-brand-ink); }
.pep-ticket-dollars { display: grid; gap: 6px; }
.pep-ticket-dollars p { margin: 0; font-size: 13px; }
.pep-ticket-range { width: 100%; accent-color: var(--pep-text); }
.pep-ticket-range:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-ticket-facts { display: grid; gap: 8px; margin: 0; padding: 12px; border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); }
.pep-ticket-facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
/* A label and its "?" stay on one line; the figure beside them wraps instead. */
.pep-ticket-facts dt { color: var(--pep-text-2); white-space: nowrap; }
.pep-ticket-facts dd { margin: 0; text-align: right; }
.pep-levels { display: grid; gap: 8px; }
.pep-levels p { margin: 0; font-size: 12px; }
.pep-level { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4px 10px; }
.pep-level-k { color: var(--pep-text-2); font-size: 13px; }
.pep-level-input {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--pep-line-strong);
  border-radius: 10px;
  background: var(--pep-panel-2);
  color: var(--pep-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.pep-level-input:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 1px; }
.pep-level-input[aria-invalid="true"] { border-color: var(--pep-warn); }
.pep-level-input[aria-invalid="true"]:focus-visible { outline-color: var(--pep-warn); }
.pep-level-problem { grid-column: 1 / -1; color: var(--pep-warn); font-size: 12px; }
.pep-ticket-bar { display: none; }

/* A phone: full-width chart, a Long / Short bar fixed above the tab bar, and
 * the ticket as a sheet it opens (rendered into <body>, see Ticket.jsx). */
@media (max-width: 899px) {
  .pep-trade { padding-bottom: 64px; }
  .pep-ticket-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--pep-tabbar-h) + env(safe-area-inset-bottom) + 8px);
    z-index: 35;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .pep-ticket-host[data-sheet="true"] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    max-height: 88dvh;
    overflow-y: auto;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: var(--pep-ground);
    border-top: 1px solid var(--pep-line-strong);
    border-radius: var(--pep-radius) var(--pep-radius) 0 0;
  }
  .pep-ticket-host[data-sheet="true"] .pep-ticket-close { display: inline-flex; }
}
/* A computer's window under 900 px keeps the desktop shell (shell.css, THE SHELL'S TWO MODES): no tab bar, so the
 * Long / Short bar sits above the ticker, beside the rail. */
@media (max-width: 899px) and (hover: hover), (max-width: 899px) and (pointer: fine), (max-width: 899px) and (pointer: none) {
  .pep-ticket-bar { bottom: calc(var(--pep-ticker-h) + 8px); }
  .pep-app[data-side="shut"] .pep-ticket-bar { left: calc(var(--pep-side-shut) + 12px); }
  .pep-app[data-side="open"] .pep-ticket-bar { left: calc(var(--pep-side-w) + 12px); }
}
@media (max-width: 399px) and (hover: hover), (max-width: 399px) and (pointer: fine), (max-width: 399px) and (pointer: none) {
  .pep-app[data-side] .pep-ticket-bar { left: 12px; }
}

/* ------------------------------------------------------ positions, book
 * The trader's book under the chart (PositionsPanel, OrdersList,
 * BookTable.jsx; round 5): four tabs in a quiet segmented control, then a
 * real table where the panel has the room, a compact table (no avatars,
 * smaller figures) where it has a little less, a split one (the compact
 * table with each position's levels on a line of their own under its
 * figures) where it has less again, and on a phone a list parted by
 * hairlines - an open position a card (its figures each under its own label,
 * three to a line, its three buttons along its foot), a closed position, a
 * trade or an order a line of a log. The panel measures itself
 * (useBookLayout). One line a position, every figure under its column's
 * head, right-aligned and tabular (DM Sans Figures), so a live mark or PnL
 * never moves a column; the PnL large and in its direction's colour; the
 * side and leverage a tag drawn as the trader feed above draws its own
 * (never the brand's lime, which is the ticket's one primary); Close and,
 * under it, Close at... - one quiet button and a quieter text action.
 * Whatever opens under a row (the close-at form, the TP / SL edit, a close
 * request's tracker) opens in the row's own <tbody>, full width; what waits
 * on a position (a close-at order) is said with its levels, on their edge,
 * and a close on its way in its Close, so the rows keep one height. */

/* Spaced from the chart by the trade screen's column gap. The panel is the container its rows' density follows.
   --pep-book-muted is text-3 lifted a fifth towards text-2: on panel-2 (a form under a row) and under a hovered row
   text-3 reads under AA for small words; this reads at 4.8:1 and more. The book's figures are DM Sans's digits on one
   width (sendit.css "DM Sans Figures"), every other character DM Sans's own. */
.pep-book,
.pep-trade .pep-triggerbar {
  --pep-book-muted: color-mix(in srgb, var(--pep-text-3) 80%, var(--pep-text-2));
  --pep-book-tint: color-mix(in srgb, var(--pep-line) 30%, transparent);
  --pep-book-ground: color-mix(in srgb, var(--pep-line) 75%, transparent);
}
.pep-book {
  display: grid;
  gap: 12px;
  min-width: 0;
  font-family: "DM Sans Figures", var(--pickle-font);
  container: pep-book / inline-size;
}
.pep-book-none { display: grid; justify-items: center; gap: 12px; padding: 22px 12px 18px; text-align: center; }
.pep-book-empty { margin: 0; color: var(--pep-text-2); font-size: 13px; }
.pep-nobreak { white-space: nowrap; }
/* The tabpanel: the list the current tab shows, and an edit drawn over it when its row is not shown. */
.pep-book-body { display: grid; gap: 12px; min-width: 0; }
/* A figure that leaves funding out: an asterisk in the figure's own colour, hung in the cell's padding so it never moves
   the figure; in the head's total and on a card it is in the line, so it never runs into the percent beside it. The line under the list says what it means. */
.pep-book .pep-pv { position: relative; }
.pep-pnote { position: absolute; left: 100%; margin-left: 1px; font-size: 0.8em; font-weight: 700; }
.pep-book-total .pep-pnote,
.pep-pcards .pep-pnote { position: static; }
.pep-pfootnote { margin: 0; color: var(--pep-book-muted); font-size: 12px; line-height: 16px; }
/* A log's "Show more", in the middle under its lines. */
.pep-pmore { display: flex; justify-content: center; }
/* The book's one place to speak (PositionsPanel, OrdersList): a live region that is always there, taking no room (nor
   the gap before it) while it has nothing to say. */
.pep-book-say:empty { margin-top: -12px; }
/* A row the focus was handed to (a log's first new line after "Show more", a position whose control is not there). */
.pep-book :is([data-log-row], [data-pos-row]):focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }

/* Under 900 px the top bar, the Long / Short bar and the tab bar are fixed over the page: whatever the book brings into
   view (a focused button, a form opened under its row) stops clear of them, never under them. (From 900 px the top bar
   and the ticker stay on screen as the page scrolls: html's scroll-padding keeps clear of them, shell.css.) */
@media (max-width: 899px) {
  .pep-book :is(a, button, input, [data-pos-row]),
  .pep-trade :is(.pep-plimit, .pep-triggerbar) {
    scroll-margin-top: calc(var(--pep-top-h) + 12px);
    scroll-margin-bottom: calc(var(--pep-tabbar-h) + env(safe-area-inset-bottom) + 76px);
  }
}

/* The head: the tabs, and on Positions (two positions or more) the open PnL at the right, as a row says its own; in a
   panel under 560 px the total is a line of its own under them, still at the right - the panel decides, never the
   total's own width, so it never hops from one line to the other as it ticks. */
.pep-book-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-width: 0; }
.pep-book-total { display: inline-flex; align-items: baseline; gap: 8px; margin: 0 6px 0 auto; }
.pep-book-total-k { color: var(--pep-text-3); font-size: 12px; font-weight: 600; }
.pep-book-total .pep-psub { margin: 0; }
/* The total and its percent keep the widest they have been (PositionsPanel), so "Open PnL" never moves as they tick. */
.pep-book-total > .pep-pv { min-width: var(--pep-fig-total, 0px); text-align: right; }
.pep-book-total > .pep-psub { min-width: var(--pep-fig-totalpct, 0px); text-align: right; }
@container pep-book (max-width: 559px) {
  .pep-book-total { flex-basis: 100%; justify-content: flex-end; }
}

/* The tabs: words on a recessed track, the selected one raised, in the text's colour and edged (3:1 and more against
   the track, and Highlight in forced colours); a count small and muted, its place kept while there is none. */
.pep-btabs {
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  border-radius: 12px;
  background: var(--pep-ground);
  box-shadow: inset 0 0 0 1px var(--pep-line);
}
.pep-btab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--pep-text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.pep-btab:hover { color: var(--pep-text); }
.pep-btab[aria-selected="true"] { border-color: var(--pep-text-3); background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-btab:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 1px; }
.pep-btab-n { min-width: 1ch; color: var(--pep-text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.pep-btab[aria-selected="true"] .pep-btab-n { color: var(--pep-text-2); }
@media (forced-colors: active) {
  .pep-btab[aria-selected="true"] { border-color: Highlight; }
}
/* A phone's panel: the track runs the panel's width and the four share it, so Orders is never cut. */
@container pep-book (max-width: 419px) {
  .pep-btabs { display: flex; flex: 1 1 100%; }
  .pep-btab { flex: 1 1 auto; justify-content: center; gap: 4px; padding: 0 6px; }
}
@container pep-book (max-width: 299px) {
  .pep-btab { font-size: 12px; padding: 0 4px; }
}
@media (pointer: coarse) {
  .pep-btab { height: 34px; }
}

/* -- the pieces of a row, table and card alike
 * No min-width: 0 inside a cell: a table column is as wide as its content needs (its min-content), so a table that
 * runs out of room grows instead of drawing one cell over the next, and useBookLayout sees it and steps down. */

.pep-pmkt { display: flex; align-items: center; gap: 9px; }
/* The ticker on the figures' first line (18 px), the tag on their second. */
.pep-pmkt-name { display: grid; justify-items: start; gap: 1px; }
.pep-pmkt-t { color: var(--pep-text); font-size: 14px; font-weight: 700; line-height: 18px; }
/* A position on another market: its ticker is the way to that market's page, and looks it at rest - a faint underline
   that comes up under the pointer. */
.pep-pmkt-link {
  border-radius: 4px;
  text-decoration: underline;
  text-decoration-color: var(--pep-text-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.pep-pmkt-link:hover { color: var(--pep-text); text-decoration-color: currentColor; }
.pep-pmkt-link:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
/* Where the row has the room (a wide table, a phone's card) the tag sits on the ticker's line, so "SOL Long 2x" reads
   as one phrase, on the figures' first line, the avatar beside it; a narrower table stacks them. */
@container pep-book (min-width: 760px) {
  .pep-ptable:not(.pep-ptable-compact) .pep-pmkt { align-items: flex-start; }
  .pep-ptable:not(.pep-ptable-compact) .pep-pmkt .pep-avatar { margin-top: -2px; }
  .pep-ptable:not(.pep-ptable-compact) .pep-pmkt-name { display: flex; align-items: center; gap: 8px; }
}
.pep-pcards .pep-pmkt-name { display: flex; align-items: center; gap: 8px; }
/* The side and leverage: the trader feed's badge (social.css .pep-feed-badge) - a pill on panel-2, the words in the
   direction's colour - so the book and the feed above it speak one way. */
.pep-ptag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: var(--pep-radius-pill);
  background: var(--pep-panel-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.pep-ptag-long { color: var(--pep-up); }
.pep-ptag-short { color: var(--pep-down); }
.pep-pv { display: block; color: var(--pep-text); font-size: 13px; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pep-pv-big { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.pep-pv.pep-pv-fee { color: var(--pep-text-2); }
.pep-psub { display: block; margin-top: 1px; color: var(--pep-book-muted); font-size: 12px; line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* A figure that says a direction keeps it: .pep-pv and .pep-psub load after pepper.css's .pep-dir-*. Amber and red under
   a liquidation price: it is near. */
.pep-book .pep-dir-up { color: var(--pep-up); }
.pep-book .pep-dir-down { color: var(--pep-down); }
.pep-book .pep-dir-flat { color: var(--pep-text-2); }
.pep-book .pep-dir-warn { color: var(--pep-warn); }
.pep-book .pep-warn-text { color: var(--pep-warn); }
/* A market that cannot close now (a stock at night, a halt) says why where the buttons would be, in amber words: the
   market's state, then when it reopens, each a line. */
.pep-pwhy { display: block; color: var(--pep-warn); font-size: 11px; line-height: 16px; text-align: right; }
.pep-pwhy-line { display: block; white-space: nowrap; }
/* Near liquidation, said in more than colour: a "!" before how far it is (amber, then red; the words for a screen
   reader), seen in forced colours too. */
.pep-pnear { margin-right: 3px; font-weight: 800; }

/* TP / SL and a close-at order, each after its small key - bold, tinted as the chart draws its line (the letters say it
   too; an order's key is neutral) - its figure after it (a card's levels line, PositionCard). */
.pep-plevel-k { color: var(--pep-text-3); font-size: 11px; font-weight: 700; line-height: 16px; }
.pep-book .pep-plevel-tp { color: var(--pep-up); }
.pep-book .pep-plevel-sl { color: var(--pep-down); }
.pep-book .pep-plevel-at { color: var(--pep-text-2); }
.pep-plevel-v { color: var(--pep-text); font-size: 13px; line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* A thumb's target: on a touch screen the book's buttons are 34 px tall. The rows grow on a touch screen only. */
@media (pointer: coarse) {
  .pep-book .pep-btn.pep-pbtn { min-height: 34px; }
}

/* "Closing...": a close on its way, said in the Close it came from - its words steady in the text's colour (11 px, so
   they take exactly Close's width and no column moves), on a neutral edge that breathes (still when motion is reduced):
   amber is for risk and failure, and a close on its way is neither. */
.pep-pstatus { display: inline-flex; align-items: center; margin: 0; color: var(--pep-text-2); font-size: 11px; line-height: 16px; }
.pep-pstatus-busy { color: var(--pep-text); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .pep-book .pep-poscard-do > .pep-btn.pep-pbtn.pep-pclose.pep-pclose-busy[aria-disabled="true"] { animation: pep-edge 1.2s ease-in-out infinite; }
}
@keyframes pep-edge {
  50% { box-shadow: inset 0 0 0 1px var(--pep-line-strong); }
}

/* A small quiet button (Close, Set, Cancel, a card's foot): words on a faint ground that lifts under the pointer. */
.pep-btn.pep-pbtn {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--pep-book-ground, color-mix(in srgb, var(--pep-line) 75%, transparent));
  font-size: 12px;
  white-space: nowrap;
}
.pep-btn.pep-pbtn:hover:where(:not([disabled]):not([aria-disabled="true"])) { background: var(--pep-panel-hover); }
.pep-btn.pep-pbtn[aria-expanded="true"] { background: var(--pep-panel-hover); }
/* A form's own confirm (Set, the TP / SL edit's Save): cream on the ground, never lime. */
.pep-btn.pep-pbtn-go { background: var(--pep-text); box-shadow: none; color: var(--pep-ground); }
.pep-btn.pep-pbtn-go:hover { color: var(--pep-ground); }
.pep-btn.pep-pbtn-go:hover:where(:not([disabled]):not([aria-disabled="true"])) { background: var(--pep-text); filter: brightness(1.06); }
.pep-btn.pep-pbtn-go:is([disabled], [aria-disabled="true"]) { background: transparent; box-shadow: inset 0 0 0 1px var(--pep-line-strong); color: var(--pep-text-3); cursor: default; }

.pep-plink {
  margin: 0 -6px -4px;
  padding: 2px 6px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pep-text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-decoration: underline;
  text-decoration-color: var(--pep-line-strong);
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}
.pep-plink:hover:where(:not([disabled])),
.pep-plink[aria-expanded="true"] { color: var(--pep-text); text-decoration-color: currentColor; }
.pep-plink:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 0; }
.pep-plink[disabled] { color: var(--pep-text-3); text-decoration: none; cursor: default; }
/* The button whose form is open under the card stays pressed (Set TP / SL): a cream tint twice the others'. */
.pep-poscard-do > .pep-btn.pep-pbtn[aria-expanded="true"],
.pep-poscard-do > .pep-btn.pep-pbtn[aria-expanded="true"]:hover { background: color-mix(in srgb, var(--pep-line-strong) 87.5%, transparent); color: var(--pep-text); }
/* A close that cannot be pressed (one on its way, a send out, a market's TP / SL while it closes): an outline with
   dimmed words, plainly not to be pressed; "Closing..." itself in the text's colour. */
.pep-book .pep-poscard-do > .pep-btn.pep-pbtn:is([disabled], [aria-disabled="true"]) {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--pep-line-strong);
  color: var(--pep-text-3);
  cursor: default;
}
/* Its close on its way: a neutral edge of the text's second ink (it outranks shell.css's dimmed edge for a disabled
   secondary, 0-6-0), the words in exactly Close's width. */
.pep-book .pep-poscard-do > .pep-btn.pep-pbtn.pep-pclose.pep-pclose-busy[aria-disabled="true"] {
  padding-right: 5px;
  padding-left: 5px;
  box-shadow: inset 0 0 0 1px var(--pep-text-2);
}
/* What cannot be pressed now keeps its look in forced colours, where the dimmed words and edge are lost. */
@media (forced-colors: active) {
  .pep-trade .pep-btn:is([aria-disabled="true"], [disabled]) { border-color: GrayText; color: GrayText; }
}

/* Close at...: an order already waiting, then the price, what it is now, Set and its way out (Keep order, or Cancel) on
   one line, Cancel order apart at its end; what is wrong with the price under them. */
.pep-plimit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--pep-panel-2);
  box-shadow: inset 0 0 0 1px var(--pep-line);
}
.pep-plimit-was { flex-basis: 100%; margin: 0; color: var(--pep-text-2); font-size: 12px; line-height: 16px; }
.pep-plimit-was b { color: var(--pep-text); font-weight: 600; }
.pep-plimit-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pep-plimit-k { color: var(--pep-text-2); font-size: 13px; }
.pep-plimit-input { width: 132px; height: 32px; padding: 0 10px; border-radius: 9px; background: var(--pep-ground); }
.pep-plimit-now { margin-right: 4px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Set and its way out: one group, so a line too short for them takes them to the next line together - and a group that
   can shrink and wrap inside itself (round 5 fix 2: at its full width a 320 px phone's form could not hold it, and the
   last button ran out of the form and the book). */
.pep-plimit-do { display: inline-flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
.pep-plimit .pep-level-problem { flex-basis: 100%; }
/* Cancel order: what takes a waiting order away, apart from Set and in red words (a button with no ground). */
.pep-plimit-dropline { display: flex; margin-left: auto; }
.pep-plimit-drop {
  min-height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pep-down);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.pep-plimit-drop:hover:where(:not([aria-disabled="true"])) { text-decoration: underline; }
.pep-plimit-drop:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 0; }
.pep-plimit-drop[aria-disabled="true"] { color: var(--pep-text-3); cursor: default; }
/* The book's fields: an edge that reads against its form (4:1 on panel-2), a suggested level that reads as words, and a
   field a phone never zooms into (16 px under 900 px and on a touch screen). */
.pep-trade :is(.pep-plimit, .pep-triggerbar) .pep-level-input { border-color: var(--pep-text-3); }
.pep-trade :is(.pep-plimit, .pep-triggerbar) .pep-level-input::placeholder { color: var(--pep-book-muted, var(--pep-text-2)); opacity: 1; }
@media (max-width: 899px), (pointer: coarse) {
  .pep-trade :is(.pep-plimit, .pep-triggerbar) .pep-level-input { font-size: 16px; }
}

/* The TP / SL edit (TriggerBar), opened under its row on the close-at form's inset ground (or under the chart, for a
   drag), in as few lines as the row allows: its position's name first when it is not in its row, each level's name
   beside its field, the two levels on one line where there is room for both (628 px of room and more: 1920, 1440,
   1100, 768), then Save / Cancel and the hint on the next line, and anything else to say under them. */
.pep-triggerbar { display: grid; gap: 8px; margin-top: 16px; border: 1px solid var(--pep-line-strong); }
.pep-triggerbar p { margin: 0; }
.pep-trade .pep-triggerbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--pep-panel-2);
  box-shadow: inset 0 0 0 1px var(--pep-line);
}
.pep-trade .pep-triggerbar > * { flex: 1 1 100%; min-width: 0; order: 4; }
.pep-trade .pep-triggerbar > .pep-triggerbar-head { order: 0; color: var(--pep-text); font-size: 12px; font-weight: 700; }
/* Its hints in the book's muted ink, AA on the edit's ground (text-3 there is 4.2:1). */
.pep-trade .pep-triggerbar .pep-faint { color: var(--pep-book-muted); }
/* What is wrong with a level: a line across the whole edit, under both levels, never wrapped inside half of it. */
.pep-trade .pep-triggerbar .pep-trig-problem { flex: 1 1 100%; order: 1; }
.pep-trade .pep-triggerbar > .pep-triggerbar-sum { order: 0; font-size: 12px; }
.pep-trade .pep-triggerbar .pep-levels { display: contents; }
.pep-trade .pep-triggerbar .pep-trig-row { flex: 1 1 290px; order: 1; grid-template-columns: minmax(0, 1fr) 76px; }
.pep-trade .pep-triggerbar .pep-level { grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; }
.pep-trade .pep-triggerbar .pep-level-k { font-size: 12px; line-height: 16px; }
.pep-trade .pep-triggerbar .pep-level-input { height: 32px; padding: 0 10px; border-radius: 9px; background: var(--pep-ground); }
.pep-trade .pep-triggerbar .pep-trig-row > .pep-btn { min-height: 32px; align-self: start; background: var(--pep-book-ground, color-mix(in srgb, var(--pep-line) 75%, transparent)); }
.pep-trade .pep-triggerbar .pep-trig-row > .pep-btn:hover:where(:not([disabled])) { background: var(--pep-panel-hover); }
.pep-trade .pep-triggerbar .pep-prow-do { flex: none; order: 2; justify-content: flex-start; }
.pep-trade .pep-triggerbar .pep-levels > p { flex: 1 1 auto; order: 3; }
.pep-trade .pep-triggerbar .pep-prow-do > .pep-btn { min-height: 32px; }
.pep-trade .pep-triggerbar .pep-prow-do > .pep-btn:not(.pep-pbtn-go) { background: var(--pep-book-ground, color-mix(in srgb, var(--pep-line) 75%, transparent)); }
.pep-trade .pep-triggerbar .pep-prow-do > .pep-btn:not(.pep-pbtn-go):hover:where(:not([disabled])) { background: var(--pep-panel-hover); }
/* A row with no room for both levels on one line (under 628 px: a compact table, a phone's card): one level a line,
   their fields on one left edge, then Save / Cancel and the hint - never Save beside the stop loss as if it were its. */
@container pep-book (max-width: 627px) {
  .pep-trade .pep-triggerbar .pep-trig-row { flex-basis: 100%; }
  .pep-trade .pep-triggerbar .pep-level { grid-template-columns: 72px minmax(0, 1fr); }
}
/* The narrowest phones: each name over its field again, so the field keeps a price's width. */
@container pep-book (max-width: 309px) {
  .pep-trade .pep-triggerbar .pep-level { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .pep-trade .pep-triggerbar .pep-trig-row > .pep-btn { align-self: end; }
}
/* The button column is a fixed width, so the input does not move as Use, Remove or Keep swap in and out. */
.pep-trig-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px; align-items: center; gap: 8px; }
.pep-trig-row > .pep-btn { width: 100%; }
.pep-prow-do { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
/* A close request's tracker, under its row (or at the book's foot once the row is gone). */
.pep-book .pep-tracker { margin: 0; }

/* A breakdown under a closed position (History), and a log's status line: each name, then its figure, in muted words -
   each part on a stop of its own (132 px), so "Fees" lands at the same place on every line (round 5 fix 2). */
.pep-pparts { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; color: var(--pep-book-muted); font-size: 12px; line-height: 16px; }
.pep-ppart { min-width: 132px; padding-right: 12px; white-space: nowrap; }
.pep-ppart b { color: var(--pep-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.pep-pparts-state { align-items: center; justify-content: space-between; gap: 6px 12px; }
.pep-pparts-state .pep-pstate-cell { min-width: 0; }
/* A waiting order's Cancel on a phone: a thumb's height at the line's right. */
.pep-pcards-orders .pep-pparts-state .pep-btn.pep-pbtn { min-height: 34px; padding: 0 14px; }

/* An Orders row's status: amber when it was cancelled (why under it, muted), a pulsing dot while it waits; "Filled at
   $149.38" on one line, never its price apart from its words. In a table cell, on the row's first line. */
.pep-pstate { display: inline-flex; align-items: baseline; gap: 7px; color: var(--pep-text-2); font-size: 13px; line-height: 18px; white-space: nowrap; }
.pep-pstate-cell { display: grid; justify-items: start; gap: 1px; }
.pep-pstate-note { color: var(--pep-book-muted); font-size: 12px; line-height: 16px; }
.pep-ptable .pep-pc-state .pep-pstate { display: flex; }
.pep-pstate-ok { color: var(--pep-text); }
.pep-pstate-warn { color: var(--pep-warn); }
.pep-pstate-busy::before { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pep-text-2); content: ""; }
@media (prefers-reduced-motion: no-preference) {
  .pep-pstate-busy::before { animation: pep-pulse 1s ease-in-out infinite; }
}

/* -- the table: one line a row, heads in small muted words over every column */

.pep-ptable { width: 100%; border-collapse: separate; border-spacing: 0; }
/* shared-ui's base lets every flex and grid item shrink (* { min-width: 0 }). Inside a table row nothing may: a column
   is as wide as its content needs, so a table short of room grows - and useBookLayout steps down - instead of drawing
   one figure over the next. */
.pep-ptable thead *,
.pep-ptable .pep-prow-main * { min-width: auto; }
.pep-ptable thead th {
  padding: 0 7px 9px;
  border-bottom: 1px solid var(--pep-line);
  color: var(--pep-text-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}
/* A head over a two-line column names its second line under it, as the cells draw their second figure. */
.pep-th-sub { display: block; margin-top: 1px; color: var(--pep-text-3); font-size: 11px; font-weight: 500; line-height: 14px; }
/* Every cell's first line on one line across the row (top-aligned), the actions in the row's middle. */
.pep-ptable .pep-pc { padding: 10px 7px; font-weight: 400; text-align: right; vertical-align: top; }
/* Words read from the left - the market, the levels, what a trade or an order did; every figure is right-aligned under
   its head, so amounts line up on their last digit and a size or a PnL is read for its size at a glance. */
.pep-ptable .pep-pc-mkt,
.pep-ptable .pep-pc-tpsl,
.pep-ptable .pep-pc-kind,
.pep-ptable .pep-pc-what,
.pep-ptable .pep-pc-state { text-align: left; }
.pep-ptable thead th:first-child,
.pep-ptable .pep-prow-main > .pep-pc:first-child { padding-left: 4px; }
.pep-ptable thead th:last-child,
.pep-ptable .pep-prow-main > .pep-pc:last-child { padding-right: 4px; }
/* The market and the actions are exactly as wide as their content; the figures share a part of the room left, a little
   apart, and the levels take the rest, after them (round 5 fix 2: a panel with the rail shut spread the figures 80 px
   apart and left the levels and the actions cramped at the end). */
.pep-ptable th.pep-pc-do { width: 1%; }
.pep-ptable .pep-pc-do { padding-left: 12px; white-space: nowrap; }
/* History, Trades and Orders share their room evenly between their figures; when it happened is the quiet last column. */
.pep-ptable-hist th.pep-pc-mkt { width: 26%; }
.pep-ptable-hist th.pep-pc-size { width: 14%; }
.pep-ptable-hist th.pep-pc-result,
.pep-ptable-hist th.pep-pc-entry,
.pep-ptable-hist th.pep-pc-exit { width: 16%; }
.pep-ptable-trades th.pep-pc-mkt { width: 20%; }
.pep-ptable-trades th.pep-pc-kind { width: 13%; }
.pep-ptable-trades th.pep-pc-size,
.pep-ptable-trades th.pep-pc-price,
.pep-ptable-trades th.pep-pc-pnl { width: 15%; }
.pep-ptable-trades th.pep-pc-fee { width: 10%; }
/* Orders: shares of the room in the full table only; narrower, each column as its words need, what was asked wrapping
   before its price, and a waiting order's Cancel no taller than the row's first line. */
.pep-ptable-orders:not(.pep-ptable-compact) th.pep-pc-mkt { width: 22%; }
.pep-ptable-orders:not(.pep-ptable-compact) th.pep-pc-what { width: 30%; }
.pep-ptable-orders .pep-pc-state { white-space: normal; }
.pep-ptable-compact.pep-ptable-orders .pep-pc-what .pep-pv { white-space: normal; }
.pep-ptable-orders .pep-pc-do .pep-btn.pep-pbtn { min-height: 24px; margin: -3px 0; }
.pep-ptable .pep-pc-when .pep-pv { color: var(--pep-text-2); }

/* A hairline between rows; a row's lines under it (its breakdown, its levels, a form) belong to it. */
.pep-ptable .pep-prow + .pep-prow > .pep-prow-main > .pep-pc { border-top: 1px solid var(--pep-line); }
.pep-ptable .pep-prow > tr:not(.pep-prow-main) > td { padding: 0 4px 12px; text-align: left; }
.pep-ptable .pep-prow-main:has(+ tr) > .pep-pc { padding-bottom: 6px; }
/* History's breakdown starts under the ticker. */
.pep-ptable .pep-prow > tr.pep-prow-parts > td { padding-left: 35px; }
/* A form opened under a row (Close at..., the TP / SL edit, a tracker) runs the row's width, with a little more room
   under it. */
.pep-ptable .pep-prow > tr.pep-prow-form > td { padding-bottom: 14px; }
.pep-ptable .pep-prow:hover > tr > * { background: var(--pep-book-tint); }
/* A position a copy notice linked to (?pos=, 4e): social.css's amber tint, on the row's cells (a <tbody>'s own ground
   sits under the hover's), pulsing twice; no bar down its edge (round 11). */
.pep-ptable .pep-prow-focus { background: none; animation: none; }
.pep-ptable .pep-prow-focus > tr > * { background: var(--pep-focus-tint); }
@media (prefers-reduced-motion: no-preference) {
  .pep-ptable .pep-prow-focus > tr > * { animation: pep-prow-pulse 0.9s ease-in-out 2; }
}

/* The compact table (useBookLayout "compact" and "split": a panel under the table's room, 1366 and 1024 beside the
   rail and the ticket): no avatars, the figures a size smaller, the columns still 12 px apart and more. */
.pep-ptable-compact .pep-pmkt .pep-avatar { display: none; }
.pep-ptable-compact thead th,
.pep-ptable-compact .pep-pc { padding-right: 6px; padding-left: 6px; }
.pep-ptable-compact .pep-pc-tpsl { padding-left: 16px; }
.pep-ptable-compact .pep-pc-do { padding-left: 12px; }
.pep-ptable-compact .pep-pv { font-size: 12px; }
.pep-ptable-compact .pep-pv-big { font-size: 14px; }
.pep-ptable-compact .pep-plevel-v { font-size: 12px; }
.pep-ptable-compact .pep-pstate { font-size: 12px; }
.pep-ptable-compact .pep-ptag { padding: 0 7px; }
.pep-ptable-compact .pep-prow > tr.pep-prow-parts > td { padding-left: 4px; }

/* -- the lists (a phone, a narrow panel): lines parted by hairlines, never a box inside the panel's box */

.pep-pcards { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pep-pcards .pep-pc { min-width: 0; }
.pep-pcards > .pep-prow { display: grid; gap: 8px; padding: 12px 0; }
.pep-pcards .pep-prow-facts { min-width: 0; }
.pep-pcards > .pep-prow:first-child { padding-top: 2px; }
.pep-pcards > .pep-prow + .pep-prow { border-top: 1px solid var(--pep-line); }
.pep-pcards .pep-prow-main { display: flex; align-items: center; justify-content: space-between; gap: 4px 10px; min-height: 24px; }
/* The market keeps its words whole; the result at the right, its percent always under it (round 5 fix 2: beside it, the
   pair wrapped once the dollars or the percent gained a digit, and the card grew and shrank as the price ticked). */
.pep-pcards .pep-prow-main > .pep-pc-mkt { flex: none; }
.pep-pcards-hist .pep-pc-result,
.pep-pcards-trades .pep-pc-pnl {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  text-align: right;
}
.pep-pcards .pep-pv-big { font-size: 16px; line-height: 20px; }
.pep-pcards :is(.pep-pc-pnl, .pep-pc-result) .pep-psub { margin: 0; }
/* The figures: a grid of three, each label over its figure, the columns the same width from one line to the next (a
   column wider only when a figure needs it). */
.pep-pfacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; margin: 0; }
.pep-pfact { display: grid; align-content: start; gap: 1px; min-width: auto; }
.pep-pfact dt { color: var(--pep-book-muted); font-size: 11px; line-height: 15px; }
.pep-pfact dd { margin: 0; color: var(--pep-text); font-size: 13px; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pep-pcards .pep-pwhy { text-align: left; }
/* The narrowest phones: the same lines a size smaller. */
@container pep-book (max-width: 299px) {
  .pep-pfacts { column-gap: 8px; }
  .pep-pfact dd { font-size: 12px; }
}

/* -- an open position's card (round 9, components/perps/PositionCard.jsx: the owner's reference): the trade screen's
 * book, the portfolio's Perps and a profile alike. One card a line at every width, parted by hairlines - never a box
 * inside the panel's box: the market large with its side's tinted badge and, under it, the margin mode, leverage and
 * margin; the PnL large at the right, its percent after it (under it only where the line has no room); four figures
 * each under its label, the liquidation price in amber at the right edge; what waits on it; two equal buttons. */

.pep-poscards {
  --pep-book-muted: color-mix(in srgb, var(--pep-text-3) 80%, var(--pep-text-2));
  --pep-book-ground: color-mix(in srgb, var(--pep-line) 75%, transparent);
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "DM Sans Figures", var(--pickle-font);
  container: pep-poscards / inline-size;
}
.pep-poscard { display: grid; gap: 14px; min-width: 0; padding: 16px 0; }
.pep-poscard:first-child { padding-top: 4px; }
.pep-poscard + .pep-poscard { border-top: 1px solid var(--pep-line); }
.pep-poscard:last-child { padding-bottom: 4px; }
/* A position a link was made for (?pos=): social.css's amber tint, as a card of its own, its words clear of its edge. */
.pep-poscard.pep-prow-focus { padding-right: 12px; padding-left: 12px; border-radius: var(--pep-radius-sm); }
.pep-poscards > [data-pos-row]:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }

/* The head: the market at the left, whole; the PnL takes the rest at the right, its percent going under it first. */
.pep-poscard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.pep-poscard-mkt { display: flex; flex: 0 1 auto; align-items: center; gap: 10px; min-width: 0; max-width: 72%; }
.pep-poscard-id { display: grid; gap: 3px; min-width: 0; }
.pep-poscard-title { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.pep-poscard-t {
  overflow: hidden;
  color: var(--pep-text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The side: its words in the direction's colour on a faint wash of it. */
.pep-poscard-side {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.pep-poscard-side-long { background: color-mix(in srgb, var(--pep-up) 14%, transparent); color: var(--pep-up); }
.pep-poscard-side-short { background: color-mix(in srgb, var(--pep-down) 14%, transparent); color: var(--pep-down); }
@media (forced-colors: active) {
  .pep-poscard-side { border: 1px solid CanvasText; }
}
.pep-poscard-mode { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 0; color: var(--pep-text); font-size: 13px; line-height: 18px; }
.pep-poscard-margin { color: var(--pep-book-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.pep-poscard-pnl { display: grid; flex: 1 1 0; justify-items: end; gap: 2px; min-width: 0; text-align: right; }
.pep-poscard-k { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--pep-book-muted); font-size: 12px; line-height: 18px; white-space: nowrap; }
/* The way to the position's own page: a 24 px target around its 14 px arrow. */
.pep-poscard-open {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -3px -5px -3px 0;
  border-radius: 6px;
  color: var(--pep-text-2);
}
.pep-poscard-open:hover { background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-poscard-open:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 0; }
.pep-poscard-pnlv {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 4px;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
}
.pep-poscard-usd,
.pep-poscard-pct { white-space: nowrap; }
.pep-poscard-pnlv.pep-dir-flat { color: var(--pep-text-2); }
.pep-poscard .pep-pnote { position: static; margin-left: 1px; }

/* The four figures, each label over its figure: four even columns, one wider only when its figure needs it, the last
   (the liquidation price) on the card's right edge. The figures size with the card (a phone's four BTC prices fit at
   12 px, a desktop's at 15), and a card under 330 px draws two lines of two. */
.pep-poscard-figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(min-content, 1fr));
  gap: 10px 12px;
  margin: 0;
}
.pep-poscard-fig { display: grid; align-content: start; gap: 2px; }
.pep-poscard-fig dt { display: flex; color: var(--pep-book-muted); font-size: 12px; line-height: 18px; white-space: nowrap; }
.pep-poscard-fig dd { display: grid; margin: 0; color: var(--pep-text); font-size: clamp(12px, 3.5cqi, 15px); font-weight: 600; line-height: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pep-poscard-fig-liq { justify-items: end; text-align: right; }
.pep-poscard-fig-liq dt { justify-content: flex-end; }
.pep-poscard-liq { color: var(--pep-warn); }
.pep-poscard-away { color: var(--pep-book-muted); font-size: 12px; font-weight: 500; line-height: 16px; }
.pep-poscard .pep-dir-warn { color: var(--pep-warn); }
.pep-poscard .pep-dir-down { color: var(--pep-down); }
.pep-poscard .pep-dir-up { color: var(--pep-up); }
@container pep-poscards (max-width: 379px) {
  .pep-poscard-figs { column-gap: 10px; }
  .pep-poscard-fig dd { line-height: 18px; }
  .pep-poscard-fig dt { font-size: 11px; }
  .pep-poscard-pnlv { font-size: 18px; line-height: 22px; }
}
/* Under 330 px (a phone's profile panel, inside its own padding) four six-figure prices no longer fit side by side. */
@container pep-poscards (max-width: 329px) {
  .pep-poscard-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pep-poscard-fig dd { font-size: 14px; }
}

/* Size: its label a button that switches every card between the market's unit and dollars, the arrows saying so. */
.pep-poscard-unit {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: -3px -6px;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.pep-poscard-unit:hover { background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-poscard-unit:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 0; }
.pep-poscard-swap { flex: none; }
/* Liq. price: the word itself the button that says what it is (Hint `term`), underlined in dots. */
.pep-poscard .pep-hint { margin: 0; }
.pep-hint-btn.pep-hint-term {
  width: auto;
  height: auto;
  border-radius: 3px;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: underline dotted;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}
.pep-hint-btn.pep-hint-term::after { inset: -4px -6px; border-radius: 6px; }
.pep-hint-btn.pep-hint-term:hover { box-shadow: none; color: var(--pep-text); }
.pep-hint-btn.pep-hint-term[aria-expanded="true"] { background: transparent; color: var(--pep-text); }

/* What waits on it: each level after its key (tinted as the chart draws its line), then Close at... at the right. */
.pep-poscard-levels { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; min-width: 0; }
.pep-poscard-lvls { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.pep-poscard-lvl { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.pep-poscard .pep-plevel-k { font-size: 12px; }
.pep-poscard .pep-plevel-tp { color: var(--pep-up); }
.pep-poscard .pep-plevel-sl { color: var(--pep-down); }
.pep-poscard .pep-plevel-at { color: var(--pep-text-2); }
.pep-poscard-levels > .pep-plink { margin-left: auto; }

/* The foot: Set TP / SL and Close, two equal buttons a thumb can find (one's own; another trader's card has none). */
.pep-poscard-do { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 10px; }
.pep-poscard-do > .pep-btn.pep-pbtn.pep-poscard-btn { min-height: 40px; padding: 0 8px; border-radius: 10px; font-size: 14px; }
.pep-poscard .pep-pwhy { text-align: left; }

/* What opens under a card (Close at..., the TP / SL edit, a close's tracker): a narrow card's form a thumb can use -
   the field its width, then the price now, Set and Cancel; Cancel order on a line of its own. */
@container pep-poscards (max-width: 479px) {
  .pep-poscard .pep-plimit-input { width: 100%; }
  .pep-poscard .pep-plimit-field,
  .pep-poscard .pep-plimit-k { flex-basis: 100%; }
  .pep-poscard .pep-plimit-now { flex: 1 0 auto; }
  .pep-poscard .pep-plimit-do { margin-left: auto; }
  .pep-poscard .pep-plimit .pep-btn.pep-pbtn { min-height: 36px; padding: 0 16px; }
  .pep-poscard .pep-plimit-dropline { flex-basis: 100%; order: 2; margin-left: 0; }
  .pep-poscard .pep-plimit-drop { min-height: 36px; }
  .pep-poscard .pep-plimit .pep-level-problem { order: 1; }
}

/* A line of a log (History, Trades, Orders on a phone), one shape for every line: the market and the result at the
   right; what happened and when, in muted words ("Opened · 24s ago"); its figures under their labels; its breakdown. */
.pep-prow-when { display: flex; align-items: baseline; gap: 6px; font-size: 12px; line-height: 16px; }
.pep-plog-what { color: var(--pep-text-2); font-weight: 600; }
.pep-plog-ago { color: var(--pep-book-muted); white-space: nowrap; }
.pep-plog-ago::before { content: "\00B7"; content: "\00B7" / ""; margin-right: 6px; }
.pep-pcards-log .pep-pstate { font-size: 12px; line-height: 16px; }

@media (max-width: 899px) {
  .pep-prow-do { justify-content: flex-start; }
}

/* ----------------------------------------------------- request tracker */

.pep-tracker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  margin-top: 12px;
}
.pep-tracker .pep-prow-do,
.pep-tracker .pep-notice { grid-column: 1 / -1; justify-content: flex-start; }
.pep-tracker-body { min-width: 0; overflow-wrap: anywhere; }
.pep-tracker-body p { margin: 2px 0 0; font-size: 13px; }
/* Its look is the site's banner (dex.css, .pep-callout), in the phase's tone: grey while it waits, amber when it
   went wrong, emerald when it is done. The glyph is a step larger, to hold the three dots of a wait. */
.pep-tracker .pep-tracker-glyph { width: 24px; height: 24px; }

@media (prefers-reduced-motion: no-preference) {
  .pep-tracker-busy .pep-tracker-glyph { animation: pep-pulse 1s ease-in-out infinite; }
}

@keyframes pep-pulse {
  50% { opacity: 0.35; }
}

/* --------------------------------------------------------------- vault
 * /perps/vault/ (round 19, in /leaderboard/'s look): the hero, the title, the "Your position" strip and the table's
 * panel are page.css's; here are the page's gaps and its own pieces. The vault's figures as cards, the first edged
 * in lime; the pLP coin in Your position and its figures (what it is worth, how many and the share of the vault,
 * the lock); the Previous vault row as a strip of the same kind; the form beside How the vault works, whose steps
 * are numbered in the ranked table's circles. The layout follows the page's own width (the rail beside it takes
 * 300 px or none), never the window's. */

.pep-vault { display: grid; gap: 18px; min-width: 0; container: pep-vp / inline-size; }
.pep-vault-form { display: grid; gap: 12px; }
.pep-vault-form p { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.pep-vault-lock { font-weight: 700; }
.pep-vault-mine p { margin: 0; overflow-wrap: anywhere; }

/* The vault's four figures: a row of cards, two by two on a phone. */
.pep-vp .pep-vp-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pep-vp-figs .pep-pill,
.pep-vp-figs .pep-pill-head {
  display: grid;
  align-content: center;
  justify-content: stretch;
  justify-items: start;
  gap: 4px;
  min-width: 0;
  padding: 16px 18px;
  text-align: left;
  border-radius: var(--pep-radius);
  background: var(--pep-panel);
  box-shadow: inset 0 0 0 1px var(--pep-line);
}
.pep-vp-figs .pep-pill-k { color: var(--pep-text-3); font-size: 13px; letter-spacing: 0; }
.pep-vp-figs .pep-pill-v,
.pep-vp-figs .pep-pill-head .pep-pill-v {
  overflow: hidden;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pep-vp-figs .pep-pill-head {
  background: linear-gradient(135deg, rgb(195 245 111 / 10%), rgb(195 245 111 / 0%) 60%), var(--pep-panel);
  box-shadow: inset 0 0 0 1.5px var(--pep-brand), 0 0 28px rgb(195 245 111 / 10%);
}

/* Your position: the coin, what the pLP is worth, how many and the share, the lock, then Deposit and Withdraw. */
.pep-vp .pep-vp-mine {
  grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
  grid-template-areas: "coin place held lock do";
}
.pep-vp-coin {
  grid-area: coin;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--pep-brand), var(--pep-sage));
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 18%), 0 0 0 3px rgb(195 245 111 / 12%);
  color: var(--pep-brand-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pep-vp-mine .pep-standing-place { grid-area: place; }
.pep-vp-mine .pep-vp-held { grid-area: held; }
.pep-vp-mine .pep-vp-lock { grid-area: lock; }
.pep-vp-mine .pep-vp-locked b { color: var(--pep-warn); }
.pep-vp-mine .pep-vp-mine-line { grid-column: 3 / 5; color: var(--pep-text-2); font-size: 14px; }
.pep-vp-mine-do { grid-area: do; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* The Previous vault (PreviousVault.jsx, its markup as the portfolio draws it): a strip like Your position, its
   name and tag, then its figures and Withdraw, the line under them. */
.pep-vp .pep-prevvault {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px 24px;
  padding: 14px 20px;
}
.pep-vp .pep-prevvault > :not(.pep-prevvault-head, .pep-prevvault-row) { grid-column: 1 / -1; }
.pep-vp .pep-prevvault-head .pep-panel-title { font-size: 16px; }
.pep-vp .pep-prevvault-v { font-size: 20px; font-weight: 800; }
.pep-vp .pep-prevvault-row .pep-btn {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  background: transparent;
  font-size: 13px;
}
.pep-vp .pep-prevvault-row .pep-btn:hover:where(:not([disabled])) { border-color: var(--pep-text-2); background: var(--pep-panel-hover); }

/* The form beside How the vault works; the form first, and alone on its row, on a narrow page. */
.pep-vp-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.pep-vp .pep-vault-form { gap: 14px; padding: 18px 20px; }
.pep-vp .pep-vault-form .pep-seg-pill > button { flex: 1; min-height: 38px; font-size: 14px; }
.pep-vp .pep-vault-form .pep-ticket-presets .pep-btn { border-radius: var(--pep-radius-pill); }
.pep-vp .pep-vault-form .pep-btn-primary { min-height: 48px; border-radius: var(--pep-radius-pill); font-size: 15px; }
.pep-vp-how { min-width: 0; scroll-margin-top: calc(var(--pep-top-h) + 16px); }
.pep-vp-steps { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: pep-vp-step; }
.pep-vp-steps > li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 12px;
  border-bottom: 1px solid var(--pep-line);
  color: var(--pep-text-2);
  font-size: 14px;
  line-height: 1.5;
  counter-increment: pep-vp-step;
}
.pep-vp-steps > li:last-child { border-bottom: 0; }
.pep-vp-steps > li::before {
  content: counter(pep-vp-step);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -3px;
  border: 1px solid var(--pep-line-strong);
  border-radius: 50%;
  color: var(--pep-text);
  font-size: 13px;
  font-weight: 700;
}
.pep-vp-steps > li:first-child::before { border-color: var(--pep-brand); background: var(--pep-brand); color: var(--pep-brand-ink); }

@container pep-vp (min-width: 860px) {
  .pep-vp-work { grid-template-columns: minmax(320px, 5fr) minmax(0, 6fr); }
}
@container pep-vp (max-width: 899px) {
  .pep-vp .pep-vp-mine {
    grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "coin place held lock" ". do do do";
  }
  .pep-vp-mine-do { justify-content: flex-start; }
}
@container pep-vp (max-width: 599px) {
  .pep-vp .pep-vp-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pep-vp .pep-vp-mine {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "coin place place" "held held lock" "do do do";
    gap: 12px 14px;
    padding: 14px 16px;
  }
  .pep-vp-mine .pep-standing-k + .pep-standing-k { padding-left: 0; border-left: 0; }
  .pep-vp-mine .pep-vp-lock { padding-left: 14px; border-left: 1px solid var(--pep-line); }
  .pep-vp-mine .pep-vp-mine-line { grid-column: 1 / -1; }
  .pep-vp .pep-prevvault { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
}
@container pep-vp (max-width: 479px) {
  .pep-vp .pep-vp-figs { gap: 8px; }
  .pep-vp-figs .pep-pill,
  .pep-vp-figs .pep-pill-head { padding: 12px 14px; }
  .pep-vp-figs .pep-pill-k { font-size: 12px; }
  .pep-vp-figs .pep-pill-v,
  .pep-vp-figs .pep-pill-head .pep-pill-v { font-size: 19px; }
  .pep-vp-mine .pep-standing-k b { font-size: 17px; }
  .pep-vp-mine-do .pep-pill-go { flex: 1; }
  .pep-vp .pep-vault-form { padding: 14px; }
  .pep-vp-steps > li { gap: 12px; padding: 12px 6px; }
}

/* A closed market that still closes (engine VERSION 2): what Close does, over a card's buttons - "Closes at the last
   price $186.73 (market closed, 0.10% spread)" (PositionCard LastPrice). */
.pep-plast { margin: 0 0 8px; color: var(--pep-text-2); font-size: 12px; line-height: 16px; }

/* --------------------------------------------------------------- two engines (18 Oct 2026) */

/* "Previous engine" (EngineTag.jsx): beside a position, an order, a trade, a copy or a post that lives on the engine
   the VERSION 2 upgrade replaced. Quiet: a hairline pill in the second text colour, small, never a colour of its own.
   Its words are the hint's button (underlined in dots), so the pill keeps the hint's own ring out. */
.pep-engine-tag {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  color: var(--pep-text-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
}
.pep-engine-tag .pep-hint { margin: 0; }
.pep-engine-tag .pep-hint-btn.pep-hint-term { color: inherit; text-decoration-color: var(--pep-text-3); text-underline-offset: 2px; }
.pep-engine-tag .pep-hint-btn.pep-hint-term:hover,
.pep-engine-tag .pep-hint-btn.pep-hint-term[aria-expanded="true"] { color: var(--pep-text); }
/* Where it sits: after a card's side badge, after a table's side tag, in a waiting line's head, in a feed strip. */
.pep-poscard-title .pep-engine-tag,
.pep-pmkt-name .pep-engine-tag { margin-left: 2px; }
.pep-ttc-what .pep-engine-tag { margin-left: 6px; }
/* Why something cannot be done on a previous engine, where its button would be (a legacy copy's Add funds). */
.pep-engine-why { margin: 0; color: var(--pep-text-2); font-size: 12px; line-height: 16px; }

/* The previous vault (vault page and portfolio): one row, the pLP still held there, its value and Withdraw. */
.pep-prevvault { display: grid; gap: 8px; }
.pep-prevvault-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pep-prevvault-head .pep-panel-title,
.pep-prevvault-head .pep-sec-title { margin: 0; }
.pep-prevvault-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-width: 0; }
.pep-prevvault-figs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; min-width: 0; }
.pep-prevvault-v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pep-prevvault p { margin: 0; overflow-wrap: anywhere; }