/* SENDIT's design language: the near-black green of the brand film, lime as
 * the one loud colour, cream text, DM Sans.
 *
 * A LAYER, NOT A REPLACEMENT. shared-ui's tokens, base, components and motion
 * load first on every origin (tests/ui-invariants.test.mjs), and the wallet
 * modal and shell.js depend on them. This sheet re-grounds the app on a
 * green-black and adds the pep- vocabulary the screens are built from (the
 * prefix and data-app="pepper" are the app's internal names and stay).
 *
 * COLOUR HAS THREE JOBS AND THEY DO NOT OVERLAP. --pep-brand, SENDIT lime, is
 * the brand: the logo, the primary action, the active tab, focus. --pep-up and
 * --pep-down (declared in pepper.css) mean direction and nothing else: up and
 * down, Long and Short, profit and loss. Up is an emerald, not the lime, so a
 * gain never reads as a button. A banner (dex.css, .pep-callout) is the one
 * place they stand for something else, done and failed, and it always says
 * so in words beside its stripe.
 *
 * Numbers are tabular everywhere a column of them has to line up.
 */

body[data-app="pepper"] {
  --pep-ground: #0b100c;
  --pep-panel: #121912;
  --pep-panel-2: #192219;
  --pep-panel-hover: #212d20;
  --pep-line: rgb(226 255 196 / 8%);
  --pep-line-strong: rgb(226 255 196 / 16%);
  --pep-text: #f3f3e8;
  --pep-text-2: #a9b29e;
  --pep-text-3: #7a8570;
  --pep-brand: #c3f56f;
  --pep-brand-ink: #0b100c;
  --pep-brand-soft: rgb(195 245 111 / 10%);
  --pep-sage: #7f9468;
  --pep-warn: #f5a524;
  /* A banner's tone (dex.css, .pep-callout): success and failure borrow the
     direction hues, and only ever beside a stripe and words that say which. */
  --pep-ok: var(--pep-up);
  --pep-danger: var(--pep-down);
  /* A like (round 14): the liked heart and its count, a rose red of its own, never the loss's --pep-down (a like is
     not a direction). 4.8:1 or more on every ground a post sits on (the page, a panel, a hovered post and button). */
  --pep-like: #ff5c7a;
  /* A row a link focused (?pos=): an amber tint of its ground, never a bar down its edge. */
  --pep-focus-tint: color-mix(in srgb, var(--pep-warn) 12%, transparent);
  --pep-radius: 18px;
  --pep-radius-sm: 12px;
  --pep-radius-pill: 999px;
  --pep-num-xl: 30px;
  --pep-num-lg: 20px;
  --pep-top-h: 60px;
  --pep-ticker-h: 34px;
  --pep-side-w: 300px;
  --pep-side-shut: 56px;
  --pep-aside-w: 360px;
  --pep-tabbar-h: 64px;
  background: var(--pep-ground);
  color: var(--pep-text);
}

/* ------------------------------------------------------------ utilities */

.pep-tnum { font-variant-numeric: tabular-nums; }
/* An address, a hash, a name: characters, read one by one. Inter's
   contextual alternates ("calt") draw the x of "0x0..." as a multiplication
   sign between two figures, so they are off wherever one is drawn: .pep-hex
   (components/HexText.jsx puts one on each inside a sentence, and
   lib/hexTree.js inside every element of a notice), the wallet's button and
   its menu's address, which shared-ui/wallet.js draws, and every input and
   textarea, where an address is pasted or typed. The one rule for it,
   prefixed by body[data-app] so that no "font: inherit" on a button or an
   input (it resets font-feature-settings) outranks it. */
body[data-app="pepper"] .pep-hex,
body[data-app="pepper"] .pep-topbar .ex-wallet .ex-btn,
body[data-app="pepper"] .ex-wmenu-addr,
body[data-app="pepper"] input,
body[data-app="pepper"] textarea { font-feature-settings: "calt" 0; }
.pep-muted { color: var(--pep-text-2); }
.pep-faint { color: var(--pep-text-3); }

/* --------------------------------------------------------------- panels */

.pep-panel {
  background: var(--pep-panel);
  border-radius: var(--pep-radius);
  padding: 16px;
}
.pep-panel-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--pep-text);
}

/* ---------------------------------------------------------------- pills
 * The fomo stat strip: a label over a large tabular number. The headline pill
 * (price on the trade screen) drops its background and grows its number. */

.pep-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.pep-pill {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 88px;
  padding: 8px 14px;
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2);
}
.pep-pill-k { font-size: 11px; color: var(--pep-text-3); letter-spacing: 0.02em; }
.pep-pill-v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pep-text); }
/* A pill's figure that says a direction keeps it: .pep-pill-v loads after
   pepper.css's .pep-dir-* with the same weight, so without these the
   profile's PnL, a token's 1D and a market's 24h change are drawn white. */
