/* /feed/ in round 16's look (pages/feed.jsx; the owner: "improve the feed's
 * design, a bit in the style of the screenshot; the banner is my image"):
 * the hero over the owner's banner, the tabs with their marks and "Filter
 * by market" (round 17: MarketFilter's pill, its panel and, on a phone, its
 * sheet), a post's head with Follow and its "...", the Top Traders card,
 * and the thesis's cashtags. The sub-bar left in round 17. The trade strip itself is
 * social.css's (every page draws it). Built from shell.css's tokens; lime is
 * the brand (the active tab, the primary action, the headline's second
 * line), green and red only a direction. */

.pep-fd { display: grid; gap: 18px; min-width: 0; }
.pep-fd .pep-with-aside { gap: 20px; }

/* ---------------------------------------------------------------- the hero
 * The owner's banner across the page, darkened from the left for the words
 * (a gradient over the picture, never over the words' own ground), the
 * pickle kept in view on the right (object-position). Its blurred
 * placeholder is the ground until the picture lands. */

.pep-fd-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 420px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--pep-ground) url("data:image/webp;base64,UklGRm4AAABXRUJQVlA4IGIAAADwAwCdASogAA0APu1yrU+pp6QiMAgBMB2JZgC7ABs2RhYbK4T3jDgAAPrfEuEEoXBGVsnRHjkN2XA52tx252W1ttZcZplXwFrV9ypW/rzHQacbXiZ4TDbAXaZvxl0u4QAAAA==") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--pep-line);
  isolation: isolate;
}
.pep-fd-hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 45%;
}
.pep-fd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(8 11 9 / 94%) 0%, rgb(8 11 9 / 84%) 30%, rgb(8 11 9 / 38%) 56%, rgb(8 11 9 / 0%) 74%),
    linear-gradient(0deg, rgb(8 11 9 / 70%) 0%, rgb(8 11 9 / 0%) 34%);
}
.pep-fd-hero-copy { display: grid; justify-items: start; gap: 14px; max-width: 580px; padding: 36px 44px; }
/* The kicker is the brand's (sendit.css .pep-eyebrow, the film's tracked capitals): here it sits in the copy's own gap. */
.pep-fd-hero-copy .pep-fd-kicker { margin: 0; }
.pep-fd-hero-h { margin: 0; font-size: clamp(36px, 4vw, 54px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; }
.pep-fd-hero-h span { display: block; }
.pep-fd-hero-lime { color: var(--pep-brand); }
.pep-fd-hero-line { max-width: 400px; margin: 0; color: var(--pep-text); font-size: 16px; font-weight: 500; line-height: 1.4; }
.pep-fd-hero-do { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pep-fd-hero-do .pep-btn { min-height: 42px; padding: 0 20px; font-size: 14px; }
.pep-fd-btn-ghost {
  border: 1px solid rgb(243 243 232 / 38%);
  border-radius: var(--pep-radius-pill);
  background: rgb(8 11 9 / 35%);
  color: var(--pep-text);
}
.pep-fd-btn-ghost:hover { border-color: var(--pep-text); color: var(--pep-text); }
.pep-fd-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; }
.pep-fd-faces { display: inline-flex; align-items: center; }
.pep-fd-faces > .pep-face,
.pep-fd-more {
  width: 32px;
  height: 32px;
  margin-left: -9px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--pep-ground);
}
.pep-fd-faces > :first-child { margin-left: 0; }
.pep-fd-more {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  width: auto;
  padding: 0 6px;
  border-radius: var(--pep-radius-pill);
  background: var(--pep-brand);
  color: var(--pep-brand-ink);
  font-size: 11px;
  font-weight: 800;
}
.pep-fd-proof-text { color: var(--pep-text-2); font-size: 13px; font-weight: 500; }

