/* THE WALLET PICKER, a modal (the owner, Sun 18 Oct, on /mint's Connect wallet: "this should open a nice modal in the center of
   screen", then "larger, more space, background is blurred"). One picker for Connect wallet (/mint) and Link a wallet (/stake),
   assets/wallet-pick.js builds it. The page behind is blurred and dimmed under a veil (a darker veil where blur is not there),
   the panel is the kit's steel case round smoked glass (.board), big wallet rows on the kit's steel keys, the site's clean X.
   On a phone (under 720 px) it is a sheet along the bottom, the screen's width. The panel's corner lands on a whole device px
   (the script places it), so its frame stays crisp; nothing on the page moves while it is open. */
.wpveil{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.58);-webkit-backdrop-filter:blur(10px) saturate(.8);backdrop-filter:blur(10px) saturate(.8);touch-action:none}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.wpveil{background:rgba(10,10,10,.86)}}
.wpveil[hidden],.wpmodal[hidden]{display:none}
.wpmodal.board{position:fixed;z-index:101;left:0;top:0;box-sizing:border-box;width:min(576px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  display:flex;flex-direction:column;padding:calc(var(--px)*14) calc(var(--px)*14) calc(var(--px)*11);overflow:hidden;overscroll-behavior:contain;color:var(--fg)}
.wpmodal .wphead{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--px)*6);flex:none}
.wpmodal h2{margin:0;font-family:var(--display);font-weight:400;font-size:var(--t1);line-height:calc(var(--px)*8);letter-spacing:0;text-transform:uppercase;color:var(--fg);text-shadow:0 var(--px) 0 #0a0a0a,var(--glow-w)}
.wpmodal h2 b{font-weight:400;color:var(--amb);text-shadow:0 var(--px) 0 #0a0a0a,var(--glow-a)}
.wpmodal .wpnote{flex:none;margin:calc(var(--px)*4) 0 0;font-family:var(--mono);font-size:calc(var(--px)*6);line-height:calc(var(--px)*9);color:var(--mu)}
.wpmodal .xclose{margin:-12px -12px -12px 0}
.wplist{display:flex;flex-direction:column;gap:calc(var(--px)*6);margin:calc(var(--px)*8) calc(var(--px)*-2) 0;padding:calc(var(--px)*4);overflow:auto;overscroll-behavior:contain;min-height:0}
/* a wallet: its own icon in a dark well, its name, an arrow; a whole row on the kit's steel key, no rivets */
.wplist .pbtn.wprow{width:100%;min-height:76px;justify-content:flex-start;gap:calc(var(--px)*7);padding:calc(var(--px)*3) calc(var(--px)*8) calc(var(--px)*4) calc(var(--px)*4);text-align:left}
.wprow .wpico{flex:none;display:grid;place-items:center;width:52px;height:52px;background:#0a0a0a;box-shadow:inset 0 0 0 1px #363a43;color:#8b8b8b}
.wprow .wpico img{display:block;width:40px;height:40px;object-fit:contain;image-rendering:auto}
.wprow .wpico svg{display:block;width:28px;height:28px}
.wprow .wpname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wprow .wpgo{flex:none;width:calc(var(--px)*4);height:calc(var(--px)*6);background:currentColor;-webkit-mask:var(--vg-right) center / 100% 100% no-repeat;mask:var(--vg-right) center / 100% 100% no-repeat;opacity:.7}
/* the keyboard ring sits inside the list's padding, so the scroll box never clips it */
.wplist .pbtn.wprow:focus-visible{outline:var(--px) solid var(--amb);outline-offset:var(--px)}
.wprow:hover .wpgo,.wprow:focus-visible .wpgo{opacity:1}
.wprow:hover .wpico,.wprow:focus-visible .wpico{color:var(--amb)}
/* a short screen (a phone on its side): the same panel, shorter rows */
@media (max-height:560px){
  .wpmodal.board{padding:calc(var(--px)*8) calc(var(--px)*10) calc(var(--px)*9)}
  .wplist{gap:calc(var(--px)*4);margin-top:calc(var(--px)*4)}
  .wplist .pbtn.wprow{min-height:56px}
  .wprow .wpico{width:40px;height:40px}
  .wprow .wpico img{width:32px;height:32px}
  .wpmodal .wpnote{display:none}
}
/* a phone: a sheet along the bottom, the screen's width, rows 48 px and taller */
@media (max-width:719.98px){
  .wpmodal.board{left:0;right:0;top:auto;bottom:0;width:100%;max-height:calc(100% - 48px);
    padding:calc(var(--px)*10) 16px calc(var(--px)*12 + env(safe-area-inset-bottom,0px))}
  .wplist{gap:calc(var(--px)*5);margin-top:calc(var(--px)*6)}
  .wplist .pbtn.wprow{min-height:64px;gap:calc(var(--px)*6)}
  .wprow .wpico{width:44px;height:44px}
  .wprow .wpico img{width:34px;height:34px}
}