/* SENDIT v2's social layer (sub-project 4): traders' names, profiles, follow.
 *
 * Built only from shell.css's --pep-* tokens and loaded after dex.css. The
 * brand lime appears in focus outlines and nowhere else; green and red
 * (pep-dir-*, shell.css) mean direction only. A look-alike warning is amber
 * with its words, never colour alone. No mono face and no capitals: the
 * positions are 3c's list (dex.css .pep-list), with plain-case heads.
 */

/* --------------------------------------------------------------- a trader */

.pep-trader { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--pep-text); text-decoration: none; }
/* shared-ui/base.css's a:hover (SENDIT's lime) outranks .pep-trader: a
   name stays white when hovered, beside a PnL whose red means down. */
a.pep-trader:hover { color: var(--pep-text); }
a.pep-trader:hover .pep-trader-primary { text-decoration: underline; }
a.pep-trader:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: var(--pep-radius-sm); }
.pep-trader-text { display: grid; min-width: 0; line-height: 1.25; }
.pep-trader-primary { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pep-trader-address { color: var(--pep-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.pep-trader-warn { margin: 0; color: var(--pep-warn); font-size: 12px; font-weight: 600; }
/* In the top bar's search, a look-alike's warning runs under its name. */
.pep-search-warn { grid-column: 2 / -1; }

/* ------------------------------------------------ the top bar's profile link */

/* The social session, where it can be ended: the top bar and one's own profile. */
.pep-social { display: inline-flex; align-items: center; gap: 8px; }
.pep-social-state { color: var(--pep-text-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
/* The session is another account's than the wallet's: said in words, in
   amber, on two short lines rather than one that pushes the bar wide. */
.pep-social-other .pep-social-state { max-width: 170px; color: var(--pep-warn); font-size: 12px; line-height: 1.25; white-space: normal; }
/* A Sign in again the wallet refused: its words, beside the buttons. */
.pep-social-problem { max-width: 220px; color: var(--pep-text-2); font-size: 12px; line-height: 1.25; }

/* ----------------------------------------------------------------- follow */

.pep-follow { display: inline-grid; justify-items: end; gap: 4px; max-width: 280px; }
.pep-follow-note { color: var(--pep-text-2); font-size: 12px; text-align: right; }
.pep-follow-again { font-size: 12px; }

/* ---------------------------------------------------------------- profile */

.pep-prof { display: grid; gap: 16px; min-width: 0; }
.pep-prof-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--pep-radius);
  background: var(--pep-panel);
}
/* The profile's own face, large: the brand film's identity card. */
.pep-prof-head .pep-face-lg { width: 72px; height: 72px; }
.pep-prof-who { display: grid; gap: 4px; min-width: 0; }
.pep-prof-name { margin: 0; overflow: hidden; font-size: 26px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.pep-prof-address { margin: 0; color: var(--pep-text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
/* A copy the browser refused: the whole address, to select by hand, wrapping on a phone. */
.pep-prof-copyfail { display: block; overflow-wrap: anywhere; color: var(--pep-text-2); font-size: 12px; }
.pep-prof-line { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.pep-prof-counts { display: flex; gap: 20px; margin: 0; }
.pep-prof-counts div { display: grid; justify-items: center; }
.pep-prof-counts dt { order: 2; color: var(--pep-text-3); font-size: 12px; }
.pep-prof-counts dd { order: 1; margin: 0; font-size: var(--pep-num-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.pep-prof-do { display: flex; justify-content: flex-end; }
.pep-prof-pills { flex-wrap: wrap; }
.pep-prof-pills .pep-pill { flex: 1 1 150px; }
/* Why a realised figure is "$ -", in words under it. */
.pep-prof-pills .pep-pill-note { max-width: 240px; line-height: 1.3; }
.pep-prof-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pep-prof-positions, .pep-prof-follows { display: grid; gap: 12px; min-width: 0; }
.pep-prof-seg { min-width: 200px; }
.pep-prof-pct { font-size: 12px; font-weight: 600; }
.pep-prof-note { max-width: 220px; white-space: normal; }
.pep-prof-perps { margin-top: 12px; }
.pep-prof-people { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }

@media (max-width: 899px) {
  .pep-prof-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The mismatch banner (SocialSession.jsx SessionBanner, drawn by Layout
   above the page). It is in the page's flow, so it pushes the page down and
   covers nothing - never laid over the page from the sticky bar. */
/* SENDIT's bar keeps no session (the account's face holds it, AccountMenu.jsx), so the banner above the page
   is the mismatch's one copy at every width: never a second Sign in again on the profile (4b Task 4 R2-M4). */
.pep-prof-do .pep-social.pep-social-other { display: none; }
/* Its look is the site's banner (dex.css, .pep-callout), amber. */
.pep-social.pep-social-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 12px 12px 0;
}
.pep-social-banner .pep-social-state { flex: 1 1 100%; max-width: none; }

@media (max-width: 599px) {
  /* No room in a phone's top bar: the session and its Sign out stay on one's
     own profile, one tap away through the avatar. */
  .pep-topbar .pep-social { display: none; }
  /* With no wallet account there is no avatar to reach the profile by: the
     session's Sign out stays in the bar, in its place. */
  .pep-topbar .pep-social-bare { display: inline-flex; }
  .pep-topbar .pep-social-bare .pep-social-state { display: none; }
  .pep-prof-head { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .pep-prof-counts, .pep-prof-do { grid-column: 1 / -1; }
  .pep-prof-counts { justify-content: space-between; }
  .pep-prof-do, .pep-follow { justify-content: stretch; justify-items: stretch; max-width: none; }
  .pep-follow { flex: 1 1 auto; }
  .pep-follow .pep-btn { width: 100%; }
  .pep-follow-note { text-align: left; }
  .pep-prof-name { font-size: 22px; }
  .pep-prof-seg { min-width: 0; }
}

/* ------------------------------------------------ the feed (sub-project 4b)
 * fomo's rows: who, a Buy / Sell badge in the direction colours, the token
 * and the dollars at their market cap, the PnL; "X is up $Y" with its card.
 * Neutral panels; green and red only for a direction or a PnL's sign. */

.pep-feed { display: grid; gap: 8px; min-width: 0; }
.pep-feed-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pep-feed-item { display: grid; gap: 6px; min-width: 0; padding: 12px 8px; border-bottom: 1px solid var(--pep-line); }
.pep-feed-item:last-child { border-bottom: 0; }
.pep-feed-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; min-width: 0; }
.pep-feed-head .pep-trader { flex: 0 1 auto; }
.pep-feed-up { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pep-feed-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--pep-radius-pill);
  background: var(--pep-panel-2);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pep-feed-ago { margin-left: auto; color: var(--pep-text-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pep-feed-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-left: 30px;
  padding: 10px 12px;
  border: 1px solid var(--pep-line);
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2);
}
.pep-feed-subject { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--pep-text); text-decoration: none; }
.pep-feed-subject b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* shared-ui/base.css's a:hover outranks the colour above: it stays white. */
a.pep-feed-subject:hover { color: var(--pep-text); }
a.pep-feed-subject:hover b { text-decoration: underline; }
a.pep-feed-subject:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: var(--pep-radius-sm); }
.pep-feed-fig { display: grid; justify-items: end; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pep-feed-fig span { font-size: 12px; font-weight: 600; }
.pep-feed-pnl { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pep-feed-note { margin: 0; padding-left: 30px; color: var(--pep-text-2); font-size: 12px; }
.pep-feed > .pep-feed-note { padding-left: 0; }
.pep-feed-quiet { margin: 0; padding: 12px 8px; }
/* An empty feed with what to do next (FeedList emptyAction): the button under the sentence, on its left edge. */
.pep-feed-blank { display: grid; justify-items: start; gap: 4px; padding-bottom: 12px; }
.pep-feed-blank > .pep-btn { margin-left: 8px; }
.pep-feed-more { justify-self: center; }
/* The rail is 300 px: the card's figures go under the token, and rows keep no indent. */
.pep-feed-compact .pep-feed-item { padding: 8px 4px; }
.pep-feed-compact .pep-feed-note { padding-left: 0; }
.pep-feed-compact .pep-feed-card { grid-template-columns: minmax(0, 1fr) auto; margin-left: 0; }

/* A new row fades in where it lands (never for a visitor who asked for less motion). */
@media (prefers-reduced-motion: no-preference) {
  .pep-feed-item { animation: pep-feed-in 320ms ease-out both; }
  @keyframes pep-feed-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

.pep-feed-page { display: grid; gap: 14px; min-width: 0; }
.pep-feed-top { display: grid; gap: 4px; }
.pep-feed-top .pep-sub { margin: 0; }
/* A page's safety line under its subtitle (Your copies: SENDIT never trades for you). */
.pep-feed-top .pep-faint { margin: 0; font-size: 13px; }
.pep-feed-title { margin: 0; font-size: 26px; font-weight: 800; }
.pep-feed-tabs { max-width: 420px; }

/* ------------------------------------------------------- the leaderboard */

.pep-board { display: grid; gap: 10px; min-width: 0; }
.pep-board-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pep-board-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--pep-line);
}
.pep-board-row:last-child { border-bottom: 0; }
.pep-board-row-me { background: var(--pep-panel-2); }
.pep-board-rank { color: var(--pep-text-2); font-size: 13px; font-weight: 700; text-align: right; }
/* The podium: the top three by a realised gain (PnL sort), in full white, a size up. */
.pep-board-row-podium .pep-board-rank { color: var(--pep-text); font-size: 15px; font-weight: 800; }
.pep-board-fig { display: grid; justify-items: end; white-space: nowrap; }
.pep-board-fig span { color: var(--pep-text-3); font-size: 12px; }
.pep-board-note { margin: 0; color: var(--pep-text-2); font-size: 12px; }
/* A side being recounted: amber, with its words, above the rows. This note was the model for every banner on the
   site (round 10): its look now lives in dex.css, .pep-callout, and it keeps only its place here. */
.pep-board-recount { margin: 0; }
.pep-board-rules { margin: 0; color: var(--pep-text-3); font-size: 12px; line-height: 1.45; }

/* ------------------------------------------------ follow top traders */

/* ------------------------------------------------ the rail's Feed tab
 * Round 24: the Clan chip's shield (components/shell/Icon.jsx) at the chip's word size. */

.pep-chip .pep-chip-ico { width: 14px; height: 14px; }

/* ------------------------------------------------ the trades on a chart
 * The toggles, the legend and the list are neutral: on the chart green and
 * red say buy or long and sell or short, never whose trade it is (the
 * shape does: an arrow is yours, a circle followed, a square anybody's). */

.pep-overlays { display: grid; gap: 8px; min-width: 0; margin-top: 10px; }
/* Round 13: the head row folds the rest to itself (folded is one compact row) and holds Show trades, which works folded. */
.pep-overlays-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-width: 0; }
.pep-overlays-fold, .pep-overlays-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: var(--pep-text);
  font-size: 13px;
  font-weight: 700;
}
.pep-overlays-fold {
  margin: 0 0 0 -6px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: var(--pep-radius-sm);
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.pep-overlays-fold:hover { background: var(--pep-panel-hover); }
.pep-overlays-fold:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-overlays-chev { flex: none; width: 12px; height: 12px; color: var(--pep-text-2); transform: rotate(-90deg); }
.pep-overlays-fold[aria-expanded="true"] .pep-overlays-chev { transform: none; }
.pep-overlays-count { color: var(--pep-text-3); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pep-overlays-body { display: grid; gap: 8px; min-width: 0; }
.pep-overlays-body[hidden] { display: none; }
/* Unfolding eases the section in; folding is at once. Never for a visitor who asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .pep-overlays-chev { transition: transform 0.15s ease; }
  .pep-overlays-body { animation: pep-overlays-in 200ms ease-out both; }
  @keyframes pep-overlays-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
.pep-overlays-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pep-overlays-toggles { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--pep-text-2); font-size: 13px; }
.pep-overlays-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; cursor: pointer; }
.pep-overlays-toggle:has(input:disabled) { color: var(--pep-text-3); cursor: default; }
.pep-overlays-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--pep-text); }
.pep-overlays-toggle input:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-overlays-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; color: var(--pep-text-3); font-size: 12px; list-style: none; }
.pep-overlays-legend li { display: inline-flex; align-items: center; gap: 5px; }
.pep-overlays-key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--pep-panel-2); box-shadow: 0 0 0 2px var(--pep-line-strong); }
.pep-overlays-note { margin: 0; color: var(--pep-text-2); font-size: 12px; line-height: 1.4; }
.pep-overlays-status { margin: 0; color: var(--pep-text-3); font-size: 12px; }
.pep-overlays-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pep-overlays-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--pep-line);
  font-size: 13px;
}
.pep-overlays-what { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* A trader's address gives way before the badge beside it, never runs under it (a 320 px phone, round 5 fix 2). */
.pep-overlays-row .pep-trader-address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pep-overlays-what .pep-feed-ago { min-width: 52px; margin-left: 0; text-align: right; }
/* Under 900 px /perps/ fixes a Long / Short bar over the tab bar: a trader
   focused in the list scrolls clear of both (perps.css .pep-ticket-bar). */
@media (max-width: 899px) {
  .pep-trade .pep-overlays-list a { scroll-margin-bottom: calc(var(--pep-tabbar-h) + env(safe-area-inset-bottom) + 72px); }
}

/* ------------------------------------------------ the profile's trades */

.pep-prof-trades { display: grid; gap: 4px; min-width: 0; }
.pep-prof-trades .pep-panel-title { margin: 0; }

@media (max-width: 599px) {
  .pep-feed-ago { margin-left: 0; }
  .pep-feed-note { padding-left: 0; }
  .pep-feed-card { margin-left: 0; grid-template-columns: minmax(0, 1fr) auto; }
}

/* The chart's status line stays mounted, empty, so its words are announced when they come (Task 6 M3). */
.pep-overlays-status-quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------- a token's feed */

/* The token page's own feed (/t/, TokenFeed.jsx), under the chart. "Live" is
 * neutral: green and red on this page mean direction only. */
/* Round 22: a panel folded to its head row (components/social/PanelFold.jsx: a token's feed, a market's chat), in
   the look of the trades under a chart (.pep-overlays-fold): a button in the heading, a chevron, the title. */
.pep-pfold-title { min-width: 0; }
.pep-pfold-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: 0 0 0 -6px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: var(--pep-radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.pep-pfold-btn:hover { background: var(--pep-panel-hover); }
.pep-pfold-btn:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-pfold-chev { flex: none; width: 12px; height: 12px; color: var(--pep-text-2); transform: rotate(-90deg); }
.pep-pfold-btn[aria-expanded="true"] .pep-pfold-chev { transform: none; }
.pep-pfold-body { display: grid; gap: 4px; min-width: 0; }
.pep-pfold-body[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .pep-pfold-chev { transition: transform 0.15s ease; }
  .pep-pfold-body { animation: pep-overlays-in 200ms ease-out both; }
}
.pep-token-feed { display: grid; gap: 4px; min-width: 0; }
.pep-token-feed .pep-panel-head { margin-bottom: 0; }
.pep-token-feed-sub { margin: 0 0 4px; font-size: 13px; }
.pep-feed-live {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px;
  border: 1px solid var(--pep-line-strong); border-radius: var(--pep-radius-pill);
  color: var(--pep-text-2); font-size: 12px; font-weight: 600;
}
.pep-feed-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pep-text-3);
}
.pep-feed-live-on { color: var(--pep-text); }
.pep-feed-live-on::before { background: var(--pep-text); }
@media (prefers-reduced-motion: no-preference) {
  .pep-feed-live-on::before { animation: pep-feed-beat 1.8s ease-out infinite; }
  @keyframes pep-feed-beat {
    0% { box-shadow: 0 0 0 0 rgb(243 244 248 / 45%); }
    70%, 100% { box-shadow: 0 0 0 6px rgb(243 244 248 / 0%); }
  }
  /* A row that lands here glows once as it arrives. */
  .pep-token-feed .pep-feed-item { animation: pep-feed-in 320ms ease-out both, pep-feed-glow 1.6s ease-out both; }
  @keyframes pep-feed-glow { from { background: var(--pep-panel-hover); } to { background: transparent; } }
}

/* ------------------------------------------------ theses (sub-project 4c)
 * A thesis is text only: its words sit in an isolated box that takes its own
 * direction (dir="auto" on the element, unicode-bidi: isolate here), so a
 * right-to-left script never reorders the row around it; line breaks show
 * as typed (pre-line) and a long word or URL wraps rather than widens the
 * page. Neutral panels; green and red only for a trade's direction or a
 * PnL's sign; the brand lime only in focus rings. */

.pep-thesis { display: grid; gap: 8px; min-width: 0; }
.pep-thesis-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.pep-thesis-head .pep-trader { flex: 0 1 auto; }
.pep-thesis-body {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-line;
  unicode-bidi: isolate;
}
.pep-thesis-compact .pep-thesis-body {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.pep-thesis-counts { margin: 0; font-size: 12px; }
.pep-thesis-hidden { margin: 0; color: var(--pep-warn); font-size: 12px; font-weight: 600; }
.pep-thesis-do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pep-thesis-gone { margin: 0; font-size: 13px; }
.pep-thesis-list { display: grid; gap: 10px; min-width: 0; }
.pep-thesis-list .pep-panel-head { margin-bottom: 0; }
.pep-thesis-advice { margin: 0; font-size: 12px; line-height: 1.4; }
.pep-thesis-rows { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
/* Round 17: each thesis is a post, its own padding inside (.pep-thesis-post), a clear rule between two. */
.pep-thesis-rows > li { padding: 0; border-bottom: 1px solid var(--pep-line-strong); }
.pep-thesis-rows > li:last-child { border-bottom: 0; }
.pep-thesis-pinned { display: grid; gap: 0; padding: 0; border: 1px solid var(--pep-line-strong); border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); }
.pep-thesis-pin { margin: 0; padding: 12px 18px 0; color: var(--pep-text-2); font-size: 12px; font-weight: 700; }

/* ------------------------------------------------ a trade as one strip (round 16)
 * The owner's screenshot: under a post's words, the trade as one strip the
 * post's whole width - its market or token and the trade's badge on the
 * left, then its figures in columns, each a small name over its value (a
 * perp's Size, Entry, Current or Exit, PnL). A thesis's strip (.pep-ttc) is
 * one link, to Details: a hairline that lifts on hover, the brand ring on
 * focus; a trade post's (.pep-strip) keeps its market link and Details. In a
 * strip narrower than 480 px (a phone, the rail) the figures wrap two by two
 * under the market: the strip's own width decides (a container), never the
 * window's. Green and red only for the PnL; the state in words on a pill. */
.pep-thesis-split { min-width: 0; }
.pep-thesis-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.pep-thesis-text { display: grid; align-content: start; gap: 8px; min-width: 0; }
.pep-ttc,
.pep-feed-card.pep-strip {
  container: pep-strip / inline-size;
  display: block;
  min-width: 0;
  margin-left: 0;
  padding: 12px 14px;
  border: 1px solid var(--pep-line-strong);
  border-radius: 14px;
  background: var(--pep-panel-2);
  color: var(--pep-text);
  font-size: 13px;
  text-decoration: none;
}
.pep-thesis-pinned .pep-ttc, .pep-post:hover .pep-ttc { background: var(--pep-panel); }
a.pep-ttc:hover { border-color: var(--pep-text-3); color: var(--pep-text); }
a.pep-ttc:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-ttc-in { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pep-ttc-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 14px; min-width: 0; }
.pep-ttc-what { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pep-ttc-logo { display: inline-grid; flex: none; }
.pep-ttc-logo .pep-avatar-sm, .pep-ttc-what .pep-feed-subject .pep-avatar-sm { width: 28px; height: 28px; }
.pep-ttc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.pep-ttc-t { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.pep-ttc-t bdi { unicode-bidi: isolate; }
.pep-ttc-what .pep-feed-subject { gap: 10px; font-size: 15px; }
.pep-ttc-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pep-ttc-side { font-size: 12px; white-space: nowrap; }
.pep-ttc-state {
  padding: 1px 7px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  color: var(--pep-text-3);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.pep-ttc-state-open { border-color: var(--pep-text-3); color: var(--pep-text); }
.pep-ttc-state-liq { border-color: var(--pep-warn); color: var(--pep-warn); }
.pep-ttc-col { display: grid; align-content: start; gap: 2px; min-width: 0; }
.pep-ttc-k { color: var(--pep-text-3); font-size: 12px; font-weight: 500; }
.pep-ttc-v { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
/* The PnL and its percent never cut: the percent goes under the figure when the column is narrow. */
.pep-ttc-pnl .pep-ttc-v { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; overflow: visible; white-space: nowrap; }
.pep-ttc-pnl .pep-ttc-v b { font-size: 15px; font-weight: 800; }
.pep-ttc-pnl .pep-dir-up { color: var(--pep-up); }
.pep-ttc-pnl .pep-dir-down { color: var(--pep-down); }
.pep-ttc-pct { font-size: 12px; font-weight: 700; }
.pep-ttc-tail { color: var(--pep-text-3); font-size: 11px; }
.pep-ttc-go { grid-column: 1 / -1; justify-self: end; align-self: center; font-size: 13px; }
.pep-strip > .pep-feed-note { margin-top: 8px; padding-left: 0; }
@container pep-strip (min-width: 360px) {
  /* The figures in one row under the market: a column each, Details last. */
  .pep-ttc-figs { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; grid-template-columns: none; }
  .pep-ttc-go { grid-column: auto; }
}
@container pep-strip (min-width: 640px) {
  /* Wide: the market on the left of the figures, all on one line. */
  .pep-ttc-in { flex-direction: row; align-items: center; gap: 16px; }
  .pep-ttc-what { flex: 0 0 34%; }
  .pep-ttc-figs { flex: 1; align-items: center; }
}
@media (forced-colors: active) {
  .pep-ttc, .pep-feed-card.pep-strip { border-color: CanvasText; }
}

/* A write as the signed-in account: its button, and its words under it. */
.pep-write { display: inline-grid; justify-items: start; gap: 4px; max-width: 100%; }
.pep-write-note { color: var(--pep-text-2); font-size: 12px; line-height: 1.35; }
.pep-write-again { font-size: 12px; }

/* The box for a thesis, a reply or a bio. */
.pep-compose { display: grid; gap: 6px; min-width: 0; }
.pep-compose-label { color: var(--pep-text-2); font-size: 13px; font-weight: 600; }
.pep-compose-box {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2);
  color: var(--pep-text);
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  resize: vertical;
  unicode-bidi: isolate;
}
.pep-compose-box:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 1px; }
.pep-compose-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pep-compose-count { color: var(--pep-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.pep-compose-over { color: var(--pep-warn); font-weight: 700; }
.pep-compose-notes { display: grid; gap: 2px; }
.pep-compose-notes p { margin: 0; font-size: 12px; line-height: 1.4; }
.pep-compose-problem { color: var(--pep-warn); font-weight: 600; }

/* Replies, one level under their thesis: set in, with no rule down their edge (round 11). */
.pep-replies { display: grid; gap: 10px; margin-left: 12px; padding-left: 12px; }
.pep-replies-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pep-reply { display: grid; gap: 4px; }
.pep-reply-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pep-reply .pep-thesis-body { font-size: 14px; }

/* A report: a reason from the list, never free text. */
.pep-report { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid var(--pep-line-strong); border-radius: var(--pep-radius-sm); }
.pep-report-title { padding: 0 4px; color: var(--pep-text-2); font-size: 13px; font-weight: 700; }
.pep-report-reasons { display: grid; gap: 6px; }
.pep-report-reason { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.pep-report-reason input { width: 16px; height: 16px; margin: 0; accent-color: var(--pep-text); }
.pep-report-reason input:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-report-do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pep-report-open { font-size: 13px; }
.pep-report-done { margin: 0; font-size: 12px; }

@media (max-width: 599px) {
  .pep-replies { margin-left: 4px; padding-left: 8px; }
}

/* A liked heart is filled in --pep-like, the red (round 14; never green: green is a direction). */
.pep-heart-on { color: var(--pep-like); }
/* One's own post or thesis: its like says it cannot be (PostBar OwnLike), a small bubble over the button for a few
 * seconds, never in the way of the next post. */
.pep-like-own { position: relative; display: inline-flex; align-items: center; }
.pep-like-own-said:not(:empty) {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 3;
  padding: 6px 10px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2);
  box-shadow: 0 6px 18px rgb(0 0 0 / 35%);
  color: var(--pep-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
/* The count as the box nears its limit, before it is over (amber once over, with the words under the box). */
.pep-compose-near { color: var(--pep-text-2); font-weight: 600; }

/* What a write did, said in a live region drawn before it (Live.jsx): an empty one takes no room and is
 * not seen, a filled one reads as a quiet line. A write's failure is amber, with its words. */
.pep-live { margin: 0; color: var(--pep-text-2); font-size: 12px; line-height: 1.4; }
.pep-live:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pep-write-alert { color: var(--pep-warn); font-size: 12px; line-height: 1.35; }
.pep-compose-problem, .pep-compose-cut { display: block; }
.pep-compose-cut { color: var(--pep-warn); }
.pep-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* What takes focus after a write (a card, a reply, the report form, its answer, the list's heading): no ring
 * for a pointer, the brand ring for the keyboard. */
.pep-thesis:focus, .pep-thesis-gone:focus, .pep-reply:focus, .pep-report:focus, .pep-report-done:focus, .pep-thesis-list .pep-panel-title:focus { outline: none; }
.pep-thesis:focus-visible, .pep-thesis-gone:focus-visible, .pep-reply:focus-visible, .pep-report:focus-visible, .pep-report-done:focus-visible, .pep-thesis-list .pep-panel-title:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }

/* The theses' motion, never for a visitor who asked for less: a card, a reply,
 * or a report form arrives as a feed row does. */
@media (prefers-reduced-motion: no-preference) {
  .pep-thesis-rows > li, .pep-thesis-pinned, .pep-reply { animation: pep-feed-in 320ms ease-out both; }
  .pep-report, .pep-replies { animation: pep-feed-in 220ms ease-out both; }
  .pep-compose-count { transition: color 160ms ease-out; }
}

/* A thesis under its feed row, in the row's indent (sub-project 4c, the feed). */
.pep-feed-thesis { padding-left: 30px; }
.pep-feed-compact .pep-feed-thesis { padding-left: 0; }
.pep-thesis-add { justify-self: start; font-size: 13px; }
@media (max-width: 599px) {
  .pep-feed-thesis { padding-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .pep-feed-thesis { animation: pep-feed-in 320ms ease-out both; }
}

/* The token page's Theses panel (sub-project 4c). */
.pep-token-theses { display: grid; min-width: 0; }

/* A profile's bio and its tabs (sub-project 4c). */
.pep-prof-bio { display: grid; justify-items: start; gap: 4px; padding: 0 4px; }
.pep-prof-bio-text { margin: 0; max-width: 640px; overflow-wrap: anywhere; font-size: 15px; line-height: 1.45; white-space: pre-line; unicode-bidi: isolate; }
.pep-prof-bio-edit { display: grid; gap: 8px; max-width: 640px; padding: 12px; border-radius: var(--pep-radius); background: var(--pep-panel); }
.pep-prof-tabs { max-width: 280px; margin-bottom: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .pep-prof-bio-edit { animation: pep-feed-in 220ms ease-out both; }
}

/* ------------------------------------------------ the moderators' page (/mod/) */

.pep-mod { display: grid; gap: 14px; min-width: 0; }
.pep-mod-sign { display: grid; justify-items: start; gap: 8px; }
.pep-mod-tabs { max-width: 420px; }
.pep-mod-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pep-mod-item { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--pep-line); }
.pep-mod-item:last-child { border-bottom: 0; }
.pep-mod-state { margin: 0; color: var(--pep-warn); font-size: 12px; font-weight: 700; }
.pep-mod-reports { margin: 0; font-size: 12px; }
.pep-mod-reporters { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.pep-mod-do { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.pep-mod-reason { display: grid; gap: 4px; min-width: 0; color: var(--pep-text-2); font-size: 12px; font-weight: 600; }
.pep-mod-reason input {
  width: 260px;
  max-width: 100%;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2);
  color: var(--pep-text);
  font: inherit;
  font-size: 13px;
}
.pep-mod-reason input:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 1px; }
.pep-mod-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--pep-line); font-size: 13px; }
.pep-mod-row:last-child { border-bottom: 0; }
.pep-mod-row .pep-feed-ago { margin-left: 0; min-width: 60px; }
.pep-mod-why { color: var(--pep-text-2); unicode-bidi: isolate; overflow-wrap: anywhere; }
/* A remove or a ban asks first, in a box like the report form's. */
.pep-mod-confirm { display: grid; justify-items: start; gap: 8px; padding: 10px 12px; border: 1px solid var(--pep-line-strong); border-radius: var(--pep-radius-sm); }
.pep-mod-confirm p { margin: 0; font-size: 13px; }
/* Each tab's heading, and what happened there, said in its live line (Live.jsx's rule, .pep-live). */
.pep-mod-title { margin: 0; font-size: 15px; font-weight: 700; }
.pep-mod-said { font-size: 13px; }
/* What takes focus after an action (the next item, the log's last row, or the tab's heading): no ring for a pointer, the brand ring for the keyboard. */
.pep-mod-item:focus, .pep-mod-row:focus, .pep-mod-title:focus { outline: none; }
.pep-mod-item:focus-visible, .pep-mod-row:focus-visible, .pep-mod-title:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-mod-bans { margin-top: 4px; }
/* A tombstone: what its author deleted after a hide, named in amber with its words. */
.pep-mod-gone b { color: var(--pep-warn); }
@media (prefers-reduced-motion: no-preference) {
  .pep-mod-confirm { animation: pep-feed-in 220ms ease-out both; }
}

/* ---- 4d: the bell and its panel ---- */
/* The bell sits in the top bar beside the cash and the avatar. Its badge is amber (news, not a direction), ringed
   in the ground colour so it reads over the button's edge. */
.pep-bell { position: relative; display: inline-flex; }
.pep-bell-btn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--pep-line); border-radius: var(--pep-radius-pill); background: var(--pep-panel); color: var(--pep-text-2); cursor: pointer; }
.pep-bell-btn:hover, .pep-bell-btn[aria-expanded="true"] { border-color: var(--pep-line-strong); background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-bell-btn:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-bell-count { position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--pep-radius-pill); background: var(--pep-warn); box-shadow: 0 0 0 2px var(--pep-ground); color: var(--pep-ground); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
/* The panel drops from the bell; on a phone it spans the screen under the top bar, 16 px from each side. */
.pep-notes { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: min(400px, calc(100vw - 32px)); max-height: min(72vh, 600px); overflow-y: auto; overscroll-behavior: contain; padding: 12px; border: 1px solid var(--pep-line-strong); border-radius: var(--pep-radius); background: var(--pep-panel); box-shadow: 0 18px 48px rgb(0 0 0 / 45%); }
.pep-notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 6px 10px; }
.pep-notes-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.pep-notes-head h2:focus { outline: none; }
.pep-notes-head h2:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: var(--pep-radius-sm); }
.pep-notes-head .pep-link { font-size: 13px; }
.pep-notes-list { margin: 0; padding: 0; list-style: none; }
.pep-notes-more { width: 100%; margin-top: 8px; }
.pep-notes-status .pep-live:not(:empty) { padding: 8px 6px; font-size: 13px; }
/* One row: the kind's mark, the words, then when and the unread dot. What came since the bell was last opened sits
   on the raised panel colour, with its dot. */
.pep-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 8px; border-radius: var(--pep-radius-sm); font-size: 13px; line-height: 1.45; }
.pep-note + .pep-note { margin-top: 2px; }
.pep-note-new { background: var(--pep-panel-2); }
.pep-note-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--pep-line); border-radius: 50%; color: var(--pep-text-2); }
.pep-note-mark-warn { border-color: var(--pep-warn); color: var(--pep-warn); }
.pep-note-text { min-width: 0; padding-top: 4px; color: var(--pep-text-2); overflow-wrap: anywhere; }
.pep-note-text .pep-trader { display: inline-flex; gap: 6px; vertical-align: middle; }
a.pep-note-subject { color: var(--pep-text); font-weight: 600; text-decoration: none; }
a.pep-note-subject:hover { text-decoration: underline; }
a.pep-note-subject:focus-visible, a.pep-note-open:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: var(--pep-radius-sm); }
.pep-note-usd { margin-left: 6px; font-weight: 600; }
.pep-note-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 4px; white-space: nowrap; }
a.pep-note-open { font-size: 12px; text-decoration: none; }
.pep-note-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pep-warn); }
@media (max-width: 640px) {
  .pep-notes { position: fixed; top: calc(var(--pep-top-h) + 6px); right: 16px; left: 16px; width: auto; max-height: calc(100vh - var(--pep-top-h) - 24px); }
}
/* Alive, for those who did not ask for less motion: the panel drops open, a rise in the count pops the badge and
   rings the bell, a row that arrives while the panel is open slides in with an amber edge that fades, and a new
   row's dot pulses twice. */
@media (prefers-reduced-motion: no-preference) {
  .pep-bell-btn { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
  .pep-notes { animation: pep-notes-open 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: top right; }
  .pep-bell-pop .pep-bell-count { animation: pep-bell-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
  .pep-bell-pop svg { animation: pep-bell-ring 0.6s ease-in-out; transform-origin: 50% 12%; }
  .pep-note-fresh { animation: pep-note-in 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .pep-note-new .pep-note-dot { animation: pep-note-dot 1.4s ease-out 2; }
  @keyframes pep-notes-open { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
  @keyframes pep-bell-pop { 0% { transform: scale(0.4); } 100% { transform: scale(1); } }
  @keyframes pep-bell-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 45% { transform: rotate(-12deg); } 70% { transform: rotate(6deg); } }
  @keyframes pep-note-in {
    0% { opacity: 0; transform: translateY(-8px); background-color: color-mix(in srgb, var(--pep-warn) 14%, transparent); }
    25% { opacity: 1; transform: none; background-color: color-mix(in srgb, var(--pep-warn) 14%, transparent); }
    100% { background-color: transparent; }
  }
  @keyframes pep-note-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pep-warn) 60%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }
}
/* ---- 4d: alerts and the watchlist ---- */
/* /alerts/: your alerts, the form to set one, the watchlist. Wide enough, the alerts on the left and the form and the
   watchlist on the right; one column below. */
.pep-alerts { display: grid; gap: 18px; }
.pep-alerts-main, .pep-alerts-side { display: grid; gap: 10px; align-content: start; min-width: 0; }
@media (min-width: 1000px) {
  .pep-alerts { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 28px; }
}
.pep-alerts-page { display: grid; gap: 20px; }
.pep-alerts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pep-alerts-title { margin: 0; font-size: 15px; font-weight: 700; }
.pep-alerts-title:focus { outline: none; }
.pep-alerts-title:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: var(--pep-radius-sm); }
.pep-alerts-count { color: var(--pep-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.pep-alerts-count-full { color: var(--pep-warn); font-weight: 700; }
/* One alert. Close to its level (90% of the way) its edge and its meter turn amber; fired, its edge is amber and it
   says when and at what. Green and red are kept for a value's direction. */
.pep-alert-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pep-alert { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--pep-line); border-radius: var(--pep-radius-sm); background: var(--pep-panel); }
.pep-alert-near { border-color: color-mix(in srgb, var(--pep-warn) 55%, var(--pep-line)); }
.pep-alert-fired { border-color: var(--pep-warn); background: color-mix(in srgb, var(--pep-warn) 10%, var(--pep-panel)); }
.pep-alert-name { margin: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.pep-alert-rule { color: var(--pep-text-2); font-weight: 500; }
.pep-alert-name:focus { outline: none; }
.pep-alert-name:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: var(--pep-radius-sm); }
a.pep-alert-subject { color: var(--pep-text); font-weight: 700; text-decoration: none; }
a.pep-alert-subject:hover { text-decoration: underline; }
a.pep-alert-subject:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: var(--pep-radius-sm); }
.pep-alert-now, .pep-alert-watch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--pep-text-2); font-size: 13px; }
.pep-alert-now b { padding: 0 3px; border-radius: 4px; color: var(--pep-text); }
.pep-alert-meter { flex: 1 1 80px; min-width: 60px; height: 6px; border: 0; border-radius: var(--pep-radius-pill); background: var(--pep-panel-2); appearance: none; }
.pep-alert-meter::-webkit-meter-bar { height: 6px; border: 0; border-radius: var(--pep-radius-pill); background: var(--pep-panel-2); }
.pep-alert-meter::-webkit-meter-optimum-value { border-radius: var(--pep-radius-pill); background: var(--pep-text-2); }
.pep-alert-meter::-moz-meter-bar { border-radius: var(--pep-radius-pill); background: var(--pep-text-2); }
.pep-alert-near .pep-alert-meter::-webkit-meter-optimum-value { background: var(--pep-warn); }
.pep-alert-near .pep-alert-meter::-moz-meter-bar { background: var(--pep-warn); }
.pep-alert-togo { color: var(--pep-text-3); font-size: 12px; }
.pep-alert-radar { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pep-text-2); }
.pep-alert-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pep-alert-state { display: flex; align-items: center; gap: 8px; margin: 0; }
.pep-alert-when { color: var(--pep-text-2); font-size: 12px; }
.pep-alert-fired .pep-alert-when { color: var(--pep-warn); font-weight: 600; }
.pep-alert-close { padding: 2px 8px; border: 1px solid var(--pep-warn); border-radius: var(--pep-radius-pill); color: var(--pep-warn); font-size: 11px; font-weight: 700; }
.pep-alert-do { display: flex; flex-wrap: wrap; gap: 8px; }
/* The form: what, when, the level with its unit, the value now and how far away, then a problem in social-api's
   words before anything is sent. */
