/* Unison · The two store badges, at the size their owners ask for
 *
 * Four pages draw these — the landing page, the generic share page, and the two cards the Worker
 * renders — so the rules live once, here, rather than four times in four `<style>` blocks that
 * would drift the first time one of them was corrected.
 *
 * **The badges themselves are never touched.** `web/badge-*.svg` and `web/badge-*.png` are the
 * bytes Apple and Google serve, unmodified: Apple's guidelines and Google's both forbid redrawing,
 * recolouring, cropping or outlining them, so everything below is sizing and spacing and nothing
 * is a filter, a border-radius or a background.
 *
 * **Why the two heights differ, which is the only surprising thing here.** Apple's SVG is
 * 119.66 × 40 and the badge fills it, so `height: 40px` — Apple's stated minimum — draws a 40 px
 * badge. Google's PNG bakes its own clear space into the canvas: the English asset is 646 × 250
 * with the badge itself 564 × 168 in the middle, so the same 40 px of *badge* needs a 59.5 px
 * canvas (40 × 250 ÷ 168). That is Google's own sizing note in arithmetic — the Play badge is
 * drawn larger so the two artworks match — and it is measured from the files in this directory
 * rather than copied from a blog.
 *
 * The Spanish asset is framed differently again: `es-419` is 646 × 250 with 646 × 192 of artwork
 * and no side margin at all, so it needs 52.1 px for the same 40 px, and it needs its clear space
 * added here because Google did not bake any into that export.
 *
 * Clear space: Apple asks for a tenth of the badge's height on every side (4 px at 40 px), which
 * is the margin below; Google asks for a quarter of the badge's height, which the English asset
 * already carries and the Spanish one is given.
 */

.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.stores a {
  display: inline-flex;
  line-height: 0;
}

.stores img[data-badge="apple"] {
  display: block;
  height: 40px;
  width: auto;
  margin: 4px;
}

.stores img[data-badge="play"] {
  display: block;
  height: 59.5px;
  width: auto;
}

.stores img[data-badge="play"][data-locale="es-419"] {
  height: 52.1px;
  margin: 0 10px;
}

/* The foot's two languages. `STORE_BADGES` (`worker/shared.js`) carries its sentence and the
 * Android button's words twice, each in a block with the class `says` and a `lang`; the page's
 * own `<html lang>` — set by the Worker on the two cards, by `stores.js` on the generic page —
 * decides which one shows. Two rules that only ever hide, so neither needs to know whether the
 * block is a paragraph or a span; scoped to `.says` so the landing page's switch, whose links
 * carry `lang` too, is never touched. */
:root:not(:lang(es)) .says[lang="es"] { display: none; }
:root:lang(es) .says[lang="en"] { display: none; }

/* The Android-only way in, described in `stores.js`. It is `hidden` in the markup and stays that
 * way everywhere else, so this rule has to beat any `display` a page sets on the paragraph. */
[hidden] { display: none !important; }

.open-in-app { margin: 0 0 1rem; }

.open-in-app a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: #A99AF7;
  color: #14141A;
  font-weight: 700;
  text-decoration: none;
}
