/* SENDIT v2's spot screens: Home, a launched token's page, the launch form (its own sheet now: launch.css),
 * the pools hub and the portfolio's launches. Built only from shell.css's
 * tokens and components. Direction colour (--pep-up / --pep-down) is Buy and
 * Sell, up and down, and nothing else; the brand lime appears nowhere here. */

/* ---------------------------------------------------------------- avatars */

.pep-avatar-img { object-fit: cover; background: var(--pep-panel-2); }

/* ------------------------------------------------------------------- home */

.pep-home-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.pep-home-h { margin: 0 0 6px; font-size: 32px; font-weight: 800; letter-spacing: -0.01em; }
.pep-home-hero .pep-sub { margin: 0; max-width: 60ch; }
.pep-home-do { display: flex; flex-wrap: wrap; gap: 8px; }
.pep-home-sec { display: grid; gap: 10px; margin: 0 0 24px; min-width: 0; }
.pep-home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pep-home-title { margin: 0; font-size: 18px; font-weight: 800; }

.pep-tcard {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: var(--pep-radius);
  background: var(--pep-panel);
  color: var(--pep-text);
  text-decoration: none;
}
.pep-tcard:hover { background: var(--pep-panel-hover); }
.pep-tcard:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-tcard-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pep-tcard-name { display: flex; flex: 1; flex-direction: column; min-width: 0; font-size: 13px; }
.pep-tcard-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pep-tcard-age { font-size: 12px; }
.pep-tcard-cap { font-size: var(--pep-num-lg); font-weight: 800; }
/* A long price ("$0.000009043") beside a change since launch is wider than a
   210 px card: the change wraps under the price, kept right, rather than the
   two running into each other. */
.pep-tcard-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 13px; }
.pep-tcard-row > :last-child { margin-left: auto; }
/* A change and the window it is over ("24h", "since launch"): the figure in
 * direction colour, the window faint, kept on one line. */
.pep-chg { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }

.pep-side-filters { display: flex; gap: 6px; margin: 0 0 8px; }

/* ------------------------------------------------------------- token page */

.pep-token { display: grid; gap: 16px; min-width: 0; }
/* A grid item is as wide as its content unless told otherwise: the stat
   pills scroll inside their own row on a phone, never the page. */
.pep-token > * { min-width: 0; }
.pep-token .pep-with-aside-main { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pep-token .pep-with-aside-side { display: grid; gap: 16px; align-content: start; }
.pep-token-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
/* The title asks for 12rem before it shrinks, so on a phone the price wraps
   under a long name instead of squeezing it to a few letters a line. */
.pep-token-title { flex: 1 1 12rem; min-width: 0; }
.pep-token-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.pep-token-title p { margin: 2px 0 0; font-size: 13px; }
.pep-token-copy { font-size: 13px; }
/* The price and the headline change (24 h, or since launch) at the head's end. */
.pep-token-quote { display: grid; justify-items: end; gap: 2px; font-size: 13px; }
.pep-token-quote > b { font-size: var(--pep-num-lg); font-weight: 800; }
/* Holders beside swaps only where both tables fit; stacked otherwise. */
.pep-token-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; min-width: 0; }
.pep-chart-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pep-chart-mode { flex: none; }
.pep-chart-mode > button { flex: none; padding: 0 12px; white-space: nowrap; }
.pep-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pep-panel-head .pep-panel-title { margin: 0; }

/* The holders and the swaps (sub-project 4a): 3c's list (dex.css .pep-list)
 * drawn as a table, so a screen reader still hears each figure's column.
 * Plain-case heads in the faint grey, figures in the page's face with
 * tabular digits, each row a rounded hover. The trader column takes the room
 * left and ellipses; a figure is never broken. A phone gets each row as two
 * or three lines, every figure under its own label (data-label). */