.pep-alert-form { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--pep-line); border-radius: var(--pep-radius-sm); }
.pep-alert-field { display: grid; gap: 4px; color: var(--pep-text-2); font-size: 12px; font-weight: 600; }
.pep-alert-select { min-height: 36px; padding: 0 10px; border: 1px solid var(--pep-line); border-radius: var(--pep-radius-sm); background: var(--pep-ground); color: var(--pep-text); font: inherit; font-size: 14px; }
.pep-alert-select:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-alert-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pep-alert-level { display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--pep-line); border-radius: var(--pep-radius-sm); background: var(--pep-ground); }
.pep-alert-level:focus-within { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-alert-unit { color: var(--pep-text-3); font-size: 15px; font-weight: 700; }
.pep-alert-input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--pep-text); font: inherit; font-size: 18px; font-weight: 700; }
.pep-alert-input:focus { outline: none; }
.pep-alert-hint { margin: 0; color: var(--pep-text-2); font-size: 12px; line-height: 1.4; }
.pep-alert-problem { margin: 0; color: var(--pep-warn); font-size: 12px; line-height: 1.4; }
/* The star on a token's and a market's head, and on each watchlist row (filled: on the list). */
.pep-star { flex: none; fill: none; stroke: currentColor; }
.pep-watch-star .pep-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--pep-warn); color: var(--pep-warn); }
.pep-watch-star .pep-btn[aria-pressed="true"] .pep-star { fill: currentColor; }
.pep-watch { gap: 4px; }
.pep-watch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px; }
.pep-watch-off .pep-btn { width: 32px; padding: 0; background: transparent; color: var(--pep-warn); }
.pep-watch-off .pep-star { fill: currentColor; }
/* Alive, for those who did not ask for less motion: a new alert slides in, a meter fills, a close one says so three
   times, a big-trade alert's radar breathes twice (then rests: no motion past 5 s), a price flashes the way it
   moved, and a star pops when it is filled. */
