/* =================== TOKEN SCREENER =================== */
.sc-body { min-height: 100vh; background: var(--bg-base); display: block; }

/* This was a grid with gap:1px over a --border background, so the "gaps"
   rendered as full-height hairlines between six boxes. That trick is how
   dashboards were built in 2013 and it is the first thing on the page.

   A stat strip does not need rules to be scannable — it needs space and a
   clear label/value hierarchy. One surface, generous padding, no dividers. */
.sc-stats {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  background: var(--bg-surface); border-bottom: 1px solid var(--border);
}
.sc-stat { padding: 8px 16px; display: flex; flex-direction: column; gap: 1px; }
.sc-k { font-size: var(--fs-2xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.sc-stat strong { font-size: var(--fs-base); font-weight: var(--fw-head); }
.sc-src { font-size: var(--fs-xs) !important; font-weight: var(--fw-body) !important; color: var(--text-2); }
@media (max-width: 900px) { .sc-stats { grid-template-columns: repeat(2, 1fr); } .sc-stat:last-child { display: none; } }

.sc-wrap { width: 100%; margin: 0; padding: var(--s3) 14px var(--s10); }
/* A screener is read for its rows, so the rows start near the top. The hero
   was a 26px title over a 45px paragraph over a 75px stat strip, which put
   the first price 797px down a 900px viewport — xrpl.to, the density this
   page is modelled on, reaches its table at 368px. Title and sentence share
   one line here, and the sentence is the caption it always was. */
.sc-head { margin-bottom: var(--s3); }
.sc-title { font-size: var(--fs-lg); font-weight: var(--fw-head); line-height: 1.3; }
.sc-sub { color: var(--text-3); font-size: var(--fs-xs); margin-top: 2px; max-width: 760px; line-height: 1.5; }

.sc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s3); flex-wrap: wrap; }
.cat-tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.cat {
  font-size: var(--fs-sm); padding: 6px 12px; border-radius: var(--r-md);
  color: var(--text-3); font-weight: var(--fw-label); transition: all var(--t-fast);
  border: 1px solid transparent;
}
.cat:hover { color: var(--text); background: var(--bg-elevated); }
.cat.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-line); }
.sc-tools { display: flex; align-items: center; gap: var(--s3); }
.sc-sortbar { display: none; }
.sc-count { font-size: var(--fs-sm); }
.sc-search {
  height: 32px; width: 200px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 0 12px; font-size: var(--fs-sm); outline: none;
  transition: border-color var(--t-fast);
}
.sc-search:focus { border-color: var(--accent); }
.sc-search::placeholder { color: var(--text-4); }

.sc-table-card { overflow: hidden; }
.sc-table { width: 100%; border-collapse: collapse; }
.sc-table th {
  text-align: left; font-size: var(--fs-2xs); font-weight: var(--fw-label); color: var(--text-3);
  padding: 11px 16px; border-bottom: 1px solid var(--border); background: var(--bg-elevated);
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; user-select: none;
}
.sc-table th[data-sort] { cursor: pointer; }
.sc-table th[data-sort]:hover { color: var(--text); }
.sc-table th.sorted { color: var(--accent); }
/* The label is a <button> so the header sorts from the keyboard. It takes
   every text property from the th, so the header looks as it did; the arrow
   hangs off the button, not the th, so it stays beside the label. */
.th-sort {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: inherit; white-space: inherit; background: none; border: 0; padding: 0; margin: 0;
}
/* The empty alt text keeps the arrow out of the button's name; aria-sort on
   the th already says it. Engines without the syntax drop that declaration
   and keep the plain one. */
.sc-table th.sorted .th-sort::after { content: ' ↓'; content: ' ↓' / ''; }
.sc-table th.sorted.asc .th-sort::after { content: ' ↑'; content: ' ↑' / ''; }
.sc-table td { padding: 10px 16px; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-base); }
.sc-table tbody tr { transition: background var(--t-fast); }
.sc-table tbody tr:hover { background: var(--bg-elevated); }
.sc-table tbody tr:last-child td { border-bottom: none; }

.tk-cell { display: flex; align-items: center; gap: 10px; }
.tk-letter {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: .02em;
}
.tk-name { display: flex; flex-direction: column; line-height: 1.3; }
.tk-name b { font-weight: var(--fw-label); }
.tk-name span { font-size: var(--fs-2xs); color: var(--text-4); }

