/* m-refresh.css — ⟳ button in the top bar (phone + desktop), two-option menu, pull-to-refresh, hard-refresh overlay. Loaded LAST. */
html,body{overscroll-behavior-y:contain} /* our pull-to-refresh replaces the browser's, so the page never double-refreshes */

/* phone: the ⟳ button comes back into the header (it was hidden there) — search · alerts · refresh · account */
@media(max-width:899px){
  html body header.top .bh-sync{display:inline-grid;order:3;place-items:center;position:relative;flex:none;width:34px;min-width:34px;height:34px;padding:0;border-radius:50%;background:var(--c-n50);border:1px solid rgba(var(--c-starlight-rgb),.14);color:var(--c-starlight);cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
  html body header.top .bh-sync::before{width:17px;height:17px}
  html body header.top .notif-bell{order:2}
  html body header.top .bh-user{order:4}
}
@media(max-width:380px){html body header.top .bh-sync{width:32px;min-width:32px;height:32px}}
html body header.top .bh-sync{-webkit-touch-callout:none}

/* spinning icon while a refresh is running */
@keyframes rf-spin{to{transform:rotate(360deg)}}
html[data-refreshing] header.top .bh-sync::before{animation:rf-spin .8s linear infinite;transition:none}
html[data-refreshing] header.top .bh-sync{pointer-events:none}

/* hard-refresh entry in the account sheet */
.mo-act [data-act=hard-refresh]::before{content:"";width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;
  --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v5M14 11v5'/%3E%3C/svg%3E")}

/* two-option menu */
.rf-menu{position:fixed;z-index:400;width:min(300px,calc(100vw - 16px));padding:6px;border-radius:14px;background:var(--c-white,#fff);border:1px solid rgba(var(--c-starlight-rgb),.12);box-shadow:0 12px 32px rgba(var(--c-starlight-rgb),.18),0 2px 6px rgba(var(--c-starlight-rgb),.08);animation:rf-pop .14s ease-out}
@keyframes rf-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.rf-menu button{display:block;width:100%;text-align:start;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--c-starlight);cursor:pointer;font:inherit}
.rf-menu button+button{margin-top:2px}
.rf-menu button:hover,.rf-menu button:focus-visible{background:var(--c-sand-wash,#f6f1e7);outline:none}
.rf-menu b{display:block;font:700 14px/1.25 var(--font-body)}
.rf-menu small{display:block;margin-top:2px;font:400 12px/1.35 var(--font-body);color:var(--c-n600)}
.rf-menu button[data-rf=hard] b{color:var(--c-warning-dark,var(--c-starlight))}

/* pull-to-refresh indicator */
.rf-pull{position:fixed;z-index:60;left:50%;top:calc(var(--shell-h,56px) + env(safe-area-inset-top) - 36px);width:38px;height:38px;margin-left:-19px;display:grid;place-items:center;border-radius:50%;background:var(--c-white,#fff);border:1px solid rgba(var(--c-starlight-rgb),.14);box-shadow:0 4px 14px rgba(var(--c-starlight-rgb),.16);opacity:0;pointer-events:none;transform:translateY(var(--y,0));transition:opacity .15s,transform .2s}
.rf-pull.on{opacity:calc(.25 + var(--p,0)*.75);transition:none}
.rf-pull.go{opacity:1;transition:transform .2s}
.rf-pull-ic{width:18px;height:18px;background:var(--c-starlight);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transform:rotate(calc(var(--p,0)*270deg));
  --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-15.5 6.2L3 16M3 12a9 9 0 0 1 15.5-6.2L21 8M21 3v5h-5M3 21v-5h5'/%3E%3C/svg%3E")}
.rf-pull.ready .rf-pull-ic{background:var(--c-sand-dark,var(--c-starlight))}
.rf-pull.go .rf-pull-ic{animation:rf-spin .8s linear infinite;transform:none}

/* hard-refresh overlay (blocks taps while the app resets) */
.rf-ov{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(var(--c-starlight-rgb),.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.rf-ov-box{display:grid;justify-items:center;gap:8px;min-width:230px;max-width:calc(100vw - 48px);padding:22px 26px;border-radius:18px;background:var(--c-white,#fff);color:var(--c-starlight);text-align:center;box-shadow:0 18px 48px rgba(0,0,0,.28)}
.rf-ov-box b{font:700 16px/1.2 var(--font-head,var(--font-body))}
.rf-ov-box span{font:400 13px/1.4 var(--font-body);color:var(--c-n600)}
.rf-spin{width:30px;height:30px;border-radius:50%;border:3px solid rgba(var(--c-starlight-rgb),.15);border-top-color:var(--c-sand-dark,var(--c-starlight));animation:rf-spin .8s linear infinite}
@media(prefers-reduced-motion:reduce){.rf-menu{animation:none}.rf-spin,.rf-pull.go .rf-pull-ic,html[data-refreshing] header.top .bh-sync::before{animation-duration:2s}}