/* Phones and wallet in-app browsers (TronLink, Trust Wallet, MetaMask, Phantom, Coinbase Wallet).
   Loaded after the page stylesheets, so it only has to say what changes on a small or touch screen. Desktop is untouched: everything is inside a media query,
   except the few rules that make older browsers behave. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Older in-app browsers (iOS before 15.4, some Android WebViews) don't know <dialog> and would show every dialog's contents inline. */
dialog:not([open]){display:none}
dialog.dialog-fallback[open]{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;margin:0 auto;z-index:1001;max-height:92vh;overflow:auto;background:#fff;color:inherit}
.dialog-fallback-backdrop{position:fixed;inset:0;background:rgba(11,13,18,.5);z-index:1000}
html.dialog-open{overflow:hidden}

/* shown instead of a PDF frame on phones */
.pdf-mobile-link{display:none}

/* "Open this page in your wallet app" */
.wallet-help{margin:12px 0;padding:14px 16px;border:1px solid #c7d2fe;background:#eef2ff;border-radius:14px;color:#312e81}
.wallet-help p{margin:6px 0 10px}
.wallet-help-links{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.wallet-help-links .btn{padding:10px 14px;font-size:.9rem}
.wallet-help-copy{background:none;border:0;padding:6px 0;font:inherit;font-weight:600;color:#4338ca;text-decoration:underline;cursor:pointer}

/* The notch and the home bar on phones */
@supports (padding:max(0px)){
  .nav{padding-top:env(safe-area-inset-top)}
  .wrap{padding-left:max(var(--gutter,24px),env(safe-area-inset-left));padding-right:max(var(--gutter,24px),env(safe-area-inset-right))}
  body{padding-bottom:env(safe-area-inset-bottom)}
}

/* Touch screens: big enough to hit with a thumb */
@media (pointer:coarse){
  .btn,.mini-btn,.wallet-btn,.pp-wallet,.tabs a,.tabs .tab-disabled,.link-btn,.row-link,button.copy-btn,.copy-btn,select,input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],input:not([type]){min-height:44px}
  .copy-btn{min-width:44px;display:inline-grid;place-items:center}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  .pd-ack,.ben-addr,.payee-form label{gap:12px}
}

@media (max-width:720px){
  /* iOS zooms into any field under 16px when you tap it, and never zooms back out */
  input,select,textarea{font-size:16px!important}
  .mono,.payee-addr,.ben-address,.addr-cell,td.break,dd,p{overflow-wrap:anywhere}

  /* Grids that were sized by their contents, so a long word pushed the whole page sideways */
  .dgrid,.pp-main,.wgrid,.review-layout{grid-template-columns:minmax(0,1fr)!important}
  .dc-head{flex-wrap:wrap}
  .form-actions,.detail-actions,.export-actions,.toolbar-actions,.data-toolbar{flex-wrap:wrap}
  .form-actions form.inline,.detail-actions form.inline{display:block;width:100%}
  .form-actions .btn,.detail-actions .btn{width:100%;justify-content:center}

  /* A PDF in a frame is unreadable on a phone (some wallet browsers show a blank box): the pages offer a button instead */
  .pdf-pane,.pp-doc iframe,#pdf-frame{display:none!important}
  .pdf-mobile-link{display:flex!important}

  /* Tables become one card per row. Each cell carries its own heading (data-label), because the header row is hidden. */
  .table-scroll{overflow:visible}
  table.stack{min-width:0!important;width:100%;display:block;border:0}
  table.stack thead{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  table.stack tbody{display:grid;gap:12px;padding:0 0 4px}
  table.stack tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
  table.stack td{overflow-wrap:anywhere;display:block;padding:0!important;border:0!important;min-width:0;white-space:normal!important;text-align:left!important;background:none!important}
  table.stack td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font:600 .66rem/1.2 'Inter',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
    table.stack td:not([data-label]),table.stack td[data-label=""],table.stack td.wide,table.stack td.cell-vendor,table.stack td.cell-pay{grid-column:1/-1}
  table.stack td.cell-vendor{order:-2;font-size:1.02rem}
  table.stack td.cell-vendor .row-title{font-size:1.05rem}
  table.stack td.cell-pay{order:99;padding-top:4px!important}
  table.stack td.cell-pay .pay-actions{display:flex;flex-wrap:wrap;gap:8px}
  table.stack td.cell-pay .mini-btn,table.stack td.cell-pay .btn{flex:1 1 140px;min-height:48px;font-size:1rem;justify-content:center;text-align:center}
  table.stack tbody tr:hover td{background:none!important}
  table.stack .num{text-align:left!important}

  /* The pay dialogs become a sheet from the bottom of the screen */
  .pay-dialog{width:100%!important;max-width:100%!important;margin:auto 0 0!important;border-radius:20px 20px 0 0!important;max-height:94vh}
  .pay-dialog form{padding:20px 18px calc(22px + env(safe-area-inset-bottom,0px))}
  .pd-actions{flex-direction:column-reverse;gap:10px}
  .pd-actions .btn{width:100%;justify-content:center;min-height:48px}
  .pd-x{width:44px;height:44px}
}

@media (max-width:400px){
  .wrap{padding-left:16px;padding-right:16px}
  h1{font-size:1.9rem}
  .stat-strip{grid-template-columns:1fr 1fr!important}
  .stat-strip .stat-wide{grid-column:1/-1!important}
}

/* The wallet check page */
.wc-card{padding:22px;margin:18px 0}
.wc-card h2{margin:0 0 10px;font-size:1.1rem}
.wc-list{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:8px 16px;margin:0}
.wc-list dt{font-weight:600;color:var(--muted);font-size:.88rem}
.wc-list dd{margin:0;overflow-wrap:anywhere;font-size:.92rem}
.wc-bad{color:#b91c1c;font-weight:600}
.wc-tests{display:grid;gap:14px}
.wc-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0}
@media (max-width:600px){.wc-list{grid-template-columns:1fr;gap:2px}.wc-list dt{margin-top:8px}}

@media (max-width:720px){
  .pp-main>*,.pp-side,.pp-side>*{min-width:0}
  .pp-data dd,.pp-data .mono,.pp-pay *{overflow-wrap:anywhere}
  .pp-pay .btn,.pp-btn{width:100%}
  table.stack td.cell-pay .pay-actions{display:flex;width:100%}
}

/* Small phones (320 to 400px wide) */
@media (max-width:400px){
  .nav-inner{gap:8px}
  .nav-cta{display:flex;gap:6px}
  .nav-cta .btn{padding:9px 12px;font-size:.88rem}
  .ph-row,.ph-receipt{flex-wrap:wrap}
  .doc-lines{width:100%}
  .doc-lines th,.doc-lines td{padding:8px 4px!important;font-size:.78rem;overflow-wrap:anywhere}
  .pay-dialog form{padding-left:14px;padding-right:14px}
}

/* Shown on every page of a deployment that runs on the test network */
.net-banner{position:sticky;top:0;z-index:900;padding:8px 16px;background:#fde68a;color:#78350f;border-bottom:1px solid #f59e0b;text-align:center;font:500 .85rem/1.35 'Inter',sans-serif}
.net-banner strong{letter-spacing:.06em;margin-right:8px}

/* Phones and small tablets: the top links are hidden, so the app's pages live in a bar along the bottom of the screen, where a thumb reaches. */
.tabbar{display:none}
@media (max-width:960px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(255,255,255,.96);
    backdrop-filter:saturate(180%) blur(14px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 24px -16px rgba(11,13,18,.25)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:4px 2px;border-radius:12px;color:var(--muted);
    font:600 .66rem/1.1 'Inter',sans-serif;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .tabbar a[aria-current=page]{color:var(--ink);background:var(--bg-alt,#f4f5f7)}
  .tabbar a[aria-current=page] svg{stroke-width:2.2}
  .tabbar span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* leave room so the bar never covers the end of a page */
  .app-page{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:340px){.tabbar a{font-size:.6rem}.tabbar svg{width:20px;height:20px}}