.pep-pill-v.pep-dir-up { color: var(--pep-up); }
.pep-pill-v.pep-dir-down { color: var(--pep-down); }
.pep-pill-v.pep-dir-flat { color: var(--pickle-muted); }
.pep-pill-head { background: transparent; padding-left: 0; }
.pep-pill-head .pep-pill-v { font-size: var(--pep-num-xl); font-weight: 800; letter-spacing: -0.01em; }
.pep-bignum {
  font-size: var(--pep-num-xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------- buttons */

.pep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--pep-panel-2);
  color: var(--pep-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
/* Only an enabled button answers the pointer: a disabled one, hovered, draws
   exactly as it does at rest. :where() adds no weight, so every rule that
   out-ranked a plain :hover (the portfolio card's own grey) still does.
   Each :hover also restates its button's words' colour, hovered or not, so a
   button drawn as a link keeps it under base.css's a:hover (SENDIT's lime,
   the brand, which is never a button's text). */
.pep-btn:hover { color: var(--pep-text); }
.pep-btn:hover:where(:not([disabled]):not([aria-disabled="true"])) { background: var(--pep-panel-hover); }
.pep-btn:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-btn[disabled],
.pep-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
/* A disabled secondary stays a button: drawn whole, with dimmed words and an
   edge, not see-through (a 45 % layer on a panel of nearly its own grey read
   as bare text, and tore along compositor tiles). */
.pep-btn:not(.pep-btn-primary):not(.pep-btn-long):not(.pep-btn-short):not(.pep-btn-link)[disabled],
.pep-btn:not(.pep-btn-primary):not(.pep-btn-long):not(.pep-btn-short):not(.pep-btn-link)[aria-disabled="true"] {
  opacity: 1;
  color: var(--pep-text-3);
  box-shadow: inset 0 0 0 1px var(--pep-line-strong);
}
/* The primary action is SENDIT lime with dark words, a pill like the brand
   film's "Meet SENDIT". Long is emerald and Short red, so no primary reads as a
   direction. */
.pep-btn-primary { border-radius: var(--pep-radius-pill); background: var(--pep-brand); color: var(--pep-brand-ink); }
.pep-btn-primary:hover { color: var(--pep-brand-ink); }
.pep-btn-primary:hover:where(:not([disabled]):not([aria-disabled="true"])) { background: #d2ff86; }
/* A primary that cannot be pressed yet is not lime at half strength (an olive
   that reads as a colour of its own): it is drawn as a waiting grey button. */
.pep-btn-primary[disabled],
.pep-btn-primary[aria-disabled="true"] {
  opacity: 1;
  background: var(--pep-panel-2);
  color: var(--pep-text-3);
  box-shadow: inset 0 0 0 1px var(--pep-line-strong);
}
.pep-btn-long { background: var(--pep-up); color: #06140c; }
.pep-btn-long:hover { color: #06140c; }
.pep-btn-long:hover:where(:not([disabled]):not([aria-disabled="true"])) { filter: brightness(1.08); background: var(--pep-up); }
.pep-btn-short { background: var(--pep-down); color: #1a0605; }
.pep-btn-short:hover { color: #1a0605; }
.pep-btn-short:hover:where(:not([disabled]):not([aria-disabled="true"])) { filter: brightness(1.08); background: var(--pep-down); }
.pep-btn-block { width: 100%; }
.pep-btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.pep-btn-link {
  min-height: 0;
  padding: 0;
  background: transparent;
  color: var(--pep-text-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pep-btn-link:hover { color: var(--pep-text-2); }
.pep-btn-link:hover:where(:not([disabled]):not([aria-disabled="true"])) { background: transparent; color: var(--pep-text); }

/* ---------------------------------------------------- segmented control */

.pep-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--pep-panel-2); }
.pep-seg > button {
  flex: 1;
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--pep-text-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pep-seg > button[aria-pressed="true"] { background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-seg-long[aria-pressed="true"] { background: var(--pep-up); color: #06140c; }
.pep-seg-short[aria-pressed="true"] { background: var(--pep-down); color: #1a0605; }
.pep-seg > button:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 1px; }

/* -------------------------------------------------------------- avatars
 * Initials on one of eight hues picked from the label (lib/avatar.js). The
 * hue is a class, never a style attribute. */

.pep-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
}
.pep-avatar-sm { width: 22px; height: 22px; font-size: 9px; }
.pep-avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.pep-avatar-xs { width: 16px; height: 16px; font-size: 7px; letter-spacing: 0; }
/* A market's logo (components/MarketAvatar.jsx): a same-origin SVG with a full-bleed background, clipped round by
   .pep-avatar's radius, sized as the initials it replaces. The hairline keeps a white mark (a flag, Google's) round
   against a light panel. */
.pep-mlogo { object-fit: cover; box-shadow: 0 0 0 1px var(--pep-line-strong); }
/* A trader's face (components/TraderFace.jsx): the same sizes as an avatar,
   and one smaller for the chart's quiet groups. */
.pep-face { display: inline-block; flex: none; width: 28px; height: 28px; border-radius: 50%; }
.pep-face-xs { width: 17px; height: 17px; }
.pep-face-sm { width: 22px; height: 22px; }
.pep-face-lg { width: 40px; height: 40px; }
/* Round 14: a trader's own photo in the face's place (social-api's square WebP), cropped to the same circle. */
.pep-face-photo { object-fit: cover; background: var(--pep-panel-2); }
/* Each hue holds an avatar's white initials at 4.5:1 or more (round 5: the orange, the teal and the light blue were
   3.2-3.9:1). */
.pep-hue-0 { background: #3a5bd9; }
.pep-hue-1 { background: #7c4ddb; }
.pep-hue-2 { background: #c2408f; }
.pep-hue-3 { background: #ad5f1e; }
.pep-hue-4 { background: #20806f; }
.pep-hue-5 { background: #4f7a2e; }
.pep-hue-6 { background: #2a70ab; }
.pep-hue-7 { background: #8a6d3b; }

/* --------------------------------------------------------- badges, dots */

.pep-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--pep-radius-pill);
  background: var(--pep-panel-2);
  color: var(--pep-text-2);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.pep-badge-open { color: var(--pep-up); }
.pep-badge-closed { color: var(--pep-warn); }
.pep-badge-soon { color: var(--pep-text-3); }
.pep-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pep-text-3); }
.pep-dot-live { background: var(--pep-up); }
.pep-dot-warn { background: var(--pep-warn); }

/* --------------------------------------------------------------- inputs */

.pep-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  min-height: 52px;
  border-radius: 12px;
  background: var(--pep-panel-2);
  border: 1px solid transparent;
}
.pep-input-row:focus-within { border-color: var(--pep-line-strong); }
.pep-input-prefix { color: var(--pep-text-3); font-size: 22px; font-weight: 700; }
.pep-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--pep-text);
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pep-input:focus { outline: none; }

/* ================================================================= shell
 * Three columns under a top bar and over a ticker. The centre column is the
 * only one that scrolls with the document; the sidebar sticks under the top
 * bar and scrolls its own list. On a touch screen under 900 px the sidebar
 * and the ticker give way to a fixed tab bar.
 *
 * THE SHELL'S TWO MODES (round 21, the owner's "safety about the pointer"):
 * the phone's shell needs a screen under 900 px AND a primary pointer that is
 * a finger, which cannot hover (lib/shell.js PHONE_SHELL says why `pointer`,
 * not `any-pointer`). A computer keeps the desktop shell in any window. CSS
 * has no shared custom media yet, so the one condition is repeated, word for
 * word, and tests/pepper-shell.test.mjs holds every shell rule to it:
 *
 *   phone                    @media (max-width: 899px) and (hover: none) and (pointer: coarse)
 *   desktop (its complement) @media not all and (max-width: 899px) and (hover: none) and (pointer: coarse)
 *   a computer's narrow window, under a width W (the complement, within W):
 *     @media (max-width: W) and (hover: hover), (max-width: W) and (pointer: fine), (max-width: W) and (pointer: none)
 *
 * Content (a sheet's columns, a page's own 899 px rules) stays on the width. */

.pep-app {
  display: grid;
  grid-template-columns: var(--pep-side-w) minmax(0, 1fr);
  grid-template-rows: var(--pep-top-h) minmax(0, 1fr) var(--pep-ticker-h);
  grid-template-areas: "top top" "side centre" "ticker ticker";
  min-height: 100dvh;
}
.pep-app[data-side="shut"] { grid-template-columns: var(--pep-side-shut) minmax(0, 1fr); }

/* The page's one skip link (Layout.jsx; also .skip-link, so shell.js adds none): off screen until focused, never shared-ui's
   fixed and translated .skip-link. */
.pep-skip { position: absolute; left: -9999px; top: 8px; transform: none; transition: none; }
.pep-skip:focus {
  left: 16px;
  z-index: 60;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--pep-text);
  color: var(--pep-ground);
}

.pep-topbar {
  grid-area: top;
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 0 16px;
  background: var(--pep-ground);
  border-bottom: 1px solid var(--pep-line);
}
.pep-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  color: var(--pep-text);
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
}
.pep-brand:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 4px; }
/* The five places (round 4, N1): Perps and Portfolio links, the Tokens, Earn
   and Social menus. The section you are in is a filled pill, on a menu's
   button too: its words in full colour on the raised ground, the way the
   rail's tabs and every segmented control here say "this one" - the one mark
   in the bar that means "here". A hover lights the words only, so no other
   place ever looks current. */
.pep-nav { display: flex; flex: none; align-self: stretch; align-items: center; gap: 4px; }
.pep-nav > a,
.pep-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pep-text-2);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.pep-nav > a:hover,
.pep-menu-btn:hover,
.pep-menu-btn[aria-expanded="true"] { color: var(--pep-text); }
.pep-nav > a:focus-visible,
.pep-menu-btn:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-nav > a[aria-current="page"],
.pep-menu-btn[aria-current="true"] { color: var(--pep-text); background: var(--pep-panel-hover); }
.pep-menu-chev { width: 12px; height: 12px; margin-right: -3px; color: var(--pep-text-2); }
@media (prefers-reduced-motion: no-preference) {
  .pep-menu-chev { transition: transform 0.15s ease; }
}
.pep-menu-btn[aria-expanded="true"] .pep-menu-chev { transform: rotate(180deg); }

/* A menu hangs under its button, drawn as the account's panel is (sendit.css
   .pep-acct-panel): the panel ground, a hairline ring and a deep shadow. The
   menu box is the bar's full height, so the panel starts at the bar's foot;
   its ::before bridges the gap above it, so a pointer crossing from the
   button never leaves the menu (TopBar.jsx's close delay covers the rest). */
.pep-menu { position: relative; display: flex; align-self: stretch; align-items: center; }
.pep-menu-panel {
  position: absolute;
  top: calc(100% - 2px);
  left: -8px;
  z-index: 60;
  display: grid;
  gap: 2px;
  width: 290px;
  padding: 8px;
  border-radius: 18px;
  background: var(--pep-panel);
  box-shadow: inset 0 0 0 1px var(--pep-line-strong), 0 24px 60px rgb(0 0 0 / 55%);
}
.pep-menu-panel::before { position: absolute; top: -10px; right: 0; left: 0; height: 10px; content: ""; }
.pep-menu-panel[hidden] { display: none; }
.pep-menu-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 2px 12px;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--pep-text);
  text-decoration: none;
}
.pep-menu-item:hover,
.pep-menu-item:focus { background: var(--pep-panel-2); color: var(--pep-text); }
.pep-menu-item:focus { outline: none; }
.pep-menu-item:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
/* Each place's icon (round 21: the phone's, here too), beside its name and its line. */
.pep-menu-ico { grid-row: span 2; align-self: center; width: 20px; height: 20px; color: var(--pep-text-2); }
.pep-menu-item[aria-current="page"] .pep-menu-ico { color: var(--pep-text); }
.pep-menu-label { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pep-menu-note { color: var(--pep-text-2); font-size: 13px; line-height: 1.3; }
/* The page shown: its place on the raised ground, a dot after its name (in the
   words' own colour: lime is the primary action's). */
.pep-menu-item[aria-current="page"] { background: var(--pep-panel-hover); }
.pep-menu-item[aria-current="page"] .pep-menu-label::after {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pep-text);
  content: "";
}
.pep-topbar-search { display: flex; flex: 1; justify-content: center; min-width: 0; }
.pep-topbar-end { display: flex; flex: none; align-items: center; gap: 10px; }
/* The wallet button is shared-ui's .ex-btn, which wallet.js paints (".on"
   signed in) with the estate's accent tint - SENDIT lime here - and which
   pepper.css tints lime on hover. The lime is kept for the logo, the primary
   action, the active tab and focus rings, so in SENDIT's header it is drawn as a secondary button:
   grey signed out and in, lighter under the pointer, ringed on focus. Scoped
   to SENDIT's own top bar, so no other app's wallet button changes. */
body[data-app="pepper"] .pep-topbar .ex-wallet .ex-btn,
body[data-app="pepper"] .pep-topbar .ex-wallet .ex-btn.on {
  border-color: transparent;
  border-radius: 12px;
  background: var(--pep-panel-2);
  color: var(--pep-text);
  font-weight: 700;
}
body[data-app="pepper"] .pep-topbar .ex-wallet .ex-btn:hover,
body[data-app="pepper"] .pep-topbar .ex-wallet .ex-btn:focus-visible {
  border-color: transparent;
  background: var(--pep-panel-hover);
  color: var(--pep-text);
}
body[data-app="pepper"] .pep-topbar .ex-wallet .ex-btn:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
/* A wallet named with a long .pickle name (up to 39 characters) would push
   the bar off a tablet: the button is capped and its words end in an
   ellipsis. wallet.js puts the whole name in its title and aria-label. */
body[data-app="pepper"] .pep-topbar .ex-wallet .ex-btn {
  display: block;
  max-width: 200px;
  overflow: hidden;
  line-height: calc(var(--pickle-tap) - 2px);
  text-overflow: ellipsis;
}

.pep-side {
  grid-area: side;
  position: sticky;
  top: var(--pep-top-h);
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--pep-top-h) - var(--pep-ticker-h));
  overflow: hidden;
  background: var(--pep-ground);
  border-right: 1px solid var(--pep-line);
}
.pep-side-head { display: flex; align-items: center; gap: 6px; padding: 10px; }
/* Three tabs (U1: Markets, Tokens, Feed), each a third of one track: a switch
   between three lists, never cut and never scrolled (the five of 4b-4d
   scrolled sideways in a 300 px rail and read "Leaderb..." at rest). */
.pep-side-tabs {
  display: flex;
  flex: 1;
  gap: 4px;
  min-width: 0;
  padding: 4px;
  border-radius: 12px;
  background: var(--pep-panel);
  box-shadow: inset 0 0 0 1px var(--pep-line);
}
.pep-side-tab {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 30px;
  padding: 0 4px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--pep-text-2);
  white-space: nowrap;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.pep-side-tab:hover { color: var(--pep-text); }
.pep-side-tab[aria-selected="true"] { background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-side-tab[disabled] { color: var(--pep-text-3); cursor: not-allowed; }
.pep-side-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 0;
  border-radius: 8px;
  background: var(--pep-panel-2);
  color: var(--pep-text-2);
  cursor: pointer;
}
.pep-side-toggle:focus-visible,
.pep-side-tab:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 1px; }
.pep-side-panel { flex: 1; overflow-y: auto; padding: 0 10px 12px; }
.pep-side-empty { padding: 8px; color: var(--pep-text-2); font-size: 13px; }
/* Under the rail's Tokens list: the whole list, /tokens/, in the order shown (SideTokens.jsx). */
.pep-side-all { margin: 0; padding: 10px 8px 4px; font-size: 13px; }
.pep-side-empty a { color: var(--pep-text); }

.pep-centre { grid-area: centre; min-width: 0; }
.pep-page { padding-top: 20px; padding-bottom: 40px; }
/* Round 24 (the owner: "at every screen size it should take all the available space"): a trade screen, a market's
   (.pep-trade) or a token's (.pep-token), drops the estate's 1240 px measure (.ex-wrap) and fills the centre column,
   the rail open or folded, inside the page's own gutters. Every other page keeps the measure. */
.ex-wrap.pep-page:has(> .pep-trade, > .pep-token) { width: 100%; }

.pep-ticker {
  grid-area: ticker;
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 0 16px;
  overflow: hidden;
  background: var(--pep-ground);
  border-top: 1px solid var(--pep-line);
  font-size: 12px;
}
.pep-ticker-items { display: flex; gap: 18px; min-width: 0; margin: 0; padding: 0; overflow: hidden; list-style: none; }
.pep-ticker-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pep-ticker-base { font-weight: 700; }
.pep-ticker-end { display: flex; align-items: center; gap: 14px; margin-left: auto; white-space: nowrap; }
.pep-ticker-end a { color: var(--pep-text-2); text-decoration: none; }
.pep-ticker-end a:hover { color: var(--pep-text); }
.pep-ticker-health { display: inline-flex; align-items: center; gap: 6px; color: var(--pep-text-2); }

/* The shell's icons (components/shell/Icon.jsx): 24 px outline glyphs in the words' colour; each place sizes its own. */
.pep-ico { display: block; flex: none; width: 24px; height: 24px; }

.pep-tabbar { display: none; }
.pep-more[hidden] { display: none; }
.pep-more { display: none; }
.pep-search-open { display: none; }

/* From 900 px the top bar (--pep-top-h, 60 px) and the ticker (--pep-ticker-h, 34 px) stay on screen while the page
   scrolls: whatever is brought into view - a control the keyboard focuses, an edit opened by a drag on the chart
   (scrollIntoView) - stops 12 px clear of both, never under them (round 5 fix 2, WCAG 2.4.11). That is the desktop
   shell's, a computer's narrow window included; the phone's fixed bars are the screens' own to clear. */
@media not all and (max-width: 899px) and (hover: none) and (pointer: coarse) {
  /* The bars' heights are the body's tokens (shell.css founds them on body, never :root): html has them as values. */
  html {
    scroll-padding-top: 72px;
    scroll-padding-bottom: 46px;
  }
}

.pep-with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pep-aside-w);
  gap: 16px;
  align-items: start;
}
.pep-with-aside-main { min-width: 0; }
.pep-with-aside-side { position: sticky; top: calc(var(--pep-top-h) + 16px); min-width: 0; }

@media (max-width: 1279px) {
  .pep-brand-name { display: none; }
  .pep-with-aside { grid-template-columns: minmax(0, 1fr); }
  .pep-with-aside-side { position: static; }
}

@media (max-width: 899px) and (hover: none) and (pointer: coarse) {
  .pep-app,
  .pep-app[data-side="shut"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--pep-top-h) minmax(0, 1fr);
    grid-template-areas: "top" "centre";
    padding-bottom: calc(var(--pep-tabbar-h) + env(safe-area-inset-bottom));
  }
  .pep-nav,
  .pep-side,
  .pep-ticker { display: none; }
  .pep-topbar { gap: 10px; padding: 0 12px; }
  /* THE TAB BAR (round 21, the owner: "like a real app", an icon on every button): five equal tabs, each a 24 px
     icon over an 11 px word, on the ground blurred behind a hairline, clear of the home indicator. Every tab is the
     bar's full height (64 px: well over the 44 px a thumb needs). Inactive tabs are muted; the tab you are on (and
     More on a place only its sheet holds) is lime, its icon on a soft lime pill. */
  .pep-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--pep-tabbar-h) + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom);
    background: var(--pep-panel);
    border-top: 1px solid var(--pep-line);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pep-tabbar {
      background: color-mix(in srgb, var(--pep-ground) 82%, transparent);
      -webkit-backdrop-filter: blur(18px) saturate(150%);
      backdrop-filter: blur(18px) saturate(150%);
    }
  }
  .pep-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    height: var(--pep-tabbar-h);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pep-text-2);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pep-tab-ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 30px;
    border-radius: var(--pep-radius-pill);
  }
  .pep-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pep-tab:hover { color: var(--pep-text); }
  .pep-tab[aria-current="page"],
  .pep-tab[aria-current="true"],
  .pep-tab[aria-expanded="true"] { color: var(--pep-brand); }
  .pep-tab[aria-current="page"] .pep-tab-ico,
  .pep-tab[aria-current="true"] .pep-tab-ico { background: var(--pep-brand-soft); }
  .pep-tab:focus-visible { outline: none; }
  .pep-tab:focus-visible .pep-tab-ico { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
  /* Balance's dot is the chip's (bank.css .pep-bank-chip-dot: amber, ringed by the ground); More's says messages wait. */
  .pep-tab-dot {
    position: absolute;
    top: 2px;
    right: 11px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pep-warn);
    box-shadow: 0 0 0 2px var(--pep-ground);
  }

  /* THE MORE SHEET: a modal over the whole screen (the bar included), a scrim and, from just under the screen's top,
     a panel that runs to its foot: a grab handle, its title and a close button, then the account, the places as app
     rows under their headings, and Sign in or Disconnect. The panel's body scrolls its own rows; the page under it
     is inert and held (html.pep-held), so nothing behind it moves. */
  .pep-more:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: block;
  }
  .pep-more-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 60%); }
  .pep-more-panel {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 24px);
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    border-radius: 22px 22px 0 0;
    background: var(--pep-panel);
    box-shadow: inset 0 1px 0 var(--pep-line-strong), 0 -20px 50px rgb(0 0 0 / 50%);
  }
  .pep-more-panel:focus { outline: none; }
  .pep-more-top {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    padding: 16px 10px 4px 20px;
  }
  .pep-more-grab {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--pep-line-strong);
  }
  .pep-more-title { margin: 0; font-size: 20px; font-weight: 800; }
  .pep-more-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pep-text-2);
    cursor: pointer;
  }
  .pep-more-close:hover { background: var(--pep-panel-hover); color: var(--pep-text); }
  .pep-more-close:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
  .pep-more-body {
    display: grid;
    flex: 1;
    align-content: start;
    gap: 18px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 12px calc(20px + env(safe-area-inset-bottom));
  }
  .pep-more-acct {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--pep-radius);
    background: var(--pep-panel-2);
  }
  .pep-more-acct .pep-face-lg { width: 48px; height: 48px; }
  .pep-more-acct-who { display: grid; grid-column: span 1; gap: 2px; min-width: 0; }
  .pep-more-acct-who:first-child { grid-column: 1 / -1; }
  .pep-more-acct-who b { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
  .pep-more-acct-who .pep-faint { font-size: 13px; }
  .pep-more-acct-bal {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--pep-ground);
    color: var(--pep-text);
    font-size: 14px;
    text-decoration: none;
  }
  .pep-more-acct-bal b { font-size: 17px; }
  .pep-more-acct-bal:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
  .pep-more-group { display: grid; gap: 6px; }
  .pep-more-h {
    margin: 0;
    padding: 0 8px;
    color: var(--pep-text-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .pep-more-list {
    display: grid;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    border-radius: var(--pep-radius);
    background: var(--pep-panel-2);
  }
  .pep-more-list > li + li { border-top: 1px solid var(--pep-line); }
  .pep-more-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 8px 12px 8px 16px;
    color: var(--pep-text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .pep-more-row:hover,
  .pep-more-row:active { background: var(--pep-panel-hover); color: var(--pep-text); }
  .pep-more-row:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
  .pep-more-ico { width: 22px; height: 22px; color: var(--pep-text-2); }
  .pep-more-text { display: grid; gap: 2px; min-width: 0; }
  .pep-more-label { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.25; }
  .pep-more-note { overflow: hidden; color: var(--pep-text-2); font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
  .pep-more-chev { width: 18px; height: 18px; color: var(--pep-text-3); }
  /* The page you are on: its row on a soft lime ground, its icon and word lime, as its tab would be. */
  .pep-more-row[aria-current="page"] { background: var(--pep-brand-soft); }
  .pep-more-row[aria-current="page"] .pep-more-ico,
  .pep-more-row[aria-current="page"] .pep-more-label { color: var(--pep-brand); }
  .pep-more-foot { padding-top: 4px; }
  .pep-more-sign {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--pep-line-strong);
    border-radius: var(--pep-radius-pill);
    background: transparent;
    color: var(--pep-text);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }
  .pep-more-sign .pep-more-ico { color: currentColor; }
  .pep-more-sign:hover { background: var(--pep-panel-hover); }
  .pep-more-sign:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }

  /* While the sheet or the full-screen search is open the page under it holds still, and the search hides the bar. */
  html.pep-held { overflow: hidden; }
  .pep-app:has(.pep-search-full) .pep-tabbar { display: none; }
  /* Messages and the watchlist are More's on a phone (round 21): the bar keeps the chip, the bell and the face. */
  .pep-topbar .pep-msgs-link { display: none; }
}
/* A tablet's sheet is a phone's width, centred. */
@media (min-width: 600px) and (max-width: 899px) and (hover: none) and (pointer: coarse) {
  .pep-more-panel { top: 40px; width: 560px; margin: 0 auto; border-radius: 22px 22px 0 0; }
}
/* A light press on a tab, the sheet rising and its scrim fading in: only for those who allow motion. */
@media (max-width: 899px) and (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .pep-tab-ico { transition: transform 0.12s ease, background-color 0.18s ease; }
  .pep-tab:active .pep-tab-ico { transform: scale(0.9); }
  .pep-more:not([hidden]) .pep-more-panel { animation: pep-more-rise 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .pep-more:not([hidden]) .pep-more-scrim { animation: pep-more-fade 0.2s ease; }
  @keyframes pep-more-rise { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes pep-more-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* -------------------------------------------------------- sidebar lists */

.pep-side-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pep-side-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  color: var(--pep-text);
  text-decoration: none;
}
.pep-side-row:hover { background: var(--pep-panel); }
.pep-side-row:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
.pep-side-name { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.pep-side-name b { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pep-side-fig { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; }

/* --------------------------------------------------------------- search */

.pep-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 440px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--pep-panel);
  border: 1px solid var(--pep-line);
}
.pep-search:focus-within { border-color: var(--pep-line-strong); }
.pep-search-icon { flex: none; color: var(--pep-text-3); }
.pep-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--pep-text);
  font: inherit;
  font-size: 14px;
  appearance: none;
}
.pep-search-input:focus { outline: none; }
.pep-search-input::-webkit-search-cancel-button { appearance: none; }
.pep-search-key {
  flex: none;
  padding: 0 6px;
  border: 1px solid var(--pep-line-strong);
  border-radius: 6px;
  color: var(--pep-text-3);
  font: inherit;
  font-size: 11px;
}
.pep-search-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 12px;
  background: var(--pep-panel-2);
  border: 1px solid var(--pep-line-strong);
  box-shadow: 0 12px 32px rgb(0 0 0 / 45%);
}
.pep-search-hit {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}
.pep-search-hit[aria-selected="true"] { background: var(--pep-panel-hover); }
.pep-search-label { font-weight: 700; }
.pep-search-sub {
  overflow: hidden;
  color: var(--pep-text-2);
  font-size: 12px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pep-search-none { padding: 10px; color: var(--pep-text-2); font-size: 13px; }

/* THE SEARCH ICON AND THE FULL-SCREEN SEARCH (round 21). Where the bar has no room for the field, an icon opens the
   same search full screen (Search.jsx: .pep-search-full, a modal over the page with a way back). The icon is drawn by
   the two rules below it, a phone's and a computer's narrow window's; the full screen is the class's wherever it is. */
.pep-search-open {
  flex: none;
  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-search-open .pep-ico { width: 18px; height: 18px; }
.pep-search-open:hover { border-color: var(--pep-line-strong); color: var(--pep-text); }
.pep-search-open:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-search-scrim { position: fixed; inset: 0; z-index: 69; background: var(--pep-ground); }
.pep-search.pep-search-full {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 10px);
  right: 12px;
  left: 64px;
  z-index: 70;
  display: flex;
  width: auto;
  max-width: none;
  height: 44px;
}
.pep-search-full .pep-search-input { font-size: 16px; }
.pep-search-full .pep-search-key { display: none; }
.pep-search-back {
  position: absolute;
  top: 0;
  left: -54px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pep-text);
  cursor: pointer;
}
.pep-search-back:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
.pep-search-full .pep-search-list {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 64px);
  right: 12px;
  left: 12px;
  max-height: calc(100dvh - env(safe-area-inset-top) - 76px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* While the full-screen search is open the page under it holds still. */
html:has(.pep-search-full) { overflow: hidden; }

/* A phone under 600 px: no room for the field in its bar, so the icon. */
@media (max-width: 899px) and (hover: none) and (pointer: coarse) and (max-width: 599px) {
  .pep-search-key { display: none; }
  .pep-topbar-search { justify-content: flex-end; }
  .pep-search { display: none; }
  .pep-search-open { display: inline-grid; }
  /* A phone's bar is tight: the wallet's button gives the search its room. */
  body[data-app="pepper"] .pep-topbar .ex-wallet .ex-btn { max-width: 140px; padding: 0 10px; font-size: 13px; }
  .pep-topbar-end { gap: 8px; }
}

/* The four places (round 4; round 10 took Profile to the account menu) are drawn from 900 px, where the phone's tab bar
   gives way; under 1100 px they sit closer, so the search keeps its room
   beside the widest bar (the bell, Messages and the account's face). */
@media (min-width: 900px) and (max-width: 1099px) {
  .pep-nav { gap: 0; }
  .pep-nav > a,
  .pep-menu-btn { padding: 0 8px; }
}

/* A COMPUTER'S NARROW WINDOW (round 21, the owner's "safety about the pointer"): under 900 px a computer keeps the
   desktop shell - the top bar's menus, the rail (folded until the viewer opens it: Layout.jsx) and the ticker - and the
   bar makes room step by step, the least needed first: the places sit closer; under 820 px the search is its icon,
   which opens the same search full screen ("/" too); under 700 px the Messages bubble goes (the account menu has
   Messages); under 600 px the menus' arrows go, everything sits closer still, and a menu or the chip's panel hangs
   from the bar's edge; under 520 px the balance chip drops its "+"; under 460 px (a window zoomed in) the bar takes
   two rows, and under 400 px the rail gives the page its room. Nothing is wider than the window, 320 px included
   (tests/e2e/pepper-shell.spec.mjs, "a computer's narrow window"). Each query is the desktop shell within a width:
   see THE SHELL'S TWO MODES above. */
@media (max-width: 899px) and (hover: hover), (max-width: 899px) and (pointer: fine), (max-width: 899px) and (pointer: none) {
  .pep-topbar { gap: 12px; padding: 0 12px; }
  .pep-nav { gap: 0; }
  .pep-nav > a,
  .pep-menu-btn { padding: 0 8px; }
  .pep-menu-panel { max-width: calc(100vw - 24px); }
}
@media (max-width: 819px) and (hover: hover), (max-width: 819px) and (pointer: fine), (max-width: 819px) and (pointer: none) {
  .pep-topbar-search { flex: 1 0 auto; justify-content: flex-end; }
  .pep-search { display: none; }
  .pep-search-open { display: inline-grid; }
}
@media (max-width: 699px) and (hover: hover), (max-width: 699px) and (pointer: fine), (max-width: 699px) and (pointer: none) {
  .pep-topbar .pep-msgs-link { display: none; }
}
@media (max-width: 599px) and (hover: hover), (max-width: 599px) and (pointer: fine), (max-width: 599px) and (pointer: none) {
  .pep-topbar { gap: 8px; padding: 0 10px; }
  .pep-topbar-end { gap: 8px; }
  .pep-nav > a,
  .pep-menu-btn { padding: 0 6px; font-size: 14px; }
  .pep-menu-chev { display: none; }
  body[data-app="pepper"] .pep-topbar .ex-wallet .ex-btn { max-width: 140px; padding: 0 10px; font-size: 13px; }
  /* A menu and the chip's panel hang from the bar itself, inside the window, not from their buttons. */
  .pep-topbar .pep-menu,
  .pep-topbar .pep-bank { position: static; }
  .pep-topbar .pep-menu-panel { left: 8px; }
  .pep-topbar .pep-bank-panel { right: 8px; }
}
@media (max-width: 519px) and (hover: hover), (max-width: 519px) and (pointer: fine), (max-width: 519px) and (pointer: none) {
  .pep-topbar { gap: 6px; padding: 0 8px; }
  .pep-topbar-end { gap: 6px; }
  .pep-nav > a,
  .pep-menu-btn { padding: 0 5px; font-size: 13px; }
  .pep-search-open,
  .pep-topbar .pep-bell-btn { width: 32px; height: 32px; }
  /* The chip keeps the total; its "+" (a way to Deposit, which the chip's panel opens with) gives its room. */
  .pep-topbar .pep-bank-chip { padding-right: 12px; }
  .pep-topbar .pep-bank-chip-plus { display: none; }
}
/* Under 460 px (a zoomed-in window: 400 % of 1280 px is 320) the bar takes two rows: the logo, the search icon and
   the account's end on the first, the four places under them; it is never wider than the window, down to 320 px. */
@media (max-width: 459px) and (hover: hover), (max-width: 459px) and (pointer: fine), (max-width: 459px) and (pointer: none) {
  body[data-app="pepper"] { --pep-top-h: 96px; }
  html { scroll-padding-top: 108px; }
  .pep-topbar { flex-wrap: wrap; align-content: center; row-gap: 4px; padding: 0 8px; }
  .pep-nav { order: 1; flex: 1 0 100%; height: 40px; }
}
/* Under 400 px (400 % zoom and beyond) the folded rail gives the page its 56 px too: the top bar and the ticker stay. */
@media (max-width: 399px) and (hover: hover), (max-width: 399px) and (pointer: fine), (max-width: 399px) and (pointer: none) {
  .pep-app,
  .pep-app[data-side="shut"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "centre" "ticker"; }
  .pep-side { display: none; }
}