/* ==========================================================================
   Global Markets — responsive layer
   Loaded LAST of the linked stylesheets (theme → dropdown → bot → optimum →
   responsive), so every rule here wins over an equal-specificity rule in
   theme.css. Page-level <style> blocks live in the <body> and therefore beat
   this file at equal specificity — where a page rule has to be superseded the
   selector below is deliberately escalated (e.g. `header.app-nav`,
   `.app-main.mkt`) and the reason is noted inline.

   Breakpoint ladder (unchanged):
     < 1100px  tablet / small laptop
     <  900px  small tablet / large phone
     <  640px  phone
     <  420px  very small phone
     (hover:none)  touch tap-targets

   theme.css already ships base media queries for .market-card-grid,
   .asset-rail, .bento .c-*, .kpi-grid, .gainers-grid, .dw-grid, .stats and
   .hero-balance .hb-chart. Those ladders are NOT restated here — only the
   gaps are filled, and only with properties those blocks do not set.

   Tokens only: no colour literals, no blur, no glow.
   ========================================================================== */


/* ==========================================================================
   Mobile menu toggle — hidden on desktop, revealed at <900px.
   #mobileMenuToggle toggles `.open` on #appNavLinks (views/partials/app_nav.ejs).
   ========================================================================== */
.mobile-menu-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;flex-shrink:0;
  background:transparent;border:1px solid var(--border);
  color:var(--text-dim);border-radius:var(--r-btn);cursor:pointer;
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);
}
.mobile-menu-toggle:hover{color:var(--text);border-color:var(--border-3);background:var(--surface-2)}
.mobile-menu-toggle:active{transform:scale(0.985)}


/* ==========================================================================
   < 1100px — tablet + small laptop
   ========================================================================== */
@media (max-width:1100px){
  .container{padding:0 20px}
  .app-main{padding:22px 18px 48px}
  .section{padding:56px 0}

  /* ---- marketing hero ---- */
  .hero{padding:52px 20px 60px}
  .hero h1{font-size:42px}
  .hero-visual{width:100%;max-width:540px;margin:0 auto}
  /* Legacy floating coin illustration (no longer used in home.ejs). */
  .hero-coins{position:relative;width:100%;height:200px;margin-top:18px}

  /* ---- dashboard KPI tiles switch to 2-up a little earlier than theme's
          1000px step; the narrower steps below still apply. ---- */
  .kpi-grid{grid-template-columns:repeat(2,1fr)}

  /* ---- trade terminal: drop the left market rail, keep chart + order pad.
          The "All markets" link in the instrument header takes its place —
          escalated past `.trd .trade-mobile-markets{display:none}`. ---- */
  .trade-shell{grid-template-columns:1fr 320px;height:auto;min-height:0}
  .trade-side{display:none}
  .trade-shell.trd .trade-mobile-markets{display:inline-flex}

  /* ---- admin shell ---- */
  .admin-shell{grid-template-columns:200px 1fr}
}


/* ==========================================================================
   < 900px — small tablet / large phone
   ========================================================================== */
