/* Home "Latest News" slider (owner 03.10): previous / indicators / next / pause in one compact pill, slim indicators
   (the active one longer, filling with the lime accent over the 5 s — assets/js/p/home-v2.js), a quicker cross-fade.
   Only opacity and transform move. The slider sits on its own dark picture in both themes, as in the design. */
main [aria-roledescription="carousel"] > [aria-roledescription="slide"] {
  transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
main [aria-roledescription="slide"] > div[data-c-on] {
  transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s;
}
main .wc-hs-ctl {
  gap: 2px;
  height: 40px;
  padding: 0 4px;
  border-radius: 980px;
  background: rgba(30, 30, 32, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
main .wc-hs-dots {
  display: flex;
  align-items: center;
  height: 100%;
}
main .wc-hs-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}
main .wc-hs-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgb(255, 255, 255);
}
main .wc-hs-btn[data-paused] .wc-hs-i-pause,
main .wc-hs-btn:not([data-paused]) .wc-hs-i-play {
  display: none;
}
main .wc-hs-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 16px;
  margin: 0 2px;
  background: rgba(255, 255, 255, 0.18);
}
/* each indicator: a 24 px target around a 3 px line */
main .wc-hs-dot {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
main .wc-hs-dot[aria-selected="true"] {
  width: 44px;
}
main .wc-hs-bar {
  position: relative;
  display: block;
  width: 12px;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.42);
}
main .wc-hs-dot:hover .wc-hs-bar {
  background: rgba(255, 255, 255, 0.78);
}
main .wc-hs-dot[aria-selected="true"] .wc-hs-bar {
  width: 32px;
  background: rgba(255, 255, 255, 0.26);
}
main .wc-hs-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #D4FF3F;
  transform: scaleX(0);
  transform-origin: left center;
}
main .wc-hs-btn:focus-visible,
main .wc-hs-dot:focus-visible {
  outline: 2px solid #D4FF3F;
  outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
  main [aria-roledescription="carousel"] > [aria-roledescription="slide"],
  main [aria-roledescription="slide"] > div[data-c-on],
  main [aria-roledescription="slide"] > img {
    transition: none;
  }
}

/* Community card: the header's wordmark on the left, the title and line on the right, one row (owner 03.10);
 * on a very narrow card the text drops under the logo */
.clrhHBh .cxOCXL0 {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
}
.clrhHBh .wc-comm-logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 26px;
  max-width: 46%;
  object-fit: contain;
  object-position: left center;
}
.clrhHBh .cxOCXL0 > .cfLv4EL { flex: 1 1 auto; min-width: 0; }
.clrhHBh .cxOCXL0 .cFBFDAM { font-size: 18px; line-height: 1.2; }
@media (max-width: 340px) { .clrhHBh .cxOCXL0 { flex-wrap: wrap; } .clrhHBh .wc-comm-logo { max-width: 100%; } }
/* the card is as tall as the news cards next to it: the buttons take that height (owner 05.10: no empty gap between
 * the title and the buttons); each button shows the network and the account's handle */
