/* ------------------------------------------------------------ /watchlist/
 * The markets and tokens one starred, to manage in one place
 * (components/watch/*). After chat.css and hint.css, before sendit.css (the
 * brand layer stays last); built from shell.css's tokens, and on the Tokens
 * page's own pieces (spot.css .pep-tok-find, .pep-tok-sorts) and the position
 * modal's dialog (social.css .pep-modal-back, .pep-modal).
 *
 * Lime is for the primary actions only (the empty state's Browse perps, a
 * chosen pill, the alert form's Set alert); green and red only for a price's
 * direction (pep-dir-*, the flash). A watched star is amber, as everywhere.
 *
 * THE TABLE'S OWN WIDTH picks its layout, not the screen's (a container
 * query on .pep-wl-table): the rail open on a 900 px desktop leaves the
 * table less room than a tablet with no rail. Every column has a real
 * minimum (the longest price, the heads with their arrows), so nothing is
 * ever drawn over its neighbour; when the minimums no longer fit, the
 * layout steps down.
 *   - 936 px and over: one row a line, every column, read across like the
 *     Tokens page; the column heads sort (aria-sort).
 *   - 750 to 935 px: the 24 h volume goes (it is a token's only, and the
 *     cards still show it), Remove is its amber star alone (its name stays
 *     for a screen reader); Added, the default order, stays.
 *   - under 750 px (a phone, a tablet, a small desktop with the rail open):
 *     each row a card, the name and the price on top, the figures labelled
 *     under it, the actions last; the heads go (Sort by and its way round
 *     stay). Nothing scrolls sideways at 320 px. */
.pep-wl { display: grid; gap: 16px; min-width: 0; }
.pep-wl-count { align-self: end; color: var(--pep-text-3); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pep-wl-count-full { color: var(--pep-warn); }
.pep-wl-h2 { margin: 0; font-size: 15px; font-weight: 700; }

/* Add to your watchlist: the search, then its results in the page's flow, each with its star. */
.pep-wl-add { display: grid; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--pep-line); border-radius: var(--pep-radius-sm); background: var(--pep-panel); }
.pep-wl-find { flex: none; width: min(100%, 480px); background: var(--pep-ground); }
.pep-wl-full { margin: 0; color: var(--pep-warn); }
.pep-wl-said:not(:empty) { color: var(--pep-text-3); }
.pep-wl-hits { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pep-wl-hit { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--pep-line); }
.pep-wl-hit:last-child { border-bottom: 0; }
.pep-wl-hit-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: 14px; }
.pep-wl-hit-name b,
.pep-wl-hit-name .pep-faint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Nothing watched yet: the call reads as the page's first panel, above the add search. */
.pep-wl-empty { padding: 18px; }

