/* Store badges: the App Store badge, then Google Play marked "Coming soon".
   Every page that shows the App Store badge links this file, so they all match.

   Badge rules this layout keeps (Apple and Google guidelines, read 2026-10-13):
   - Apple: the App Store badge comes first in a lineup of badges. Keep type and
     graphics out of a clear space one quarter of the badge's height.
   - Google: clear space is one quarter of the badge's height. The Google Play badge
     is the same size or larger than other store badges. Never recolor or alter it.
   The Google Play badge is not a link: there's no listing to open yet.

   The badges stack at the same height, on one left edge (.is-start) or one center
   line (everything else). The dashed frame around Google Play hangs out past that
   edge, so the badge inside it lines up with the App Store badge. */

.store-badges {
  --badge-h: 48px;                    /* height of both badges in this row */
  --clear: calc(var(--badge-h) / 4);  /* clear space, the same for both stores */
  --tag-h: 18px;
  --line: 1px;                        /* the frame's dashed line */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* the tag sits on the frame's top line, one clear space under the App Store badge */
  row-gap: calc(var(--clear) + var(--tag-h) / 2 - var(--line) / 2);
}
.store-badges.is-hero { --badge-h: 54px; }
.store-badges.is-start { align-items: flex-start; }
.store-badges > * { flex: none; }

/* The frame keeps a clear space around the badge, with room above it for the tag's
   lower half as well. Negative side margins pull the frame out by its padding and
   line, so the badge itself stays on the column's edge. */
.store-soon {
  /* Share of the PNG's height that is badge rather than transparent margin.
     1 means the file is cropped to the badge. Set it once if the file isn't. */
  --gp-art: 0.672;
  position: relative;
  display: flex;
  margin-inline: calc(-1 * (var(--clear) + var(--line)));
  padding: calc(var(--clear) + var(--tag-h) / 2 - var(--line) / 2) var(--clear) var(--clear);
  border: var(--line) dashed rgba(196, 169, 125, 0.55);
  /* sandstone pulled toward the text color, so the line holds up on cream and on forest */
  border-color: color-mix(in srgb, color-mix(in srgb, var(--sandstone, #C4A97D) 50%, currentColor) 60%, transparent);
  border-radius: calc(var(--clear) + 8px);
  line-height: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.store-soon-badge {
  display: block;
  width: auto;
  height: calc(var(--badge-h) / var(--gp-art));
  margin: calc(var(--badge-h) * (1 - 1 / var(--gp-art)) / 2);
}
.store-soon-tag {
  position: absolute;
  top: calc(var(--line) / -2);        /* centered on the dashed line */
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  height: var(--tag-h);
  padding: 0 8px 0 10px;              /* the last letter's 2px tracking fills the gap */
  border-radius: 100px;
  background: var(--sandstone, #C4A97D);
  color: var(--forest-dark, #1E2A1F);
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}