.clrhHBh .cJLJomn { flex: 1 1 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
/* the four story cards beside it stay one row: between 1100 and 1360 px the column fits three (the design's auto-fit
 * wrapped the fourth onto a row of its own and stretched the community card to twice its height) */
@media (width >= 1100px) and (width < 1360px) {
  .c8bLnyj { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c8bLnyj > :nth-child(n+4) { display: none; }
}
.clrhHBh .cVdTyot { height: auto; min-height: 52px; padding: 8px 12px 8px 9px; gap: 12px; }
.clrhHBh .wc-comm-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clrhHBh .wc-comm-n { font-size: 15px; line-height: 1.2; }
/* a narrow card (the side column at 1100–1250 px): the icon over the name, no handle — "Instagram" fits the button */
.clrhHBh { container-type: inline-size; }
@container (width < 340px) {
  .clrhHBh .cVdTyot { flex-direction: column; justify-content: center; gap: 6px; padding: 8px 6px; text-align: center; }
  .clrhHBh .wc-comm-t { align-items: center; }
  .clrhHBh .wc-comm-n { font-size: 14px; }
  .clrhHBh .wc-comm-h { display: none; }
}
.clrhHBh .wc-comm-h { font-size: 12.5px; font-weight: 500; line-height: 1.2; color: var(--tT6XaDa); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- audit 03.10 (home) ---------- */

/* L12: the hero's category pill in the category's own colour, as on the cards under the slider (vars from
   wc_cat_vars() on the pill; the slide script swaps the pill's classes, hence the attribute) */
main [data-wc-hcat] { background: var(--wc-cat, #D4FF3F); color: var(--wc-on, #000); }
html[data-theme=light] main [data-wc-hcat] { color: var(--wc-onl, #fff); }

/* L15: short meta stays on one line on phones ("· 1h ago", "Top movers · 24h") */
main .wc-nw { white-space: nowrap; }
main [data-screen-label="Markets"] [data-wc-lists] > div:first-child > span:first-child { white-space: nowrap; }

/* M6: the small cards' excerpt ends with an ellipsis, not mid-word */
main [data-screen-label="Latest news"] p.cnyGpaF { display: block; text-overflow: ellipsis; }
main [data-screen-label="Latest news"] p.cnyGpaF > * { display: inline; }

/* M7: the open Market Pulse row shows its whole "Why it matters" line on phones (the design's box stopped at 80 px) */
@media (max-width: 599.98px) {
  /* open: the first row as served (.csH3DPu), or a row the recorded hover opened (inline 80px) */
  main [data-screen-label="Market pulse"] li span[style*="line-clamp"]:is(.csH3DPu:not([style*="max-height: 0"]), [style*="max-height: 80px"]) {
    max-height: 220px !important;
    -webkit-line-clamp: 8 !important;
    line-clamp: 8 !important;
  }
}
/* L19: on phones the change next to the tag says what it measures ("BTC · 24h") */
main [data-screen-label="Market pulse"] .wc-pl-sub {
  margin-left: 6px;
  font-weight: 500;
  color: var(--tT6XaDa);
  white-space: nowrap;
}

/* M10: the Upcoming category pill gets the width it needs, the impact bars sit after it */
@media (min-width: 900px) {
  main [data-screen-label="Upcoming"] ol > li > a { grid-template-columns: 92px minmax(0, 1fr) 164px 110px 96px; }
  main [data-screen-label="Upcoming"] ol > li > a > :nth-child(3) { max-width: 100%; overflow: hidden; }
  main [data-screen-label="Upcoming"] ol > li > a > :nth-child(3) > span { overflow: hidden; text-overflow: ellipsis; }
}
/* M11: Upcoming titles on phones take two lines, so two events of one project read apart */
@media (max-width: 599.98px) {
  main [data-screen-label="Upcoming"] .cM6VYqR {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    overflow: hidden;
  }
}

/* L5: a change that prints as 0.00% is neither green nor red */
main [data-wc-top] [data-wc-flat="1"] { color: var(--tT6XaDa) !important; }

/* M17: the top-10 table on phones shows coin, price and 24h only (no sideways scroll, no half price) */
@media (max-width: 759.98px) {
  main [data-wc-top] { min-width: 0; }
  main [data-wc-top] > * {
    grid-template-columns: minmax(0, 1fr) auto 64px;
    gap: 10px;
    padding-left: 14px;
    padding-right: 14px;
  }
  main [data-wc-top] > * > :nth-child(1),
  main [data-wc-top] > * > :nth-child(n+5) { display: none; }
  main [data-wc-top] > * > :nth-child(4) { text-align: right; justify-self: end; }
}

/* H9: the heatmap readable on every screen. Phones: a plain grid of equal tiles, logo + ticker + 24h change (name
   and price go). Wider screens: the small tiles stack ticker over change, the logo shrinks or goes in narrow tiles —
   the ticker is never cut. */
main [data-wc-heatmap] a[data-wc-heat] { container: wc-heat / inline-size; }
main [data-wc-heatmap] [data-wc-hf="sym"] { flex-shrink: 0; }
@container wc-heat (max-width: 150px) {
  [data-wc-hf="name"] { display: none !important; }
  img { width: 18px !important; height: 18px !important; }
}
@container wc-heat (max-width: 96px) {
  img,
  [data-wc-heat] > span:first-child > span:first-child:not(:has([data-wc-hf])) { display: none !important; }
}
@media (min-width: 760px) {
  main [data-wc-heatmap] > :nth-child(n+3) > a[data-wc-heat] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
  }
  main [data-wc-heatmap] > :nth-child(n+3) > a[data-wc-heat] > span { max-width: 100%; }
}
@media (max-width: 759.98px) {
  main [data-wc-heatmap] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 62px;
    gap: 6px;
  }
  main [data-wc-heatmap] > * { display: contents; }
  main [data-wc-heatmap] a[data-wc-heat] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    height: auto;
    min-width: 0;
    padding: 8px 9px;
  }
  main [data-wc-heatmap] a[data-wc-heat] > span { max-width: 100%; gap: 5px; }
  main [data-wc-heatmap] [data-wc-hf="name"],
  main [data-wc-heatmap] [data-wc-hf="price"] { display: none !important; }
  main [data-wc-heatmap] [data-wc-hf="sym"] { font-size: 13px; }
  main [data-wc-heatmap] [data-wc-hf="c24"] { font-size: 12.5px; }
}
@media (max-width: 359.98px) {
  main [data-wc-heatmap] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* L17: a darker foot on the guide topic cards, so the count reads on light photos too */
main [data-wc-scrim] {
  background: linear-gradient(rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 34%, rgba(0, 0, 0, 0.08) 52%, rgba(0, 0, 0, 0.62) 76%, rgba(0, 0, 0, 0.88) 100%);
}

/* L6: a page named in a FAQ answer is a link */
main .wc-faq-a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
main .wc-faq-a:hover { text-decoration-thickness: 2px; }

/* L9: bigger tap areas on phones — the slider indicators fill the control's height, the small tabs get an invisible
   margin (::after) without moving anything */
@media (max-width: 759.98px) {
  main .wc-hs-dot { height: 40px; width: 28px; }
  main [role="tablist"][aria-label="Sidebar feed"] > button,
  main [role="tablist"][aria-label="Time range"] > button,
  main [data-wc-lists] button[data-wc-pick] { position: relative; }
  main [role="tablist"][aria-label="Sidebar feed"] > button::after,
  main [role="tablist"][aria-label="Time range"] > button::after,
  main [data-wc-lists] button[data-wc-pick]::after { content: ""; position: absolute; inset: -8px 0; }
}

/* Top Stories with Trending only ("Most read" left out without the site's own stories, inc/news.php wc_most_read()):
 * no empty switch track next to the one tab */
[role="tablist"][aria-label="Sidebar feed"][data-wc-tabs="1"] { background: transparent; }