@media (max-width:900px){
  .section{padding:48px 0}
  .section-title{font-size:28px}
  .section-sub{margin-bottom:34px}
  .hero{padding:44px 20px 52px}
  .hero h1{font-size:34px}
  .cta-band{padding:56px 20px}
  .cta-band h2{font-size:30px}

  /* ---- bento: the c-* spans are theme's job; only the rhythm changes ---- */
  .bento{gap:12px}

  /* ---- section headers above a group of cells ---- */
  .section-head{margin:22px 0 11px}

  /* ---- hero trust row: two-up before it stacks ---- */
  .trust-row{gap:20px 26px;margin-top:30px}
  .trust-item{flex:1 1 240px}

  /* ---- proof row: an odd count leaves the last cell alone in a 2-col row,
          where theme's nth-child(odd) rule would still draw a right hairline ---- */
  .stats .stats-row .stat:last-child:nth-child(odd),
  .stats .grid-4 .stat:last-child:nth-child(odd){border-right:none}

  /* ================= public nav ================= */
  .nav-public{padding:12px 18px;gap:12px}
  /* The centre link cluster folds away; the brand and the CTAs stay.
     Descendant form is required: public_nav.ejs declares `.pn-nav-links{
     display:flex}` unconditionally in a <body> <style>, which would otherwise
     win this media rule on document order alone. */
  .nav-public .pn-nav-links{display:none}

  /* ================= app nav ================= */
  /* theme.css pins the bar to a 60px row — it has to breathe once it wraps. */
  .app-nav{
    height:auto;min-height:56px;
    padding:10px 14px;flex-wrap:wrap;gap:8px;
    position:relative;
  }
  .app-nav .brand{margin-right:0}
  .app-nav .brand img{height:26px}

  /* Wordmark collapses to the logo mark alone from here down. This is a
     deliberate override of app_nav.ejs, which re-shows .an-brand-text at
     900px — the bar carries the balance, three controls and the toggle on
     one line at this width and the wordmark is the cheapest thing to drop. */
  header.app-nav .an-brand-text{display:none}

  /* Balance + account controls group hard right, toggle last. */
  header.app-nav .an-right{order:1;margin-left:auto;gap:7px}
  .mobile-menu-toggle{display:inline-flex;order:2;margin-left:0}

  /* The balance stays — it is the single most useful number in the bar. */
  header.app-nav .nav-balance{border-right:none;padding:0 8px 0 2px}

  /* Links become a full-width drawer under the bar. */
  /* width = 100% + both paddings so the drawer bleeds to the bar's edges. */
  .app-nav-links{
    order:3;width:calc(100% + 28px);display:none;flex-direction:column;gap:0;
    background:var(--surface-sunk);border-top:1px solid var(--border);
    margin:8px -14px -10px;padding:6px 0;
  }
  .app-nav-links.open{display:flex}
  .app-nav-links a{
    height:auto;width:100%;padding:12px 16px;border-radius:0;
    border-top:1px solid var(--border);font-size:14px;
  }
  .app-nav-links a:first-child{border-top:none}
  /* The active hairline turns from an underline into a left marker. */
  .app-nav-links a.active::after{
    left:0;right:auto;top:0;bottom:0;width:2px;height:auto;border-radius:0;
  }

  /* Search rides along with the drawer instead of being permanently hidden
     (nothing in public/js toggles `.search-wrap.open`). */
  .search-wrap{order:4;width:100%;max-width:none;margin:0;display:none}
  .search-wrap.open,
  .app-nav-links.open ~ .search-wrap{display:block}

  /* Legacy balance chip, for any view still rendering it. */
  .app-nav .balance-chip{order:1;flex-shrink:0;padding:6px 10px;font-size:13px}
  .app-nav .profile-link,.app-nav .logout-link{width:32px;height:32px}

  /* ================= dashboard ================= */
  .dash-head{flex-direction:column;align-items:stretch}
  .dash-head .actions{justify-content:flex-end}

  /* ================= markets table ================= */
  /* Drop 24h High / 24h Low first — the table then fits without scrolling. */
  #mktTbl thead th:nth-child(5),#mktTbl thead th:nth-child(6),
  #mktTbl tbody td:nth-child(5),#mktTbl tbody td:nth-child(6){display:none}

  /* ================= trade terminal ================= */
  .trade-shell{grid-template-columns:1fr}
  .trade-center{min-height:520px}
  .trade-right{border-left:none;border-top:1px solid var(--border)}
  .trade-header{flex-wrap:wrap;gap:10px 16px}
  .trade-header .pair-meta{margin-left:0;flex-wrap:wrap;gap:16px}
  .trade-header .pair-price{font-size:18px}

  /* ================= bots ================= */
  /* bot.css stacks these at the same step; restated so the responsive layer
     stays the authority for the two-up grid. */
  .bot-two-up{grid-template-columns:1fr}
  .bot-settings-grid{grid-template-columns:1fr}

  /* ================= forms / auth ================= */
  .auth-card{padding:28px 22px}
  .field-row{grid-template-columns:1fr}

  /* ================= footer ================= */
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}

  /* ================= admin ================= */
  .admin-shell{grid-template-columns:1fr}
  .admin-side{
    position:relative;height:auto;width:100%;
    display:flex;flex-wrap:wrap;gap:0;padding:10px;
    border-right:none;border-bottom:1px solid var(--border);
  }
  .admin-side .brand{
    width:100%;border-bottom:1px solid var(--border);
    padding:0 8px 10px;margin-bottom:8px;
  }
  .admin-side a{flex:1 0 auto;padding:8px 12px;font-size:12.5px;border-radius:var(--r-xs)}
  .admin-side a.active{border-left:none;background:var(--surface-2)}
  .admin-card{overflow-x:auto}
  .adm-tbl,.price-table{min-width:560px}
}


/* ==========================================================================
   < 640px — phone
   ========================================================================== */