.pep-holders, .pep-swaps { min-width: 0; }
.pep-tlist { width: 100%; border-collapse: separate; border-spacing: 0 2px; font-size: 14px; font-variant-numeric: tabular-nums; }
.pep-tlist th { padding: 0 8px 6px; color: var(--pep-text-3); font-size: 12px; font-weight: 400; text-align: left; white-space: nowrap; }
.pep-tlist td { padding: 10px 8px; vertical-align: middle; }
.pep-tlist td:first-child { width: 100%; max-width: 0; border-radius: var(--pep-radius-sm) 0 0 var(--pep-radius-sm); }
.pep-tlist td:last-child { border-radius: 0 var(--pep-radius-sm) var(--pep-radius-sm) 0; }
.pep-tlist tbody tr:hover td { background: var(--pep-panel-2); }
.pep-tlist .pep-trader { max-width: 100%; }
.pep-tlist .pep-tlist-fig { text-align: right; white-space: nowrap; }
.pep-tlist-fig b { display: block; font-weight: 700; }
.pep-tlist-sub { display: block; color: var(--pep-text-3); font-size: 12px; }
.pep-tlist-pct { display: block; font-size: 12px; font-weight: 600; }
.pep-tlist-note { display: block; min-width: 150px; max-width: 190px; margin-left: auto; color: var(--pep-text-3); font-size: 12px; line-height: 1.3; white-space: normal; }
.pep-tlist-who { display: grid; gap: 4px; min-width: 0; }
.pep-tlist-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; }
.pep-holder-team td { background: var(--pep-panel-2); }

@media (max-width: 599px) {
  .pep-tlist thead { display: none; }
  .pep-tlist, .pep-tlist tbody { display: grid; gap: 2px; }
  .pep-tlist tr { display: grid; align-items: start; gap: 8px 12px; padding: 10px 8px; border-radius: var(--pep-radius-sm); }
  .pep-tlist td, .pep-tlist td:first-child, .pep-tlist td:last-child { width: auto; max-width: none; min-width: 0; padding: 0; border-radius: 0; background: transparent; }
  .pep-tlist tbody tr:hover, .pep-tlist tr.pep-holder-team { background: var(--pep-panel-2); }
  .pep-tlist tbody tr:hover td { background: transparent; }
  .pep-tlist td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--pep-text-3); font-size: 12px; font-weight: 400; }
  .pep-tlist td:first-child::before { display: none; }
  .pep-tlist-note { min-width: 0; max-width: none; margin-left: 0; }
  /* Holders: who and the position, then the PnL (in the wide column, room
     for its reason), the entry and the share. */
  .pep-tlist-holders tr { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pep-tlist-holders td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .pep-tlist-holders td:nth-child(2) { grid-column: 3; grid-row: 1; }
  /* The Position label is not drawn on a phone (the figure sits beside the
     name) but it is still said: visually hidden, never display: none, so a
     screen reader, which has no column heads here, hears it. */
  .pep-tlist-holders td:nth-child(2)::before,
  .pep-tlist-swaps td:nth-child(2)::before, .pep-tlist-swaps td:nth-child(3)::before {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pep-tlist td { position: relative; }
  .pep-tlist-holders td:nth-child(3) { grid-column: 1; grid-row: 2; text-align: left; }
  .pep-tlist-holders td:nth-child(4) { grid-column: 2; grid-row: 2; }
  .pep-tlist-holders td:nth-child(5) { grid-column: 3; grid-row: 2; }
  /* Swaps: who and the dollars, then the side, the market cap and when. */
  .pep-tlist-swaps tr { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pep-tlist-swaps td:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .pep-tlist-swaps td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .pep-tlist-swaps td:nth-child(3) { grid-column: 3; grid-row: 1; }
  .pep-tlist-swaps td:nth-child(4) { grid-column: 2; grid-row: 2; }
  .pep-tlist-swaps td:nth-child(5) { grid-column: 3; grid-row: 2; }
}
.pep-side-buy { color: var(--pep-up); }
.pep-side-sell { color: var(--pep-down); }

.pep-about { display: grid; gap: 12px; }
/* A description may carry bidi overrides: isolated, with dir="auto" on it. */
.pep-about-text {
  margin: 0;
  color: var(--pep-text-2);
  font-size: 14px;
  overflow-wrap: anywhere;
  white-space: pre-line;
  unicode-bidi: isolate;
}
.pep-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pep-tile {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 8px 4px;
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2);
  font-size: 12px;
}
.pep-paired { display: grid; gap: 4px; }
.pep-paired-labels { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.pep-paired-bar { display: block; width: 100%; height: 6px; }
.pep-paired-a { fill: var(--pep-up); }
.pep-paired-b { fill: var(--pep-down); }
.pep-paired-bar.is-empty .pep-paired-a,
.pep-paired-bar.is-empty .pep-paired-b { fill: var(--pep-line-strong); }
.pep-about-fees { display: grid; gap: 8px; }
.pep-about-fee { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; }
.pep-about-fee .pep-stack { text-align: right; }

.pep-token-stale { margin: 0; font-size: 12px; }

/* The trade panel (components/spot/TradePanel.jsx) and your position under it. */
.pep-tradepanel { display: grid; gap: 12px; }
.pep-tradepanel p { margin: 0; font-size: 13px; }
.pep-trade-quote { color: var(--pep-text); }
.pep-trade-note { font-size: 12px; }
.pep-trade-stop { font-weight: 700; }
.pep-trade-avail { color: var(--pep-text-3); }
.pep-trade-slip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.pep-mine p { margin: 0; }

/* Slide to confirm: a native range styled as a track. Phones only; a
   pointer and a keyboard on a wider screen get the plain button. */
.pep-slide { position: relative; display: none; }
.pep-slide-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 56px;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  pointer-events: none;
}
.pep-slide input[type="range"] {
  display: block;
  width: 100%;
  height: 52px;
  margin: 0;
  border-radius: 12px;
  background: var(--pep-panel-2);
  appearance: none;
  -webkit-appearance: none;
}
.pep-slide input[type="range"]::-webkit-slider-thumb {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--pep-up);
  -webkit-appearance: none;
}
.pep-slide input[type="range"]::-moz-range-thumb {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--pep-up);
}
.pep-slide-buy input[type="range"]::-webkit-slider-thumb { background: var(--pep-up); }
.pep-slide-buy input[type="range"]::-moz-range-thumb { background: var(--pep-up); }
.pep-slide-sell input[type="range"]::-webkit-slider-thumb { background: var(--pep-down); }
.pep-slide-sell input[type="range"]::-moz-range-thumb { background: var(--pep-down); }
.pep-slide input[type="range"]:disabled { opacity: 0.45; }
.pep-slide input[type="range"]:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
/* The one-tap way on a phone (WCAG 2.5.7): a wider screen has the button already. */
.pep-trade-plain { display: none; justify-self: center; }
/* The Top 10 pill's note, printed: a title never shows on a touch screen. */
.pep-pill-note { font-size: 11px; color: var(--pep-text-3); }

