/* SENDIT's Stats page, /stats/ (round 26, pages/stats.jsx): SENDIT in numbers, essentials first. The day's four
 * figures as a row of cards, the busiest markets and launched tokens as two ranked tables (page.css's .pep-rt), one
 * card a part of SENDIT, and how it is counted folded away at the foot. The layout follows the page's own width
 * (the rail beside it takes 300 px or none), never the window's. Built from shell.css's tokens; after page.css,
 * whose ranked table and panel it places. */

.pep-stp { display: grid; gap: 18px; min-width: 0; container: pep-stp / inline-size; }

/* The day's four figures: a row of cards, two by two on a phone; the volume edged in lime. */
.pep-stp .pep-stp-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pep-stp-figs .pep-pill,
.pep-stp-figs .pep-pill-head {
  display: grid;
  align-content: start;
  justify-content: stretch;
  justify-items: start;
  gap: 4px;
  min-width: 0;
  padding: 16px 18px;
  text-align: left;
  border-radius: var(--pep-radius);
  background: var(--pep-panel);
  box-shadow: inset 0 0 0 1px var(--pep-line);
}
.pep-stp-figs .pep-pill-head {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pep-brand) 10%, transparent), transparent 60%), var(--pep-panel);
  box-shadow: inset 0 0 0 1.5px var(--pep-brand);
}
.pep-stp-figs .pep-pill-k { color: var(--pep-text-3); font-size: 13px; letter-spacing: 0; }
.pep-stp-figs .pep-pill-v,
.pep-stp-figs .pep-pill-head .pep-pill-v {
  max-width: 100%;
  overflow: hidden;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pep-stp-figs .pep-pill-note { color: var(--pep-text-2); font-size: 12px; overflow-wrap: anywhere; }

/* The busiest markets and tokens side by side when there is room for both. */
.pep-stp-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pep-stp-row { grid-template-columns: 28px minmax(0, 1fr) minmax(64px, auto) minmax(56px, auto); gap: 12px; }
.pep-stp-num { justify-self: end; text-align: right; white-space: nowrap; }
.pep-stp-num b { font-size: 15px; font-weight: 800; }
.pep-stp-second { color: var(--pep-text-2); font-size: 14px; }
/* The market or token: its picture, its name (the link that covers the row) and a line under it. */
.pep-stp-who {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "pic name" "pic sub";
  align-items: center;
  column-gap: 10px;
  min-width: 0;
}
.pep-stp-who > :first-child { grid-area: pic; }
.pep-stp-link { grid-area: name; min-width: 0; overflow: hidden; color: var(--pep-text); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.pep-stp-who > b { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pep-stp-link::after { content: ""; position: absolute; inset: 0; }
.pep-stp-link:hover { color: var(--pep-brand); }
.pep-stp-link:focus-visible { outline: none; }
.pep-rt-row:focus-within:has(.pep-stp-link:focus-visible) { outline: 2px solid var(--pep-brand); outline-offset: -2px; }
.pep-stp-sub { grid-area: sub; min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* One card a part of SENDIT: its name, its figures one a line, its way in. */
.pep-stp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.pep-stp-card { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; min-width: 0; padding: 16px 18px; }
.pep-stp-card-h { margin: 0; font-size: 16px; font-weight: 700; }
.pep-stp-dl { display: grid; align-content: start; gap: 8px; margin: 0; }
.pep-stp-dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.pep-stp-dl dt { min-width: 0; color: var(--pep-text-3); font-size: 13px; }
.pep-stp-dl dd { margin: 0; font-size: 15px; font-weight: 700; white-space: nowrap; }
.pep-stp-go { justify-self: start; font-size: 13px; }

/* How these are counted: folded away. */
.pep-stp-how { padding: 14px 18px; }
.pep-stp-how summary { color: var(--pep-text-2); font-size: 13px; font-weight: 700; cursor: pointer; }
.pep-stp-how[open] summary { margin-bottom: 10px; }

@container pep-stp (min-width: 900px) {
  .pep-stp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container pep-stp (max-width: 639px) {
  .pep-stp .pep-stp-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pep-stp-figs .pep-pill,
  .pep-stp-figs .pep-pill-head { padding: 12px 14px; }
  .pep-stp-figs .pep-pill-k { font-size: 12px; }
  .pep-stp-figs .pep-pill-v,
  .pep-stp-figs .pep-pill-head .pep-pill-v { font-size: 20px; }
  .pep-stp-row { grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 10px; padding: 9px 6px; }
}