@media (prefers-reduced-motion: no-preference) {
  .pep-alert { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
  .pep-alert-fresh { animation: pep-alert-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .pep-alert-meter { transform-origin: left center; animation: pep-meter-fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .pep-alert-close { animation: pep-alert-close 1.6s ease-in-out 3; }
  .pep-alert-radar::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--pep-text-2); border-radius: 50%; animation: pep-alert-radar 2.4s ease-out 2; }
  .pep-tick-up { animation: pep-tick-up 0.7s ease-out; }
  .pep-tick-down { animation: pep-tick-down 0.7s ease-out; }
  .pep-star { transition: fill 0.15s ease; }
  .pep-watch-star .pep-btn[aria-pressed="true"] .pep-star { animation: pep-star-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.5); }
  @keyframes pep-alert-in {
    0% { opacity: 0; transform: translateY(-8px); background-color: color-mix(in srgb, var(--pep-warn) 14%, var(--pep-panel)); }
    30% { opacity: 1; transform: none; background-color: color-mix(in srgb, var(--pep-warn) 14%, var(--pep-panel)); }
    100% { background-color: var(--pep-panel); }
  }
  @keyframes pep-meter-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes pep-alert-close { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
  @keyframes pep-alert-radar { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
  @keyframes pep-tick-up { from { background: color-mix(in srgb, var(--pep-up) 24%, transparent); } to { background: transparent; } }
  @keyframes pep-tick-down { from { background: color-mix(in srgb, var(--pep-down) 24%, transparent); } to { background: transparent; } }
  @keyframes pep-star-pop { 0% { transform: scale(0.6) rotate(-20deg); } 60% { transform: scale(1.25); } 100% { transform: none; } }
}

/* ---- 4d: the notification settings and push ---- */
/* Per kind Push, Bell or Off (the pressed one filled, never in a direction's colour), the followed-trade floor, and push
   on this device with its state's dot (lit while on) and the one button that turns it on and off. */
.pep-notify-settings { display: grid; gap: 12px; }
.pep-notify-note { margin: 0; color: var(--pep-text-2); font-size: 12px; line-height: 1.4; }
.pep-notify-kinds { margin: 0; padding: 0; list-style: none; }
.pep-notify-kind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--pep-line); }
.pep-notify-name { display: grid; gap: 2px; min-width: 0; font-size: 13px; }
.pep-notify-hint { margin: 0; color: var(--pep-text-3); font-size: 12px; line-height: 1.4; }
.pep-notify-modes { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pep-notify-modes .pep-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--pep-line-strong); background: var(--pep-panel-2); color: var(--pep-text); font-weight: 700; }
.pep-notify-floor { display: grid; gap: 6px; }
.pep-notify-field { color: var(--pep-text-2); font-size: 12px; font-weight: 600; }
/* The floor field: a box with its edge and its unit, and a focus ring on the box (the input itself draws none). */
.pep-notify-level { display: flex; align-items: center; gap: 6px; max-width: 280px; padding: 0 12px; border: 1px solid var(--pep-line); border-radius: var(--pep-radius-sm); background: var(--pep-ground); }
.pep-notify-level:focus-within { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-notify-level:has(.pep-notify-input[aria-invalid="true"]) { border-color: var(--pep-warn); }
.pep-notify-unit { color: var(--pep-text-3); font-size: 15px; font-weight: 700; }
.pep-notify-input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; color: var(--pep-text); font: inherit; font-size: 16px; font-weight: 700; }
.pep-notify-input:focus { outline: none; }
.pep-notify-problem { margin: 0; color: var(--pep-warn); font-size: 12px; line-height: 1.4; }
.pep-push { display: grid; gap: 8px; }
.pep-push-line { margin: 0; color: var(--pep-text-2); font-size: 13px; line-height: 1.4; }
.pep-push-state { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.pep-push-state:focus { outline: none; }
.pep-push-state:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: var(--pep-radius-sm); }
.pep-push-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pep-text-3); }
.pep-push-dot-on { background: var(--pep-text); }
.pep-push-do { display: flex; flex-wrap: wrap; gap: 8px; }
/* Alive, for those who did not ask for less motion: a mode fills as it is pressed, and the dot breathes twice when push
   comes on (under 5 s, then still). */
