/* Memecoins hub (/memecoins/, parts/main/memecoins.php from tools/design/recipes/_memecoins.js): only what the
 * design's components do not have — letter avatars, the chain badge, the 1h column, rows hidden by the filters and
 * "Show more", empty states, the card grids, the DEX tables' columns and the risk tag. Colours are the design's
 * tokens (dark and light follow), motion only on transform / opacity. */

/* letter avatar (a coin without a logo): the size of the logo it stands for */
.mc-av{flex:0 0 auto;width:100%;height:100%;min-width:24px;min-height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1;background:var(--tFmDuFQ);color:var(--tZYQMwj);overflow:hidden}
img.mc-av{width:24px;height:24px;min-width:0;min-height:0;object-fit:cover;background:transparent}
[role="cell"] > .mc-av,[role="cell"] > img.mc-av{width:24px;height:24px;margin-right:2px}
.mc-av-s{font-size:10px}

/* chain badge after the ticker */
.mc-chain{display:inline-block;margin-left:7px;padding:1px 7px 1px 6px;border-radius:980px;font-size:11px;font-weight:600;line-height:1.5;letter-spacing:0;vertical-align:1px;white-space:nowrap;background:rgba(255,255,255,.08);color:var(--tT6XaDa)}
.mc-chain::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;vertical-align:1px;background:#8E8E93}
html[data-theme=light] .mc-chain{background:rgba(0,0,0,.055)}
.mc-chain[data-mc-c="solana"]::before{background:linear-gradient(135deg,#9945FF,#14F195)}
.mc-chain[data-mc-c="ethereum"]::before{background:#8C8CFF}
.mc-chain[data-mc-c="base"]::before{background:#0052FF}
.mc-chain[data-mc-c="bnb"]::before{background:#F0B90B}
.mc-chain[data-mc-c="own"]::before{background:#C2A633}
/* phones: the badge keeps its dot only (the chain chips name the chains) */
@media (width < 600px){.mc-chain{font-size:0;padding:0;margin-left:6px;background:none}html[data-theme=light] .mc-chain{background:none}.mc-chain::before{margin-right:0}}

/* the coins table: the 1h column (a copy of 24h) from 900 px; rows hidden by filters, search or "Show more" */
[data-mc-table] > [role="row"][data-mc-h="1"],[data-mc-table] > [role="row"][hidden]{display:none}
@media (width < 900px){[data-mc-table] .mc-c1{display:none}}
@media (width >= 900px) and (width < 1200px){
  [data-mc-table] > [role="row"]{grid-template-columns:32px minmax(170px,1.6fr) minmax(92px,1fr) 70px 76px 76px minmax(90px,1fr) minmax(84px,1fr)}
}
@media (width >= 1200px){
  [data-mc-table] > [role="row"]{grid-template-columns:36px minmax(200px,1.8fr) minmax(100px,1fr) 74px 84px 84px minmax(100px,1fr) minmax(96px,1fr) 112px}
}
[data-mc-table] [role="columnheader"][aria-disabled="true"]{cursor:default}
[data-mc-table] [role="columnheader"]:focus-visible{outline:2px solid var(--tAWe4DZ);outline-offset:-2px;border-radius:8px}
[data-mc-table] > div[role="row"]:not(.mc-empty){cursor:default}
[data-mc-table]:focus{outline:none}
/* a long name does not push the figures: one line, cut with an ellipsis */
[data-mc-table] [role="cell"]:nth-child(2) > span:last-child{min-width:0}
[data-mc-table] [role="cell"]:nth-child(2) > span:last-child > span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* empty states */
.mc-empty{display:block;padding:20px 22px;font-size:15px;line-height:1.5;color:var(--tT6XaDa)}
@media (width < 700px){.mc-empty{padding:16px 14px;font-size:14px}}
p.mc-empty{margin:0}

/* "Show more" and the counter under the table */
.mc-more{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px}
.mc-more[hidden]{display:none}
.mc-count{margin:0;font-size:13px;color:var(--tT6XaDa)}
.mc-count:empty{display:none}

/* the chart: five ranges, the line under it */
[data-mc-tfs] button{min-width:0}
.mc-note{margin-top:10px}
@media (width < 600px){[data-mc-tfs] button{min-height:36px;padding-left:10px;padding-right:10px}}

/* filter bar: from 700 px the chips wrap onto a second line instead of scrolling out of sight */
@media (width >= 700px){[data-mc-bar]{align-items:flex-start}[data-mc-bar] [role="tablist"]{flex-wrap:wrap;overflow:visible}}

/* filter bar on phones: chips scroll sideways, the search box takes the full width below */
@media (width < 700px){
  [data-mc-bar]{flex-wrap:wrap}
  [data-mc-bar] > div:last-child,[data-mc-bar] > div:last-child > label{width:100%;flex:1 1 100%}
}
[data-mc-bar] input[type="search"]::-webkit-search-cancel-button{display:none}

/* cards by chain and theme: 3 / 2 / 1 columns, no half-empty row with six cards */
@media (width >= 600px) and (width < 1100px){html main [data-mc-cards]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (width >= 1100px){html main [data-mc-cards]{grid-template-columns:repeat(3,minmax(0,1fr))}}
[data-mc-cards] > a:focus-visible{outline:2px solid var(--tAWe4DZ);outline-offset:3px}

/* movers on phones (as the Markets highlights): the name takes the free width, the ticker is left out */
@media (width < 600px){
  #mc-movers [data-wc-li]{grid-template-columns:24px minmax(0,1fr) auto auto;column-gap:10px}
  #mc-movers [data-wc-li] > span:nth-child(2){min-width:0}
  #mc-movers [data-wc-li] > span:nth-child(2) > span{min-width:0;flex:1 1 auto}
  #mc-movers [data-wc-li] > span:nth-child(2) > span > span:first-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #mc-movers [data-wc-li] > span:nth-child(2) > span > span:nth-child(2){display:none}
}
#mc-movers div[data-wc-li]{cursor:default}
.mc-hl-note{margin-top:12px}

/* heatmap: names and prices under the ticker stay near-white on the deep light-theme tiles */
html[data-theme=light] #mc-heatmap .wc-hm-nm,html[data-theme=light] #mc-heatmap .wc-hm-pr{color:rgba(255,255,255,.94)}
#mc-heatmap span.wc-hm-tile{cursor:default}
@media (width < 600px){#mc-heatmap [role="radiogroup"] button{min-height:36px}}

/* DEX tables: links in cells keep the cell's colour; tablets drop the plain liquidity column */
.mc-a{color:inherit;text-decoration:none;border-radius:4px}
.mc-a:hover{text-decoration:underline;text-underline-offset:3px}
.mc-a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.mc-dex,.mc-dsep{opacity:.72}
.mc-sub2{opacity:.6;font-weight:500;font-size:.92em}
.mc-age{font-variant-numeric:tabular-nums}
[data-mc-dex] > [role="row"]:nth-child(2){box-shadow:none}
@media (width < 700px){
  [data-mc-dex] > [role="row"]{grid-template-columns:minmax(0px,1.3fr) minmax(0px,.9fr) minmax(0px,.85fr)}
  .mc-sub2,.mc-lch{display:none}
}
@media (700px <= width < 1240px){
  [data-mc-dex] > [role="row"]{grid-template-columns:minmax(0px,1.3fr) minmax(0px,1fr) minmax(0px,1.1fr) minmax(0px,1fr)}
  [data-mc-dex] .mc-mh{display:none}
}
@media (width < 1240px){.mc-dsep{display:none}.mc-dex{display:block;font-size:12px;margin-top:2px}}

/* "High risk" before the DEX lists' notes */
.mc-risk{display:inline-block;margin-right:8px;padding:2px 9px;border-radius:980px;font-size:12px;font-weight:600;line-height:1.5;vertical-align:1px;background:rgba(255,69,58,.16);color:#FF6B61}
html[data-theme=light] .mc-risk{background:rgba(215,0,21,.1);color:#B5000F}

@media (prefers-reduced-motion: reduce){
  #mc-movers [role="tablist"] > span,[data-mc-cards] > a,[data-mc-table] > [role="row"]{transition:none}
}