/* New Coins & Listings (/new-coins/, parts/main/new-coins.php from tools/design/recipes/_new-coins.js): only what the
 * design's components do not have — coin avatars and links in table cells, empty states, the three-tab period control,
 * exchange dots and the risk tag. Colours are the design's tokens, so the dark and light themes follow. */

/* coin avatar: a local logo or a letter on a gradient (inline style) */
.wcnc-av{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1;background:var(--tFmDuFQ);color:var(--tZYQMwj);overflow:hidden}
img.wcnc-av{object-fit:cover;background:transparent}

/* links inside cells keep the cell's colour */
.wcnc-a{color:inherit;text-decoration:none;border-radius:4px}
.wcnc-a:hover{text-decoration:underline;text-underline-offset:3px}
.wcnc-a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.wcnc-rel{opacity:.72}
.wcnc-more,.wcnc-sep{opacity:.55;font-weight:500}
.wcnc-ch{margin-left:6px;font-size:13px;font-weight:500}

/* rows: hidden by the period / exchange filters; the first visible data row has no divider above it */
[data-wcnc-tbl]>[role="row"][data-wcnc-h="1"],[data-wcnc-tbl]>[role="row"][hidden]{display:none}
[data-wcnc-tbl]>[role="row"]:nth-child(2){box-shadow:none}

/* empty state inside a table */
.wcnc-empty{display:block;padding:20px 22px;font-size:15px;line-height:1.5;color:var(--tT6XaDa)}
@media (width < 700px){.wcnc-empty{padding:16px 14px;font-size:14px}}

/* phones: the coin column wider (avatar + ticker), the date on two lines (date, then "… ago" / countdown) */
.wcnc-sub{display:block;margin-top:2px;font-size:12px;font-weight:500;opacity:.7}
@media (width < 700px){
  [data-wcnc-tbl]>[role="row"]{grid-template-columns:minmax(0px,1.25fr) minmax(0px,.9fr) minmax(0px,.85fr)}
  /* fixed date and value columns: tiny prices showed as "$0.00068…" (audit 06.10); fixed so every row lines up */
  [data-wcnc-tbl]>[role="row"]{grid-template-columns:minmax(0px,1fr) 80px 100px;column-gap:10px;padding:0 12px}
  .wcnc-av{width:22px;height:22px}
}

/* tablets and small laptops: four columns (each table drops its least needed one), the "… ago" under the date */
@media (700px <= width < 1240px){
  [data-wcnc-tbl]>[role="row"]{grid-template-columns:minmax(0px,1.3fr) minmax(0px,1.1fr) minmax(0px,.85fr) minmax(0px,.9fr)}
  [data-wcnc-tbl] .wcnc-mh{display:none}
  .wcnc-rw{display:block;margin-top:2px;font-size:12px;font-weight:500}
  .wcnc-rw .wcnc-dsep{display:none}
}

/* the filter bar: on phones it scrolls with the page (the calendar's top offset is for its sticky state) */
@media (width < 760px){[data-wcnc-bar]{top:auto}}

/* period tabs: three, not the calendar's four */
.wcnc-tabs{grid-template-columns:repeat(3,minmax(0px,1fr))}
.wcnc-tabs .wcnc-ind{width:calc(33.333% - 2px);transform:translateX(100%)}
@media (prefers-reduced-motion: reduce){.wcnc-tabs .wcnc-ind{transition:none}}

/* exchange dots on the chips */
[data-wcnc-ex="binance"] .wcnc-dot{background:#F0B90B}
[data-wcnc-ex="coinbase"] .wcnc-dot{background:#3773F5}
[data-wcnc-ex="okx"] .wcnc-dot{background:var(--tZYQMwj);box-shadow:0 0 0 1px var(--tT6XaDa)}
[data-wcnc-ex="bybit"] .wcnc-dot{background:#F7A600}
[data-wcnc-ex="kraken"] .wcnc-dot{background:#8D5BFF}
[data-wcnc-ex="kucoin"] .wcnc-dot{background:#23AF91}
[data-wcnc-ex="bitget"] .wcnc-dot{background:#00C8D5}
[data-wcnc-ex="mexc"] .wcnc-dot{background:#1972E2}
[data-wcnc-ex="upbit"] .wcnc-dot{background:#0A6CFF}
[data-wcnc-ex="gate"] .wcnc-dot{background:#E5484D}
[data-wcnc-ex][aria-pressed="true"] .wcnc-dot{box-shadow:none}

/* "High risk" before the DEX list's note */
.wcnc-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] .wcnc-risk{background:rgba(215,0,21,.1);color:#B5000F}