/* The coin market. Layout only: every colour, face and control comes from vg.css. */

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

.rm-id {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 26px 0 16px;
}
.rm-who { flex: 1 1 280px; min-width: 0; }
.rm-title {
  font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.05;
  letter-spacing: -.03em; margin: 0 0 4px;
}
/* Not .rm-claim: that name already belongs to the three cards at the foot of this page, and one
   line of header prose was inheriting a card's padding and background from them. */
.rm-lede { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 62ch; }
.rm-lede a { color: var(--accent); }
.rm-etch { flex: none; }

/* --- search and sort ---------------------------------------------------------------------------- */

/* Sticky, because a sort control at the top of a long list is a control nobody reaches. */
.rm-tools {
  position: sticky; top: var(--top-h, 56px); z-index: 8;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 9px 0; margin-bottom: 6px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.rm-ctl {
  background: var(--bg2); color: var(--txt); border: 1px solid var(--line);
  border-radius: var(--r-ctl, 8px); padding: 7px 11px; font: 400 13px/1.2 var(--sans); height: 34px;
}
.rm-search { flex: 1 1 160px; min-width: 140px; max-width: 260px; width: auto; }
.rm-search::placeholder { color: var(--dim); }
.rm-sorts { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- the table ----------------------------------------------------------------------------------- */

/* One grid definition shared by the header and every row, so a column cannot drift from its own
   heading. */
.rm-thead, .rm-row {
  display: grid;
  grid-template-columns:
    30px                    /* rank */
    minmax(0, 1.7fr)        /* name */
    minmax(88px, .9fr)      /* price */
    minmax(62px, .55fr)     /* 24h */
    minmax(74px, .7fr)      /* for sale */
    minmax(58px, .5fr)      /* holders */
    minmax(140px, 1.3fr)    /* minted */
    minmax(66px, .55fr)     /* etched */
    auto;                   /* action */
  gap: 16px; align-items: center;
}
/* The header stays put while the list scrolls.
   IT MUST NOT SIT INSIDE A SCROLL CONTAINER. The table carried vg-scroll, which makes it
   overflow:auto, which makes IT the sticky ancestor rather than the viewport: `top` then offset the
   header 56px down INSIDE the table, where it covered the first row completely. Rank 1 was simply
   missing from the market. The responsive columns already stop this table overflowing, so the
   scroll box was buying nothing and costing a row. */
.rm-thead {
  position: sticky; top: var(--top-h, 56px); z-index: 5;
  padding: 11px 18px; margin-bottom: 6px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  font: 700 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.rm-rankh { text-align: center; }
.rm-rank {
  text-align: center; font: 500 12px/1 var(--mono); color: var(--dim);
  font-variant-numeric: tabular-nums;
}
/* The top three carry the accent, the way a leaderboard reads. */
.rm-row:nth-child(-n+3) .rm-rank { color: var(--accent); font-weight: 700; }
.rm-thead span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-num { text-align: right; }

.rm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rm-row {
  padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--card); transition: border-color .12s ease, background .12s ease;
}
.rm-row:hover { border-color: var(--line2); background: #18232f; }

.rm-id-cell { display: flex; align-items: center; gap: 13px; min-width: 0; }
.rm-mark {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--accent2), #123a52);
  color: #fff; font: 700 15px/1 var(--mono);
}
.rm-names { min-width: 0; }
.rm-name {
  display: block; color: var(--txt); text-decoration: none;
  font: 700 15px/1.2 var(--display); letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-name:hover { color: var(--accent); }
.rm-ref { display: block; margin-top: 3px; font: 400 11px/1 var(--mono); color: var(--dim); }

.rm-val { text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.rm-val b { display: block; font: 700 14.5px/1.2 var(--mono); letter-spacing: -.02em; }
/* The unit under the number rather than beside it: nine characters of "0.00009 XVG" on one line is
   what forced the old table to ellipsise its own prices. */
.rm-val .sub { text-transform: none; letter-spacing: 0; }
/* Each figure carries its own label for the phone, where no column heading sits above it. On a desk
   the heading is right there and repeating it under every number is noise. */
.rm-val span { display: none; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.rm-val.quiet b { color: var(--dim); font-weight: 500; }
.rm-val .sub { display: block; margin-top: 3px; font: 400 11px/1 var(--mono); color: var(--dim); }

.rm-prog { min-width: 0; }
.rm-pct {
  display: block; margin-top: 6px; font: 400 11px/1 var(--mono); color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-pct.closed { color: var(--warn); }

.rm-go { padding: 8px 15px; font-size: 12.5px; }

/* --- the claims strip ------------------------------------------------------------------------------ */

.rm-claims {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px;
  margin-top: 52px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
}
.rm-claim { background: var(--card); padding: 20px 22px; display: flex; flex-direction: column; gap: 9px; }
.rm-claim .vg-d4 { color: var(--txt); }
.rm-claim .vg-small { margin: 0; }
.rm-claim p { margin: 0; }

/* --- phone ------------------------------------------------------------------------------------------ */

/* Eight columns need room. Below this the name starts being ellipsised, and the name is the one
   thing on the row nobody can do without, so the least useful column goes instead. Age is the
   least useful: it is the only figure here that answers a question nobody came to ask. */
@media (max-width: 1240px) {
  .rm-thead > :nth-child(7), .rm-row > .rm-val:nth-last-of-type(1) { display: none; }
  .rm-thead, .rm-row {
    grid-template-columns: 26px minmax(0, 2fr) minmax(80px, .8fr) minmax(72px, .7fr)
      minmax(54px, .5fr) minmax(140px, 1.3fr) auto;
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .rm-id { align-items: flex-start; }
}

@media (max-width: 760px) {
  .rm-thead { display: none; }
  .rm-rank { display: none; }
  /* The row stops being a table row and becomes a card: identity across the top, figures in a line
     under it, the action full width. Labels come back because no heading carries them here. */
  .rm-row { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .rm-id-cell { grid-column: 1 / -1; }
  .rm-val { text-align: left; }
  .rm-val span { display: block; }
  .rm-lab { display: block; }
  .rm-chg { text-align: left; }
  .rm-prog { grid-column: 1 / -1; }
  .rm-go { grid-column: 1 / -1; width: 100%; padding: 11px; }
}

/* --- what the redesign added ------------------------------------------------------------------- */

/* The coin's own picture when its etcher has set one, and the generated mark when not. Same box
   either way, so a row does not change height the day somebody uploads. */
.rm-mark img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.rm-mark.has-img { background: var(--card) !important; }

/* The top three read as a leaderboard, which is the one place on this page where rank is a claim
   about standing rather than a row number. */
.rm-medal { font-size: 13px; line-height: 1; }

/* A price with the dollars under it, the way every market people already use presents one. The
   secondary line is the whole device: it lets a column answer two questions in one glance.

   Written as `.rm-val .rm-sub` and not `.rm-sub`, because `.rm-val span { display: none }` above
   is more specific than a lone class and silently won: every second line was in the DOM, correct,
   and invisible. */
.rm-val .rm-sub { display: block; font: 400 11px/1.35 var(--mono); color: var(--dim); margin-top: 2px; }
.rm-chg { font: 600 12.5px/1.2 var(--mono); color: var(--muted); text-align: right; }
.rm-chg.up { color: var(--ok); }
.rm-chg.down { color: var(--danger); }
.rm-chg.none { color: var(--dim); font-weight: 400; }

@media (max-width: 900px) {
  .rm-id { padding: 18px 0 12px; }
  .rm-search { max-width: none; flex: 1 1 100%; }
}

/* The column heading says what a figure counts, once, for the whole table. On a phone the headings
   are gone and each row is a card, so the label travels inside the cell and only shows there. */
.rm-val .rm-lab { display: none; }
.rm-lab {
  font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); margin-top: 4px;
}
@media (max-width: 760px) { .rm-val .rm-lab { display: block; } }

/* The card layout's alignment, restated after the base rules above it.
   `.rm-chg { text-align: right }` is declared later in this file than the media query that first
   tried to undo it, and at equal specificity the later rule wins: the change cell stayed
   right-aligned while every figure beside it went left. */
@media (max-width: 760px) {
  .rm-val, .rm-chg { text-align: left; }
}