/* Phone and home-screen app polish on top of the wallet's own styles. */
/* Fill the whole screen. In the home-screen app the page is sized with the large-viewport unit, because some iPhones report a
   shorter window than the screen (leaving a band under the bottom menu). If the app still stops short, pwa.js measures it. */
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); overscroll-behavior: none; -webkit-tap-highlight-color: transparent; touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; }
body.panel { width: 100%; height: 100%; background: transparent; }
body.panel #app { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; }
@media (display-mode: standalone) { @supports (height: 100lvh) { body.panel #app { bottom: auto; height: 100lvh; } } }
html.fit-screen body.panel #app { bottom: auto; height: var(--screen-h); }
/* Some iPhones (iOS 26.0 in particular) leave a band under the page. Paint the page edge so that band matches the bottom menu
   when there is one, and the screen colour when there is not. */
html { background-color: var(--surface); background-image: linear-gradient(to bottom, var(--bg) calc(100% - 110px), transparent calc(100% - 110px)); background-repeat: no-repeat; }
html[data-bar="none"] { background-color: var(--bg); background-image: none; }
/* Home-screen app: the clock and battery sit on a dark strip so they stay readable in the light theme too */
@media (display-mode: standalone) {
  body::before { content: ""; position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: #0b3b36; pointer-events: none; }
  :root[data-theme=dark] body::before, :root[data-theme=dim] body::before { background: var(--bg); }
}
@media (display-mode: standalone) and (prefers-color-scheme: dark) { :root:not([data-theme]) body::before { background: var(--bg); } }
/* Keep clear of the notch, the status bar and the home bar when it runs full screen */
.hdr { padding-top: calc(12px + env(safe-area-inset-top)); padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
/* only screens without the bottom menu need their own clearance (the menu already covers the home bar) */
.scroll:last-child { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.tabbar { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.sheet { padding-bottom: calc(16px + env(safe-area-inset-bottom)); max-height: 88vh; max-height: 88dvh; }
#toast { margin-bottom: env(safe-area-inset-bottom); }
/* 16px stops iPhones from zooming in when a field is focused */
.input, textarea.input, select.input, select.slim { font-size: 16px; }
button, .btn, .opt, .acct-row, .tabbar button { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.iconbtn { width: 40px; height: 40px; }

/* Install prompt and unsupported-browser notice */
.pwa-install { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; max-width: 516px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #0e5a50, #0a3b36); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: pwa-up 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pwa-install img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.pwa-install .tx { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.pwa-install .tx b { display: block; font-size: 14.5px; margin-bottom: 1px; }
.pwa-install .tx svg { vertical-align: -3px; }
.pwa-install button { border: 0; border-radius: 10px; padding: 9px 14px; font-weight: 700; background: #25c9ae; color: #042320; }
.pwa-install .x { background: none; color: #a9d6ce; padding: 6px 8px; font-size: 20px; line-height: 1; }
.pwa-block { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: 28px; text-align: center; background: var(--bg); color: var(--text); }
.pwa-block div { max-width: 340px; }
.pwa-block h1 { margin: 12px 0 8px; font-size: 20px; }
.pwa-block p { margin: 0; color: var(--muted); line-height: 1.5; }
.pwa-debug { position: fixed; z-index: 100; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.88); color: #d5efe9; font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
@keyframes pwa-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pwa-install { animation: none; } }
.pwa-block img { border-radius: 16px; }

/* Tap the total to hide it (like other wallets). The little eye shows what a tap will do. */
.bal-cap, .bal { cursor: pointer; -webkit-user-select: none; user-select: none; }
.bal-cap::after { content: ""; display: inline-block; width: 17px; height: 17px; margin-left: 7px; vertical-align: -3px; background: currentColor; opacity: 0.8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-hide-total] .bal-cap::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.9 17.9A10.1 10.1 0 0 1 12 19C5.6 19 2 12 2 12a18 18 0 0 1 5.1-5.9M9.9 4.2A9.7 9.7 0 0 1 12 4c6.4 0 10 7 10 7a18 18 0 0 1-2.2 3.2M1 1l22 22'/%3E%3Cpath d='M14.1 14.1a3 3 0 1 1-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.9 17.9A10.1 10.1 0 0 1 12 19C5.6 19 2 12 2 12a18 18 0 0 1 5.1-5.9M9.9 4.2A9.7 9.7 0 0 1 12 4c6.4 0 10 7 10 7a18 18 0 0 1-2.2 3.2M1 1l22 22'/%3E%3Cpath d='M14.1 14.1a3 3 0 1 1-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-hide-total] .bal-amt { font-size: 0; }
html[data-hide-total] .bal-amt::after { content: "\2022\2022\2022\2022\2022\2022"; font-size: 34px; line-height: 1.1; letter-spacing: 0.12em; }
/* Hiding the total also hides each token's amount and value in the list. */
html[data-hide-total] button.row[data-act="open-token"] .mid .sub { font-size: 0; }
html[data-hide-total] button.row[data-act="open-token"] .mid .sub::after { content: "\2022\2022\2022\2022\2022\2022"; font-size: 14px; letter-spacing: 0.12em; }
html[data-hide-total] button.row[data-act="open-token"] .amt { font-size: 0; }
html[data-hide-total] button.row[data-act="open-token"] .amt::before { content: "\2022\2022\2022\2022\2022\2022"; display: block; font-size: 16px; line-height: 1.3; letter-spacing: 0.12em; }