/* The newest trades, floating over the right of the banner: glass cards, a little apart, each a link. */
.pep-fd-floats {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  align-content: center;
  gap: 14px;
  width: min(272px, 30%);
  margin: 0;
  padding: 24px 28px 24px 0;
  list-style: none;
}
.pep-fd-floats > li:nth-child(2) { margin-right: 36px; margin-left: -36px; }
.pep-fd-float {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgb(226 255 196 / 14%);
  border-radius: 16px;
  background: rgb(11 16 12 / 78%);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgb(0 0 0 / 35%);
  color: var(--pep-text);
  font-size: 13px;
  text-decoration: none;
}
a.pep-fd-float:hover { border-color: var(--pep-text-3); color: var(--pep-text); }
a.pep-fd-float:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-fd-float-head, .pep-fd-float-mkt, .pep-fd-float-day { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pep-fd-float-who { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.pep-fd-float-mkt .pep-feed-badge { min-width: 0; margin-left: auto; overflow: hidden; font-size: 11px; text-overflow: ellipsis; }
.pep-fd-float-mkt b { font-size: 14px; }
.pep-fd-float-fig { margin-left: auto; font-weight: 700; }
.pep-fd-float-day .pep-spark { flex: 1; height: 26px; }
.pep-fd-float-day .pep-tnum { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .pep-fd-float { animation: pep-fd-bob 6s ease-in-out infinite; }
  .pep-fd-float-1 { animation-delay: -2s; }
  .pep-fd-float-2 { animation-delay: -4s; }
  @keyframes pep-fd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
}

/* ------------------------------------------------- the tabs and the filter */

.pep-fd-main { gap: 12px; scroll-margin-top: 80px; }
.pep-fd-main:focus { outline: none; }
.pep-fd-main .pep-feed-top { gap: 2px; }
.pep-fd-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pep-fd-tabs { display: flex; flex-wrap: wrap; gap: 6px; max-width: none; padding: 0; background: none; }
.pep-fd-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  background: transparent;
  color: var(--pep-text-2);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.pep-fd-tab:hover { border-color: var(--pep-text-3); color: var(--pep-text); }
.pep-fd-tab[aria-pressed="true"] { border-color: var(--pep-brand); background: var(--pep-brand-soft); color: var(--pep-brand); }
.pep-fd-tab:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
/* Round 24: the Clan tab's shield, the shell's own glyph (components/shell/Icon.jsx), at the other marks' 16 px. */
.pep-fd-tab .pep-fd-tab-ico { width: 16px; height: 16px; }
/* "Filter by market" (round 17, components/social/MarketFilter.jsx): a pill like the tabs, lime while a market is
   chosen, with its clear x; under it a panel with a search, All markets, the perps with their live price and 24 h
   change, and the tokens; on a phone the same panel as a sheet from the screen's foot. */
.pep-mf { position: relative; display: inline-flex; min-width: 0; }
.pep-mf-pill {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  border: 1px solid var(--pep-line-strong);
  border-radius: var(--pep-radius-pill);
  background: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pep-mf-pill:hover, .pep-mf-pill-open { border-color: var(--pep-text-3); }
.pep-mf-pill-on { border-color: var(--pep-brand); background: var(--pep-brand-soft); }
.pep-mf-pill-on:hover, .pep-mf-pill-on.pep-mf-pill-open { border-color: var(--pep-brand); }
.pep-mf-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  padding: 0 12px 0 14px;
  border: 0;
  border-radius: var(--pep-radius-pill);
  background: transparent;
  color: var(--pep-text-2);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.pep-mf-trigger:hover, .pep-mf-pill-open .pep-mf-trigger { color: var(--pep-text); }
.pep-mf-pill-on .pep-mf-trigger { color: var(--pep-text); }
.pep-mf-pill-on .pep-mf-trigger > svg:first-child { color: var(--pep-brand); }
.pep-mf-trigger:disabled { cursor: default; opacity: 0.6; }
/* The keyboard's ring goes round the whole pill, the clear x inside it. */
.pep-mf-trigger:focus-visible { outline: none; }
.pep-mf-pill:has(.pep-mf-trigger:focus-visible) { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-mf-face { display: inline-flex; flex: none; }
.pep-mf-trigger .pep-avatar { width: 20px; height: 20px; font-size: 8px; }
.pep-mf-label { min-width: 0; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pep-mf-chev { flex: none; color: var(--pep-text-3); transition: transform 0.15s ease; }
.pep-mf-pill-open .pep-mf-chev { transform: rotate(180deg); }
.pep-mf-pill-on .pep-mf-trigger { padding-right: 6px; }
.pep-mf-clear {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 5px;
  border: 0;
  border-radius: 50%;
  background: rgb(243 243 232 / 8%);
  color: var(--pep-text-2);
  cursor: pointer;
}
.pep-mf-clear svg { width: 13px; height: 13px; }
.pep-mf-clear:hover { background: rgb(243 243 232 / 16%); color: var(--pep-text); }
.pep-mf-clear:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 1px; }

.pep-mf-scrim { display: none; }
.pep-mf-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: min(420px, 70vh);
  padding: 8px;
  border: 1px solid var(--pep-line-strong);
  border-radius: 16px;
  background: var(--pep-panel-2);
  box-shadow: 0 18px 48px rgb(0 0 0 / 55%), 0 0 0 1px rgb(0 0 0 / 20%);
}
.pep-mf-panel:focus { outline: none; }
/* Too little room on the trigger's left (the filter wrapped under the tabs): the panel opens to the right. */
.pep-mf-panel-right { right: auto; left: 0; }
.pep-mf-title { display: none; }
.pep-mf-search {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--pep-line-strong);
  border-radius: 11px;
  background: var(--pep-ground);
  color: var(--pep-text-3);
}
.pep-mf-search:focus-within { border-color: var(--pep-brand); color: var(--pep-text-2); }
.pep-mf-search input {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pep-text);
  font: inherit;
  font-size: 14px;
}
.pep-mf-search input::placeholder { color: var(--pep-text-3); }
.pep-mf-search input:focus { outline: none; }
.pep-mf-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 2px 2px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--pep-line-strong) transparent;
  list-style: none;
}
/* The group's name: quiet, sentence case (the social screens keep no capitals' register: tests/pepper-dex.test.mjs). */
.pep-mf-group { padding: 10px 10px 4px; color: var(--pep-text-3); font-size: 12px; font-weight: 700; }
.pep-mf-opt {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto 62px 16px;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 4px 10px;
  border-radius: 10px;
  color: var(--pep-text);
  font-size: 13px;
  cursor: pointer;
}
.pep-mf-opt-active { background: var(--pep-panel-hover); }
.pep-mf-opt[aria-selected="true"] .pep-mf-name b { color: var(--pep-brand); }
.pep-mf-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.pep-mf-name b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; }
.pep-mf-name .pep-faint { font-size: 12px; }
.pep-mf-name-wide { grid-column: 2 / 5; }
.pep-mf-price { color: var(--pep-text-2); text-align: right; }
.pep-mf-chg { font-weight: 700; text-align: right; }
.pep-mf-check { display: inline-grid; place-items: center; color: var(--pep-brand); }
.pep-mf-all-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pep-brand-soft);
  color: var(--pep-brand);
}
.pep-mf-all-mark svg { width: 13px; height: 13px; }
.pep-mf-empty { display: grid; justify-items: center; gap: 2px; margin: 0; padding: 22px 12px 26px; color: var(--pep-text-2); font-size: 13px; }
.pep-mf-empty b { color: var(--pep-text); font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .pep-mf-panel { animation: pep-mf-in 0.14s ease-out; }
  @keyframes pep-mf-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
/* A phone: the same panel as a sheet from the screen's foot, over a scrim, above the tab bar. */
@media (max-width: 599px) {
  .pep-mf-scrim { position: fixed; inset: 0; z-index: 55; display: block; background: rgb(0 0 0 / 55%); }
  .pep-mf-panel,
  .pep-mf-panel-right {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 56;
    gap: 8px;
    width: auto;
    max-width: none;
    max-height: min(78dvh, 620px);
    padding: 8px 12px calc(14px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 40px rgb(0 0 0 / 50%);
  }
  /* The sheet's grabber, then its title. */
  .pep-mf-panel::before {
    content: "";
    flex: none;
    align-self: center;
    width: 36px;
    height: 4px;
    border-radius: var(--pep-radius-pill);
    background: var(--pep-line-strong);
  }
  .pep-mf-title { display: block; margin: 2px 4px 0; color: var(--pep-text); font-size: 16px; font-weight: 800; }
  .pep-mf-opt { min-height: 52px; }
  .pep-mf-label { max-width: 220px; }
}
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  .pep-mf-panel { animation: pep-mf-up 0.2s ease-out; }
  @keyframes pep-mf-up { from { transform: translateY(24px); } to { transform: none; } }
}
.pep-fd-note { margin: -4px 0 0; font-size: 12px; }
.pep-fd-on { margin: 0; color: var(--pep-text-2); font-size: 13px; }
.pep-fd-on b { color: var(--pep-text); }
.pep-fd-list { padding: 4px 6px; }

/* Top Traders folded under the tabs where there is no column for it. */
.pep-fd-fold { display: none; }
.pep-fd-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel);
  box-shadow: inset 0 0 0 1px var(--pep-line);
  color: var(--pep-text);
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.pep-fd-fold > summary::-webkit-details-marker { display: none; }
.pep-fd-fold > summary::after { content: "+"; color: var(--pep-text-3); font-size: 18px; }
.pep-fd-fold[open] > summary::after { content: "\2212"; }
.pep-fd-fold > summary:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; }
.pep-fd-fold > .pep-fd-top { margin-top: 8px; }