@media (prefers-reduced-motion: no-preference) {
  .pep-notify-modes .pep-btn { transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; }
  .pep-push-dot { transition: background-color 0.3s ease; }
  .pep-push-dot-on::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--pep-text); border-radius: 50%; animation: pep-push-ring 2.4s ease-out 2; }
  @keyframes pep-push-ring { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
}

/* ---- a focused position ---- */
/* A copy's amber warning line (.pep-copy-warn, in the site's banner: dex.css, .pep-callout) and a position focused by
   ?pos=, which pulses twice. Motion only under prefers-reduced-motion: no-preference. (Redo and its note are gone,
   15 Oct 2026.) */
.pep-copy-warn { margin: 0; color: var(--pep-warn); font-size: 13px; font-weight: 600; }
.pep-prow-focus { background: var(--pep-focus-tint); }
.pep-prow-focus:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes pep-prow-pulse { 0%, 100% { background: var(--pep-focus-tint); } 50% { background: color-mix(in srgb, var(--pep-warn) 26%, transparent); } }
  .pep-prow-focus { animation: pep-prow-pulse 0.9s ease-in-out 2; }
}
/* ---- a focused position end ---- */
/* ---- round 6: copy a trader ---- */
/* The profile's Copy (CopyTrader.jsx), the copy dialogs (CopyDialog,
   WithdrawDialog, StopDialog: drawn in WatchDialog, the position modal's look) and Your copies' badges (round 14's
   list, head and tabs are copies.css's).
   Lime is the dialog's one primary press only; a side or a PnL is coloured by direction, a warning is amber. Every
   figure is already its final value; the motion is only under prefers-reduced-motion: no-preference, below. */
