/* ============================================================
   28-appstore.css — The way to the iOS app (js/appstore.js).
   ============================================================ */

/* Desktop: Apple's badge in the top bar, before the deck notices. Apple's rules:
   the artwork unchanged, at least 40px high on screen, clear space around it. */
.appstore-badge{display:inline-flex; flex:0 0 auto; align-items:center; margin-right:6px; border-radius:8px; line-height:0;
  transition:opacity .15s ease, transform .15s ease;}
.appstore-badge[hidden]{display:none;}
.appstore-badge img{display:block; width:auto; height:40px;}
.appstore-badge:hover{opacity:.88;}
.appstore-badge:active{transform:scale(.98);}
.appstore-badge:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
@media(max-width:960px){
  .appstore-badge{display:none !important;}
}

/* iPhone and iPad (mobile layout): the bar that slides in from the top.
   Under the dialogs (.modal-back, 60), over the page. */
.ios-bar{position:fixed; z-index:58; left:0; right:0; top:0;
  padding:calc(8px + env(safe-area-inset-top)) 10px 8px; display:flex; align-items:center; gap:6px;
  background:rgba(14,20,32,.97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2); box-shadow:0 8px 24px rgba(0,0,0,.45);
  transform:translateY(-110%); transition:transform .42s cubic-bezier(.2,.8,.2,1);}
.ios-bar.in{transform:translateY(0);}
.ios-bar-x{flex:0 0 auto; width:30px; height:30px; border:0; border-radius:50%; background:transparent;
  color:var(--text-faint); font-size:14px; line-height:1; cursor:pointer;}
.ios-bar-link{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none;}
.ios-bar-icon{flex:0 0 auto; width:48px; height:48px; border-radius:11px; border:1px solid var(--line-2);}
.ios-bar-text{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; line-height:1.25;}
.ios-bar-text strong{color:var(--text); font-size:15px; font-weight:600;}
.ios-bar-text span{color:var(--text-dim); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ios-bar-get{flex:0 0 auto; padding:7px 18px; border-radius:999px; background:var(--accent); color:var(--on-accent);
  font-size:14px; font-weight:700; letter-spacing:.02em;}
/* the scanner fills the screen: the bar does not cover it */
body.scan-full .ios-bar{display:none;}
@media (prefers-reduced-motion:reduce){ .ios-bar{transition:none;} }