@media (max-width:640px){
  .container{padding:0 16px}
  .app-main{padding:16px 14px 40px}
  .section{padding:36px 0}
  .section-title{font-size:22px;line-height:1.22}
  .section-sub{font-size:14px;margin-bottom:28px}
  .page-title{font-size:22px}
  .page-sub{font-size:13px}

  /* ---- art-deco rule shortens so it never spans the whole phone ---- */
  .deco-rule{max-width:200px;margin:20px auto}

  /* ================= public nav + ticker ================= */
  .nav-public{padding:10px 14px;gap:10px}
  .nav-public .pn-actions{gap:7px}
  .ticker-track{font-size:11.5px}

  /* ================= app nav ================= */
  .app-nav{padding:9px 12px}
  .app-nav-links{width:calc(100% + 24px);margin:8px -12px -9px}
  /* Compact but never hidden — escalated past app_nav.ejs's 560px block. */
  header.app-nav .nav-balance{padding:0 6px 0 2px}
  header.app-nav .nav-balance .l{font-size:8.5px;letter-spacing:0.06em}
  header.app-nav .nav-balance .v{font-size:13px}
  /* 16px stops iOS from zooming the viewport on focus. The 34/42px insets are
     theme.css's — they hold the magnifier and the ⌘K chip. */
  .search-wrap input{font-size:16px;padding:11px 42px 11px 34px}

  /* ================= marketing hero ================= */
  .hero{padding:34px 16px 40px}
  .hero h1{font-size:28px;line-height:1.14}
  .hero p.lead{font-size:15px}
  .hero-cta{flex-direction:column;width:100%}
  .hero-cta .btn{justify-content:center;width:100%}
  .hero-visual{max-width:none}
  /* Soften the green bloom behind the product shot — at this size it reads as
     haze over the copy rather than as depth. */
  .hero-visual::before{opacity:0.7}

  .trust-row{gap:16px;margin-top:26px}
  .trust-item{flex:1 1 100%}
  .partner-strip{
    flex-direction:column;align-items:flex-start;gap:14px;
    margin-top:26px;padding-top:20px;
  }

  /* ---- tab pills scroll sideways instead of wrapping into two rows ---- */
  .tab-pills{
    flex-wrap:nowrap;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .tab-pills::-webkit-scrollbar{display:none}
  .tab-pills button,.tab-pills a{white-space:nowrap;padding:6px 12px;font-size:12.5px}

  /* ---- live-market cards (theme owns the column count) ---- */
  .market-card-grid{gap:10px}
  .market-card{padding:12px;gap:9px}
  .market-card .spark{height:36px}

  /* ---- proof row ---- */
  .stat{padding:14px 12px}
  .stat .v{font-size:20px}

  /* ---- CTA band ---- */
  .cta-band{padding:44px 16px}
  .cta-band h2{font-size:24px}
  .cta-band p{font-size:14px}
  .cta-band .cta-bars{opacity:0.3}

  /* ---- footer ---- */
  .footer{padding:32px 16px 20px}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .social-row{flex-wrap:wrap;margin-top:18px}

  /* ================= dashboard ================= */
  .kpi-grid{grid-template-columns:1fr}
  .bento-cell{padding:15px 16px;border-radius:var(--r-card)}
  .hero-balance{min-height:0}
  .section-head{flex-wrap:wrap;gap:8px;margin:20px 0 10px}
  .section-head .sh-title{font-size:14px}
  .section-head .sh-title svg{width:18px;height:18px}

  /* ---- ticker rail: scrolls sideways, hairline dividers intact.
          Padding/gap are left alone so the flush grid keeps its rules. ---- */
  .tick-strip .tick{min-width:132px;padding:11px 13px}
  .tick-strip{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .tick-strip::-webkit-scrollbar{height:6px}

  /* ---- trending tiles (theme owns the column count) ---- */
  .asset-tile{padding:13px 14px;gap:9px}
  .asset-tile .spark{height:30px}

  /* ---- legacy grids ---- */
  .trending-grid,.gainers-grid{grid-template-columns:1fr}

  /* ================= data tables =================
     Rather than force a horizontal scrollbar on the asset tables, the
     lowest-priority columns drop out. # / Asset / Price / 24h always survive.
     Scoped to the dashboard + markets views on purpose: the trade terminal's
     order table and the bots table keep every column (and their own
     overflow-x:auto), because their trailing cells hold actions and P&L. */
  .dtable{font-size:12.5px}
  .dtable thead th{padding:8px 10px}
  .dtable tbody td{padding:10px 10px}
  .dtable .rank{width:26px}

  /* Escalated past the page-level min-width in views/app/markets.ejs. */
  .app-main.mkt .mkt-tablewrap .dtable{min-width:0}
  .app-main.mkt .gainers-grid .mkt-tablewrap .dtable{min-width:0}

  .dsh .dtable thead th:nth-child(n+5),
  .dsh .dtable tbody td:nth-child(n+5),
  .mkt .gainers-grid .dtable thead th:nth-child(n+5),
  .mkt .gainers-grid .dtable tbody td:nth-child(n+5){display:none}
  #mktTbl thead th:nth-child(n+5),
  #mktTbl tbody td:nth-child(n+5){display:none}

  /* ================= trade terminal ================= */
  .trade-header{padding:10px 12px}
  .trade-header .pair-meta{font-size:11.5px;gap:14px}
  .trade-toolbar{flex-wrap:wrap;padding:8px 12px}
  .chart-area{min-height:280px}
  .order-pad{padding:12px}
  .orderbook{padding:10px 12px}
  .recent-trades{max-height:120px;padding:8px 12px}
  .bottom-tabs{padding:0 8px}
  .pct{grid-template-columns:repeat(4,1fr);gap:3px}
  .pct button{font-size:11px;padding:7px 2px}
  .bs-toggle button{font-size:14px}

  /* ================= deposit / withdraw ================= */
  .amount-input input{font-size:19px}
  .quick-amts{gap:6px}

  /* ================= profile ================= */
  .detail-row{flex-direction:column;align-items:flex-start;gap:5px}
  .detail-row .v{text-align:left}
  .pf .detail-row .pf-val{justify-content:flex-start}

  /* ================= auth ================= */
  .auth-wrap{padding:20px 14px}
  .auth-card{padding:24px 18px}
  .auth-card h2{font-size:22px}
  .auth-back{top:16px;left:14px;font-size:13px}

  /* ================= bots ================= */
  .bot-card{padding:16px}
  .bot-logs{font-size:11.5px}
  .bot-logs .row{flex-wrap:wrap}
  /* Legacy header shell. */
  .bot-hero h1{font-size:21px}

  /* ================= admin ================= */
  .admin-main{padding:16px}
  .admin-side{padding:8px}
  .admin-side a{font-size:11.5px;padding:7px 10px}

  /* ================= form fields =================
     16px is the threshold below which iOS zooms the viewport on focus. */
  .field input,.field select,.field textarea,
  .input,select.input,textarea.input,
  .bot-field input,.bot-field select,
  .bot-kv .kv-ctl input,.bot-kv .kv-ctl select,
  .amounts input,
  .trade-side .head input{
    font-size:16px;
  }
  .field input,.field select,.field textarea{padding:12px 14px}
  /* The markets filter keeps its icon inset — only the type size changes. */
  .mkt .mkt-search input.input{font-size:16px}
  /* Controls with a leading icon/dot inside a .field: restore the inset that
     the padding shorthand above would otherwise flatten. */
  .bot-input-icon input{padding-left:34px}
  .bot-select-wrap select{padding-left:32px}
}


/* ==========================================================================
   < 420px — very small phones
   ========================================================================== */
@media (max-width:420px){
  .container{padding:0 14px}
  .app-main{padding:14px 12px 36px}
  .hero{padding:28px 14px 34px}
  .hero h1{font-size:25px}

  /* ---- app nav: keep the balance readable, never let it push the row ---- */
  header.app-nav .nav-balance{max-width:112px;min-width:0}
  header.app-nav .nav-balance .l,
  header.app-nav .nav-balance .v{
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  /* ---- the hero product mock squashes below this width; drop it ---- */
  .hero-visual{display:none}

  /* ---- decorative candlestick field reads as noise at this size ---- */
  .cta-band .cta-bars{display:none}
  .cta-band h2{font-size:22px}

  /* ---- dashboard ---- */
  .hero-balance .hb-value{font-size:27px}
  .tick-strip .tick{min-width:124px;padding:10px 12px}

  /* ---- tables: the secondary asset name is the last thing to go ---- */
  .app-main.dsh .dtable .t-name,
  .app-main.mkt .dtable .t-name{display:none}
  .dtable thead th,.dtable tbody td{padding:9px 8px}

  /* ---- deposit / withdraw quick amounts ---- */
  .quick-amts{grid-template-columns:repeat(2,1fr)}

  /* ---- public nav wordmark (public_nav.ejs also hides it here) ---- */
  .nav-public .brand div,.pn-brand-text{display:none}

  /* ---- proof row ---- */
  .stat .v{font-size:19px}
}


/* ==========================================================================
   Touch devices — tap targets
   ========================================================================== */
@media (hover:none){
  .btn,button,.nav-link,.app-nav-links a,
  .um-dd-item,.um-dd-toggle,
  .tab-pills button,.tab-pills a,
  .quick-amts button,.copy-box .copy-btn{
    min-height:38px;
  }
  .bot-tf-row button{min-height:38px}

  /* Square icon controls need width as well as height. */
  .icon-btn,.btn-icon,.profile-link,.logout-link,.mobile-menu-toggle{
    min-width:38px;min-height:38px;
  }
  .social-row a{width:38px;height:38px}

  /* Clickable table rows get a little more room to be hit. */
  .dtable tbody td{padding-top:12px;padding-bottom:12px}
}