.pep-copies-page { display: grid; gap: 20px; }
/* A copy account's trade in a feed: "Copying <leader>" beside the copier (FeedItem.jsx). */
.pep-feed-copying { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.pep-cp-trader { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* The profile head with Copy beside Message and Follow (and "You copy this trader", Add funds, Manage): the actions
   take a row of their own under the face, the name and the counts, so the name is never squeezed out by them (a phone
   already stacks every part, above). */
.pep-prof-do { flex-wrap: wrap; }
@media (min-width: 600px) {
  .pep-prof-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pep-prof-do { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 599px) {
  /* A phone: "You copy this trader" on its own line, Add funds and Manage (or Copy) sharing the next, full width. */
  .pep-cp-trader { display: flex; flex: 1 1 100%; }
  .pep-cp-trader .pep-btn { flex: 1 1 0; }
  .pep-cp-you, .pep-cp-note { flex-basis: 100%; }
}
.pep-cp-note { font-size: 12px; }
.pep-cp-you { display: inline-flex; align-items: center; gap: 6px; color: var(--pep-text); font-size: 13px; font-weight: 700; }
.pep-cp-you::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pep-text); }
.pep-cp-dialog { width: min(480px, 100%); }
.pep-cp-field { display: grid; gap: 6px; }
.pep-cp-field-k { color: var(--pep-text-2); font-size: 13px; font-weight: 600; }
.pep-cp-input { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); color: var(--pep-text-2); }
.pep-cp-input:focus-within { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-cp-input:has(.pep-cp-value[aria-invalid="true"]) { border-color: var(--pep-warn); }
.pep-cp-unit { font-size: 13px; font-weight: 600; }
.pep-cp-value { flex: 1; min-width: 0; border: 0; padding: 0; background: transparent; color: var(--pep-text); font: inherit;
  font-size: 20px; font-weight: 700; outline: none; }
.pep-cp-hint { margin: 0; font-size: 12px; }
.pep-cp-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.pep-cp-presets .pep-btn[aria-pressed="true"] { border-color: var(--pep-text); color: var(--pep-text); }
.pep-cp-problem { margin: 0; min-height: 1.3em; color: var(--pep-warn); font-size: 13px; font-weight: 600; }
.pep-cp-terms { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--pep-line); border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2); }
.pep-cp-terms-k { margin: 0; color: var(--pep-text-3); font-size: 12px; font-weight: 700; }
.pep-cp-list { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--pep-text); font-size: 14px; line-height: 1.45; }
.pep-cp-fee { margin: 0; font-size: 12px; }
.pep-cp-steps { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding-left: 18px; color: var(--pep-text-2); font-size: 13px; }
.pep-cp-step-now { color: var(--pep-text); font-weight: 700; }
.pep-cp-done { display: grid; gap: 8px; }
.pep-cp-done-head { margin: 0; font-size: 18px; font-weight: 800; }
.pep-cp-do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pep-cp-warn { margin: 0; }
.pep-cp-fee-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.pep-cp-fee-box > div { padding: 10px 12px; border: 1px solid var(--pep-line); border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); }
.pep-cp-fee-box dt { color: var(--pep-text-3); font-size: 12px; }
.pep-cp-fee-box dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; }
.pep-cp-blank { padding: 18px 0; }
.pep-cp-badge { padding: 2px 8px; border: 1px solid var(--pep-line-strong); border-radius: var(--pep-radius-pill); color: var(--pep-text-2);
  font-size: 12px; font-weight: 700; white-space: nowrap; }
.pep-cp-badge-live { color: var(--pep-text); }
.pep-cp-empty { margin: 0; font-size: 13px; }
.pep-cp-said { margin: 0; color: var(--pep-text-2); font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .pep-cp-input { transition: border-color 0.2s ease; }
}
/* ---- round 6: copy a trader end ---- */
/* ---- 4e: the position modal ---- */
/* One trader's position over their profile (round 14: the position card's and the posts' language; round 17: on one
   screen). The page is never scroll-locked; the backdrop scrolls on its own only on a window smaller than the
   dialog's least height. The dialog's head (the trader as a post draws them, Follow, Copy trader, the close cross);
   the position as its card (the market and side, its state in words, the PnL large, its figures); the chart, the
   activity, the theses and the breakdown in tabs; Trade and Share. On a phone a sheet the screen's height, on a
   desktop a dialog in the middle. Every figure is already its final value with no motion. */
.pep-modal-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding: 6vh 12px;
  overflow-y: auto; overscroll-behavior: contain; background: color-mix(in srgb, var(--pep-ground) 78%, transparent); }
.pep-modal { width: min(880px, 100%); display: grid; gap: 14px; border-color: var(--pep-line-strong); }
.pep-modal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pep-modal-head h2:focus { outline: none; }
.pep-modal-head h2:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-modal-close { margin-left: auto; }
.pep-modal-live { display: inline-flex; align-items: center; gap: 6px; color: var(--pep-text-2); font-size: 12px; font-weight: 600; }
.pep-modal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pep-text-2); }
.pep-modal-fig dd { margin: 0; }
.pep-modal-v { color: var(--pep-text); border-radius: var(--pep-radius-sm); }
.pep-modal-do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pep-modal-part { display: grid; gap: 8px; }
.pep-modal-sub { margin: 0; color: var(--pep-text-2); font-size: 13px; font-weight: 700; letter-spacing: 0.01em; }
.pep-modal-sub:focus { outline: none; }
.pep-modal-sub:focus-visible, .pep-activity-row:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-activity { gap: 4px; }
.pep-activity-row { gap: 10px; }
.pep-activity-who { display: inline-flex; align-items: center; gap: 6px; }
.pep-activity-ago { margin-left: auto; }
.pep-pos-details { font-size: 12px; }
.pep-prof-name:focus { outline: none; }
.pep-prof-name:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }

/* The dialog (round 17, the owner: "better presented, and on one screen without having to scroll"): never taller
   than the window and never scrolling itself. A desktop's is about 1040 px wide in two columns, the tabs and the
   chart on the left, the position and what to do on the right; under 900 px one column, the position first; on a
   phone a sheet the screen's height. The chart takes the height that is left; a long list scrolls in its own tab.
   No padding of its own (its head and body have theirs). */
.pep-modal-back.pep-pm-back { place-items: stretch center; padding: 16px; }
.pep-pm {
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  height: min(660px, calc(100dvh - 32px));
  margin: auto 0;
  min-height: 420px;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--pep-line-strong);
}
.pep-pm-body {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) 372px;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "tabs pos" "tabs do";
  gap: 14px 24px;
  min-width: 0;
  min-height: 0;
  padding: 16px 20px 20px;
}
.pep-pm-wait { grid-column: 1 / -1; margin: 0; padding: 8px 0; }
.pep-pm-body > .pep-callout { grid-column: 1 / -1; align-self: start; }

/* The head, one band: the face; the kicker (the dialog's heading) over the name and @address, the clan beside them;
   Follow and Copy trader at the right as a post's head draws them (small pills), "Follows are public" small under
   them; the close cross. */
.pep-pm-head {
  display: grid;
  flex: none;
  grid-template-columns: auto minmax(0, max-content) auto minmax(0, 1fr) auto auto;
  grid-template-areas: "face kicker kicker . follow close" "face name clan . follow close";
  align-items: center;
  gap: 2px 12px;
  padding: 12px 12px 12px 20px;
  border-bottom: 1px solid var(--pep-line);
}
.pep-pm-face { grid-area: face; display: block; border-radius: 50%; line-height: 0; }
.pep-pm-face .pep-face { width: 44px; height: 44px; }
.pep-pm-kicker { grid-area: kicker; align-self: end; margin: 0; color: var(--pep-text-3); font-size: 12px; font-weight: 700; line-height: 16px; }
.pep-pm-name { grid-area: name; align-self: start; min-width: 0; }
.pep-pm-name .pep-trader-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.pep-pm-name .pep-trader-primary { font-size: 16px; }
.pep-pm-name .pep-trader-address { color: var(--pep-text-3); font-size: 13px; }
.pep-pm-name .pep-trader-address::before { content: "@"; }
/* On a desktop the clan and the pills are the head's own cells (the clan beside the name, the pills at the right). */
.pep-pm-meta { display: contents; }
.pep-pm-meta > .pep-post-clan { grid-area: clan; align-self: start; justify-self: start; max-width: 220px; }
.pep-pm-follow { grid-area: follow; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; max-width: 340px; }
.pep-pm-copy { min-height: 30px; padding: 0 14px; border-radius: var(--pep-radius-pill); font-size: 13px; white-space: nowrap; }
/* A phone's rule draws every Follow the row's width (a profile's head); here it stays a pill. */
.pep-pm-follow .pep-follow { flex: none; }
.pep-pm-follow .pep-follow .pep-btn { width: auto; }
.pep-pm-public { flex-basis: 100%; color: var(--pep-text-3); font-size: 11px; line-height: 14px; text-align: right; }
.pep-pm-close {
  grid-area: close;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pep-text-2);
  cursor: pointer;
}
.pep-pm-close:hover { background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-pm-close:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 1px; }

/* The position, as its card: the market's logo and ticker, the side as a tinted badge, the leverage; under them its
   state in words, the margin mode and Live; then the PnL large with its percent beside it; then the figures. */
.pep-pm-pos { grid-area: pos; display: grid; align-content: start; gap: 16px; min-width: 0; min-height: 0; overflow-y: auto; }
.pep-pm-top { display: grid; gap: 14px; min-width: 0; }
.pep-pm-mkt { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pep-pm-id { display: grid; gap: 6px; min-width: 0; }
.pep-pm-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.pep-pm-t { color: var(--pep-text); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.pep-pm-lev { color: var(--pep-text-2); font-size: 13px; font-weight: 700; }
.pep-pm-badge {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--pep-panel-2);
  color: var(--pep-text-2);
  font-size: 12px;
  font-weight: 700;
}
.pep-pm-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; color: var(--pep-text-2); font-size: 12px; }
.pep-pm-mode { font-weight: 600; }
/* The state: words in a chip, its tone beside them (never the tone alone). Liquidated is the loss's red. */
.pep-pm-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  color: var(--pep-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}
/* Its dot takes the direction's colour from its class (pepper.css .pep-dir-*): Open up, Closed flat, Liquidated down. */
.pep-pm-statusdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pep-pm-status-closed { color: var(--pep-text-2); }
.pep-pm-status-liq { border-color: color-mix(in srgb, currentColor 45%, transparent); }

.pep-pm-hero { margin: 0; }
.pep-pm-herofig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pep-pm-herofig dt { flex-basis: 100%; color: var(--pep-text-3); font-size: 12px; }
.pep-pm-pnl { font-size: var(--pep-num-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.pep-pm-pnl.pep-dir-flat { color: var(--pep-text-2); }
.pep-pm-pct { font-size: 15px; font-weight: 700; }
.pep-pm-herofig .pep-pm-note { flex-basis: 100%; }
.pep-pm-note { color: var(--pep-text-3); font-size: 12px; }

/* The figures, each under its label, on the panel's second ground: six three by two, four two by two. */
.pep-pm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 12px;
  margin: 0;
  padding: 14px;
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2);
}
.pep-pm-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pep-pm-fig { display: grid; align-content: start; gap: 2px; min-width: 0; }
.pep-pm-fig dt { display: flex; color: var(--pep-text-3); font-size: 12px; line-height: 18px; white-space: nowrap; }
.pep-pm-fig .pep-modal-v { font-size: 15px; font-weight: 700; line-height: 20px; overflow-wrap: anywhere; }
.pep-pm-fig .pep-faint, .pep-pm-away { font-size: 12px; line-height: 16px; }
.pep-pm-away { color: var(--pep-text-2); }
.pep-pm-away.pep-dir-warn { color: var(--pep-warn); }
.pep-pm-liq { color: var(--pep-warn); }
.pep-pm-fig .pep-hint { margin: 0; }

