/* Circl native feel, part 2 (see native2.js). Phones and computers both. */

/* no rubber-band of the whole page, no double-tap zoom delay, no text selection on UI chrome */
html,body{overscroll-behavior-y:none}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
header.top,nav.tabs,.md-tabs,.pr-opts,.lp-nav,.page-head,.sec-title,.tb-steps,.chipset,.seg{-webkit-user-select:none;user-select:none}
img{-webkit-user-drag:none;user-select:none}
a,button{-webkit-touch-callout:none}

/* press feedback on everything you can tap */
button,.btn,.card[data-tab],.md-card,.md-app,.chip,a.card,[role="button"]{transition:transform .14s cubic-bezier(.2,.9,.25,1),opacity .14s}
button:active:not(:disabled),.btn:active:not(:disabled),.md-card:active,.md-app:active,.chip:active,a.card:active,[role="button"]:active{transform:scale(.97);opacity:.88}
nav.tabs button:active{transform:scale(.92)}
.cm-bub:active,.bub:active{transform:none;opacity:1}

/* skeleton placeholders */
.skel{display:flex;flex-direction:column;gap:14px;padding:18px 4px}
.skel-row{display:flex;align-items:center;gap:12px}
.skel-row span{flex:1;display:flex;flex-direction:column;gap:8px}
.skel i{display:block;border-radius:8px;background:linear-gradient(90deg,var(--panel) 0%,color-mix(in srgb,var(--panel) 55%,var(--bg)) 50%,var(--panel) 100%);background-size:200% 100%;animation:skel 1.2s ease-in-out infinite}
.skel-av{width:40px;height:40px;border-radius:50%!important;flex:none}
.skel-row span i{height:11px;width:70%}.skel-row span i+i{width:45%}
@keyframes skel{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* pull to refresh */
.ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 6px);z-index:60;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--muted);box-shadow:0 6px 18px -6px rgba(0,0,0,.3);opacity:0;transform:translate(-50%,0);pointer-events:none;transition:opacity .2s}
.ptr svg{width:20px;height:20px}
.ptr.ready{color:var(--accent)}
.ptr.spin{transition:transform .25s cubic-bezier(.2,.9,.25,1),opacity .2s}
.ptr.spin svg{animation:ptrSpin .7s linear infinite;color:var(--accent)}
@keyframes ptrSpin{to{transform:rotate(360deg)}}

/* inputs never trigger iPhone zoom (16px minimum) */
@media (pointer:coarse){input,textarea,select{font-size:max(16px,1em)}}

@media (prefers-reduced-motion:reduce){.skel i{animation:none}button:active,.btn:active{transform:none}}