/*
  The market page (/market/ and /zh/market/), design v3. Layout for this page only; the pieces
  (avatar, badge, seg, dotlist, rows, learn, buttons, sheets, states, the run log) come from
  ui.css. Loaded by the <!-- style: /assets/page-market.css --> marker in pages/market.html.

  One listing is one row everywhere (market.js listingRow): on a phone the amount and its badges
  over the price each and the seller, with the total and a compact action on the right; from
  900px the same markup is a table row (amount, each, seller, total, action) under a column head.
  A ticker's listings on the index sit in one panel with the ticker's head (avatar, counts, floor).
*/

/* ------------------------------------------------------------------ page head */

.mhead-page {
  align-items: center;
}
/* On a phone the view switch is a full-width control of three equal segments under the title. */
.mviews {
  flex: 1 1 100%;
  display: flex;
}
.mviews > a {
  flex: 1 1 0;
}
.market-lead {
  display: none;
}

.mwarn {
  margin-bottom: var(--s4);
}
.mwarn > summary svg:first-child {
  flex: none;
}

/* The sort control scrolls sideways inside its own strip if a language makes it wider than a
   phone, instead of pushing the page wider. */
.msort-wrap {
  display: flex;
  margin: 0 calc(-1 * var(--gutter)) var(--s3);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.msort-wrap::-webkit-scrollbar {
  display: none;
}
.msort {
  margin-right: auto;
}

/* ------------------------------------------------------------------ groups on the index */

.mgroups {
  display: grid;
  gap: var(--s4);
}
/* A ticker's panel: its head, then its listings, then "see all". */
.mgroup,
.mpanel {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* A phone head: the avatar beside the ticker with the floor on its right, then the counts across
   the full width under both, and a chevron. */
.mgroup-head {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 18px;
  grid-template-areas:
    "av name floor chev"
    "av meta meta chev";
  align-items: center;
  column-gap: var(--s3);
  min-height: 72px;
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
  border-bottom: 1px solid var(--hair);
  transition: background-color 0.15s;
}
@media (hover: hover) {
  .mgroup-head:hover {
    background-color: rgba(255, 255, 255, 0.025);
  }
}
.mgroup-head:active {
  background-color: rgba(255, 255, 255, 0.04);
}
.mgroup-head > .avatar {
  grid-area: av;
}
.mgroup-id {
  display: contents;
}
.mgroup-name {
  grid-area: name;
  min-width: 0;
}
.mgroup-meta {
  grid-area: meta;
}
.mgroup-floor {
  grid-area: floor;
}
.mgroup-chev {
  grid-area: chev;
}
.mgroup-floor .d,
.mrow-each .d {
  display: none;
}
/* A ticker breaks only when it is wider than the whole line, never mid-word to make room for the
   floor beside it (break-word, not anywhere: anywhere lets the grid squeeze it to one letter). */
.mgroup-name {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.3;
  overflow-wrap: break-word;
}
.mgroup-link {
  color: var(--text);
  text-decoration: none;
}
/* The ticker is the head's link; its hit area is the whole head. */
.mgroup-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.mgroup-link:focus-visible {
  outline: none;
}
.mgroup-head:has(.mgroup-link:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--lime);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.mgroup-meta {
  margin-block: var(--s0) 0;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.mgroup-floor {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  text-align: right;
  min-width: 0;
}
.mgroup-floor-l {
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.35;
  white-space: nowrap;
}
.mgroup-floor-v {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.of {
  color: var(--text2);
  font-weight: 600;
}
.mgroup-chev {
  color: var(--text3);
}
.chev-r {
  transform: rotate(-90deg);
}
.mgroup-similar {
  position: relative;
  padding: var(--s2) var(--s4) 0;
}
.mgroup-similar .similar {
  margin: 0;
}
.mgroup-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  border-top: 1px solid var(--hair);
  color: var(--text2);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
}
.mgroup-more:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.025);
}
.mgroup-more:focus-visible {
  outline-offset: -3px;
}
.mgroup-more svg {
  width: 16px;
  height: 16px;
}
/* A phone: the floor gets its own line under the counts, so the ticker keeps the whole first line.
   Beside the ticker, a Chinese "地板价 0.0000005 ETH" left "hood" 34px at 360 and broke it. */
@media (max-width: 599px) {
  .mgroup-head {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    grid-template-areas:
      "av name chev"
      "av meta chev"
      "av floor chev";
  }
  .mgroup-floor {
    justify-content: flex-start;
    text-align: left;
    margin-top: 2px;
  }
}
/* The loading head (market.js groupSkeleton) sits in the same cells and at the same height as the
   loaded one: the avatar's placeholder takes the avatar's area (unplaced, it pushed the other
   placeholders into the chevron's column), and the counts' line is as tall as the counts. From
   900px the floor's placeholder lines end at the right like the figure they stand in for. */
.mgroup-head > .skel-avatar {
  grid-area: av;
}
.mgroup-meta > .skel-line,
.mgroup-floor > .skel-line {
  margin-block: 3px;
}
@media (min-width: 900px) {
  .mgroup-floor > .skel-line {
    margin-left: auto;
  }
}

/* ------------------------------------------------------------------ one listing */

.mhead {
  display: none;
}
.mrows {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* A phone row: the amount and badges, then each and seller, on the left; the total over nothing
   and the action beside it on the right. */
.mrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--s3);
  min-height: 64px;
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
}
.mrow + .mrow {
  border-top: 1px solid var(--hair);
}
.mrow-main {
  min-width: 0;
}
.mrow-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  margin: 0;
  line-height: 1.35;
}
.mrow-amt {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.mrow-amt .of {
  font-weight: 600;
  letter-spacing: 0;
}
.mrow-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s1);
}
.mrow-meta {
  margin-block: var(--s0) 0;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.maddr {
  font-size: var(--fs-sm);
  color: var(--text2);
}
.mrow-total {
  margin: 0;
  text-align: right;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mrow-total .of {
  font-size: var(--fs-sm);
}
.mrow-act {
  justify-self: end;
}
.mrow[data-state="own"] {
  background: rgba(255, 255, 255, 0.02);
}
.mskel-btn {
  display: block;
  width: 56px;
  height: 36px;
  border-radius: var(--r-sm);
}

/* A narrow phone: the total moves under the action, so the amount and the seller keep room. */
@media (max-width: 389px) {
  .mrow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main total"
      "main act";
    row-gap: var(--s1);
  }
  .mrow-main {
    grid-area: main;
  }
  .mrow-act {
    grid-area: act;
  }
  .mrow-total {
    grid-area: total;
    font-size: var(--fs-md);
  }
}

/* ------------------------------------------------------------------ one ticker */

/* The ticker view's first row: the back link on the left, the page's view switch on the right
   (market.js borrows #m-views from the page head), and the shortlist chips on a line of their own
   under both. */
.mtick-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  margin-bottom: var(--s3);
}
.mback svg {
  width: 16px;
  height: 16px;
}
.mtick-nav .mviews {
  flex: none;
  display: inline-flex;
  margin-left: auto;
}
.mtick-nav .mviews > a {
  flex: none;
  padding: 0 12px;
}
/* With the switch in the back row, the page head keeps only the market h1, and only for screen
   readers: the ticker hero is this view's visible head. Keyed on the switch having left the head,
   so a failed read in this view (which draws no back row) still shows the title and the switch. */
