/* SENDIT v2's DEX screens (sub-project 3c): the portfolio (round 13 took the
 * swap and the pool pages out of SENDIT; round 26 the pools out of Stats,
 * now SENDIT's own figures, stats.css). Built only from
 * shell.css's tokens and components, in the register of the perp screens and
 * Home: a near-black ground, rounded panels, capsule pills, large tabular
 * numbers, sans text. No numbered kicker, no mono labels in capitals, no
 * 2 px boxes: those were the old DEX.
 *
 * Colour keeps its three jobs (shell.css): --pep-brand is the logo, the
 * active tab and focus, and nothing on these pages; --pep-up and --pep-down
 * mean direction (a change, Buy and Sell, profit and loss); primary buttons
 * are white on dark. Warnings are amber with a glyph and a word. */

/* ------------------------------------------------------ shared primitives
 * Four pieces every SENDIT page uses, moved here from pepper.css and redrawn
 * in the v2 register: the sub line, the text link, the chip and the notice.
 * One definition each, so the perp screens and Home change with them. */

.pep-sub {
  display: block;
  color: var(--pep-text-2);
  font-size: 13px;
  line-height: 1.45;
}

.pep-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--pep-text);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--pep-line-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}
/* Restated on hover: shared-ui/base.css's a:hover (SENDIT's lime, the
   brand) outranks .pep-link, and a link here is words, not the brand. */
.pep-link:hover { color: var(--pep-text); text-decoration-color: currentColor; }
.pep-link:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: 4px; }

/* A capsule: a filter, a tab, a slippage step. Pressed or selected is lime,
   as the brand film's chosen tab is. */