@media (max-width: 599px) {
  .pep-tiles { grid-template-columns: repeat(2, 1fr); }
  .pep-token-quote { justify-items: start; }
  /* The trade comes first on a phone, and a slide stands in for the button. */
  .pep-token .pep-with-aside { display: flex; flex-direction: column; }
  .pep-token .pep-with-aside-side { order: -1; position: static; }
  .pep-trade-send { display: none; }
  .pep-slide { display: block; }
  .pep-trade-plain { display: inline-flex; }
  .pep-tradepanel.is-plain .pep-trade-send { display: flex; }
  .pep-tradepanel.is-plain .pep-slide { display: none; }
}

/* ------------------------------------- your ranges (the portfolio, read only) */

.pep-hub-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pep-hub-row { display: grid; gap: 10px; min-width: 0; }
.pep-hub-row p { margin: 0; }
.pep-hub-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pep-hub-row-do { display: flex; flex-wrap: wrap; gap: 8px; }

/* -------------------------------------------------------------- portfolio */

/* The perp book is a part of the one dollar balance (3b, Task 19): its key
   and its segment of the strip, in a neutral grey between Liquidity's and
   Staking's (holdings.css; red and green are direction only). */
.pep-sum-key-perps::before,
.pep-sum-key-vault::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--pickle-radius-xs);
  background: var(--pep-text-3);
}
.pep-split-perps { fill: var(--pep-text-3); }
/* The perp vault, its own part since round 16 (the pLP, counted once). */
.pep-sum-key-vault::before { background: var(--pep-text-2); }
.pep-split-vault { fill: var(--pep-text-2); }