body[data-mview="tick"] .mhead-page:not(:has(#m-views)) {
  margin-bottom: 0;
}
body[data-mview="tick"] .mhead-page:not(:has(#m-views)) h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Every ticker for sale, as chips that scroll sideways edge to edge on a phone. */
.mshort {
  /* a line of its own in the back row's wrap, widened by the gutters it bleeds into */
  flex: 0 0 calc(100% + 2 * var(--gutter));
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter);
  scrollbar-width: none;
}
.mshort::-webkit-scrollbar {
  display: none;
}
.mshort.is-more-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.mshort.is-more-start {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
}
.mshort.is-more-start.is-more-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.mshort .chip {
  flex: none;
}
.mshort .chip .count {
  color: inherit;
  font-weight: 500;
}
.mshort-t {
  font-weight: 700;
}

/* The ticker view's hero uses the token page's markup (.t-hero, .t-hero-main, .t-name). page-t.css
   is not loaded here, so these rules mirror its values: keep the two in step. */
.t-hero {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s4);
}
.t-hero > .avatar {
  --av: 56px;
  width: var(--av);
  height: var(--av);
}
.t-hero-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
}
.t-name {
  margin: 0;
  font-size: var(--fs-3xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
.t-name.is-long {
  font-size: var(--fs-2xl);
}
html[lang|="zh"] .t-name,
.t-name[lang|="zh"] {
  letter-spacing: 0;
}
/* The trailing action: a compact secondary button, as share is on the token page. */
.mtick-details {
  flex: none;
  gap: var(--s1);
}
.mtick-details svg {
  width: 16px;
  height: 16px;
}
/* The ticker view is about one token: the market's lead and its listing count step aside, so the
   listings start high instead of under two page headers. */
body[data-mview="tick"] .market-lead,
body[data-mview="tick"] #m-count {
  display: none;
}

/* The ticker's figures. A phone: a strip of small tiles that scrolls sideways if it must, each a
   14px label over a 16px figure (the home's pattern). */
.mstats {
  display: flex;
  gap: var(--s2);
  margin: 0 calc(-1 * var(--gutter)) var(--s4);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.mstats::-webkit-scrollbar {
  display: none;
}
.mstats > div {
  flex: 1 0 auto;
  min-width: 88px;
  padding: var(--s2) 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)), var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
}
.mstats dt {
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.35;
  white-space: nowrap;
}
.mstats dd {
  margin: var(--s0) 0 0;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mstats + .similar {
  margin: calc(-1 * var(--s2)) 0 var(--s4);
}
.mtick-list .sechead h2 .sub {
  font-variant-numeric: tabular-nums;
}
.mtick-grid .section {
  margin-top: var(--s6);
}

/* The phone's action bar: the cheapest listing's total beside sweep and buy. */
.mactions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.mcheap {
  flex: 1 1 auto;
  min-width: 0;
}
.mcheap .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcheap-fig {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mactions > .btn {
  flex: none;
  min-width: 88px;
  padding: 0 var(--s4);
}

/* The wide screen's side card: the same two actions, sticky beside the listings. */
.mside .label {
  margin: 0;
}
.mside-fig {
  margin: var(--s1) 0 0;
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.mside-fig .of {
  font-size: var(--fs-lg);
}
.mside-sub {
  margin: var(--s1) 0 0;
  color: var(--text2);
  font-size: var(--fs-sm);
}
.mside-actions {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s4);
}
/* Why nothing can be bought is a sentence, so it reads at body size, not the note's 14px. */
.mside > .note {
  margin: var(--s2) 0 0;
  font-size: var(--fs-base);
}
.mside > .note svg {
  margin-top: 4px;
}

/* ------------------------------------------------------------------ activity rows */

.mevs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--r-xl);
}
.mev {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 64px;
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  transition: background-color 0.15s;
}
.mev + .mev {
  border-top: 1px solid var(--hair);
}
@media (hover: hover) {
  .mev.has-link:hover {
    background: rgba(255, 255, 255, 0.025);
  }
}
.mev-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--text2);
}
.mev-ic[data-kind="buy"] {
  background: var(--lime-soft);
  box-shadow: inset 0 0 0 1px rgba(198, 240, 0, 0.22);
  color: var(--lime);
}
.mev-ic svg {
  width: 16px;
  height: 16px;
}
.mev-main {
  flex: 1;
  min-width: 0;
}
.mev-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s2);
  margin: 0;
  line-height: 1.35;
}
.mev-link {
  color: var(--text);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* the ticker link covers the row; the explorer button sits above it */
.mev-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.mev-link:focus-visible {
  outline: none;
}
.mev:has(.mev-link:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--lime);
  border-radius: var(--r-lg);
}
.mev-what {
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.mev:not(.has-link) .mev-what {
  font-weight: 600;
  font-size: var(--fs-base);
}
.mev-meta {
  margin-block: var(--s0) 0;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.mev-arrow {
  color: var(--text3);
}
.mev-x {
  position: relative;
  z-index: 2;
  flex: none;
  color: var(--text2);
}
.mev-x:hover {
  color: var(--text);
}
.mevs + .state,
.section .state {
  margin-top: 0;
}
/* A ticker feed's "show more" (market.js fillTickActivity), as the inscribe feed has it. */
.mev-more:empty {
  display: none;
}
.mev-more {
  margin-top: var(--s3);
}
.mev-more > .errline {
  margin: 0 0 var(--s2);
}

/* On a phone the cheapest listing's buy is the action bar's solid one (market.js marks its row),
   so the row does not offer a second, soft buy for the same purchase. */
@media (max-width: 899px) {
  .mrow.is-barbuy {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .mrow.is-barbuy .mrow-act {
    display: none;
  }
}
@media (max-width: 389px) {
  .mrow.is-barbuy {
    grid-template-areas: "main total";
  }
}

/* ------------------------------------------------------------------ selling */

.msell {
  display: grid;
  gap: var(--s6);
}
.mholds {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--r-xl);
}
.mhold {
  align-items: center;
  min-height: 72px;
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
}
.mhold .avatar {
  align-self: flex-start;
  margin-top: 2px;
}
.mhold .row-title {
  margin: 0;
}
.mhold-meta {
  margin-block: var(--s0) 0;
}
.mhold-free {
  color: var(--text);
  font-weight: 600;
}
.mhold-why {
  margin: var(--s1) 0 0;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.mnone {
  margin: 0;
  padding: var(--s4);
  color: var(--text2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.mlock {
  margin-top: var(--s3);
}
.mlock .note {
  margin: 0;
}

/* ------------------------------------------------------------------ sheets */

.mform-chips {
  margin-top: var(--s2);
}
.mform-sum {
  margin-top: var(--s4);
}
.msweep-chips .chip {
  min-width: 56px;
  justify-content: center;
}
a.mtx {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--hit);
  color: var(--lime);
  text-underline-offset: 3px;
}
a.mtx svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.kvrows dd a.mtx {
  margin-block: -12px;
}

/* The explanations under the market: stacked on a phone, side by side from 900px. */
.market-about {
  display: grid;
  gap: var(--s3);
}

/* ------------------------------------------------------------------ wide screen */

@media (min-width: 900px) {
  .mhead-page {
    align-items: flex-end;
  }
  .mviews {
    flex: none;
    display: inline-flex;
  }
  .mviews > a {
    flex: none;
    padding: 0 var(--s4);
  }
  .market-lead {
    display: block;
    margin: calc(-1 * var(--s2)) 0 var(--s5);
    color: var(--text2);
  }
  .msort-wrap {
    margin: 0 0 var(--s4);
    padding: 0;
  }
  .mgroups {
    gap: var(--s5);
  }
  .mgroup-head {
    grid-template-areas:
      "av name floor chev"
      "av meta floor chev";
    row-gap: 0;
    padding: var(--s3) var(--s4) var(--s3) var(--s5);
  }
  .mgroup-name {
    align-self: end;
  }
  .mgroup-meta {
    align-self: start;
  }
  .mgroup-floor {
    display: block;
  }
  .mgroup-floor-l {
    display: block;
  }
  .mgroup-floor-v {
    display: block;
  }
  .mgroup-floor .m,
  .mrow-each .m {
    display: none;
  }
  .mgroup-floor .d,
  .mrow-each .d {
    display: inline;
  }
  .mgroup-name {
    font-size: var(--fs-xl);
  }
  .mgroup-floor-v {
    font-size: var(--fs-lg);
  }

  /* The listing table: amount, each, seller, total, action. */
  .mgroup,
  .mpanel {
    --mcols: minmax(170px, 1.4fr) minmax(140px, 1fr) minmax(120px, 0.9fr) minmax(120px, 0.9fr) 96px;
  }
  .msell .mpanel {
    --mcols: minmax(96px, 1fr) minmax(128px, 1.15fr) minmax(96px, 0.9fr) 76px;
  }
  .mhead {
    display: grid;
    grid-template-columns: var(--mcols);
    column-gap: var(--s4);
    padding: var(--s3) var(--s4) var(--s2) var(--s5);
    color: var(--text3);
    font-size: var(--fs-sm);
    font-weight: 600;
  }
  .mhead .r {
    text-align: right;
  }
  .mrow {
    grid-template-columns: var(--mcols);
    grid-template-areas: none;
    column-gap: var(--s4);
    min-height: 60px;
    padding: var(--s2) var(--s4) var(--s2) var(--s5);
    border-top: 1px solid var(--hair);
    transition: background-color 0.15s;
  }
  @media (hover: hover) {
    .mrow:not(.skel-card):hover {
      background: rgba(255, 255, 255, 0.025);
    }
  }
  .mrow-main,
  .mrow-meta {
    display: contents;
  }
  .mrow-title {
    grid-column: 1;
    grid-row: 1;
  }
  .mrow-meta > span {
    white-space: nowrap;
    font-size: var(--fs-md);
    color: var(--text);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mrow-meta > span::before {
    content: none;
  }
  .mrow-each {
    grid-column: 2;
    grid-row: 1;
  }
  .mrow-seller {
    grid-column: 3;
    grid-row: 1;
  }
  .mrow-seller .maddr {
    font-size: var(--fs-sm);
  }
  .mrow-total {
    grid-column: 4;
    grid-row: 1;
    font-size: var(--fs-base);
  }
  .mrow-act {
    grid-column: 5;
    grid-row: 1;
  }
  .mrow.skel-card .mrow-main {
    display: block;
  }
  /* The sell view's narrower panel drops the seller column: every listing there is yours. */
  .msell .mhead > span:nth-child(3) {
    display: none;
  }
  .msell .mrow-total {
    grid-column: 3;
  }
  .msell .mrow-act {
    grid-column: 4;
  }

  .mtick-nav {
    gap: var(--s2) var(--s3);
  }
  .mshort {
    flex: 0 0 100%;
    flex-wrap: wrap;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .t-hero {
    gap: var(--s4);
    margin-bottom: var(--s5);
  }
  .t-hero > .avatar {
    --av: 72px;
  }
  .t-name {
    font-size: var(--fs-hero-lg);
  }
  .t-name.is-long {
    font-size: var(--fs-h1-lg);
  }
  /* A grouped panel of four figures split by hairlines. */
  .mstats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 var(--s5);
    padding: 0;
    overflow: hidden;
    background: var(--hair);
    border: 1px solid var(--hair);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-card);
  }
  .mstats > div {
    min-width: 0;
    padding: var(--s4) var(--s5);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)), var(--panel);
  }
  .mstats dd {
    font-size: var(--fs-xl);
    letter-spacing: -0.02em;
  }
  .mtick-grid .mpanel {
    --mcols: minmax(150px, 1.3fr) minmax(130px, 1fr) minmax(110px, 0.9fr) minmax(110px, 0.9fr) 88px;
  }

  .mev {
    padding-left: var(--s5);
  }
  .msell {
    gap: var(--s6);
  }
  .market-about {
    margin-top: var(--s8);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4);
    align-items: start;
  }
}