/* ============================================================
   Responsive — wide desktop first, then tablet, then a genuinely
   mobile-first layout. Loaded after the page stylesheets so it
   always wins.
   ============================================================ */

/* ── wide → narrow desktop: drop the least load-bearing columns ── */
@media (max-width:1600px){
  .cols,.mrow{grid-template-columns:minmax(220px,2.2fr) 96px 96px 72px 96px 118px 30px 100px}
  .cols .col-holders,.mrow .col-holders{display:none}
}
@media (max-width:1400px){
  .cols,.mrow{grid-template-columns:minmax(200px,2.2fr) 96px 92px 70px 110px 30px 96px}
  .cols .col-vol,.mrow .col-vol{display:none}
  .shell{grid-template-columns:188px minmax(0,1fr) 336px}
  .tshell{grid-template-columns:minmax(0,1fr) 340px}
  .top .header-explore{display:none}
}
@media (max-width:1240px){
  .hero{grid-template-columns:1fr}
  .hstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .cols,.mrow{grid-template-columns:minmax(170px,2fr) 96px 90px 110px 30px 92px}
  .cols .col-chg,.mrow .col-chg{display:none}
}

/* ── tablet ────────────────────────────────────────────── */
@media (max-width:1100px){
  .top{flex-wrap:wrap;min-height:0;padding-top:8px;padding-bottom:8px}
  .top>.search{order:9;flex-basis:100%;max-width:none}
  .top .xstocks-nav-link,.top .docs-nav-link{display:none}
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:static;display:grid;grid-template-columns:1fr 1fr 1fr;order:2}
  .snav{display:grid;grid-template-columns:1fr 1fr}
  .main{order:1}
  .panel{position:static;order:3;max-height:none}
  .tshell{grid-template-columns:minmax(0,1fr)}
  .tradecard{position:static}
  .twocol{grid-template-columns:1fr}
  .launch-layout{grid-template-columns:minmax(0,1fr) 220px;gap:18px}
}
@media (max-width:860px){
  .side{grid-template-columns:1fr 1fr}
  .engine{grid-column:1/-1}
  .launch-layout{grid-template-columns:1fr}
  .launch-preview{position:static}
  .plist{grid-template-columns:1fr 1fr}
  .review{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── phone ─────────────────────────────────────────────── */
@media (max-width:720px){
  :root{--page-x:12px;--gap:10px;--header-h:100px}

  /* Header collapses to brand + wallet on one line; search takes the next.
     Launching lives in the bottom bar, so the header button goes away. */
  .top{gap:8px;padding:8px var(--page-x)}
  .brand{margin-right:auto}
  .brand-logo{height:23px}
  .netpill,.top .header-explore,.top .btn--pairs,#pairsBtn,#launchBtn,.search kbd{display:none}
  .theme-toggle{width:34px;height:34px}
  .search{order:9;flex-basis:100%;max-width:none}
  .search input{height:34px;padding:0 14px 0 34px}
  .wordmark{font-size:17px}
  .logo{width:26px;height:26px}
  #walletBtn{padding:0 11px;min-height:34px;font-size:var(--fs-12);margin-left:0}
  .review-banner{font-size:10px;padding:4px var(--page-x)}
  .ribbon{height:34px}
  .rib{padding:0 12px;font-size:var(--fs-11)}

  /* Sidebar becomes a bottom tab bar. */
  .side{display:none}
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--veil);backdrop-filter:blur(16px) saturate(1.3);
    border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:8px;font-size:10px;color:var(--ink-3);font-weight:600}
  .bottomnav a[aria-current="true"]{color:var(--ink)}
  .bottomnav a[aria-current="true"] .ic{color:var(--jade)}
  .bottomnav .ic{font-size:16px;line-height:1}
  .bottomnav .fab{background:var(--jade);border-radius:10px;margin:-2px 4px;color:var(--on-accent);box-shadow:none}
  .bottomnav .fab .ic{color:var(--on-accent)}
  body{padding-bottom:72px}

  /* Explore: compact band, cards only. */
  .hero{padding:12px 14px;gap:10px;border-radius:var(--r-md)}
  .hero>div:first-child{flex-direction:column;align-items:flex-start;gap:8px}
  .hero h1{font-size:var(--fs-17);white-space:normal}
  .hero p{display:none}
  .hero .acts{margin-left:0;gap:6px}
  .hero .acts .btn{min-height:32px;font-size:var(--fs-12);padding:0 11px}
  .hstats{display:none}
  .tablewrap{border-radius:var(--r-md)}
  .thead{padding:10px 12px;gap:6px}
  .thead h2{flex-basis:auto}
  .thead .seg button{padding:5px 8px;font-size:var(--fs-11)}
  .filterbtn{padding:0 9px;font-size:var(--fs-11)}
  .viewtog{display:none}
  .market-pair-heading{padding:8px 12px 0}
  .market-pair-heading>span{display:none}
  .market-pair-heading select{display:block;max-width:60%}
  .pairfilter{padding:6px 12px 10px}
  .pf{height:34px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 12px 12px}
  .gcard{padding:7px;gap:7px}
  .gmc .v{font-size:var(--fs-15)}
  .gmeta .addr{display:none}
  .gmeta{justify-content:flex-end}
  .gcard .gtags .badge{display:none}
  .cols{display:none}
  .mrow{grid-template-columns:minmax(0,1fr) 84px;padding:10px 12px}
  .mrow .col-pair,.mrow .col-chg,.mrow .col-vol,.mrow .col-holders,.mrow .col-spark,.mrow .col-star{display:none}
  .mrow .col-quick-buy{grid-column:1/-1;justify-content:stretch}
  .mrow .col-quick-buy .quick-buy-button{width:100%;min-height:40px}

  /* Trade panel becomes a normal stacked card. */
  .panel{border-radius:var(--r-md)}

  /* Token page. */
  .crumbs{padding:10px var(--page-x) 8px}
  .tshell{padding-bottom:96px}
  .thero,.curvecard,.related{padding:14px;border-radius:var(--r-md)}
  .thero__id h1{font-size:var(--fs-20)}
  .thero__id{gap:11px}
  .thero__id>.token-art,.thero__id>.ring{width:52px;height:52px}
  .thero__sub{gap:6px}
  .thero__sub .sep-when{display:none}
  .thero__sub .when{flex-basis:100%}
  .thero__price .p{font-size:var(--fs-30)}
  .thero__acts{margin-left:0;flex-basis:100%}
  .statrow{grid-template-columns:1fr 1fr}
  .curvestat{margin-left:0;text-align:left;flex-basis:100%;order:-1}
  .curvestat .v{font-size:var(--fs-24)}
  .milestones{grid-template-columns:1fr 1fr}
  .tabcard{border-radius:var(--r-md)}
  .tabcard .tabs{padding:0 8px}
  .tabcard .tabs button{font-size:var(--fs-12);padding:10px 9px}
  .tabcard__body{padding:12px 14px 16px}
  .rgrid{grid-template-columns:1fr}
  .launch-identities>div{grid-template-columns:1fr;gap:3px}

  /* Design-market token page: the trade card becomes a bar + bottom sheet.
     Verified launches keep the trade card in flow (launch-detail rules). */
  body:not([data-workspace="launch"]) .tradecard{display:none}
  .buybar{display:flex;gap:9px;position:fixed;left:0;right:0;bottom:0;z-index:71;
    padding:10px var(--page-x) calc(10px + env(safe-area-inset-bottom));
    background:var(--veil);backdrop-filter:blur(16px) saturate(1.3);border-top:1px solid var(--line)}
  .buybar .meta{flex:1;min-width:0}
  .buybar .meta .p{font-family:var(--font-display);font-size:var(--fs-17);font-weight:700;letter-spacing:-.02em}
  .buybar .meta .k{font-size:var(--fs-11);color:var(--ink-3)}
  .buybar .btn{padding:0 18px;min-height:44px;border-radius:var(--r-md);font-size:var(--fs-15)}

  .sheet{display:block;position:fixed;inset:0;z-index:90;pointer-events:none}
  .sheet__scrim{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(3px);opacity:0;transition:var(--slow)}
  .sheet__panel{position:absolute;left:0;right:0;bottom:0;background:var(--card);box-shadow:var(--e3);
    border-radius:16px 16px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(102%);transition:var(--slow) var(--ease);max-height:92vh;overflow-y:auto}
  .sheet.is-open{pointer-events:auto}
  .sheet.is-open .sheet__scrim{opacity:1}
  .sheet.is-open .sheet__panel{transform:none}
  .grabber{width:38px;height:4px;border-radius:var(--r-pill);background:var(--ink-4);margin:6px auto 14px;opacity:.5}
  .sheet__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .sheet__head h3{font-size:var(--fs-17)}

  /* Modals go full height on a phone. */
  .scrim{padding:0;place-items:end stretch}
  .modal,.modal.launch-modal{border-radius:16px 16px 0 0;max-height:94vh;width:100%}
  .modal__head{padding:16px 16px 0}
  .steps{padding:12px 16px 0;gap:0}
  .step .v{font-size:var(--fs-11)}
  .modal__body{padding:14px 16px;max-height:none}
  .modal__foot{padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
  .launch-draft-status{padding:0 16px 10px}
  .plist{grid-template-columns:1fr;max-height:46vh}
  .review,.review-source,.buy-estimates{grid-template-columns:1fr}
  .token-fields{grid-template-columns:1fr}
  .launch-social-fields{grid-template-columns:1fr}
  .launch-preview{order:-1;display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:10px}
  .launch-draft-badge{display:none}
  .launch-preview-art{margin:0;width:64px;height:64px;aspect-ratio:1}
  .launch-preview-art>.token-art{width:52px;height:52px}
  .launch-preview-info{padding:0}
  .launch-preview-info>p,.launch-preview-info dl,.launch-preview-info>small{display:none}
  #toast{bottom:auto;top:calc(var(--header-h) + 10px)}
}

@media (max-width:380px){
  .brand-logo{height:20px}
  #walletBtn{font-size:var(--fs-11);padding:0 8px}
  .grid{grid-template-columns:1fr}
  .gmeta .addr{display:block}
}

/* Desktop keeps the bottom nav out of the document entirely. */
@media (min-width:721px){
  .bottomnav{display:none}
}