/* ------------------------------------------------------------ a post's head */

/* Who and when on the left (round 17: the name over the @address, social.css PostByline), Follow and the "..." held
   top right. */
.pep-post .pep-post-head.pep-post-head-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 10px; }
.pep-post-head-split > .pep-post-who { padding-top: 2px; }
.pep-post-head-do { display: inline-flex; align-items: center; gap: 4px; }
.pep-follow-compact { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; max-width: none; }
.pep-follow-compact .pep-btn { min-height: 30px; padding: 0 14px; border-radius: var(--pep-radius-pill); font-size: 13px; }
.pep-follow-compact .pep-follow-note { flex-basis: 100%; text-align: right; }
.pep-postmenu { position: relative; display: inline-flex; }
.pep-postmenu-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pep-text-2);
  cursor: pointer;
}
.pep-postmenu-btn:hover, .pep-postmenu-btn[aria-expanded="true"] { background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-postmenu-btn:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 1px; }
.pep-postmenu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  border-radius: var(--pep-radius-sm);
  background: var(--pep-panel-2);
  box-shadow: inset 0 0 0 1px var(--pep-line-strong), 0 12px 30px rgb(0 0 0 / 40%);
  list-style: none;
}
.pep-postmenu-item, .pep-postmenu-off { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.pep-postmenu-item { color: var(--pep-text); text-decoration: none; }
.pep-postmenu-item:hover { background: var(--pep-panel-hover); color: var(--pep-text); }
.pep-postmenu-item:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
.pep-postmenu-off { color: var(--pep-text-3); }
.pep-postmenu-off .pep-faint { font-size: 12px; }

/* A thesis's $TICKER: the market it names, in the brand. */
.pep-cashtag { color: var(--pep-brand); font-weight: 700; text-decoration: none; }
.pep-cashtag:hover { color: var(--pep-brand); text-decoration: underline; }
.pep-cashtag:focus-visible { outline: 2px solid var(--pep-brand); outline-offset: 2px; border-radius: 3px; }

/* ------------------------------------------------------------- Top Traders */

.pep-fd-top { display: grid; gap: 12px; }
.pep-fd-top-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.pep-fd-top-head .pep-panel-title { margin: 0; font-size: 17px; }
.pep-fd-top-k { color: var(--pep-text-3); font-size: 12px; font-weight: 600; }
.pep-fd-top-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pep-fd-top-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 4px; }
.pep-fd-top-row + .pep-fd-top-row { border-top: 1px solid var(--pep-line); }
.pep-fd-rank {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--pep-line-strong);
  border-radius: 50%;
  color: var(--pep-text-2);
  font-size: 12px;
  font-weight: 800;
}
/* The podium's three tones (traders.css's medals): cream, grey, sage. */
.pep-fd-rank-1 { border-color: transparent; background: var(--pep-text); color: var(--pep-brand-ink); }
.pep-fd-rank-2 { border-color: transparent; background: var(--pep-text-2); color: var(--pep-brand-ink); }
.pep-fd-rank-3 { border-color: transparent; background: var(--pep-sage); color: var(--pep-brand-ink); }
.pep-fd-top-row .pep-trader { min-width: 0; }
.pep-fd-top-row .pep-face { width: 32px; height: 32px; }
.pep-fd-top-row .pep-trader-text { display: grid; min-width: 0; }
.pep-fd-top-row .pep-trader-primary, .pep-fd-top-row .pep-trader-address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pep-fd-top-row .pep-trader-address::before { content: "@"; }
.pep-fd-top-fig { display: grid; justify-items: end; gap: 1px; white-space: nowrap; }
.pep-fd-top-fig b { font-size: 14px; }
.pep-fd-top-fig .pep-faint { font-size: 11px; }
.pep-fd-top-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: 12px; }
.pep-fd-top-all { font-size: 13px; font-weight: 700; }
.pep-fd-top-late { margin: 0; font-size: 12px; }

