/* ===========================================================================
   Phones.

   Everything that makes the application work under one thumb lives here,
   loaded after theme.css so it has the last word. Nothing on this sheet
   changes what a screen does — only its size, its reach and how it moves.

   Three rules run through it:

     - 44 x 44 is the smallest thing a finger is asked to hit (Apple's and
       WCAG's number). Links that must stay visually small keep their look and
       grow an invisible hit area instead.
     - 16px is the smallest text in a field. iOS zooms the whole page into any
       input set smaller, and never zooms back out.
     - The phone's own furniture — the notch, the home bar, the keyboard —
       is respected through env(safe-area-inset-*) and by getting out of the
       way while someone types.

   The landing page keeps its own design; only the rules that name it touch it.
   =========================================================================== */

/* ------------------------------------------------------- every width -- */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,summary,label,[role="button"]{touch-action:manipulation}
body{-webkit-tap-highlight-color:transparent}

/* A big balance is a long number. It wraps rather than running off the card. */
.amount-hero{overflow-wrap:anywhere}

/* Fields scrolled into view by the keyboard clear the sticky bar above and
   the tab bar below, instead of landing underneath one of them. */
input,textarea,select{scroll-margin-top:140px;scroll-margin-bottom:120px}

/* ---------------------------------------------------------- tab bar -- */

/* Receive has a tab on a desktop; on a phone it lives in the menu and on the
   home screen, so the bar holds five things a thumb can actually hit. */
