/* The three short lists beside the price table.

   Base values are the legacy `assets/scss/trade-analyz.scss`'s `.most-section`,
   `.most`, `.topic_container` and `.currency_container` — what `/crypto-buy/`
   shows. The `--stacked` block at the foot is `/crypto-price/`'s, from
   `tokens-analyz.scss`. Departures are noted where they happen. */

/* The 48px above is what the price table stops short of spending — the legacy
   pays for the gap from this side. The 72px below belongs to this section only
   on a wide screen; on a phone the lists stack and the legacy closes it up. */
.crypto-tops {
  padding-top: 48px;
  padding-bottom: 0;
}

.crypto-top {
  margin-bottom: 48px;
}

.crypto-top-label {
  margin-bottom: 16px;
  color: var(--gray-900);
  font-size: 20px;
  font-weight: 700;
}

/* One column, then two, then three — so a list is three stacked cards on a
   phone and one row of three on a desktop. `overflow: auto` is the legacy's
   safety valve for the 300px floor below: it scrolls the row rather than the
   page if a card cannot fit. */
.crypto-top-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 16px;
  width: 100%;
  overflow: auto;
}

/* One link over the whole card, where the legacy wraps the card's markup in an
   anchor and styles the wrapper separately. The legacy's two floors — 300px on
   the anchor and 224px on the box inside it — collapse to the larger one. */
.crypto-top-card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  min-width: 300px;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background-color: var(--gray-0);
}

/* --- The coin --- */

.crypto-top-coin {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Centred on the two names beside it. The legacy's sits about 5px higher, but
   not by intent: its logo is an inline image in a wrapper div, so the wrapper is
   a line box some 10px taller than the 30px picture and it is the wrapper that
   gets centred. The global reset makes images block precisely to close that gap,
   and the price table above already centres its logo the same way. */
.crypto-top-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.crypto-top-names {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Inert to the eye — nothing follows it in the card — but it is part of what
     the column asks for, so it is part of how the card divides. */
  margin-left: 6px;
}

.crypto-top-name,
.crypto-top-name-en {
  color: var(--gray-900);
  font-size: 16px;
  white-space: nowrap;
}

.crypto-top-name {
  font-weight: 700;
}

.crypto-top-name-en {
  font-weight: 400;
}

/* --- Change and price --- */

/* `end` is the left edge here, the page being RTL: the two figures sit against
   the far side of the card from the coin. */
.crypto-top-figures {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 8px;
}

/* The legacy nests the whole badge inside a paragraph that then declares the
   gap and the type; there is nothing between the two elements, so they are one
   element here. Unlike the table's badge this one is not capped — it shrinks to
   whatever the percentage needs. */
.crypto-top-change {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 8px;
  background-color: var(--profit-color);
  color: var(--success);
  font-size: 14px;
  font-weight: 400;
}

.crypto-top-change[data-direction='down'] {
  background-color: var(--loss-color);
  color: var(--danger);
}

/* One glyph, turned over for a fall, taking its colour from the badge. The
   legacy ships two fixed-colour PNGs instead. */
.crypto-top-arrow {
  flex: none;
}

.crypto-top-change[data-direction='down'] .crypto-top-arrow {
  transform: rotate(180deg);
}

/* A flex row for the 4px gap, and because a flex line does not break: the price
   and its unit cannot be split across two lines however narrow the card gets. */
.crypto-top-price {
  display: flex;
  align-items: center;
  gap: 4px;
}

.crypto-top-price-value {
  color: var(--gray-900);
  font-size: 14px;
  font-weight: 400;
}

.crypto-top-price-unit {
  color: var(--gray-400);
  font-size: 12px;
  font-weight: 400;
}

@media (min-width: 1000px) {
  .crypto-tops {
    padding-bottom: 72px;
  }

  .crypto-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .crypto-top-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- `/crypto-price/`'s arrangement --- */

/* The two pages invert each other. On `/crypto-buy/` the three lists stack and
   each list's three cards are the grid; here the three lists are the grid and
   each list's cards stack. Both levels are already elements, so the same markup
   does both and only the axes swap.

   Every selector below is doubled on purpose — `.crypto-tops.crypto-tops--stacked`
   is (0,2,0), so it outranks the base rules inside the media queries above no
   matter where anyone later moves this block. */
/* A grid at every width, even where it has nothing to lay out. That is what
   keeps the 32px above and the 32px below from collapsing into one when the
   lists are hidden: a grid container establishes its own formatting context, so
   an empty one still separates what is above it from what is below. A plain
   block would self-collapse and pull the table 32px up the page. */
.crypto-tops.crypto-tops--stacked {
  display: grid;
  grid-template-columns: 1fr;
  margin: 32px 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* The legacy drops these lists on a phone rather than stacking nine more cards
   under a table that already lists every asset — but it hides the row of lists,
   not the section holding it, so the section's own 32px margins still separate
   the heading above from the table below. Hiding the section instead would close
   that gap and pull the table 32px up the page.

   `margin-bottom` goes with it. The 48px under each list is `trade-analyz`'s
   `.most`, which only `/crypto-buy/` ships; here the lists carry none and the
   price table sits 48px further up the page than it otherwise would. */
.crypto-tops--stacked .crypto-top {
  display: none;
  margin-bottom: 0;
}

.crypto-tops--stacked .crypto-top-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

/* The gap comes from the card rather than from the grid. The border stays: the
   legacy's own stylesheet for this page declares none, but the card renders with
   one anyway — measured at 1px on the live page — because the other page's
   unscoped rules are in the same bundle. What ships is what counts. */
.crypto-tops--stacked .crypto-top-card {
  min-width: 224px;
  margin-bottom: 16px;
}

/* Both names at one weight, where `/crypto-buy/` splits 700 and 400. */
.crypto-tops--stacked .crypto-top-name,
.crypto-tops--stacked .crypto-top-name-en {
  font-size: 15px;
  font-weight: 700;
}

.crypto-tops--stacked .crypto-top-price-value {
  font-weight: 500;
}

/* 6px rather than 8px. A CSS width beats the `width` attribute in the markup,
   and `#icon-change` stretches rather than letterboxes, so the same symbol fills
   either box exactly as the legacy's bitmap did. */
.crypto-tops--stacked .crypto-top-arrow {
  width: 6px;
}

/* 1001px, not 1000px, and the one place in these two stylesheets where the two
   are not interchangeable: the legacy hides these lists with `max-width: 1000px`,
   which is inclusive, so a viewport of exactly 1000px shows no lists at all. A
   `min-width: 1000px` bound is inclusive from the other side and would show them
   on that one width. The column count rides along, but only nominally — nothing
   is laid out below the width the lists appear at. */
@media (min-width: 1001px) {
  .crypto-tops--stacked .crypto-top {
    display: block;
  }

  .crypto-tops.crypto-tops--stacked {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1200px) {
  .crypto-tops.crypto-tops--stacked {
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
  }
}