/* ------------------------------------------------------------- narrower */

@media (max-width: 1279px) {
  .pep-fd .pep-with-aside-side { display: none; }
  .pep-fd-fold { display: block; }
}
@media (max-width: 1100px) {
  .pep-fd-floats { display: none; }
  .pep-fd-hero::before {
    background: linear-gradient(90deg, rgb(8 11 9 / 92%) 0%, rgb(8 11 9 / 78%) 40%, rgb(8 11 9 / 20%) 75%, rgb(8 11 9 / 0%) 100%);
  }
  .pep-fd-hero-img { object-position: 22% 45%; }
}
@media (max-width: 699px) {
  /* A phone: the hero is the words first over a cropped banner, and the tabs take the row with the filter under
     them. */
  .pep-fd { gap: 14px; }
  /* The banner a band across the top, cropped on the pickle; the words under it, on the ground it fades into. */
  .pep-fd-hero { min-height: 0; align-items: end; border-radius: 18px; background: var(--pep-panel); }
  .pep-fd-hero-img { height: 210px; object-position: 54% 42%; }
  .pep-fd-hero::before {
    height: 212px;
    background: linear-gradient(0deg, var(--pep-panel) 0%, rgb(18 25 18 / 60%) 28%, rgb(8 11 9 / 0%) 60%);
  }
  .pep-fd-hero-copy { gap: 10px; padding: 176px 18px 20px; max-width: none; }
  .pep-fd-hero-h { font-size: 36px; }
  .pep-fd-hero-line { font-size: 14px; }
  .pep-fd-hero-do { width: 100%; }
  .pep-fd-hero-do .pep-btn { flex: 1; justify-content: center; padding: 0 12px; white-space: nowrap; }
  .pep-fd-bar { display: grid; }
  .pep-fd-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pep-fd-tab { justify-content: center; padding: 0 8px; font-size: 13px; }
  /* Round 24: four tabs (Global, Following, Clan, Watchlist) in one row, each mark over its word. */
  .pep-fd-tabs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pep-fd-tabs--4 .pep-fd-tab { flex-direction: column; gap: 3px; min-height: 52px; padding: 6px 4px; border-radius: 14px; font-size: 12px; }
  .pep-fd-bar > .pep-mf { justify-self: start; max-width: 100%; }
  .pep-fd-list { padding: 2px 0; }
}

/* Under 900 px the top bar and the tab bar are fixed: on the feed, whatever is brought into view (a control the
   keyboard focuses, a post's button) stops clear of both, as shell.css does for every page from 900 px. */
@media (max-width: 899px) {
  html:has(.pep-fd) { scroll-padding-top: 72px; scroll-padding-bottom: 76px; }
}