/* The store in the frame, on a phone (assets/store-tap.js, Dasha, 22 Oct: the site must work on a phone). The live store fills
   most of the screen and takes every swipe, so the page could not move on past it. On a touch screen a light cover lies over the
   store: a swipe on it scrolls the page, a tap opens the store for use, and Done in the frame's bar gives the page back. A laptop
   has no cover (Dasha, 22 Oct: no "Click to try it" shield there). */
.rc-tap, .rc-done { display: none; }
@media (hover: none) and (pointer: coarse) {
  .rc-tap { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; margin: 0; padding: 0;
    border: 0; background: rgba(255, 255, 255, .12); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .rc-tap span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(25, 24, 38, .86);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 30px -14px rgba(25, 24, 38, .5); font: 500 14px/1 var(--sans); color: #fff; }
  .rc-tap svg { width: 18px; height: 18px; }
  .rc-frame.is-live .rc-tap { display: none; }
  .rc-frame.is-live .rc-done { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; flex: none; height: 32px; margin: 0; padding: 0 14px;
    border: 0; border-radius: 999px; background: #191826; font: 500 13px/1 var(--sans); color: #fff; cursor: pointer; }
  .rc-frame.is-live .rc-bar a { display: none; }  /* the bar is narrow: Done takes the link's place while the store is in use */
}