/* The kind pills (with their counts) and Sort by. */
.pep-wl-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.pep-wl-n { margin-left: 2px; font-variant-numeric: tabular-nums; opacity: 0.75; }
.pep-wl-order { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pep-wl-sortby { display: inline-flex; align-items: center; gap: 8px; color: var(--pep-text-2); font-size: 13px; font-weight: 600; }
.pep-wl-way { gap: 6px; }

/* The table: an ARIA table of grid rows. Each row is a grid of its own, so every column has a fixed width or a
   fraction over a real minimum (never auto): the heads stay over their figures. The minimums: a price as long as
   "$0.000009633" with its flash padding (112), "Change 24h" and "Market cap" with their arrows (84, 80), "Volume
   24h" (76), "Added" with its arrow (64), Trade, Alert and Remove (224). With the gaps and the row's padding that is
   936 px, the container query's step below. */
.pep-wl-table { min-width: 0; container: pep-wl / inline-size; }
.pep-wl-head,
.pep-wl-row {
  display: grid;
  grid-template-columns: minmax(140px, 2.2fr) minmax(112px, 1.2fr) minmax(84px, 1fr) minmax(80px, 0.9fr) minmax(76px, 0.9fr) 52px minmax(64px, 0.7fr) 224px;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
}
.pep-wl-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-wl-num { text-align: right; white-space: nowrap; }
.pep-wl-sort { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.pep-wl-sort:hover { color: var(--pep-text); }
.pep-wl-sort:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: 4px; }
[aria-sort="ascending"] > .pep-wl-sort,
[aria-sort="descending"] > .pep-wl-sort { color: var(--pep-text); }
.pep-wl-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.pep-wl-arrow-none { border-top: 4px solid currentColor; opacity: 0.3; }
.pep-wl-arrow-descending { border-top: 5px solid currentColor; }
.pep-wl-arrow-ascending { border-bottom: 5px solid currentColor; }
/* A row: the name's link covers it (::after), the actions sit above that. */
.pep-wl-row { position: relative; border-bottom: 1px solid var(--pep-line); border-radius: 10px; font-size: 14px; }
.pep-wl-row:hover { background: var(--pep-panel); }
.pep-wl-row:focus-within { background: var(--pep-panel); }
.pep-wl-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pep-wl-names { display: grid; min-width: 0; }
.pep-wl-names b,
.pep-wl-names .pep-faint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pep-wl-names .pep-faint { font-size: 12px; }
.pep-wl-link { color: var(--pep-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pep-wl-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pep-wl-link:hover { color: var(--pep-text); text-decoration: underline; }
.pep-wl-link:focus-visible { outline: none; }
.pep-wl-row:has(.pep-wl-link:focus-visible) { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
.pep-wl-k { display: none; }
.pep-wl-price .pep-tnum { padding: 0 3px; border-radius: 4px; font-weight: 700; }
/* A figure never runs into the next cell: one longer than its column's minimum (a price with more zeros than any seen)
   is cut with an ellipsis inside its own cell, never drawn over the change. */
.pep-wl-price .pep-tnum,
.pep-wl-chg .pep-tnum,
.pep-wl-cap .pep-tnum,
.pep-wl-vol .pep-tnum { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* A token under a day old: its change is since launch, said under the figure, on a card too. */
.pep-wl-since { display: block; font-size: 11px; line-height: 1.2; }
.pep-wl-none { color: var(--pep-text-3); }
.pep-wl-bell { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border: 1px solid var(--pep-line); border-radius: var(--pep-radius-pill); color: var(--pep-text-2); font-size: 12px; font-weight: 700; }
.pep-wl-added { color: var(--pep-text-2); font-size: 13px; }
.pep-wl-do { position: relative; z-index: 1; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; }
.pep-wl-do .pep-write { display: inline-flex; }
.pep-wl-alert { white-space: nowrap; }
.pep-wl-off .pep-btn { gap: 6px; color: var(--pep-warn); }
.pep-wl-off .pep-star { fill: currentColor; }
/* A narrower table (750 to 935 px: a laptop with the rail open): the volume goes, Remove is its star; the minimums are
   the wide table's, the name's 124 and Trade, Alert and the star's 168, so 748 px in all. Added, the default order,
   keeps its column and its arrow. */
@container pep-wl (min-width: 750px) and (max-width: 935px) {
  .pep-wl-head,
  .pep-wl-row { grid-template-columns: minmax(124px, 2fr) minmax(112px, 1.2fr) minmax(84px, 1fr) minmax(80px, 0.9fr) 48px minmax(56px, 0.7fr) 168px; gap: 10px; }
  .pep-wl-head > :nth-child(5),
  .pep-wl-vol { display: none; }
  /* The word is out of sight, not out of the name: the button is still "Remove <name> from your watchlist". */
  .pep-wl-off-word { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .pep-wl-off .pep-btn { padding: 0 10px; }
}

/* The Alerts page's way here, under its form (AlertsPanel.jsx), where the watchlist used to be drawn. */
.pep-alerts-watch { display: grid; gap: 2px; margin: 0; font-size: 13px; }
.pep-alerts-watch .pep-link { font-weight: 700; }

/* The bell's panel's two ways out (NotifyPanel.jsx): Alerts and settings, and Watchlist. */
.pep-notes-links { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; }

/* The alert dialog: the modal's, narrower. */
.pep-wl-dialog { width: min(460px, 100%); }
.pep-wl-dialog-sub { margin: 0; font-size: 13px; }

@media (max-width: 720px) {
  .pep-wl-add { padding: 12px; }
  .pep-wl-find { width: 100%; }
}

@container pep-wl (max-width: 749px) {
  .pep-wl-headgroup { display: none; }
  /* A card: the name, the price and the day's change on the first line; the other figures, labelled, on the next
     (wrapping as the width needs); the actions last. The row's own ::after is the line break. */
  .pep-wl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 6px; border-radius: 0; }
  .pep-wl-row::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
  .pep-wl-name { order: 0; flex: 1 1 0; }
  .pep-wl-price,
  .pep-wl-chg { order: 0; flex: none; }
  .pep-wl-cap,
  .pep-wl-vol,
  .pep-wl-alerts,
  .pep-wl-added { order: 2; flex: none; text-align: left; font-size: 12px; }
  .pep-wl-k { display: inline; color: var(--pep-text-3); }
  .pep-wl-price .pep-wl-k,
  .pep-wl-chg .pep-wl-k { display: none; }
  .pep-wl-none { display: none; }
  .pep-wl-do { order: 3; flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; }
}

/* A wider card (520 to 749 px: a tablet, a small desktop with the rail open): the actions sit at the end of the
   figures' line, to the right, instead of a line of their own; they wrap under them when the figures are long. */
@container pep-wl (min-width: 520px) and (max-width: 749px) {
  .pep-wl-do { order: 2; flex: 1 0 auto; justify-content: flex-end; flex-wrap: nowrap; }
}

/* The top bar's star to this page (WatchLink.jsx): where the bar is tight (under 1100 px) the search keeps its room,
   and the account menu (and a phone's More) carries the way here. */
@media (max-width: 1099px) {
  .pep-watch-link { display: none; }
}