/* Chains and Exchanges pages: live avatars (the design's round logo or letter on a gradient), chart colours of the
   networks the design has no colour for, the up/down colours of sparkline fills, and bars drawn from live data. */
:root {
  --wc-lx-avax: rgb(255, 69, 110);
  --wc-lx-pol: rgb(191, 90, 242);
  --wc-lx-op: rgb(255, 69, 58);
  --wc-lx-x1: rgb(255, 150, 200);
  --wc-lx-x2: rgb(172, 220, 120);
  --wc-lx-x3: rgb(255, 196, 120);
  --wc-lx-x4: rgb(160, 200, 255);
  --wc-lx-x5: rgb(200, 170, 255);
  --wc-lx-up: #30D158;
  --wc-lx-dn: #FF453A;
}
html[data-theme=light] {
  --wc-lx-avax: rgb(200, 20, 70);
  --wc-lx-pol: rgb(137, 68, 171);
  --wc-lx-op: rgb(200, 0, 20);
  --wc-lx-x1: rgb(194, 26, 107);
  --wc-lx-x2: rgb(79, 127, 22);
  --wc-lx-x3: rgb(163, 90, 0);
  --wc-lx-x4: rgb(50, 90, 180);
  --wc-lx-x5: rgb(91, 75, 196);
  --wc-lx-up: #1E7D34;
  --wc-lx-dn: #D70015;
}
main .wc-av {
  position: relative; flex: 0 0 auto; width: var(--wc-av, 34px); height: var(--wc-av, 34px); border-radius: 50%;
  display: grid; place-items: center; overflow: hidden; background: rgba(0, 0, 0, 0);
  font-size: 13px; font-weight: 700; letter-spacing: -0.02em; color: rgb(29, 29, 31);
}
main .wc-av img { position: absolute; inset: 0; width: 100%; height: 100%; }
main .wc-lx-bar {
  position: absolute; transform: translateX(-50%); border-radius: 0;
  transition: opacity 0.2s;
}
main [data-wc-note] { display: grid; place-items: center; position: absolute; inset: 0; font-size: 12.5px; color: rgb(134, 134, 139); text-align: center; padding: 0 12px; }
html[data-theme=light] main [data-wc-note] { color: rgb(110, 110, 115); }
main [data-wc-dim="1"] { opacity: 0.35; transition: opacity 0.2s; }
main [data-wc-empty] { padding: 18px 0 6px; font-size: 13.5px; color: rgb(134, 134, 139); }
html[data-theme=light] main [data-wc-empty] { color: rgb(110, 110, 115); }

/* Search fields of the section: only the page's own round clear button (the browser's blue one doubled it). */
main input[type="search"]::-webkit-search-cancel-button,
main input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* Exchange page, reserves: when the "Lowest asset ratio" tile is left out (no source publishes it), the two figures
 * share the row instead of leaving a third of it empty. */
@media (width >= 640px) {
  main section[data-screen-label="Reserves and transparency"] div:has(> div:nth-child(2):last-child > span) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}