/* DeFi pages on live data (the hub and the protocol pages load the same rules): colours of changes that go up or
 * down, the change pills, bars in a chain's colour, the charts drawn by assets/js/p/defi-chart.js (bars, stacked
 * layers, hover line, point and tooltip — the design's look) and charts hidden until they are drawn. */

main [data-wc-pending="1"] { visibility: hidden; }

/* changes: the design's up / down / neutral colours */
main [data-wc-dc="up"], main [data-wc-dc="up"] * { color: #30D158 !important; }
main [data-wc-dc="dn"], main [data-wc-dc="dn"] * { color: #FF453A !important; }
main [data-wc-dc="flat"], main [data-wc-dc="flat"] * { color: #A1A1A6 !important; }
html[data-theme=light] main [data-wc-dc="up"], html[data-theme=light] main [data-wc-dc="up"] * { color: #248A3D !important; }
html[data-theme=light] main [data-wc-dc="dn"], html[data-theme=light] main [data-wc-dc="dn"] * { color: #D70015 !important; }
html[data-theme=light] main [data-wc-dc="flat"], html[data-theme=light] main [data-wc-dc="flat"] * { color: #6E6E73 !important; }

/* change pills (KPI cards, token card) */
main [data-wc-dp="up"] { background: rgba(48, 209, 88, 0.16) !important; }
main [data-wc-dp="dn"] { background: rgba(255, 69, 58, 0.16) !important; }
main [data-wc-dp="flat"] { background: rgba(161, 161, 166, 0.16) !important; }
main [data-wc-dp="up"], main [data-wc-dp="up"] * { color: #30D158 !important; }
main [data-wc-dp="dn"], main [data-wc-dp="dn"] * { color: #FF453A !important; }
main [data-wc-dp="flat"], main [data-wc-dp="flat"] * { color: #A1A1A6 !important; }
html[data-theme=light] main [data-wc-dp="up"] { background: rgba(36, 138, 61, 0.16) !important; }
html[data-theme=light] main [data-wc-dp="dn"] { background: rgba(215, 0, 21, 0.16) !important; }
html[data-theme=light] main [data-wc-dp="up"], html[data-theme=light] main [data-wc-dp="up"] * { color: #248A3D !important; }
html[data-theme=light] main [data-wc-dp="dn"], html[data-theme=light] main [data-wc-dp="dn"] * { color: #D70015 !important; }
html[data-theme=light] main [data-wc-dp="flat"], html[data-theme=light] main [data-wc-dp="flat"] * { color: #6E6E73 !important; }

/* a chain's colour (dark / light) from --wc-cd / --wc-cl */
main [data-wc-cc="1"] { background: var(--wc-cd) !important; }
html[data-theme=light] main [data-wc-cc="1"] { background: var(--wc-cl) !important; }

/* sparklines of falling protocols */
main svg[data-wc-sg="dn"] stop { stop-color: #FF453A !important; }
main svg[data-wc-sg="dn"] path[stroke] { stroke: #FF453A !important; }
html[data-theme=light] main svg[data-wc-sg="dn"] stop { stop-color: #D70015 !important; }
html[data-theme=light] main svg[data-wc-sg="dn"] path[stroke] { stroke: #D70015 !important; }

/* a DEX without a page on the site: shown, not linked */
main a[data-wc-nolink="1"] { pointer-events: none; cursor: default; }

/* protocol pages: supported chains in one or two columns by their number */
@media (min-width: 900px) {
  main [data-wc-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  main [data-wc-cols="1"] { grid-template-columns: minmax(0, 1fr) !important; }
  main [data-wc-span="1"] { grid-column: 1 / -1 !important; }
}
@media (max-width: 899.98px) {
  main [data-wc-cols] { grid-template-columns: minmax(0, 1fr) !important; }
}
main a.wc-df-coin { color: inherit; text-decoration: none; }
main a.wc-df-coin:hover, main a.wc-df-coin:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* charts drawn from live data */
main .wc-dfc-zero { background: rgba(255, 255, 255, 0.3) !important; }
html[data-theme=light] main .wc-dfc-zero { background: rgba(0, 0, 0, 0.25) !important; }
main .wc-dfc-bar { position: absolute; transform: translateX(-50%); background: #2997FF; transition: top 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), height 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.2s; pointer-events: none; }
main .wc-dfc-bar[data-c="rev"] { background: #BF8CFF; }
main .wc-dfc-bar[data-c="fee2"] { background: rgba(41, 151, 255, 0.34); }
html[data-theme=light] main .wc-dfc-bar { background: #0071E3; }
html[data-theme=light] main .wc-dfc-bar[data-c="rev"] { background: #7B3FE4; }
html[data-theme=light] main .wc-dfc-bar[data-c="fee2"] { background: rgba(0, 113, 227, 0.24); }
main .wc-dfc-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
main .wc-dfc-layer path { fill: var(--wc-cd); fill-opacity: 0.88; stroke: var(--wc-cd); stroke-width: 1; }
html[data-theme=light] main .wc-dfc-layer path { fill: var(--wc-cl); stroke: var(--wc-cl); }
main .wc-dfc-vl { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.24); pointer-events: none; }
html[data-theme=light] main .wc-dfc-vl { background: rgba(0, 0, 0, 0.24); }
main .wc-dfc-dot { position: absolute; display: block; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #2997FF; box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.28); pointer-events: none; }
html[data-theme=light] main .wc-dfc-dot { background: #0071E3; box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.2); }
main .wc-dfc-tip { position: absolute; z-index: 3; top: 4px; min-width: 200px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #F5F5F7; color: #1D1D1F; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); pointer-events: none; }
main .wc-dfc-tip > b { font-size: 12px; font-weight: 600; color: #6E6E73; white-space: nowrap; }
main .wc-dfc-tip > span { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; font-size: 13px; white-space: nowrap; }
main .wc-dfc-tip > span > i { display: inline-flex; align-items: center; gap: 6px; font-style: normal; color: #6E6E73; }
main .wc-dfc-tip > span > i > s { display: inline-block; width: 8px; height: 8px; border-radius: 50%; text-decoration: none; }
main .wc-dfc-tip > span > em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: #1D1D1F; }
main .wc-dfc-tip > span > em[data-c="up"] { color: #248A3D; }
main .wc-dfc-tip > span > em[data-c="dn"] { color: #D70015; }
html[data-theme=light] main .wc-dfc-tip { background: #1D1D1F; color: #FFFFFF; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); }
html[data-theme=light] main .wc-dfc-tip > b, html[data-theme=light] main .wc-dfc-tip > span > i { color: #86868B; }
html[data-theme=light] main .wc-dfc-tip > span > em { color: #FFFFFF; }
html[data-theme=light] main .wc-dfc-tip > span > em[data-c="up"] { color: #30D158; }
html[data-theme=light] main .wc-dfc-tip > span > em[data-c="dn"] { color: #FF6961; }
/* legend swatches of the chart modes */
main .wc-dfc-sw[data-sw="sq"] { width: 10px !important; height: 10px !important; border-radius: 3px !important; }
main .wc-dfc-sw[data-c="rev"] { background: #BF8CFF !important; }
main .wc-dfc-sw[data-c="fee2"] { background: rgba(41, 151, 255, 0.34) !important; }
html[data-theme=light] main .wc-dfc-sw[data-c="rev"] { background: #7B3FE4 !important; }
html[data-theme=light] main .wc-dfc-sw[data-c="fee2"] { background: rgba(0, 113, 227, 0.24) !important; }

/* protocol pages: similar protocols of a small category (three or fewer cards fill the row) */
@media (min-width: 1100px) {
  main [data-wc-sim="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  main [data-wc-sim="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 600px) and (max-width: 1099.98px) {
  main [data-wc-sim="3"] > :last-child { grid-column: 1 / -1; }
}