/* Phone sizings that must resolve last — see the comment inside.
 *
 * Layer 16 of the stylesheet. ORDER IS SIGNIFICANT: this file's rules
 * are overridden by every later layer and override every earlier one, exactly as
 * when they were one file. See docs/frontend-architecture.md. */

/* Phone sizings rescued from the dead 600px block near the top of this file.
   They belong at the very end so they win by position rather than needing
   !important — that is the pattern the rest of the mobile fixes fell into.
   Anything added here must stay after every base declaration it overrides. */
@media (max-width: 600px) {
  /* The ticker beside the coin name was rendering at the desktop 28px, right
     next to a 36px title, on a 320px screen. */
  .hero-name span { font-size: 16px; }

  /* Header cells kept desktop padding, eating width on narrow screens. The td
     padding is deliberately left alone — it is set !important later as a
     considered choice, not an accident. */
  .signal-table th { padding: 10px 8px; }
}

/* Small phones (320px — iPhone SE and similar). The <=600px rules above are
   tuned around ~375px, where they fit exactly; below that the Signal
   Leaderboard's fixed columns (28+28+80px plus 4x10px gaps) needed 317px
   inside a 224px card, so the row hung off the side and took the whole PAGE
   into horizontal scrolling. 375px and up are unaffected by this block.

   min-width:0 matters as much as the narrower columns: grid children default
   to min-width:auto, so a column cannot shrink below its own content ("$1,943.92")
   no matter what the template says. */
@media (max-width: 374px) {
  #leaderboard > div {
    grid-template-columns: 24px 24px 1fr 56px auto !important;
    gap: 8px !important;
  }

  #leaderboard > div > div {
    min-width: 0;
  }

  /* The Top Movers header row and its filter strip were sizing to their own
     content (289px) inside a 250px card. They already carry overflow-x:auto,
     which is only able to scroll them internally once their width is actually
     bounded by the parent — max-width does that where min-width:0 alone did not. */
  #coinMonitor > div:first-child,
  #coinMonitor > div:first-child > div {
    max-width: 100%;
  }

  /* The hero was the worst case and the hardest to see: #topSignalHero carries
     overflow-x:hidden, so instead of scrolling the page it silently CLIPPED its
     own content. Measured at 320px: the single grid column resolved to 292px
     inside a 240px content box (280px card - 20px padding each side), cutting
     52px — the right-hand metric column and the right edge of the chart — off
     the card entirely, with nothing on screen to say so.

     The column was sized by .hero-metrics: two cells, each min-content = a
     ~110px value ("High (100%)", "100 /100") + 36px of horizontal padding, so
     ~294px that no 1fr template could shrink. Narrowing the cells is what
     actually fixes it; min-width:0 is what allows the shrink to happen at all. */
  #topSignalHero > *,
  .hero-copy > *,
  .hero-metrics > * {
    min-width: 0;
  }

  .hero-metric {
    padding: 12px 10px;
  }

  .hero-metric strong {
    font-size: 17px;
  }
}