.pep-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  background: transparent;
  color: var(--pep-text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.pep-chip:hover { color: var(--pep-text); background: var(--pep-panel); }
.pep-chip:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-chip[aria-pressed="true"],
.pep-chip[aria-selected="true"] { background: var(--pep-brand); border-color: var(--pep-brand); color: var(--pep-brand-ink); }

/* THE BANNER (round 10, tinted in round 11): every notice, warning, note and
 * closed-market line on SENDIT is one shape. A rounded card whose ground is
 * tinted with its tone, its words in the tone, and no border and no side
 * stripe at all (the owner: no bar down an edge anywhere). Four tones: amber
 * warns, red failed, emerald done, and the near-neutral grey of a plain note
 * (the brand lime stays the brand's). The tint is a tenth of the tone over
 * the raised panel, so every tone's words hold AA on it. Every one of them
 * still says what it is in words, so none depends on colour alone
 * (pepper.css said it first, and it still holds).
 *
 * A host keeps its own class for its place in the layout (.pep-notice,
 * .pep-banner, .pep-board-recount...) and takes its look only from here:
 * tests/pepper-banners.test.mjs holds every one of them to that. */
.pep-callout {
  --pep-tone: var(--pep-text-2);
  padding: 12px 16px;
  border: 0;
  border-radius: var(--pep-radius-sm);
  background: color-mix(in srgb, var(--pep-tone) 10%, var(--pep-panel-2));
  box-shadow: none;
  color: var(--pep-tone);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.pep-callout--warn { --pep-tone: var(--pep-warn); }
.pep-callout--error { --pep-tone: var(--pep-danger); }
.pep-callout--ok { --pep-tone: var(--pep-ok); }
/* A plain note: the quiet grey, its lead in the text colour. */
.pep-callout--info { --pep-tone: var(--pep-text-2); --pep-tone-lead: var(--pep-text); }
/* Long copy or controls: the words in the text colour, the lead in the tone. */
.pep-callout--rich { color: var(--pep-text); font-weight: 400; }
.pep-callout__lead { color: var(--pep-tone-lead, var(--pep-tone)); font-weight: 700; }
/* The glyph some banners carry beside their word: a disc of the tone. */
.pep-callout__glyph {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pep-tone);
  color: var(--pep-ground);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
/* A live region kept mounted while it has nothing to say draws no card
   around nothing (it stays in the page, so what it says next is read out). */
.pep-callout:empty { padding: 0; border: 0; background: none; }
/* A link or a quiet button inside keeps the banner's colour, underlined. */
.pep-callout .pep-link,
.pep-callout .pep-btn-link { color: inherit; }

/* The notice (components/Notice.jsx): the banner with a glyph and a word
 * leading it. The glyph and the word are the two signals that need no
 * colour; the stripe is the third. */
.pep-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
}
/* The text beside the glyph may shrink, and a long address breaks. */
.pep-notice > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.pep-notice__label { display: block; margin-bottom: 2px; font-weight: 800; }

/* ------------------------------------------------------------ the page
 * Every 3c page is one column of panels with one gap; a notice in it takes
 * the gap instead of its own margin. */

.pep-dex { display: grid; gap: 16px; min-width: 0; }
.pep-dex > * { min-width: 0; }
.pep-dex .pep-notice { margin-top: 0; }
.pep-dex .pep-with-aside-main,
.pep-dex .pep-with-aside-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pep-dex p { margin: 0; }

/* The title row: the page's name at the size the token page uses, one line
 * of what it is for, and the page's action at the end. */
.pep-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pep-title-text { display: grid; gap: 4px; min-width: 0; }
.pep-title-h { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.pep-title-sub { max-width: 64ch; color: var(--pep-text-2); font-size: 14px; }
.pep-title-do { display: flex; flex-wrap: wrap; gap: 8px; }

/* Two token avatars, the second tucked under the first. */
.pep-pair { display: inline-flex; flex: none; align-items: center; }
.pep-pair > :last-child { margin-left: -6px; box-shadow: 0 0 0 2px var(--pep-panel); }

/* Nothing here yet: a sentence, and the way to change that. */
.pep-blank { display: grid; gap: 10px; justify-items: start; }
.pep-blank-title { font-size: 15px; font-weight: 800; }
.pep-blank-do { display: flex; flex-wrap: wrap; gap: 8px; }

/* How it works (components/HowItWorks.jsx): a long explanation folded under one
   plain line. The summary reads as a quiet link; the body is the page's small print. */
.pep-how { color: var(--pep-text-2); font-size: 13px; line-height: 1.45; }
.pep-how > summary { width: fit-content; cursor: pointer; font-weight: 700; }
.pep-how > summary:hover { color: var(--pep-text); }
.pep-how > summary:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: var(--pep-radius-sm); }
.pep-how[open] > summary { margin-bottom: 8px; }
.pep-how-body { display: grid; gap: 6px; }
.pep-how-body p { margin: 0; }

/* Facts under a heading: a label over a tabular figure, in a grid that
 * wraps. The v2 form of holdings.css's boxed facts. */
.pep-facts2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px 16px; margin: 0; }
.pep-facts2 > div { display: grid; gap: 2px; min-width: 0; }
.pep-facts2 dt { color: var(--pep-text-3); font-size: 12px; }
.pep-facts2 dd { margin: 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pep-facts2 dd small { display: block; color: var(--pep-text-3); font-size: 12px; font-weight: 400; }

/* fomo's positions list: an avatar, a name over its sub line, figures at
 * the end, right-aligned. The head row names the columns on a wide screen. */
.pep-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pep-list-row {
  display: grid;
  /* A figure column is never narrower than its figure; the name column
     gives way (and ellipses) instead. */
  grid-template-columns: auto minmax(0, 1.4fr) repeat(3, minmax(max-content, 1fr));
  align-items: center;
  gap: 4px 14px;
  padding: 10px 8px;
  border-radius: var(--pep-radius-sm);
}
.pep-list-row:hover { background: var(--pep-panel-2); }
.pep-list-head { padding-top: 0; padding-bottom: 6px; color: var(--pep-text-3); font-size: 12px; }
.pep-list-head:hover { background: transparent; }
.pep-list-name { display: grid; min-width: 0; }
.pep-list-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pep-list-name > span { color: var(--pep-text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A sub line that says a direction (a perp's Long / Short) keeps it: the
   rule above outranks pepper.css's .pep-dir-*. */
.pep-list-name > .pep-dir-up { color: var(--pep-up); }
.pep-list-name > .pep-dir-down { color: var(--pep-down); }
.pep-list-name > .pep-dir-flat { color: var(--pickle-muted); }
.pep-list-fig { display: grid; justify-items: end; min-width: 0; font-variant-numeric: tabular-nums; text-align: right; }
/* A figure is read whole: a long one (a sub-cent price, a seven-digit
   balance) never breaks mid-number; its column takes the width it needs. */
.pep-list-fig b { font-weight: 700; white-space: nowrap; }
.pep-list-fig span { color: var(--pep-text-3); font-size: 12px; overflow-wrap: anywhere; }

@media (max-width: 599px) {
  .pep-title-h { font-size: 24px; }
  /* Two lines on a phone: the name and the value, then the rest under it. */
  .pep-list-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pep-list-head { display: none; }
  .pep-list-row > .pep-list-fig:nth-child(3),
  .pep-list-row > .pep-list-fig:nth-child(4) { grid-row: 2; justify-items: start; text-align: left; }
  .pep-list-row > .pep-list-fig:nth-child(3) { grid-column: 2; }
  .pep-list-row > .pep-list-fig:nth-child(4) { grid-column: 3; justify-items: end; text-align: right; }
  .pep-list-row > .pep-list-fig:last-child { grid-column: 3; grid-row: 1; }
  /* The second line's figures (a price, a balance) are a size down, so a
     sub-cent price and a seven-digit balance share a phone line whole. */
  .pep-list-row > .pep-list-fig:nth-child(3) b,
  .pep-list-row > .pep-list-fig:nth-child(4) b { font-size: 13px; }
}

/* The unit under a launched token's chart (components/spot/TokenChart.jsx). */
.pep-chart-unit { color: var(--pep-text-3); font-size: 13px; }

/* ------------------------------------------------------------ your ranges
 * The portfolio's Liquidity, read only (round 13): the pair's avatars and
 * name, the fee, the range drawn, the figures. */

.pep-hub-row-usd { margin-left: auto; font-size: 16px; font-weight: 800; }
/* A range against the price (components/RangeBar.jsx): the band white while
 * it earns, grey while idle - never the brand lime, never direction colour. */
.pep-rangebar { display: block; width: 100%; height: 12px; }
.pep-hub-range { display: grid; gap: 4px; }
.pep-rangebar-track { fill: var(--pep-panel-hover); }
.pep-rangebar-band { fill: var(--pep-text-3); }
.pep-rangebar-band.on { fill: var(--pep-text-2); }
.pep-rangebar-now { fill: var(--pep-text); }

/* Words for a screen reader only: an accessible name, or a word a figure
 * draws elsewhere (Messages' "unread"). */
.pep-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------- portfolio
 * fomo's own profile: the account's avatar and address, the balance large
 * with its parts as pills, then Tokens, Liquidity, Staking, Perps, Perp vault
 * and Launches as panels of rows. The names are holdings.css's (the /stake/
 * page still uses that sheet, and the specs find the parts by them); here,
 * under .pep-folio, they are redrawn in the v2 register. */

.pep-folio .pep-sum { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; border: 0; }
.pep-folio .pep-sum-main { display: grid; gap: 4px; }
.pep-folio .pep-sum-label { color: var(--pep-text-2); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.pep-folio .pep-sum-big { font-family: inherit; font-size: 40px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.pep-folio .pep-sum-parts { display: flex; flex-wrap: wrap; gap: 8px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.pep-folio .pep-sum-part { display: grid; gap: 2px; min-width: 120px; padding: 8px 14px; border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); }
.pep-folio .pep-sum-part b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pep-folio .pep-sum-key { color: var(--pep-text-3); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.pep-folio .pep-split { height: 6px; border-radius: var(--pep-radius-pill); background: var(--pep-panel-2); }
.pep-folio .pep-toolbar { margin: 0; }
.pep-folio .pep-toggle { color: var(--pep-text-2); font-size: 13px; }
.pep-folio .pep-toggle input { border-radius: 4px; border-color: var(--pep-line-strong); background: var(--pep-panel-2); }
.pep-folio .pep-toggle input:checked { border-color: var(--pep-text); background: linear-gradient(var(--pep-text), var(--pep-text)) center / 8px 8px no-repeat, var(--pep-panel-2); }
.pep-folio .pep-toggle input:focus-visible { outline-color: var(--pep-brand); }
.pep-folio .pep-sec { display: grid; gap: 12px; margin: 0; }
.pep-folio .pep-sec-head { margin: 0; padding: 0; border: 0; }
.pep-folio .pep-sec-title { font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: 0; }
.pep-folio .pep-sec-sum { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pep-folio .pep-sec-sub { margin: 4px 0 0; color: var(--pep-text-2); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.pep-folio .pep-hub-list { display: grid; gap: 8px; }
/* The range bar keeps the width it had before v2 (hub-wide it is 100%). */
.pep-folio .pep-rangebar { max-width: 420px; }
.pep-folio-pos { display: grid; gap: 10px; padding: 12px; border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); }
.pep-folio .pep-sum-part .pep-faint,
.pep-folio .pep-toolbar .pep-faint { font-size: 12px; }
.pep-folio .pep-toolbar .pep-faint { margin-right: auto; }
/* A button on a card of the same grey as itself would not read as one. */
.pep-folio-pos .pep-btn:not(.pep-btn-primary) { background: var(--pep-panel-hover); }
.pep-folio .pep-money-usd { color: var(--pep-text); font-family: inherit; font-size: 15px; font-weight: 700; }
.pep-folio .pep-money-amt { color: var(--pep-text-3); font-family: inherit; font-size: 12px; }
/* The Perp vault (round 16): each figure at the top of its cell, a note under one never pushing its neighbour down;
   then when it can be withdrawn, and Deposit and Withdraw, on one row while it fits. */
.pep-folio-vault-facts > div { align-content: start; }
.pep-folio-vault-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pep-folio-vault-foot > .pep-sub { margin: 0; color: var(--pep-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pep-folio-vault-foot > .pep-folio-vault-locked { color: var(--pep-text-2); }

@media (max-width: 599px) {
  .pep-folio .pep-sum-big { font-size: 32px; }
  .pep-folio .pep-sum-part { flex: 1 1 calc(50% - 8px); min-width: 0; }
  /* The toggle and Refresh keep one row; when it was read goes under them. */
  .pep-folio .pep-toolbar .pep-toggle { margin-right: auto; }
  .pep-folio .pep-toolbar .pep-faint { order: 3; flex-basis: 100%; margin-right: 0; }
}