/* ═══════════════════════════════════════════════════════════════════════════
   SweepR — Mobile ergonomics for bridge.html

   Two problems this file exists to solve, both of them phone-only:

     1. The page is a long read. Hero, then three full storytelling sections
        (the five-stage route, the two-ledger comparison, the threat model),
        then the send card. On a desktop that is a scroll. On a phone it is a
        wall, and the person who came here to PAY someone has to swipe past
        all of it to reach the form.

     2. The primary action is off-screen for most of that scroll.

   So: below 860px the four storytelling sections collapse behind a tappable
   summary, and a sticky action bar keeps "Send privately" one thumb away at
   all times. Above 860px this file does nothing at all — every rule is inside
   a max-width query, and bridge-mobile.js removes its own markup on resize.

   Colours come from :root in bridge.html. Never hardcode a palette here.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width:860px){

  /* ── Hero order: the action comes before the story ───────────────────── */
  /* On a desktop the route animation sits between the headline and the CTA and
     everything is on one screen anyway. On a phone that animation is ~800px of
     scrolling in front of the one button somebody arriving to PAY someone
     actually wants, so the CTA row moves up under the sub-heading and the
     story follows it. Source order is unchanged; only the visual order is. */
  .hero{display:flex;flex-direction:column}
  .hero-eyebrow{order:1}
  .hero-title{order:2}
  .hero-sub{order:3}
  .hero-cta{order:4;margin-top:24px}
  .hero-stage{order:5;margin-top:30px}
  .identity-strip-legacy{order:6}
  .hero-assure{order:7}

  /* ── The empty routes panel ───────────────────────────────────────────── */
  /* Before any token is picked this panel is 250px of nothing, sitting between
     the send button and the rest of the page. It still has to be there (it is
     where routes appear the moment tokens are chosen) but it does not need a
     screen to say so, so the placeholder goes to one compact line. */
  .routes-empty{padding:18px 16px;gap:10px}
  .routes-empty svg{width:24px;height:24px}
  .routes-empty p{font-size:12.5px;max-width:none}

  /* ── Collapsible section headers ──────────────────────────────────────── */
  /* One per long section, injected immediately before it by bridge-mobile.js.
     It is a real <button> so it is tappable, focusable and announced. */
  .mc-toggle{
    display:flex;align-items:center;gap:13px;width:100%;
    margin:0 auto 14px;max-width:1120px;
    padding:15px 16px;                       /* >= 44px tall, thumb-sized */
    border-radius:var(--r-lg);
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016));
    border:1px solid var(--line);
    backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
    color:var(--ink);text-align:left;font:inherit;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:border-color .3s var(--ease),background .3s var(--ease);
  }
  .mc-toggle:active{background:rgba(255,255,255,.07)}
  .mc-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

  .mc-toggle-body{flex:1 1 auto;min-width:0}
  .mc-toggle-kicker{
    font-size:9.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
    color:var(--faint);
  }
  .mc-toggle-title{
    margin-top:4px;font-family:'Space Grotesk','Inter',sans-serif;
    font-size:15px;font-weight:650;letter-spacing:-.015em;line-height:1.3;color:var(--ink);
  }
  .mc-toggle-hint{margin-top:5px;font-size:11.5px;line-height:1.45;color:var(--muted)}

  /* Chevron. Rotates to point up once the section is open. */
  .mc-toggle-chev{
    flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
    background:var(--glass-2);border:1px solid var(--line);color:var(--muted);
    transition:transform .32s var(--ease),color .32s var(--ease),border-color .32s var(--ease);
  }
  .mc-toggle-chev svg{width:14px;height:14px;display:block}
  .mc-toggle[aria-expanded="true"]{border-color:rgba(34,211,238,.3)}
  .mc-toggle[aria-expanded="true"] .mc-toggle-chev{
    transform:rotate(180deg);color:var(--cyan);border-color:rgba(34,211,238,.34);
  }
  .mc-toggle[aria-expanded="true"] .mc-toggle-hint{display:none}

  /* The section itself, while folded away. display:none rather than a height
     clamp on purpose: these sections run IntersectionObserver-driven loops and
     a dial/terminal animation, and none of that should burn a phone battery
     while it is unread. ResizeObserver fires on the way back in, so they
     re-measure themselves when reopened. */
  .mc-folded{display:none !important}

  .mc-section-open{animation:mc-reveal .34s var(--ease)}
  @keyframes mc-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  /* ── The way out of an open section ───────────────────────────────────── */
  /* Injected after each section by bridge-mobile.js and only shown while that
     section is open. Without it, finishing a section leaves you a long way
     below its header with no way to put it away except scrolling back up.
     Deliberately quieter than .mc-toggle: it is an exit, not an invitation. */
  .mc-close{
    display:none;align-items:center;justify-content:center;gap:9px;width:100%;
    margin:2px auto 22px;max-width:1120px;
    padding:13px 16px;                       /* >= 44px tall, thumb-sized */
    border-radius:14px;border:1px solid var(--line);
    background:var(--glass-1);color:var(--muted);
    font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.01em;
    text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
  }
  .mc-close.is-on{display:flex}
  .mc-close:active{background:rgba(255,255,255,.07);color:var(--ink)}
  .mc-close:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
  /* The chevron points up: this collapses the block above it. */
  .mc-close-chev{display:grid;place-items:center;transform:rotate(180deg)}
  .mc-close-chev svg{width:13px;height:13px;display:block}

  /* ── Sticky action bar ────────────────────────────────────────────────── */
  /* Sits above the iOS home indicator, and gets out of the way whenever the
     real send card is on screen so it can never cover the thing it points at. */
  .mc-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;align-items:center;gap:12px;
    padding:11px 14px calc(11px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,rgba(6,8,16,.72),rgba(6,8,16,.94));
    backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
    border-top:1px solid var(--line);
    transform:translateY(112%);opacity:0;pointer-events:none;
    transition:transform .34s var(--ease),opacity .34s var(--ease);
  }
  .mc-bar.is-up{transform:none;opacity:1;pointer-events:auto}

  .mc-bar-copy{flex:1 1 auto;min-width:0}
  .mc-bar-label{
    font-size:9px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--faint);
  }
  .mc-bar-sub{
    margin-top:3px;font-size:11.5px;line-height:1.35;color:var(--muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .mc-bar-sub b{color:var(--mint);font-weight:700}

  .mc-bar-cta{
    flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
    min-height:46px;padding:0 20px;border-radius:999px;border:0;
    background:var(--grad);color:#05060d;text-decoration:none;
    font:inherit;font-size:14px;font-weight:700;letter-spacing:-.01em;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    box-shadow:0 10px 30px rgba(34,211,238,.24);
    transition:transform .18s var(--ease),box-shadow .18s var(--ease);
  }
  .mc-bar-cta:active{transform:scale(.97);box-shadow:0 6px 18px rgba(34,211,238,.2)}
  .mc-bar-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .mc-bar-cta svg{width:15px;height:15px;display:block}

  /* The bar floats over the end of the document, so give the page somewhere to
     land or the footer CTA hides underneath it. */
  body.mc-has-bar{padding-bottom:84px}

  /* The privacy tip already pins itself to the bottom-left; lift it clear. */
  body.mc-has-bar .privacy-tip{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}

/* Someone who asked for less motion still gets the bar, just without the
   slide and the reveal. */
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .mc-bar{transition:none}
  .mc-section-open{animation:none}
  .mc-toggle-chev{transition:none}
}

/* ═══════════════ Touch polish — applies to BOTH pages ═══════════════
   This file is the last stylesheet on bridge.html and send.html, so these
   rules win over the phone rules in bridge-core.css at equal specificity. */
@media (max-width:780px){

  /* iOS zooms the whole page in when you focus a field smaller than 16px and
     never zooms back out, which is why pasting an address felt broken. Every
     field a thumb can reach is 16px on a phone. */
  .address-input,.dest-address,.percent-input,.search-input,
  .track-order-input input,#customSlippage,#adminGateInput{font-size:16px}
  .address-input{padding:15px 16px}

  /* The swap-direction button is centred and taller than its 16px divider, so
     at 390px it sat on top of the "estimated" pill that follows "They receive".
     Pushing the pill to the far end of the label leaves the middle clear. */
  .section-label{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .est-pill{margin-left:0}

  /* Touch has no hover, so a tap on a card that only styles :hover feels
     dead. Swap the lift for a press, and drop the grey flash the OS paints. */
  a,button,input,.tab,.nav-item,.token-btn,.token-list-item,.network-sidebar-item,
  .track-order-bubble,.modal-close,.swap-toggle,.route-item,.mc-toggle{
    -webkit-tap-highlight-color:transparent;
  }
  .token-btn:hover,.track-order-bubble:hover,.token-list-item:hover,
  .network-sidebar-item:hover,.proceed-btn:hover:not(:disabled),
  .cta-primary:hover,.send-back:hover,.route-item:hover{transform:none}
  .proceed-btn:active:not(:disabled),.cta-primary:active,
  .send-back:active,.retry-btn:active{transform:scale(.98)}
  .token-btn:active,.token-list-item:active,.network-sidebar-item:active,
  .tab:active,.nav-item:active,.track-order-bubble:active,
  .modal-close:active{background:rgba(255,255,255,.1)}

  /* Thumb-sized targets: 44px is the smallest thing a finger hits reliably. */
  .tab{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-item{min-height:42px}
  .track-order-bubble{min-height:46px}
  .modal-close{width:42px;height:42px}
  .token-list-item{min-height:58px}
  .destination-remove{width:38px;height:38px}
  .settings-btn{width:42px;height:42px}

  /* The token picker is a bottom sheet here. dvh keeps the browser's own
     toolbar from slicing the bottom off it, contained scrolling stops the
     page behind moving with your finger, and the list ends above the home
     indicator instead of under it. */
  .modal{height:92vh;height:92dvh;overscroll-behavior:contain}
  .token-list{
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));
  }
  .network-sidebar{overscroll-behavior-x:contain;scroll-snap-type:x proximity}
  .network-sidebar-item{scroll-snap-align:start}

  /* Anything pinned to the bottom of the screen has to clear the home
     indicator. send.html has no sticky bar, so it gets this on its own. */
  .privacy-tip,.floating-tracker,.notification-container{
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
  }
  .app{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}

  /* That allowance is for the floating overlays, which only exist on send.html.
     bridge.html has the sticky bar instead and already reserves 84px on <body>,
     so keeping both leaves ~160px of empty screen under the footer - a phone
     scroll that ends in nothing. One allowance is enough. */
  body.mc-has-bar .app{padding-bottom:0}

  /* The privacy tip goes full-width at the bottom on a phone, and at its
     desktop proportions that is ~200px of a ~660px screen - a third of the
     view, covering the routes panel, the moment the page opens. Same words,
     tighter box: the icon and title share one compact row, the paragraph sets
     at 12px, and "Got it" is a normal 44px control rather than a wide slab. */
  .privacy-tip{padding:13px 14px;border-radius:16px}
  .privacy-tip-header{gap:9px;margin-bottom:7px}
  .privacy-tip-icon{width:28px;height:28px;border-radius:9px}
  .privacy-tip-icon svg{width:15px;height:15px}
  .privacy-tip-title{font-size:13px}
  .privacy-tip-text{font-size:12px;line-height:1.45;margin-bottom:10px}
  .privacy-tip-btn{padding:12px;font-size:12.5px}
  .privacy-tip-btn:active{background:rgba(255,255,255,.12)}

  /* The sticky header is 130px of a ~660px screen, kept forever. Scroll down
     and it tucks away; scroll up even slightly and it is back. bridge-chrome.js
     adds the class, and only on a phone. */
  .header{transition:transform .28s var(--ease),opacity .28s var(--ease);will-change:transform}
  .header.header-tucked{transform:translateY(calc(-100% - 20px));opacity:0;pointer-events:none}
}

@media (max-width:780px) and (prefers-reduced-motion:reduce){
  .header{transition:none}
}