.sc-foot { font-size: var(--fs-xs); margin-top: var(--s4); }
.sc-foot em { font-style: normal; color: var(--text-2); }
@media (max-width: 760px) { .hide-sm { display: none; } .sc-table td, .sc-table th { padding: 9px 10px; } }

/* ---- Highlight cards ---- */
.mv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-bottom: var(--s6); }
.mv-sec { min-width: 0; }
.mv-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: 4px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border-soft); }
.mv-title { font-size: var(--fs-2xs); font-weight: var(--fw-head); text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); }
.mv-note { font-size: var(--fs-2xs); white-space: nowrap; }
.mv-cards { display: flex; flex-direction: column; gap: var(--s2); }
/* A flat mid-grey panel on a near-black page reads like a 2010 admin theme —
   the whole point of the black palette is depth. The card is a shallow
   gradient off the page ground with a hairline rather than a hard grey box,
   and it lifts on hover into the accent instead of into a lighter grey. Both
   ends are tokens, so the light theme gets white-to-ground for free. */
.mv-card {
  display: block; position: relative; isolation: isolate;
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-base));
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast), background var(--t-fast);
}
/* The direction of the move, as the edge of the card. A number in the corner
   is the only thing that says up or down today, and at a glance down a column
   of three that is nothing to read. :has is a progressive enhancement — a
   browser without it simply gets no edge. */
.mv-card::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  border-radius: 0 2px 2px 0; background: var(--border-bright); opacity: .5;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.mv-card:has(.mv-chg.up)::before   { background: var(--up); }
.mv-card:has(.mv-chg.down)::before { background: var(--down); }
.mv-card:hover {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-surface));
  box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.mv-card:hover::before { opacity: 1; }
.mv-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mv-top { display: flex; align-items: center; gap: 10px; }
.mv-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mv-id b { font-size: var(--fs-base); font-weight: var(--fw-head); }
.mv-id span { font-size: var(--fs-2xs); color: var(--text-4); }
.mv-chg { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-head); font-variant-numeric: tabular-nums; }
.mv-spark { margin: 8px 0 6px; height: 40px; }
.mv-spark .spark { width: 100%; height: 40px; display: block; }
.mv-foot { display: flex; gap: var(--s4); }
.mv-foot span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mv-foot i { font-style: normal; font-size: var(--fs-2xs); color: var(--text-4); }
.mv-foot b { font-size: var(--fs-sm); font-weight: var(--fw-label); }
.mv-skel { height: 118px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-base));
  border: 1px solid var(--border-soft); position: relative; overflow: hidden; }
.mv-skel::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--shimmer), transparent);
  animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.mv-empty { padding: 20px 14px; border: 1px dashed var(--border); border-radius: var(--r-lg);
  color: var(--text-4); font-size: var(--fs-sm); text-align: center; }
@media (max-width: 1000px) { .mv-grid { grid-template-columns: 1fr; } }

/* ---- Sparklines ---- */
.spark { display: block; margin-left: auto; }
.spark-cell { padding-top: 4px !important; padding-bottom: 4px !important; }
.spark-empty { color: var(--text-4); }
.stale { color: var(--text-4); font-weight: 700; }

.load-bar { display: flex; align-items: center; gap: 8px; margin-top: var(--s3);
  font-size: var(--fs-xs); color: var(--text-3); }


/* ---- Dense table, xrpl.to column set: 44px header, 46px rows ---- */
.sc-table-card { overflow-x: auto; }
.sc-table { min-width: 1400px; }
.sc-table th { height: 44px; padding: 0 10px; font-size: 10px; }
.sc-table td { height: 46px; padding: 0 10px; font-size: var(--fs-sm); white-space: nowrap; }
.sc-table td.star { color: var(--text-4); cursor: pointer; text-align: center; padding: 0; }
.sc-table td.star:hover { color: var(--accent); }
.sc-table td.src { font-size: var(--fs-2xs); }
.spark-cell { padding: 0 10px !important; }
.spark-cell .spark { margin: 0; }
.tk-name b { font-size: var(--fs-base); }
.tk-name span { font-size: 10px; }

