/* The download pill: a floating pill at the foot of a product page's home, with
   the app's icon, "Download <App>" and the site's own button. It comes up once
   the hero has scrolled away and goes again while the hero, the page's own
   download blade or the footer is in view, so two download buttons never show
   at once (download-pill.js). A page writes it once, before <mk-footer>:

     <aside class="mk-pill" aria-label="Download PocaPal" data-hero=".hero" data-hide="#get, .mk-footer" hidden>
       <img class="mk-pill-icon" src="assets/app-icon.png?v=0000000000" alt="" width="44" height="44">
       <p class="mk-pill-name" aria-hidden="true"><span class="mk-pill-long">Download</span><span class="mk-pill-short">Get</span> PocaPal</p>
       <a class="mk-pill-btn" href="#get" aria-label="Download PocaPal" data-track="get-app" data-track-from="pill">Download</a>
     </aside>

   `hidden` keeps it away without script. The link's href is where it goes on a
   computer (the download blade, with the badge and the QR code); on a phone the
   script points it at the App Store link the page's own badge carries, once
   site.json has one. The whole pill is the link (its ::after), 56pt tall.

   Its look is the site's, from the custom properties the navbar already reads:
   the glass is the bar's (--mk-nav-light-bg / --mk-nav-light-fg in the light,
   --mk-nav-bg / --mk-nav-fg in the dark), the button the bar's button
   (--mk-accent, --mk-accent-deep, --mk-cta-fg, --mk-cta-hover, --mk-lip,
   --mk-cta-weight, --mk-cta-tracking, --mk-cta-press), the type --mk-font. A
   site can set --mk-pill-bg, --mk-pill-fg and --mk-pill-line over those. */

.mk-pill, .mk-pill *{box-sizing:border-box}
.mk-pill{
  --mk-pill-gap:12px;
  position:fixed; z-index:45;           /* under the navbar (50) and the skip links, over the page */
  left:0; right:0; margin-inline:auto; width:fit-content;
  max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:var(--mk-pill-gap);
  /* the icon sits further in than the button: its square corners would
     otherwise meet the pill's round end and look cut off */
  padding:6px 6px calc(6px + var(--mk-lip, 0px)) 12px;
  border-radius:999px;
  font-family:var(--mk-font, inherit);
  color:var(--mk-pill-fg, var(--mk-nav-light-fg, #1d1d1f));
  background:var(--mk-pill-bg, var(--mk-nav-light-bg, rgba(250,250,252,.78)));
  -webkit-backdrop-filter:saturate(var(--mk-nav-saturate, 150%)) blur(20px);
  backdrop-filter:saturate(var(--mk-nav-saturate, 150%)) blur(20px);
  box-shadow:0 0 0 1px var(--mk-pill-line, rgba(0,0,0,.08)), 0 12px 32px -8px rgba(0,0,0,.28);

  /* away: below the window's edge and clear; `is-shown` brings it up */
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(calc(100% + 24px));
  transition:transform .5s var(--mk-ease, cubic-bezier(.22,.61,.36,1)),
             opacity .35s var(--mk-ease, ease),
             visibility 0s linear .5s;
}
.mk-pill[hidden]{display:none}
.mk-pill.is-shown{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:transform .5s var(--mk-ease, cubic-bezier(.22,.61,.36,1)),
             opacity .35s var(--mk-ease, ease),
             visibility 0s;
}
@media (prefers-color-scheme:dark){
  .mk-pill{
    color:var(--mk-pill-fg, var(--mk-nav-fg, #f5f5f7));
    background:var(--mk-pill-bg, var(--mk-nav-bg, rgba(8,8,11,.7)));
    box-shadow:0 0 0 1px var(--mk-pill-line, rgba(255,255,255,.1)), 0 12px 32px -8px rgba(0,0,0,.6);
  }
}

.mk-pill .mk-pill-icon{
  flex:none; width:35px; height:35px; display:block;   /* 0.8 of the button's 44: the owner, 26 October */
  border-radius:22.5%;
  box-shadow:0 0 0 .5px rgba(0,0,0,.12);
}
.mk-pill .mk-pill-name{
  margin:0; min-width:0;
  font-size:15px; font-weight:650; letter-spacing:-.01em; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mk-pill .mk-pill-short{display:none}

/* the site's button, as its navbar draws it, a size up to a 44pt target */
.mk-pill .mk-pill-btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 20px; border-radius:999px;
  font-size:15px; font-weight:var(--mk-cta-weight, 600); letter-spacing:var(--mk-cta-tracking, -.01em);
  color:var(--mk-cta-fg, #fff); text-decoration:none;
  background:var(--mk-accent, #2f5fe0);
  box-shadow:0 var(--mk-lip, 0px) 0 var(--mk-accent-deep, #2049c2);
  transition:transform .14s var(--mk-ease, ease), box-shadow .14s var(--mk-ease, ease), background .25s var(--mk-ease, ease);
}
/* the whole pill presses the link */
.mk-pill .mk-pill-btn::after{content:""; position:absolute; inset:0; border-radius:999px}
.mk-pill:hover .mk-pill-btn{
  background:var(--mk-cta-hover, var(--mk-accent-deep, #2049c2));
  transform:translateY(calc(var(--mk-lip, 0px) / 2));
  box-shadow:0 calc(var(--mk-lip, 0px) / 2) 0 var(--mk-accent-deep, #2049c2);
}
.mk-pill:active .mk-pill-btn{
  transform:translateY(var(--mk-lip, 0px)) scale(var(--mk-cta-press, .97));
  box-shadow:0 0 0 var(--mk-accent-deep, #2049c2);
}
.mk-pill .mk-pill-btn:focus-visible{outline:2px solid var(--mk-accent, #2f5fe0); outline-offset:3px}

/* a narrow phone: "Get PocaPal"; narrower still, the icon and the button alone */
@media (max-width:379px){
  .mk-pill{--mk-pill-gap:10px}
  .mk-pill .mk-pill-long{display:none}
  .mk-pill .mk-pill-short{display:inline}
  .mk-pill .mk-pill-btn{padding:0 16px}
}
@media (max-width:299px){
  .mk-pill .mk-pill-name{display:none}
}

@media (prefers-reduced-motion:reduce){
  .mk-pill, .mk-pill.is-shown{transform:none}
  .mk-pill{transition:opacity .25s ease, visibility 0s linear .25s}
  .mk-pill.is-shown{transition:opacity .25s ease, visibility 0s}
  .mk-pill .mk-pill-btn{transition:none}
}
@media (forced-colors:active){
  .mk-pill{border:1px solid CanvasText}
}
@media print{
  .mk-pill{display:none}
}