/* The parts with perps (Tokens, Liquidity, Staking, Perps, Perp vault, Fees
   waiting) as a grid outside the portfolio's flex row (dex.css .pep-folio). */
.pep-sum-parts-perps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pep-sum-parts-perps > :last-child { grid-column: span 2; }
@media (max-width: 720px) {
  .pep-sum-parts-perps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pep-sum-parts-perps > :last-child { grid-column: 1 / -1; }
}

/* Launches: what a launch has paid its creator, and what it owes now. */
.pep-folio-paid,
.pep-folio-owed { min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ /tokens/
 * Every launch in one list (pages/tokens.jsx): the four orders and the search
 * above, then numbered rows that read across like Home's trending rows
 * (sendit.css .pep-trend-row), each row the token's link. On a phone a row is
 * two lines - name and market cap, then price and change - and the volume and
 * the age are left to the token's page. */
.pep-tokens { display: grid; gap: 16px; min-width: 0; }
.pep-tok-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pep-tok-sorts { display: flex; flex-wrap: wrap; gap: 8px; }
.pep-tok-find {
  display: flex;
  flex: 0 1 320px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--pep-line);
  border-radius: 999px;
  background: var(--pep-panel);
  color: var(--pep-text-3);
}
.pep-tok-find:focus-within { border-color: var(--pep-brand); }
.pep-tok-find-icon { flex: none; }
.pep-tok-find-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--pep-text); font: inherit; }
.pep-tok-find-input:focus { outline: none; }
.pep-tok-count { margin: 0; }
/* The column names and the rows, one block: the page's gap never falls between them. */
.pep-tok-table { min-width: 0; }
.pep-tok-head,
.pep-tok-row {
  display: grid;
  grid-template-columns: 34px 28px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.5fr);
  align-items: center;
  gap: 14px;
  padding: 12px 8px;
}
.pep-tok-head { padding-top: 0; padding-bottom: 8px; border-bottom: 1px solid var(--pep-line); color: var(--pep-text-3); font-size: 12px; font-weight: 700; }
.pep-tok-head > span:nth-child(n+4) { text-align: right; }
.pep-tok-list { margin: 0; padding: 0; list-style: none; }
.pep-tok-list li { border-bottom: 1px solid var(--pep-line); }
.pep-tok-row { border-radius: 10px; color: var(--pep-text); font-size: 14px; text-decoration: none; }
.pep-tok-row:hover { background: var(--pep-panel); color: var(--pep-text); }
.pep-tok-row:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
.pep-tok-n { color: var(--pep-sage); font-weight: 700; }
.pep-tok-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pep-tok-name b,
.pep-tok-name .pep-faint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pep-tok-price,
.pep-tok-chg,
.pep-tok-cap,
.pep-tok-vol,
.pep-tok-age { text-align: right; white-space: nowrap; }
@media (max-width: 720px) {
  .pep-tok-find { flex: 1 1 100%; }
  .pep-tok-head { display: none; }
  .pep-tok-row {
    grid-template-columns: 22px 28px minmax(0, 1fr) auto;
    grid-template-areas: "n avatar name cap" "n avatar price chg";
    gap: 2px 10px;
  }
  .pep-tok-n { grid-area: n; }
  .pep-tok-row > .pep-avatar { grid-area: avatar; }
  .pep-tok-name { grid-area: name; }
  .pep-tok-cap { grid-area: cap; }
  .pep-tok-price { grid-area: price; text-align: left; color: var(--pep-text-2); font-size: 13px; }
  .pep-tok-chg { grid-area: chg; font-size: 13px; }
  .pep-tok-vol,
  .pep-tok-age { display: none; }
}

/* Under a launched token's chart tools: the chart is in ETH, and says why (components/spot/TokenChart.jsx). */
.pep-chart-unit { margin: -4px 0 0; color: var(--pep-text-3); font-size: 12px; }