/* Three SECTIONS across, each a ranked list down its own column.

   This block used to put the three cards across as well, which on a desktop
   viewport produced nine cards in one strip — nine tracks of (vw-48)/9, so
   every card was ~140px wide with its price, TVL and volume wrapping onto a
   second line, and the three section headings ran together across the top as
   one unreadable band. A column per section is what the headings describe:
   "Top movers" sits above its own three, not above a ninth of the row. Below
   1200px the sections stack and the cards go back across, where the full page
   width is theirs to share. */
.mv-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s5); margin-bottom: var(--s4); }
/* min-width:0 is required: a grid item's automatic minimum is its content, so
   each 1fr track was floored at the card's min-content width (~170-195px,
   driven by the price/TVL footer). Three such tracks needed ~560px while each
   section only got (vw-48)/3, so between roughly 1200px and 1760px the cards
   overflowed their section and painted over the neighbouring one — one
   asset's price printed on top of another's. The stacked layout cannot hit
   that, and min-width:0 still guards the 3-across layouts below. */
/* Three across inside the section. The first pass at this took xrpl.to's
   145x56 literally and landed at 59px tall, which reads as a footnote on a
   1440px screen — too small in the other direction. This sits between the
   two: their proportions, one size up, with the sparkline back at 22px
   because the shape of the move is the reason to look at a mover at all.
   Roughly 150x92 against the old 460x140, and the strip is 120px rather
   than 466. The card only paints on hover, so nine read as one block. */
.mv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.mv-card {
  padding: 8px 10px; border-radius: var(--r-md); min-width: 0; overflow: hidden;
  background: none; border: 1px solid transparent; box-shadow: none;
}
.mv-card::before { display: none; }         /* the direction edge needs a card */
.mv-card:hover {
  background: var(--bg-surface); border-color: var(--border-soft);
  box-shadow: none; transform: none;
}
.mv-card .mv-foot, .mv-card .mv-id { min-width: 0; }
.mv-card .mv-id b, .mv-card .mv-id span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.mv-card .pbadge, .mv-card .tk-letter, .mv-card .tk-logo,
.mv-card .tk-logo img { width: 22px !important; height: 22px !important; }
.mv-top { gap: 7px; }
/* The symbol gets the leftover width, the percentage never gives any up:
   with both at flex 0 1 auto the row split evenly and USTRY lost its Y to
   an ellipsis by two pixels. A ticker that cannot spell itself is not a
   card worth having. */
.mv-id  { flex: 1 1 auto; min-width: 0; }
.mv-chg { flex: 0 0 auto; }
.mv-id b { font-size: var(--fs-base); line-height: 1.2; }
/* Specificity, not preference: `.mv-card .mv-id span` two rules up sets
   display:block for the ellipsis treatment, so a bare `.mv-id span` here
   never won and every card carried a clipped second line — "Core a…",
   "Strongh…". At 149px the name cannot be spelled, and the symbol with its
   logo already says which asset this is; the full name is a column in the
   table underneath. */
.mv-card .mv-id span { display: none; }
.mv-chg { font-size: var(--fs-xs); }
.mv-spark { display: block; margin: 5px 0 3px; height: 22px; }
.mv-spark .spark { width: 100%; height: 22px; display: block; }
/* Label and figure on one line, and the line does not wrap: two stats at
   10px inside a 150px card fit with room, but a wrap here costs 26px on
   every one of the nine cards. */
.mv-foot { gap: 10px; margin-top: 3px; flex-wrap: nowrap; }
.mv-foot span { flex-direction: row; align-items: baseline; gap: 3px; white-space: nowrap; }
.mv-foot i { font-size: 9.5px; }
.mv-foot b { font-size: var(--fs-xs); font-weight: var(--fw-label); }
.mv-foot span:nth-child(3) { display: none; }   /* price and TVL carry it */
.mv-skel { height: 92px; }

/* One section at a time, three cards across it — but the CARD keeps its
   size. Letting three cards share 1100px gave each 350px of which 200 was
   empty: a 20px logo, a symbol and two figures do not grow into a wider
   box, they just drift apart in it. Capped and left-aligned instead, so
   the strip reads the same at every width it appears at. */
@media (max-width: 1200px) {
  .mv-grid { grid-template-columns: 1fr; gap: 12px; }
  .mv-cards { grid-template-columns: repeat(3, minmax(0, 240px)); justify-content: start; gap: 6px; }
  .mv-skel { height: 92px; }
}