/* The tabs: a segmented pill strip (the selected one raised, never the brand), each panel the height that is left. */
.pep-pm-tabs { grid-area: tabs; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.pep-pm-tablist {
  display: flex;
  flex: none;
  align-self: start;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  overflow-x: auto;
  border-radius: var(--pep-radius-pill);
  background: var(--pep-panel-2);
  scrollbar-width: none;
}
.pep-pm-tab {
  min-height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--pep-radius-pill);
  background: transparent;
  color: var(--pep-text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.pep-pm-tab:hover { color: var(--pep-text); }
.pep-pm-tab[aria-selected="true"] { background: var(--pep-panel-hover); box-shadow: inset 0 0 0 1px var(--pep-line-strong); color: var(--pep-text); }
.pep-pm-tab:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
.pep-pm-pane { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pep-pm-pane[hidden] { display: none; }
.pep-pm-pane:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; border-radius: var(--pep-radius-sm); }
.pep-pm-pane-activity, .pep-pm-pane-theses, .pep-pm-pane-breakdown { padding: 4px 4px 4px 2px; }
.pep-pm-pane .pep-thesis-list { gap: 10px; }
.pep-pm-pane .pep-panel-title { font-size: 14px; }
.pep-pm-pane .pep-modal-sub { font-size: 12px; }

/* The chart fills its panel: the candles take what the panel's tools leave (the library sizes itself to its box). */
.pep-pm-pane-chart { display: flex; flex-direction: column; overflow: hidden; }
.pep-pm-chart { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.pep-pm-chart > .pep-chartpanel { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-height: 0; }
.pep-pm .pep-chartpanel { padding: 10px; background: var(--pep-panel-2); }
.pep-pm-chart .pep-candles-wrap { flex: 1 1 auto; min-height: 140px; margin-top: 0; }
.pep-pm-chart .pep-candles { position: absolute; inset: 0; width: auto; height: auto; margin-top: 0; }
/* A token's chart tools, smaller in the dialog (its timeframes, Price or Market cap), and the words on its unit small. */
.pep-pm-chart .pep-chart-tools { gap: 6px; }
.pep-pm-chart .pep-mchips { gap: 4px; }
.pep-pm-chart .pep-chip { min-height: 28px; padding: 0 10px; font-size: 12px; }
.pep-pm-chart .pep-chart-mode { padding: 3px; }
.pep-pm-chart .pep-chart-mode > button { min-height: 26px; padding: 0 10px; font-size: 12px; }
.pep-pm-chart .pep-chart-unit { margin: 0; font-size: 11px; }

/* The Breakdown: what it adds up to, then label left (a word beside it where one is said), figure right; a closed
   position's Result ruled off. */
.pep-pm-cap { margin: 0 0 4px; color: var(--pep-text-3); font-size: 12px; font-weight: 700; }
.pep-pm-parts { display: grid; gap: 0; max-width: 560px; margin: 0; }
.pep-pm-part { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--pep-line); }
.pep-pm-part:last-child { border-bottom: 0; }
.pep-pm-part dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; color: var(--pep-text-2); font-size: 13px; }
.pep-pm-sub { font-size: 12px; }
.pep-pm-part .pep-modal-v { font-size: 14px; font-weight: 600; text-align: right; }
.pep-pm-total { padding-top: 10px; border-top: 1px solid var(--pep-line-strong); }
.pep-pm-total dt { color: var(--pep-text); font-weight: 700; }
.pep-pm-total .pep-modal-v { font-size: 15px; font-weight: 800; }

/* The activity: a rail of dots, oldest first; each step's word in its tone, what it was, and how long ago. */
.pep-pm-steps { display: grid; gap: 0; margin: 0; padding: 4px 0 0; list-style: none; }
.pep-pm-step { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; }
.pep-pm-step:last-child { padding-bottom: 0; }
.pep-pm-step:not(:last-child)::before { content: ""; position: absolute; top: 14px; bottom: 0; left: 6px; width: 2px; background: var(--pep-line-strong); }
/* The dot's colour is its direction's class (pepper.css .pep-dir-*). */
.pep-pm-stepdot { width: 14px; height: 14px; margin-top: 2px; border: 3px solid var(--pep-panel); border-radius: 50%; background: currentColor; box-shadow: 0 0 0 1px var(--pep-line-strong); }
.pep-pm-stepbody { display: grid; gap: 2px; min-width: 0; }
.pep-pm-stephead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0; font-size: 14px; }
.pep-pm-when { font-size: 12px; }
.pep-pm-steptext, .pep-pm-stepsub { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.pep-pm-steptext { color: var(--pep-text); }

/* What to do: Trade the market (the one primary, the brand's pill) and Share, at the foot of the position's column. */
.pep-pm-do { grid-area: do; flex-wrap: nowrap; padding-top: 14px; border-top: 1px solid var(--pep-line); }
.pep-pm-do > .pep-btn { flex: 1 1 auto; min-height: 40px; }
.pep-pm-share { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.pep-pm-share > .pep-btn { min-height: 40px; padding: 0 18px; border-radius: var(--pep-radius-pill); }

@media (max-width: 899px) {
  /* One column: the head on two lines (the clan and the pills on one line under the name), the position (its market
     and PnL side by side, six figures on one line), the tabs, what to do. */
  .pep-pm { width: min(720px, 100%); height: min(880px, calc(100dvh - 32px)); }
  .pep-pm-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "face kicker close" "face name close" "meta meta meta";
  }
  .pep-pm-close { align-self: start; }
  .pep-pm-meta { display: flex; grid-area: meta; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; margin-top: 6px; }
  .pep-pm-meta > .pep-post-clan { max-width: 100%; }
  .pep-pm-follow { margin-left: auto; max-width: none; }
  .pep-pm-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "pos" "tabs" "do";
    gap: 14px;
  }
  .pep-pm-pos { overflow: visible; gap: 14px; }
  .pep-pm-top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .pep-pm-hero { max-width: 300px; }
  .pep-pm-herofig { justify-content: flex-end; text-align: right; }
  .pep-pm-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pep-pm-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pep-pm-do > .pep-btn { flex: 0 1 auto; }
}

@media (max-width: 599px) {
  /* A phone: a sheet the screen's height from the foot. "Follows are public" only Follow's description, the PnL under
     the market, the figures three by two, the tabs the whole width. */
  .pep-modal-back.pep-pm-back { place-items: end stretch; padding: 8px 0 0; }
  .pep-pm { width: 100%; margin: 0; height: calc(100dvh - 8px); min-height: 0; border-bottom: 0; border-radius: var(--pep-radius) var(--pep-radius) 0 0; }
  .pep-pm-head { padding: 10px 6px 10px 16px; }
  .pep-pm-face .pep-face { width: 40px; height: 40px; }
  .pep-pm-public { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pep-pm-body { gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .pep-pm-pos { gap: 12px; }
  .pep-pm-top { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pep-pm-hero { max-width: none; }
  .pep-pm-herofig { justify-content: flex-start; text-align: left; }
  .pep-pm-pnl { font-size: 26px; }
  .pep-pm-grid { gap: 10px 8px; padding: 10px 12px; }
  .pep-pm-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pep-pm-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pep-pm-fig .pep-modal-v { font-size: 14px; }
  .pep-pm .pep-chartpanel { padding: 8px; }
  .pep-pm-tablist { align-self: stretch; }
  .pep-pm-tab { flex: 1 0 auto; padding: 0 8px; }
  .pep-pm-do { padding-top: 12px; }
  .pep-pm-do > .pep-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The backdrop fades and the dialog rises in (a phone's sheet slides up); a figure that moved flashes its direction
     once (pep-tick-*); the live dot beats once per fresh read after the first; a page of older rows slides in.
     Nothing repeats on its own. */
  @keyframes pep-modal-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pep-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: none; } }
  @keyframes pep-modal-sheet { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
  @keyframes pep-modal-beat { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.8); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }
  .pep-modal-back { animation: pep-modal-fade 0.18s ease-out; }
  .pep-modal { animation: pep-modal-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1); }
  .pep-modal-beat { animation: pep-modal-beat 0.9s ease-out 1; }
  .pep-activity-row { animation: pep-copy-in 0.2s ease-out; }
  .pep-pm-close, .pep-pm-tab { transition: background-color 0.15s ease, color 0.15s ease; }
  @media (max-width: 599px) {
    .pep-pm { animation: pep-modal-sheet 0.26s cubic-bezier(0.2, 0.9, 0.3, 1); }
  }
}
/* ---- 4e: the position modal end ---- */
/* ---- 4e: send ---- */
/* Send on another trader's profile, and Received and Sent on one's own. The recipient's full address is drawn whole, in
   groups of four with the first and last marked; a look-alike or an unread name is amber with its words; what is sent
   is previewed large (a token as its amount, its dollars small). Every figure is already its final value; the motion
   is only under prefers-reduced-motion: no-preference, below. */
.pep-prof-side { display: grid; gap: 16px; align-content: start; }
.pep-send { display: grid; gap: 10px; }
.pep-send-to { display: grid; gap: 6px; }
.pep-send-address { display: flex; flex-wrap: wrap; gap: 2px 6px; padding: 8px 10px; border: 1px solid var(--pep-line);
  border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); color: var(--pep-text-2); font-size: 14px; }
.pep-send-quad { letter-spacing: 0.02em; }
.pep-send-key { color: var(--pep-text); font-weight: 700; }
.pep-send-check { display: flex; gap: 8px; align-items: flex-start; color: var(--pep-warn); font-size: 13px; font-weight: 600; }
.pep-send-check input:focus-visible, .pep-send-textarea:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
/* What to send, one chip each: a row that scrolls sideways when it holds more than its card's width, every chip its
   whole word with room around it, never squeezed into the next (round 9). */
.pep-send-assets { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.pep-send-assets > button { flex: 0 0 auto; padding: 0 12px; white-space: nowrap; }
.pep-send-amount, .pep-send-note-field { display: grid; gap: 4px; }
.pep-send-amount .pep-input[aria-invalid="true"], .pep-send-textarea[aria-invalid="true"] { border-color: var(--pep-warn); }
.pep-send-problem { margin: 0; color: var(--pep-warn); font-size: 12px; font-weight: 600; }
.pep-send-problem:empty { display: none; }
.pep-send-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 10px 12px;
  border: 1px solid var(--pep-line-strong); border-radius: var(--pep-radius-sm); }
.pep-send-what { color: var(--pep-text); font-size: 22px; font-weight: 800; }
.pep-send-what b { font-weight: inherit; }
.pep-send-usd { font-size: 12px; }
.pep-send-arrow { width: 8px; height: 8px; border-top: 2px solid var(--pep-text-2); border-right: 2px solid var(--pep-text-2);
  transform: rotate(45deg); }
.pep-send-textarea { resize: vertical; min-height: 64px; }
.pep-send-go:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-send-notice { margin: 0; font-size: 13px; }
.pep-send-done { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--pep-text); font-weight: 600; }
.pep-send-late { display: grid; gap: 6px; }
.pep-send-another { justify-self: start; }
.pep-send-hash { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.pep-send-older { justify-self: start; }
.pep-sends { display: grid; gap: 10px; }
.pep-send-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pep-send-row { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--pep-line); }
.pep-send-row:focus { outline: none; }
.pep-send-row:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-send-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pep-send-sum { color: var(--pep-text); }
.pep-send-ago { margin-left: auto; }
/* What people write is text in its own direction, isolated (4c's rule for theses). */
.pep-send-note { margin: 0; unicode-bidi: isolate; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--pep-text); }
@media (prefers-reduced-motion: no-preference) {
  /* The preview pops in at each new amount; a send that lands flies its arrow out and slides into its list; the late
     line slides in; the address's marked groups ease in. Nothing repeats on its own. */
  @keyframes pep-send-pop { from { opacity: 0.4; transform: scale(0.97); } to { opacity: 1; transform: none; } }
  @keyframes pep-send-fly { 0% { transform: translateX(-6px) rotate(45deg); opacity: 0; } 100% { transform: rotate(45deg); opacity: 1; } }
  .pep-send-preview { animation: pep-send-pop 0.22s ease-out; }
  .pep-send-preview .pep-send-arrow, .pep-send-done .pep-send-arrow { animation: pep-send-fly 0.35s ease-out; }
  .pep-send-done, .pep-send-late, .pep-send-row { animation: pep-copy-in 0.25s ease-out; }
  .pep-send-key { transition: color 0.2s ease; }
  .pep-send-check, .pep-send-address { transition: border-color 0.2s ease, color 0.2s ease; }
}
/* ---- 4e: send end ---- */

