/* ETF pages (hub, Bitcoin ETFs, Ethereum ETFs): live blocks built by inc/live/etf.php and assets/js/p/etf.js.
 * Colours are the design's tokens (tokens.css); unlayered, so they win over the design's layered classes. */

/* hub: the market that is not chosen */
main [data-wc-etf-a][data-wc-off="1"] { display: none !important; }

/* neutral value (the page script writes up / dn / flat / n) */
html main [data-wc-ch="n"] { color: var(--tZYQMwj) !important; }

/* issuer colours: table dots, donut segments */
main [data-wc-dot] { background: var(--wc-d) !important; }
html[data-theme=light] main [data-wc-dot] { background: var(--wc-l) !important; }
main circle[data-wc-seg] { stroke: var(--wc-d); transition: opacity 0.2s; }
html[data-theme=light] main circle[data-wc-seg] { stroke: var(--wc-l); }
main [data-wc-share] [data-wc-i] { cursor: default; transition: background 0.2s; border-radius: 10px; }
main [data-wc-share] [data-wc-hl] { background: rgba(255, 255, 255, 0.06); }
html[data-theme=light] main [data-wc-share] [data-wc-hl] { background: rgba(0, 0, 0, 0.04); }

/* heat cells (flow grid, monthly heatmap): strength in --wc-a */
main [data-wc-heat="up"] { background: rgb(48 209 88 / var(--wc-a, 0.08)) !important; color: rgb(48, 209, 88) !important; }
main [data-wc-heat="dn"] { background: rgb(255 69 58 / var(--wc-a, 0.08)) !important; color: rgb(255, 105, 97) !important; }
main [data-wc-heat="flat"] { background: transparent !important; color: var(--tT6XaDa) !important; }
html[data-theme=light] main [data-wc-heat="up"] { background: rgb(36 138 61 / calc(var(--wc-a, 0.08) * 0.68)) !important; color: rgb(27, 116, 48) !important; }
html[data-theme=light] main [data-wc-heat="dn"] { background: rgb(215 0 21 / calc(var(--wc-a, 0.08) * 0.68)) !important; color: rgb(184, 0, 15) !important; }
main [data-wc-b] { font-weight: 700 !important; }

/* flow history grid: one column per fund; the total is first on narrow screens and last on wide ones (design) */
main [data-wc-grid] { --wc-n: 12; min-width: calc(200px + 76px * var(--wc-n)) !important; }
main [data-wc-grid] > [role="row"] { grid-template-columns: 96px 104px repeat(var(--wc-n), minmax(76px, 1fr)) !important; }
@media (width >= 700px) {
  main [data-wc-grid] { min-width: calc(224px + 76px * var(--wc-n)) !important; }
  main [data-wc-grid] > [role="row"] { grid-template-columns: 120px 104px repeat(var(--wc-n), minmax(76px, 1fr)) !important; }
}
@media (width >= 1100px) {
  main [data-wc-grid] > [role="row"] { grid-template-columns: 120px repeat(var(--wc-n), minmax(76px, 1fr)) 104px !important; }
  main [data-wc-grid] [data-wc-tot="n"] { display: none !important; }
}
@media (width < 1100px) {
  main [data-wc-grid] [data-wc-tot="w"] { display: none !important; }
}
main [data-wc-grid] > [role="row"][hidden] { display: none !important; }

/* monthly heatmap: a row per year on wide screens, a row per month on narrow ones */
main [data-wc-hm] .wc-etf-hm-w, main [data-wc-hm] .wc-etf-hm-n { display: flex; flex-direction: column; gap: 6px; }
main [data-wc-hm] .wc-etf-hm-w > [role="row"] { grid-template-columns: 56px repeat(12, minmax(0px, 1fr)) 88px !important; }
main [data-wc-hm] .wc-etf-hm-n > [role="row"] { grid-template-columns: 52px repeat(var(--wc-ny, 2), minmax(0px, 1fr)) !important; }
main [data-wc-hm] [role="columnheader"] { display: flex !important; }
@media (width < 1000px) { main [data-wc-hm] .wc-etf-hm-w { display: none; } }
@media (width >= 1000px) { main [data-wc-hm] .wc-etf-hm-n { display: none; } }
main [data-wc-hm] [data-wc-hm="0"] { background: var(--tLGLGRR) !important; color: var(--tT6XaDa) !important; }
main [data-wc-hm] [data-wc-yt] { background: var(--tZ40GJo) !important; font-weight: 700 !important; }
main [data-wc-hm] [data-wc-cur] { box-shadow: var(--tK7hhMg) !important; }

/* tops / share lists switched by shell.js */
main [data-wc-lists] [data-wc-li][hidden] { display: none !important; }

/* issuer donut: the segments of each mode (Assets | Volume) sit in a box without a box of its own */
main [data-wc-donut] > [data-wc-segs] { display: contents; }

/* KPI cards: the line under a figure ("67% of months since launch", "Thu, Oct 1 · 1 fund with inflows") takes up to
 * two lines on phones instead of being cut with an ellipsis. */
@media (width < 600px) {
  html main [data-wc-kpis], html main [data-wc-kpis] > span { white-space: normal; overflow: visible; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}