/* ===========================================================
   MOBILE
   A 17-column, 1400px-wide table is unusable on a phone. Below
   900px the table collapses to a two-line row: identity + trend
   on the left, price + change on the right. Nothing is hidden
   that the user cannot get by tapping through to the pair.
   =========================================================== */
@media (max-width: 900px) {
  .sc-wrap { padding: 12px 10px 40px; }
  .sc-title { font-size: var(--fs-xl); }
  .sc-sub { font-size: var(--fs-sm); }

  .sc-stats { grid-template-columns: repeat(2, 1fr); }
  .sc-stat { padding: 10px 12px; }
  .sc-stat strong { font-size: var(--fs-base); }
  .sc-stat:nth-child(n+5) { display: none; }

  .mv-grid { grid-template-columns: 1fr; gap: 14px; }
  /* Two across, and the third card takes the full width under them.
     `repeat(3, 1fr)` floored each track at the card's min-content width
     (~175px), so three of them wanted ~535px of a 355px row: the browser
     resolved that by giving the third track ZERO width. The third mover in
     every section was not narrow on a phone, it was invisible — measured
     175 / 175 / 0 at 375px. Nothing is dropped now. */
  .mv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .mv-cards > :nth-child(3) { grid-column: 1 / -1; }
  .mv-card { padding: 8px; }
  .mv-foot { gap: 6px; }
  .mv-foot span:nth-child(3) { display: none; }

  /* `flex-wrap: wrap` is inherited from the base rule, and a WRAPPING column
     container sizes each flex line to its widest item, then stretches children
     to the LINE rather than to the container. That is why min-width:0 alone did
     not help: the 300px toolbar kept handing its children a 352px line. */
  .sc-toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  /* A flex item will not shrink below its content unless min-width is cleared,
     so `overflow-x: auto` alone did nothing here: at 320px the tab strip sized
     itself to its content (352px) and pushed the whole page 42px wide. The
     search field's fixed 200px did the same to .sc-tools. */
  .cat-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
              scrollbar-width: none; padding-bottom: 2px; min-width: 0; }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat { flex: 0 0 auto; }
  .sc-tools { justify-content: space-between; min-width: 0; gap: 10px; }
  /* flex:1 1 auto + min-width:0 is load-bearing on the select: a <select>
     defaults to min-width:auto and would otherwise refuse to shrink under
     375px — the same failure that widened the whole document earlier. */
  .sc-sortbar { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .sc-sort-lab { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--text-3); }
  .sc-sort {
    flex: 1 1 auto; min-width: 0; width: auto; height: 38px; font-size: 16px;
    background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 10px;
  }
  .sc-dir {
    flex: 0 0 auto; width: 44px; height: 38px; border-radius: var(--r-md);
    background: var(--bg-input); border: 1px solid var(--border); color: var(--text);
    font-size: 15px; line-height: 1;
  }
  .sc-dir[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); }
  .sc-count { flex: 0 0 auto; white-space: nowrap; }
  /* 16px keeps iOS from auto-zooming the page when the field takes focus. */
  .sc-search { flex: 1 1 auto; width: auto; min-width: 0; font-size: 16px; height: 38px; }
  .sc-search { flex: 1; width: auto; }

  /* Table -> stacked rows */
  .sc-table-card { overflow-x: visible; border-radius: var(--r-md); }
  .sc-table { min-width: 0; width: 100%; }
  .sc-table thead { display: none; }
  .sc-table tbody, .sc-table tr, .sc-table td { display: block; }
  .sc-table tr {
    position: relative; padding: 10px 12px 10px 44px; height: auto;
    border-bottom: 1px solid var(--border-soft);
  }
  .sc-table tr:last-child { border-bottom: none; }
  .sc-table td { height: auto; padding: 0; border: none; white-space: nowrap; }

  /* index badge pinned left */
  .sc-table td:nth-child(2) {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: var(--fs-xs); color: var(--text-4);
  }
  .sc-table td:nth-child(1) { position: absolute; right: 12px; top: 10px; }  /* star */

  .sc-table td:nth-child(3) { margin-bottom: 6px; }                          /* token */
  /* The SVG is emitted at width=78 but `.spark-cell { padding: 0 10px !important }`
     leaves only 56px of content box in a 76px border-box cell, so the chart
     painted 12px to the RIGHT of its own cell, over the card border. A 375px
     overflow scan never caught it because the spill lands exactly on the row
     edge at that width. Shrink the SVG to the inset instead of sliding the cell
     left, so no text room is lost. */
  .sc-table td:nth-child(4) { position: absolute; right: 12px; bottom: 10px; width: 66px; }
  .sc-table td:nth-child(4) { padding: 0 !important; }
  .sc-table td:nth-child(4) .spark { width: 100%; display: block; }
  .sc-table td:nth-child(5) {                                                /* price */
    display: inline-block; font-size: var(--fs-base); font-weight: var(--fw-head);
  }
  .sc-table td:nth-child(10) {                                               /* 24h */
    display: inline-block; margin-left: 8px; font-size: var(--fs-sm);
  }
  .sc-table td:nth-child(13)::before { content: 'TVL '; color: var(--text-4); font-size: 10px; }
  /* TVL gets its own line. Sharing line 2 with price + 24h left it running
     under the absolutely-positioned sparkline on 65 of 66 rows at 320px — the
     figure was legible only where the chart happened to be flat. Unconditional
     rather than scoped to a narrow breakpoint: at 375px the worst-case line was
     227px against 231px of clear space, which one extra digit or a font
     fallback erases. */
  .sc-table td:nth-child(13) {
    display: block; margin-left: 0; margin-top: 2px;
    font-size: var(--fs-sm); color: var(--text-2);
    /* The cell carries .ta-r from the desktop table. Left-aligning it is the
       half that actually resolves the collision: as a right-aligned block the
       text still ran to the row's right edge, straight under the sparkline. */
    text-align: left;
  }
  /* everything else is desktop-only detail */
  .sc-table td:nth-child(6), .sc-table td:nth-child(7), .sc-table td:nth-child(8),
  .sc-table td:nth-child(9), .sc-table td:nth-child(11), .sc-table td:nth-child(12),
  .sc-table td:nth-child(14), .sc-table td:nth-child(15), .sc-table td:nth-child(16),
  .sc-table td:nth-child(17) { display: none; }

  /* The row is a link on mobile; give it the affordance and a real hit state. */
  .sc-table tr[data-href] { cursor: pointer; }
  .sc-table tr[data-href]:active { background: var(--bg-elevated); }
  .sc-table tr[data-href]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  .tk-cell { gap: 8px; }
  .tk-name b { font-size: var(--fs-md); }
}