@media (max-width:900px){
  .tabbar .tab--wide{display:none}

  :where(body:not([data-route="landing"])) .tabbar{
    background:rgba(231,227,210,.94);
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  :where(body:not([data-route="landing"])) .tabbar a{
    min-height:58px;
    gap:5px;
    font-size:10.5px;
    letter-spacing:.08em;
  }
  .tabbar svg{width:22px;height:22px}
  .tabbar a:active{background:rgba(12,46,34,.06)}

  /* Clear the tab bar and the home indicator under it. */
  .main{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}
  .toast-host{bottom:calc(4.75rem + env(safe-area-inset-bottom))}

  /* While a field has the keyboard up, the tab bar steps aside. On Android
     the window shrinks to sit above the keyboard and a fixed bar would ride
     up with it and cover the very field being typed in. ui/keyboard.js sets
     the class. */
  body.kb-open .tabbar{display:none}
  body.kb-open .main{padding-bottom:2rem}
  body.kb-open .toast-host{bottom:1rem}
}

@media (min-width:901px){ .tabbar .tab--narrow{display:none} }

/* The window's own insets, installed or not: a phone held sideways puts the
   notch at one side, and a page drawn edge to edge (viewport-fit=cover)
   has to keep its content off it. */
.main,.appbar{
  padding-left:max(var(--pad-x,16px),env(safe-area-inset-left),16px);
  padding-right:max(var(--pad-x,16px),env(safe-area-inset-right),16px);
}
.topbar{padding-top:env(safe-area-inset-top)}

/* ------------------------------------------------------ tap targets -- */

@media (max-width:900px),(pointer:coarse){
  .btn,.btn-sm{min-height:44px}
  .icon-btn{width:44px;height:44px}
  .segmented button{min-height:44px}
  .chip{min-height:44px}
  .appbar .logo{min-height:44px}
  .policy-btn{min-height:44px}
  .me-chip{min-height:44px;min-width:44px;justify-content:center}
  .auth-scroll-cue,.k-about__more{min-height:44px;display:inline-flex;align-items:center}
  /* The landing wordmark: same look, a taller box to hit. */
  .nav .logo{min-height:44px;display:inline-flex;align-items:center}
  summary{min-height:44px;box-sizing:border-box;padding-block:11px}

  /* Section links stay small type; the finger gets a taller box around them. */
  .section-link{position:relative;display:inline-flex;align-items:center}
  .section-link::before{content:"";position:absolute;inset:-16px -10px}

  /* Checkboxes are drawn bigger, and the label beside them is the target. */
  .add-people__switch{width:24px;height:24px}
  input[type="checkbox"]{min-width:22px;min-height:22px}
}

/* ------------------------------------------------------------ fields -- */

@media (max-width:900px),(pointer:coarse){
  /* 16px or iOS zooms in on focus. The mono address field was 12.8px. */
  .input:not(.amount-input),.textarea,.select,
  :where(body:not([data-route="landing"])) .input.mono{font-size:16px}
}

/* ------------------------------------------------------------ layout -- */

@media (max-width:640px){
  /* Page title with a button beside it ("Our policy", "Groups", "New"):
     the button drops under the title rather than squeezing it to a column. */
  .row-between:has(> .stack > .page-title){flex-wrap:wrap;align-items:flex-start}
  .row-between:has(> .stack > .page-title) > .stack{flex:1 1 100%}

  /* A wallet's name and its tags share a line only while they fit. */
  .list-item .stack > .row{flex-wrap:wrap;row-gap:6px}

  /* Quick actions: two to a row and half the height, so the requests and
     activity under them are one flick away rather than five. */
  .k-glyphs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}
  :where(body:not([data-route="landing"])) .k-glyph{min-height:132px;padding:14px 14px 12px}
  .k-glyph__mark{font-size:2.6rem}
  .k-glyph__name{padding-top:14px;font-size:1.05rem}
  .k-glyph__sub{font-size:12px;line-height:1.35}
  .k-glyphs > .k-glyph:last-child:nth-child(odd){grid-column:1 / -1;min-height:96px}

  :where(body:not([data-route="landing"])) .amount-hero{font-size:clamp(2.2rem,11vw,3rem)}

  /* Signed out, the bar holds the wordmark and two buttons. The strapline
     under the wordmark is what pushed "Create account" off the edge. */
  .appbar:has(> .btn) .logo::after{display:none}
  .appbar:has(> .btn){gap:.5rem}
  .appbar > .btn{padding-left:.8rem;padding-right:.8rem;white-space:nowrap}

  /* Wallet buttons during onboarding and on the wallets page: an even grid. */
  #connect-panel,.connect-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #connect-panel > .btn,.connect-grid > .btn{width:100%;justify-content:center}

  .inline-actions > .btn{flex:1 1 auto}

  /* Pay, box and profile links: the card sat inside .main's padding and its
     own, which left it two thirds of a phone wide. */
  .main .public-main{padding:.25rem 0 1rem}
  .public-card{padding:1.35rem 1.1rem}
}

/* Translucent panels blur whatever is behind them. On paper-on-paper that
   blur is invisible, and on a phone it is the most expensive thing on the
   screen to scroll — every card re-blurs every frame. */
@media (max-width:900px){
  .card,.list,.public-card{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ---------------------------------------------------- bottom sheets -- */
/* Every pop-up comes from ui/components.js modal(). On a phone it rises from
   the bottom edge, where the thumb already is, and its buttons span it. */

@media (max-width:640px){
  dialog.modal{
    width:100%;
    max-width:100%;
    margin:auto 0 0;
    max-height:calc(100dvh - 2.5rem - env(safe-area-inset-top));
    border-radius:0;
    border-left:0;border-right:0;border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom);
    overscroll-behavior:contain;
    animation:sheet-up .38s cubic-bezier(.2,.8,.2,1) both;
  }
  dialog.modal::before{
    content:"";
    display:block;
    width:40px;height:4px;
    margin:10px auto 0;
    border-radius:2px;
    background:var(--line);
  }
  .modal-head{
    position:sticky;top:0;z-index:1;
    background:var(--paper);
    padding-top:.6rem;
  }
  .modal-foot{flex-direction:column-reverse;align-items:stretch}
  .modal-foot > .btn{width:100%;justify-content:center}
}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){ dialog.modal{animation:none} }

/* ------------------------------------------------- install + offline -- */