/* ---- 4f: clans ---- */
/* A clan's name is somebody's words: isolated from the text around it, as 4c's theses are. */
.pep-clan-name { unicode-bidi: isolate; overflow-wrap: anywhere; }
.pep-clan-board { display: grid; gap: 10px; }
/* The page's head: the title and the public line, beside the live line and the board's two figures. */
.pep-clan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 16px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius);
  background: radial-gradient(120% 160% at 0% 0%, rgb(255 255 255 / 7%), transparent 62%), var(--pep-panel-2);
}
.pep-clan-head-words { display: grid; gap: 2px; min-width: 0; }
.pep-clan-head-words p { margin: 0; font-size: 12px; }
.pep-clan-title { margin: 0; color: var(--pep-text); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.pep-clan-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pep-clan-live, .pep-clan-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid var(--pep-line);
  border-radius: var(--pep-radius-pill);
  background: var(--pep-panel);
  font-size: 12px;
}
.pep-clan-live b { color: var(--pep-text); font-size: 12px; font-weight: 700; }
.pep-clan-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pep-text); }
/* A late board says Late, in amber with its word, never Live. */
.pep-clan-live-late { border-color: var(--pep-warn); }
.pep-clan-live.pep-clan-live-late b { color: var(--pep-warn); }
.pep-clan-stat b { font-size: 13px; }
/* The rows: a rank badge, the name with its split and its bar, the figure with the move and the members. */
.pep-clan-row { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 10px 6px; border-radius: var(--pep-radius-sm); }
.pep-clan-row:hover { background: var(--pep-panel-hover); }
.pep-clan-rank { display: inline-grid; place-items: center; justify-self: center; width: 26px; height: 26px; }
.pep-board-row-podium .pep-clan-rank {
  border-radius: 50%;
  background: linear-gradient(145deg, rgb(255 255 255 / 24%), rgb(255 255 255 / 4%));
  box-shadow: inset 0 0 0 1px var(--pep-line-strong);
}
.pep-clan-row.pep-board-row-podium { background: linear-gradient(90deg, rgb(255 255 255 / 5%), transparent 72%); }
.pep-clan-row.pep-board-row-me { box-shadow: inset 0 0 0 1px var(--pep-line-strong); }
/* The podium's and one's own row's backgrounds outrank the plain hover: theirs is said again. */
.pep-clan-row.pep-board-row-podium:hover, .pep-clan-row.pep-board-row-me:hover { background: var(--pep-panel-hover); }
.pep-clan-who { display: grid; min-width: 0; gap: 3px; }
.pep-clan-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pep-clan-link { min-width: 0; color: var(--pep-text); font-weight: 600; }
.pep-clan-link:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-clan-yours {
  flex: none;
  padding: 1px 7px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  color: var(--pep-text);
  font-size: 11px;
  font-weight: 600;
}
.pep-clan-split { font-size: 12px; }
.pep-clan-bar { display: block; width: 100%; max-width: 220px; height: 4px; overflow: visible; }
.pep-clan-bar-track { fill: var(--pep-line); }
.pep-clan-bar-fill { fill: currentColor; }
/* pep-dir-* strokes too (pepper.css): a bar is filled only. */
.pep-clan-bar rect { stroke: none; }
.pep-clan-meta { display: inline-flex; align-items: center; gap: 8px; }
/* A <small>, not a span: the figure's grey (.pep-board-fig span) leaves it its direction's colour (pep-dir-*). */
.pep-clan-move { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pep-clan-move i { font-style: normal; }
.pep-clan-arrow { width: 9px; height: 9px; fill: currentColor; }
/* Lateness is a warning: amber, with its words, in the site's banner (dex.css, .pep-callout). */
.pep-clan-late { margin: 0; }
.pep-clan-empty {
  margin: 0;
  padding: 18px 16px;
  border: 1px dashed var(--pep-line-strong);
  border-radius: var(--pep-radius);
  color: var(--pep-text-2);
  text-align: center;
}
.pep-clan-search { display: grid; gap: 6px; margin-top: 14px; }
.pep-clan-found { margin-top: 4px; }
.pep-clan-hit { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pep-clan-more { margin: 10px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  /* The rows rise in on the first paint, one after another; a row whose place moved slides from where it was and its
     move pops; a bar grows to its figure and eases to the next; the live dot pings once per read. Nothing repeats on
     its own, and every figure is already its final value without any of it. */
  .pep-clan-row { animation: pep-clan-rise 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both; transition: background-color 0.2s ease; }
  .pep-clan-row:nth-child(2) { animation-delay: 30ms; }
  .pep-clan-row:nth-child(3) { animation-delay: 60ms; }
  .pep-clan-row:nth-child(4) { animation-delay: 90ms; }
  .pep-clan-row:nth-child(5) { animation-delay: 120ms; }
  .pep-clan-row:nth-child(6) { animation-delay: 150ms; }
  .pep-clan-row:nth-child(7) { animation-delay: 180ms; }
  .pep-clan-row:nth-child(n + 8) { animation-delay: 210ms; }
  /* A move slides the row's cells, never the row: the row's rise is its one animation and never restarts. turn-1
     names the same slide again, so a second move the same way plays too. */
  .pep-clan-moved-up > * { animation: pep-clan-up 520ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .pep-clan-moved-up.pep-clan-turn-1 > * { animation-name: pep-clan-up-again; }
  .pep-clan-moved-down > * { animation: pep-clan-down 520ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .pep-clan-moved-down.pep-clan-turn-1 > * { animation-name: pep-clan-down-again; }
  .pep-clan-move { animation: pep-clan-pop 420ms ease-out; }
  .pep-clan-bar-fill { transform-box: fill-box; transform-origin: left center; animation: pep-clan-grow 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; transition: width 0.6s ease; }
  .pep-clan-live-dot { animation: pep-clan-ping 1.2s ease-out 1; }
  .pep-clan-hit { animation: pep-clan-rise 220ms ease-out both; }
  @keyframes pep-clan-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes pep-clan-up { from { transform: translateY(14px); } to { transform: none; } }
  @keyframes pep-clan-up-again { from { transform: translateY(14px); } to { transform: none; } }
  @keyframes pep-clan-down { from { transform: translateY(-14px); } to { transform: none; } }
  @keyframes pep-clan-down-again { from { transform: translateY(-14px); } to { transform: none; } }
  @keyframes pep-clan-pop { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.15); } 100% { transform: none; } }
  @keyframes pep-clan-grow { from { transform: scaleX(0); } to { transform: none; } }
  @keyframes pep-clan-ping { from { box-shadow: 0 0 0 0 rgb(255 255 255 / 55%); } to { box-shadow: 0 0 0 8px rgb(255 255 255 / 0%); } }
}
/* ---- 4f: clan page ---- */
/* /c/ and /c/?id= (ClanPage, ClanHub; /c/new/'s ClanNew shares the form's fields), the crest and the profile's chip. Grey for the clan's own marks,
   direction colours for a figure's sign only, amber for the warm-up and every warning, the brand lime only in focus. */
.pep-clans-page { display: grid; gap: 16px; }
.pep-clan { display: grid; gap: 16px; }
.pep-clan-page-head {
  position: relative;
  display: grid;
  gap: 12px;
  overflow: hidden;
  background: radial-gradient(140% 120% at 0% 0%, rgb(255 255 255 / 8%), transparent 60%),
    radial-gradient(90% 140% at 100% 100%, rgb(255 255 255 / 4%), transparent 55%), var(--pep-panel);
}
.pep-clan-hero { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pep-clan-hero-text { display: grid; gap: 4px; min-width: 0; }
.pep-clan-eyebrow {
  display: flex;
  gap: 8px;
  margin: 0;
  color: var(--pep-text-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pep-clan-page-title { margin: 0; color: var(--pep-text); font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; overflow-wrap: anywhere; }
.pep-clan-page-title:focus { outline: none; }
.pep-clan-runs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.pep-clan-public { margin: 0; font-size: 12px; }
.pep-clan-do { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pep-clan-copy { margin-left: auto; }
.pep-clan-copied { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.pep-clan-warn, .pep-clan-warm { color: var(--pep-warn); }
.pep-clan-warn { margin: 0; }
.pep-clan-on { color: var(--pep-text-2); }
/* A confirm (the owner's Remove and Leave): an amber banner (dex.css, .pep-callout), its question on its own line. */
.pep-clan-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pep-clan-ask p { flex-basis: 100%; margin: 0; }
.pep-clan-leave-ask { margin-top: 2px; }
/* The crest: a hexagon of the panel's own grey with the id's mark in three tones of the text's. */
.pep-clan-crest { display: block; flex: none; }
.pep-clan-crest-lg { width: 72px; height: 72px; }
.pep-clan-crest-sm { width: 20px; height: 20px; }
.pep-clan-crest-edge { fill: var(--pep-panel-2); stroke: var(--pep-line-strong); stroke-width: 1.5; }
.pep-clan-crest-t1 { fill: var(--pep-text-3); }
.pep-clan-crest-t2 { fill: var(--pep-text-2); }
.pep-clan-crest-t3 { fill: var(--pep-text); }
.pep-clan-gone { display: grid; justify-items: start; gap: 8px; }
/* The figure, its two parts as one bar (their sizes, each part coloured by its sign), and three tiles. */
.pep-clan-figures { display: grid; gap: 12px; }
.pep-clan-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.pep-clan-fig { margin-left: -4px; padding: 2px 4px; border-radius: var(--pep-radius-sm); font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.pep-clan-parts { display: grid; gap: 6px; max-width: 420px; }
.pep-clan-parts-bar { display: block; width: 100%; height: 6px; }
.pep-clan-parts-bar rect { stroke: none; }
/* Each part takes its sign's colour from pep-dir-* (pepper.css); a flat part is a line's grey. */
.pep-clan-parts-bar rect { fill: currentColor; }
.pep-clan-parts-bar .pep-dir-flat { color: var(--pep-line-strong); }
.pep-clan-part-perp { opacity: 0.55; }
.pep-clan-parts-words { margin: 0; font-size: 13px; }
.pep-clan-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pep-clan-tile { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--pep-line); border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); }
.pep-clan-tile dd { margin: 0; color: var(--pep-text); font-size: 18px; font-weight: 700; }
.pep-clan-count { display: inline-block; }
/* The members: who, Owner, joined, and when they count (a ring that fills through the day's warm-up). */
.pep-clan-members { display: grid; gap: 8px; }
.pep-clan-members .pep-panel-title:focus { outline: none; }
.pep-clan-members > p { margin: 0; font-size: 12px; }
.pep-clan-roll { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pep-clan-member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--pep-line);
  border-radius: var(--pep-radius-sm);
}
.pep-clan-member-you { background: linear-gradient(90deg, rgb(255 255 255 / 6%), transparent 70%); }
.pep-clan-owner {
  padding: 1px 8px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  color: var(--pep-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pep-clan-joined { font-size: 12px; }
.pep-clan-member .pep-clan-warm, .pep-clan-member .pep-clan-on { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.pep-clan-ring { width: 16px; height: 16px; }
.pep-clan-ring-track { fill: none; stroke: var(--pep-line-strong); stroke-width: 2.5; }
.pep-clan-ring-arc { fill: none; stroke: var(--pep-warn); stroke-width: 2.5; stroke-linecap: round; }
/* Your clan as a card (pinned on the clans list, clans.css), the start form with its count. */
.pep-clan-hub-own { display: grid; gap: 10px; }
.pep-clan-hub-own .pep-panel-title:focus { outline: none; }
.pep-clan-own { display: grid; gap: 8px; }
.pep-clan-own-card { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.pep-clan-own-text { display: grid; gap: 3px; min-width: 0; }
.pep-clan-own-name { color: var(--pep-text); font-size: 20px; font-weight: 800; }
.pep-clan-start-label { color: var(--pep-text-2); font-size: 13px; font-weight: 600; }
.pep-clan-start-field { position: relative; display: flex; align-items: center; }
.pep-clan-start-field .pep-input { flex: 1; padding-right: 64px; }
.pep-clan-start-count { position: absolute; right: 12px; color: var(--pep-text-3); font-size: 12px; pointer-events: none; }
.pep-clan-start-bad .pep-input { border-color: var(--pep-warn); }
.pep-clan-start-good .pep-input { border-color: var(--pep-line-strong); }
.pep-clan-start-do { display: flex; }
.pep-clan-made { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; }
/* The profile's chip. */
.pep-clan-chip-line { min-width: 0; margin: 6px 0 0; }
.pep-clan-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  background: var(--pep-panel-2);
  color: inherit;
  text-decoration: none;
}
/* One line: the name gives way (an ellipsis), the crest and "runs it" never do. */
.pep-clan-chip .pep-clan-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pep-clan-chip .pep-clan-runs, .pep-clan-chip svg, .pep-clan-chip img { flex: none; }
.pep-clan-chip:hover { background: var(--pep-panel-hover); }
.pep-clan-chip:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
@media (max-width: 560px) {
  .pep-clan-page-title { font-size: 26px; }
  .pep-clan-fig { font-size: 32px; }
  .pep-clan-crest-lg { width: 56px; height: 56px; }
  .pep-clan-copy { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  /* The crest's cells light in from the edges to the spine and its hexagon settles; a sheen crosses the head once;
     the members rise in one after another; a count that changed pops; a warm-up ring turns in; a confirm slides
     open; a new clan's link pops; the chip glows once. Nothing repeats on its own, and every figure is already its
     final value without any of it. */
  .pep-clan-crest-lg .pep-clan-crest-cells rect { transform-box: fill-box; transform-origin: center; animation: pep-clan-cell 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .pep-clan-crest-lg .pep-clan-crest-cells rect:nth-child(3n + 2) { animation-delay: 70ms; }
  .pep-clan-crest-lg .pep-clan-crest-cells rect:nth-child(3n) { animation-delay: 140ms; }
  .pep-clan-crest-lg .pep-clan-crest-edge { transform-box: fill-box; transform-origin: center; animation: pep-clan-settle 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .pep-clan-page-head::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 7%) 50%, transparent 70%);
    pointer-events: none;
    transform: translateX(-100%);
    animation: pep-clan-sheen 1.4s ease-out 0.2s 1 both;
  }
  .pep-clan-member { animation: pep-clan-rise 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both; transition: background-color 0.2s ease; }
  .pep-clan-member:nth-child(2) { animation-delay: 40ms; }
  .pep-clan-member:nth-child(3) { animation-delay: 80ms; }
  .pep-clan-member:nth-child(4) { animation-delay: 120ms; }
  .pep-clan-member:nth-child(5) { animation-delay: 160ms; }
  .pep-clan-member:nth-child(n + 6) { animation-delay: 200ms; }
  .pep-clan-count-tick { animation: pep-clan-pop 420ms ease-out; }
  .pep-clan-ring { animation: pep-clan-turn 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .pep-clan-ask { animation: pep-clan-open 220ms ease-out both; }
  .pep-clan-made { animation: pep-clan-pop 420ms ease-out both; }
  .pep-clan-chip { animation: pep-clan-glow 1.1s ease-out 1; transition: background-color 0.2s ease; }
  .pep-clan-tile { transition: border-color 0.2s ease; }
  .pep-clan-tile:hover { border-color: var(--pep-line-strong); }
  .pep-clan-start-field .pep-input { transition: border-color 0.2s ease; }
  @keyframes pep-clan-cell { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
  @keyframes pep-clan-settle { from { opacity: 0; transform: scale(0.86) rotate(-30deg); } to { opacity: 1; transform: none; } }
  @keyframes pep-clan-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
  @keyframes pep-clan-turn { from { opacity: 0; transform: rotate(-120deg); } to { opacity: 1; transform: none; } }
  @keyframes pep-clan-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  @keyframes pep-clan-glow { from { box-shadow: 0 0 0 5px rgb(255 255 255 / 18%); } to { box-shadow: 0 0 0 0 rgb(255 255 255 / 0%); } }
}
/* ---- 4f: clan page end ---- */
/* ---- 4f: clans end ---- */

/* ------------------------------------------------ a feed row is a post (round 13, round 17)
 * X's look, the owner's pick: the trader's face large in its own column, and
 * in the text's column beside it the head (round 17, PostByline: the name in
 * bold with the time beside it, the @short address under it with the clan
 * beside that), a sentence of what they did, the trade as a card, then the
 * action bar (Reply, Like, Share). Generous room inside each post and a
 * clear rule between two. Neutral greys; green and red only for a side or a
 * PnL; a liked heart in the like's red; the brand only in focus. A thesis in
 * a list (.pep-thesis-post) is drawn the same way. */

.pep-post,
.pep-thesis.pep-thesis-post { grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; padding: 18px 18px 12px; }
.pep-feed-item.pep-post { border-bottom-color: var(--pep-line-strong); }
.pep-post:hover, .pep-thesis-rows .pep-thesis-post:hover { background: var(--pep-panel-2); }
.pep-post:hover .pep-post-card, .pep-thesis-rows .pep-thesis-post:hover .pep-ttc { background: var(--pep-panel); }
.pep-post-face { display: block; align-self: start; border-radius: 50%; line-height: 0; }
.pep-post-face .pep-face { width: 44px; height: 44px; }
.pep-post-main { display: grid; gap: 10px; min-width: 0; }

.pep-post .pep-post-head { align-items: start; gap: 2px 8px; }
.pep-post-clan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 160px;
  padding: 1px 8px 1px 3px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  color: var(--pep-text-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.pep-post-clan .pep-clan-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.pep-post-clan:hover { border-color: var(--pep-text-3); color: var(--pep-text); }
a.pep-post-clan:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }

/* The sentence: the post's own words (a thesis's context line is smaller, the thesis's words come under it). */
.pep-post-say { margin: 0; color: var(--pep-text); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.pep-post-say-ctx { color: var(--pep-text-2); font-size: 13px; }
.pep-post-side { font-weight: 800; letter-spacing: 0.02em; }
.pep-post-what { font-weight: 700; }
.pep-post-say .pep-feed-up { font-size: inherit; }

/* The trade, embedded. In a narrow text column (a phone, the rail) its side's badge goes under the market rather
   than cutting the market's name short. */
.pep-post .pep-post-card { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-left: 0; padding: 12px; }
.pep-post .pep-strip .pep-ttc-what { flex-wrap: wrap; row-gap: 6px; }

.pep-post .pep-post-card .pep-feed-note { padding-left: 0; }

/* A thesis is the post's words: no indent, a size up; its conversation under it. */
.pep-post .pep-feed-thesis { padding-left: 0; }
.pep-post .pep-thesis-body { font-size: 15px; }
.pep-post .pep-replies,
.pep-thesis-post .pep-replies { margin-left: 0; padding: 10px 12px; border-radius: var(--pep-radius-sm); background: var(--pep-panel-2); }

/* The action bar: icon buttons with their counts, spread as X spreads them, each a 32 px target, their icons on the
   text's left edge (the first button's own padding is taken back). */
.pep-post-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 28px; margin-left: -8px; }
.pep-post-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 32px;
  min-height: 32px;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--pep-radius-pill);
  background: transparent;
  color: var(--pep-text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.pep-post-act:hover:where(:not([disabled]):not([aria-disabled="true"])) { background: var(--pep-panel-hover); color: var(--pep-text); }
a.pep-post-act:hover { color: var(--pep-text); }
.pep-post-act:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 1px; }
.pep-post-act[disabled] { cursor: default; opacity: 0.5; }
.pep-post-act[aria-disabled="true"] { cursor: progress; }
.pep-post-icon { flex: none; width: 18px; height: 18px; }
/* Liked (round 14): the heart filled and the count in the like's red, a hover tinted with it; not liked, the outline in
   the muted text the rest of the bar is in. */
.pep-post-like-on .pep-post-act { color: var(--pep-like); }
.pep-post-like-on .pep-post-act:hover:where(:not([disabled]):not([aria-disabled="true"])) {
  background: color-mix(in srgb, var(--pep-like) 12%, transparent);
  color: var(--pep-like);
}
.pep-post-copy { color: var(--pep-text); }
.pep-post-share, .pep-post-copy-off { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.pep-post-said { margin: 0; }
.pep-post-more { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-left: auto; }
.pep-post-bar .pep-write { display: inline-flex; flex-wrap: wrap; align-items: center; }

/* The rail (300 px): the same post, smaller - a smaller face, no clan, the words a size down, Copy and Share as their
   icons. Its head is the post's: the name and the time on one line, the @address under them. */
.pep-post.pep-post-compact { gap: 0 10px; padding: 14px 12px 8px; }
.pep-post-compact .pep-post-face .pep-face { width: 32px; height: 32px; }
.pep-post-compact .pep-post-main { gap: 8px; }
.pep-post-compact .pep-post-say { font-size: 13px; }
.pep-post-compact .pep-post-bar { gap: 2px 4px; }
.pep-post-compact .pep-post-head { display: block; }
.pep-post-compact .pep-post-who .pep-trader-primary { font-size: 14px; }
.pep-post-compact .pep-post-who .pep-feed-ago,
.pep-post-compact .pep-post-who .pep-trader-address { font-size: 12px; }
.pep-post-compact .pep-post-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 599px) {
  .pep-post, .pep-thesis.pep-thesis-post { gap: 0 10px; padding: 14px 14px 10px; }
  .pep-post-face .pep-face { width: 40px; height: 40px; }
  /* A phone's bar is one line of icons and counts, spread across the post; Copy and Share are named to a screen reader. */
  .pep-post-bar { justify-content: space-between; gap: 2px 4px; }
  .pep-post-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pep-post { transition: background-color 0.15s ease; }
  /* A like this bar just made pops its heart once (only a like: an unlike is still). */
  .pep-post-like-on.pep-post-like-beat .pep-post-icon { animation: pep-like-pop 380ms cubic-bezier(0.2, 1.6, 0.4, 1) both; }
  @keyframes pep-like-pop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
  .pep-like-own-said:not(:empty) { animation: pep-feed-in 180ms ease-out both; }
}

/* ------------------------------------------------ a post's head (round 17, PostByline)
 * X's head, the owner's ask ("username with the address under it"), the same
 * on a feed post, the rail's and a thesis in any list: the name in bold, the
 * time beside it on its line (never alone on one: the name is cut short
 * first); under it the @short address, muted, in the hex face, with the
 * clan's tag (or when a thesis's trade was) beside it, wrapping under the
 * address in a narrow column. */
.pep-post-who { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.pep-by-line { display: flex; align-items: baseline; gap: 0 6px; max-width: 100%; min-width: 0; }
.pep-by-name { flex: 0 1 auto; min-width: 0; }
.pep-by-name .pep-trader-primary { min-width: 0; font-size: 15px; line-height: 1.3; }
.pep-post-who .pep-feed-ago { flex: none; margin-left: 0; color: var(--pep-text-3); font-size: 13px; }
.pep-by-sub { flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pep-by-sub .pep-trader-address { color: var(--pep-text-3); font-size: 13px; line-height: 1.3; white-space: nowrap; }
/* "@0x12...ab" under a name; an unnamed trader is its short address alone, on the name's line. */
.pep-by-sub .pep-trader-address::before { content: "@"; }
.pep-by-note { color: var(--pep-text-3); font-size: 13px; white-space: nowrap; }
.pep-trader-address + .pep-by-note::before { content: "\00b7"; margin-right: 6px; }
.pep-post-who > .pep-trader-warn, .pep-post-who > .pep-feed-copying { margin-top: 2px; }

/* A thesis in a list as a post: its head is the byline alone (the moderators' queue keeps the flex row), the words a
   comfortable read, and its focus ring inside its own edge (a list sits in a panel). */
.pep-thesis-post .pep-thesis-head { display: block; }
.pep-thesis-pinned .pep-thesis.pep-thesis-post { padding-top: 10px; }
.pep-thesis.pep-thesis-post:focus-visible { outline-offset: -2px; }