@media (max-width: 420px) {
  /* The third card used to be display:none here, because three across a
     375px screen left it no width. It has a full-width row of its own now
     (see the 900px block), so a section called "Top movers" can stop
     showing two of its three. */
  .mv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-stats { grid-template-columns: 1fr 1fr; }
}

/* ---- Token logo from the issuer TOML, letter badge underneath as fallback ---- */
.tk-logo { position: relative; display: inline-block; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.tk-logo .tk-letter { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.tk-logo img {
  position: relative; width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; display: block; background: var(--bg-elevated);
}
.tk-letter { display: grid; place-items: center; border-radius: 50%; color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .02em; }

/* ---- Interactive sparkline ---- */
.spark { display: block; overflow: visible; cursor: crosshair; }
.sp-hi { fill: var(--up); opacity: .7; }
.sp-lo { fill: var(--down); opacity: .7; }
.sp-last { filter: drop-shadow(0 0 2px currentColor); }
.sp-cross { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 2;
            vector-effect: non-scaling-stroke; opacity: .8; }
.sp-dot { stroke: var(--bg-surface); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

.sp-tip {
  position: fixed; z-index: 999; pointer-events: none; opacity: 0;
  transform: translateY(3px); transition: opacity 110ms ease, transform 110ms ease;
  background: var(--bg-elevated); border: 1px solid var(--border-bright);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 6px 9px; display: flex; align-items: baseline; gap: 8px; white-space: nowrap;
}
.sp-tip.on { opacity: 1; transform: translateY(0); }
.sp-tip b { font-size: var(--fs-base); font-weight: var(--fw-head); }
.sp-tip span { font-size: var(--fs-xs); font-weight: var(--fw-label); }
.sp-tip i { font-style: normal; font-size: 10px; color: var(--text-4); }

/* Draw-in on first paint */
@keyframes spDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sp-line { stroke-dasharray: 1; stroke-dashoffset: 0; pathLength: 1;
           animation: spDraw 620ms cubic-bezier(.4,0,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .sp-line { animation: none; } }

/* Larger hit area on touch */
@media (pointer: coarse) { .spark { min-height: 30px; } }

/* ---- Touch: momentum and no tap delay ---- */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .sc-body { overflow: visible; }
  .sc-table-card, .cat-tabs { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .sc-table tr { min-height: 56px; }         /* comfortable row tap target */
  .sc-search { height: 40px; font-size: 16px; }  /* 16px stops iOS zoom-on-focus */
  .cat { min-height: 36px; }
  .spark { touch-action: pan-y; }            /* swipe past a chart, not through it */
}
button, .cat, .sc-table tr { touch-action: manipulation; }

/* ===========================================================
   SAME LANGUAGE AS THE TERMINAL

   The trade page moved to Binance's 12px sentence-case column headers
   and dropped every gold-tinted pill. The screener kept 10px uppercase
   headers on .06em tracking and a gold chip on the category filter, so
   the two pages read as different products on one domain.

   The header markup was already sentence case - Token, Trend 24h,
   Price (XLM) - and the uppercase was purely a text-transform, so the
   abbreviations that should stay capitalised (MCAP, TVL, 24H) still do.

   The category chips keep their gold, but take the geometry of the
   quote-asset chips on Binance's own trade page: h24, 6px radius,
   12/500, 2px/10px padding.
   =========================================================== */
.sc-table th {
  font-size: 12px; line-height: 18px;
  text-transform: none; letter-spacing: normal;
  padding: 9px 16px;
}

.cat {
  font-size: 12px; font-weight: 500; line-height: 20px;
  padding: 2px 10px; border-radius: 6px;
}
.cat-tabs { gap: 6px; }

.sc-search {
  height: 32px; border-radius: var(--r-md);
  background: transparent; border: 1px solid var(--border-bright);
  font-size: 14px; font-weight: 500;
}

/* .sc-k is a data label - the direct analogue of .istat-k on the trade
   page, which is now 12px sentence case. Matching it here.
   .mv-title and .sec-eyebrow are deliberately left uppercase: those are
   section eyebrows, a structural device rather than a data label, and
   flattening every capital on the page would lose that distinction. */
.sc-k { font-size: 12px; line-height: 18px; text-transform: none; letter-spacing: normal; }

/* ===========================================================
   MOVER CARD FOOTERS WERE LOSING THEIR THIRD STAT

   The footer carries three figures - Price, TVL and the section's own
   sort metric - and .mv-card is overflow:hidden. At three sections
   across, each card's content box is 127px while the three values need
   about 136-159px, so the last one was simply cut off. An earlier fix
   stopped the cards painting over each other; this is the part it left.

   The band where it bit is roughly 1200px to 1700px - ordinary laptop
   width - because below 1200px .mv-grid drops to one section per row and
   the cards get wide again.

   Wrapping rather than shrinking or hiding: flex-wrap with no shrink
   means all three stay legible at their own size and the third drops to
   a second line only when it has to. No breakpoint to guess at, and it
   un-wraps by itself on a wide screen.
   =========================================================== */
/* That wrap was the right answer for the old 3-stat card and is the wrong
   one for this one: at 150px a wrapped line costs 26px on all nine cards,
   which is the height this redesign exists to remove. Two stats fit on one
   line instead, and each section shows the stat its own heading ranks by —
   "by 24h change" and "by 24h volume" get the volume, "by AMM TVL" gets the
   pool. The price label goes: a mono figure first in the row, next to a
   labelled one, is not ambiguous, and it buys the 26px that made this fit. */
.mv-foot { flex-wrap: nowrap; }
.mv-foot span { flex: 0 0 auto; }
.mv-foot span:first-child i { display: none; }
#mvDeepest .mv-foot span:nth-child(2) { display: flex; }   /* TVL is the point */
#mvDeepest .mv-foot span:nth-child(3) { display: none; }
#mvMovers  .mv-foot span:nth-child(2),
#mvActive  .mv-foot span:nth-child(2) { display: none; }   /* volume is */
#mvMovers  .mv-foot span:nth-child(3),
#mvActive  .mv-foot span:nth-child(3) { display: flex; }