/* Peak mobile layout hardening
   Loaded after page-level styles so the small-screen rules are consistent
   across every route without changing the desktop composition. */
html{overflow-x:hidden}
body{overflow-x:hidden}
img,svg,video,iframe{max-width:100%}
main,.page,.wrap,.container,[class*="-page"]{min-width:0}
button,input,textarea,select{max-width:100%}

@media (max-width:760px){
  /* Keep the header usable on narrow screens while retaining all navigation. */
  .topbar,.site-header{
    height:auto!important;
    min-height:64px;
    flex-wrap:wrap;
    gap:8px!important;
    padding:10px 14px!important;
  }
  .topbar>.brand,.site-header>.brand{flex:1 1 auto;min-width:0;margin-right:0!important}
  .topbar .header-actions,.site-header .header-actions{flex:0 0 auto;min-width:0;gap:6px}
  .topbar nav,.site-header .nav,.topbar>.nav{
    display:flex!important;
    order:3;
    flex:1 0 100%;
    min-width:0;
    max-width:100%;
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:none;
  }
  .topbar nav::-webkit-scrollbar,.site-header .nav::-webkit-scrollbar,.topbar>.nav::-webkit-scrollbar{display:none}
  .topbar nav a,.topbar nav .nav-button,.site-header .nav a,.topbar>.nav a{
    flex:0 0 auto;
    white-space:nowrap;
    padding:8px 11px!important;
    font-size:11px!important;
  }
  .topbar .network,.topbar .network-pill,.site-header .network{display:none}
  .topbar .header-actions .button,.site-header .header-actions .button{
    min-height:38px;
    max-width:142px;
    padding:0 11px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
  }
  .site-header .header-actions .x-link{height:38px;width:auto;min-width:38px;padding:0 10px}

  /* Shared content gutters and grid safety. */
  .wrap{width:calc(100% - 28px)!important}
  main{width:100%;max-width:100%;padding-left:14px!important;padding-right:14px!important}
  .market-page,.explore-page,.portfolio-page,.referral-page,.rewards-page,.flywheel-page{width:100%;max-width:100%;min-width:0}
  .hero-copy,.hero,.section-head,.market-head,.explore-head,.portfolio-head,.referral-hero,.flywheel-hero{min-width:0}
  h1,h2,h3,p,span,small,b,strong{overflow-wrap:anywhere}

  /* Page-level columns collapse before the device becomes cramped. */
  .hero,.creator-rewards,.how-panel,.launch-page-main,.market-grid,.token-profile,
  .portfolio-layout,.referral-grid,.rewards-dashboard,.reward-route,.split-example,
  .info-grid,.flywheel-grid{grid-template-columns:minmax(0,1fr)!important}
  .hero,.market-head,.explore-head,.portfolio-head,.referral-hero,.flywheel-hero{display:block}

  /* Explore and market cards. */
  .explore-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch!important}
  .explore-summary span{min-width:0!important;padding:11px 9px}
  .explore-summary b{font-size:17px}
  .explore-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  .explore-grid{grid-template-columns:1fr!important}
  .explore-tabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
  .explore-tabs::-webkit-scrollbar{display:none}
  .explore-tab{flex:0 0 auto;white-space:nowrap}
  .explore-card{min-width:0}
  .explore-card-links{flex-wrap:wrap}
  .explore-card-links a{flex:1 1 84px;text-align:center}
  .explore-metrics,.token-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .market-chart,.market-chart iframe{height:min(72vw,420px)!important;min-height:280px!important}
  .trade-box{padding:16px!important;min-width:0}
  .trade-input input{min-width:0}
  .market-meta,.token-profile-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .token-profile{padding:16px!important;min-width:0}
  .token-profile-identity{align-items:flex-start;min-width:0}
  .holders-panel{min-width:0}
  .holders-head{display:block}
  .holders-count{display:inline-block;margin-top:10px}
  .holders-table-wrap{max-width:100%;overflow-x:auto}
  .holders-table{min-width:580px}

  /* Launch form and trade controls. */
  .launch-page-main{width:100%!important}
  .launch-page-card{min-width:0;padding:20px 15px!important}
  .pair-list,.allocation-grid,.initial-buy-grid,.initial-buy-estimate,
  .trade-terminal-grid,.strategy-mode-cards,.social-links-grid,.trade-metrics{grid-template-columns:1fr!important}
  .initial-buy-card,.trade-terminal,.wallet-launches{padding:15px!important}
  .wallet-launch-item{display:block}
  .wallet-launch-actions,.trade-links,.launch-page-actions,.modal-actions,.button-row{flex-direction:column;align-items:stretch}
  .wallet-launch-actions .button,.trade-links a,.launch-page-actions .button,.modal-actions .button,.button-row .button{width:100%!important}
  .trade-terminal iframe{height:min(72vw,380px)!important;min-height:250px}
  .review-row{align-items:flex-start}
  .review-row b{max-width:100%;text-align:left;justify-content:flex-start}

  /* Portfolio, rewards, referral and flywheel controls. */
  .portfolio-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .portfolio-position{grid-template-columns:42px minmax(0,1fr)!important}
  .portfolio-position-value{grid-column:2;text-align:left}
  .portfolio-position-actions{justify-content:flex-start}
  .created-token{display:block}
  .created-token-actions{justify-content:flex-start;margin-top:10px}
  .referral-link-row{grid-template-columns:1fr!important}
  .referral-link-row button{width:100%}
  .referral-stats{grid-template-columns:1fr!important}
  .flywheel-card{min-width:0;padding:17px}
  .flywheel-split,.route{grid-template-columns:1fr!important}
  .detail-row{align-items:flex-start;flex-direction:column;gap:5px}
  .detail-row code{text-align:left}
  .p33-wrap{padding:32px 14px 70px!important}
  .p33-grid{grid-template-columns:1fr!important}

  /* Tables remain readable by scrolling inside their own frame, never the page. */
  table{max-width:100%}
  .panel,.activity-panel,.market-chart,.market-grid,.trade-box,.launch-page-card{overflow:hidden}
}

@media (max-width:480px){
  .brand{font-size:18px!important}
  .brand-mark{width:30px!important;height:30px!important}
  .topbar .header-actions .button{max-width:124px;font-size:10px;padding-inline:9px}
  .site-header .header-actions .x-link{font-size:11px}
  .explore-summary b{font-size:15px}
  .explore-summary small{font-size:9px}
  .metric,.activity-stat{padding:17px 15px!important}
  .metric strong,.activity-stat strong{font-size:30px!important}
  .market-meta,.token-profile-facts{grid-template-columns:1fr 1fr!important}
  .creator-reward-head,.panel-heading{display:block}
  .creator-reward-badge,.claim-status{display:inline-flex;margin-top:8px}
  .toast{left:12px;right:12px;width:auto;max-width:none;text-align:center}
}