.install-hint{
  position:fixed;
  left:max(12px,env(safe-area-inset-left));
  right:max(12px,env(safe-area-inset-right));
  bottom:calc(70px + env(safe-area-inset-bottom));
  z-index:60;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:start;
  padding:14px 12px 14px 14px;
  background:var(--forest,#17291F);
  color:var(--cream,#E8E3D0);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.6);
  animation:sheet-up .45s cubic-bezier(.2,.8,.2,1) both;
  font-size:14px;
  line-height:1.45;
}
@media (min-width:901px){ .install-hint{left:auto;right:24px;bottom:24px;width:360px} }
.install-hint img{width:44px;height:44px;display:block}
.install-hint strong{display:block;font-weight:500;font-size:15px;margin-bottom:2px}
.install-hint ol{margin:6px 0 0;padding-left:18px}
.install-hint li{margin:2px 0}
.install-hint .share-glyph{display:inline-block;width:14px;height:14px;vertical-align:-2px}
.install-hint__close{
  width:44px;height:44px;margin:-10px -6px 0 0;
  display:grid;place-items:center;
  background:none;border:0;color:inherit;font-size:22px;line-height:1;cursor:pointer;
}
.install-hint__go{
  margin-top:10px;
  min-height:44px;padding:0 16px;
  background:var(--cream,#E8E3D0);color:var(--ink,#0C2E22);border:0;
  font:inherit;font-weight:500;cursor:pointer;
}
body.kb-open .install-hint{display:none}

.offline-bar{
  position:sticky;top:0;z-index:70;
  padding:calc(8px + env(safe-area-inset-top)) 16px 8px;
  background:var(--forest,#17291F);
  color:var(--cream,#E8E3D0);
  font:400 13px/1.4 var(--ui,system-ui);
  text-align:center;
}
.offline-bar[hidden]{display:none}

/* ------------------------------------------------------------- danger -- */
/* theme.css paints every .btn forest and, loading later, beat app.css's
   outlined .btn-danger — so "Remove" looked exactly like "Save" beside it.
   A destructive button has to look different from the one next to it. */
:where(body:not([data-route="landing"])) .btn.btn-danger{
  background:transparent;
  color:var(--danger);
  border:1px solid rgba(143,58,43,.45);
}
:where(body:not([data-route="landing"])) .btn.btn-danger:hover{background:rgba(143,58,43,.07)}

/* ------------------------------------------------------------ scanner -- */
/* ui/scan.js. Square camera frame with four corner marks, the paste box
   under it. */

.send-scan{margin:10px 0 24px}
.send-scan .btn,.add-people__scan .btn{gap:8px}
.add-people__scan{margin-top:8px}

.scan{display:grid;gap:12px}
.scan__frame{
  position:relative;
  width:100%;
  max-width:420px;
  margin:0 auto;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--forest,#17291F);
}
.scan__video{width:100%;height:100%;object-fit:cover;display:block}
.scan__corners{
  position:absolute;inset:14%;
  pointer-events:none;
  --c:var(--cream,#E8E3D0);
  background:
    linear-gradient(var(--c),var(--c)) top left/28px 3px,
    linear-gradient(var(--c),var(--c)) top left/3px 28px,
    linear-gradient(var(--c),var(--c)) top right/28px 3px,
    linear-gradient(var(--c),var(--c)) top right/3px 28px,
    linear-gradient(var(--c),var(--c)) bottom left/28px 3px,
    linear-gradient(var(--c),var(--c)) bottom left/3px 28px,
    linear-gradient(var(--c),var(--c)) bottom right/28px 3px,
    linear-gradient(var(--c),var(--c)) bottom right/3px 28px;
  background-repeat:no-repeat;
}
.scan__status{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2,#41594B);text-align:center}
.scan__paste{display:flex;gap:8px}
.scan__paste .input{flex:1;min-width:0}
.scan__paste .btn{flex:none}