/**
 * store_badges.css — the Chippie app-store badge line.
 *
 * SSOT for the badge composite. It lives here rather than in landing.css because
 * the line appears on two pages that must never drift: the landing hero and the
 * QR-scan promo page. Pairs with templates/components/store_badges.html (markup)
 * and, like phone_frame.css, is sourced from each parent page's extra_css block.
 *
 * Depends on the --store-badge-* roles (tokens/semantic.css) and --text-2 /
 * --black (chippie-marketing.css), all loaded by the public shell.
 *
 * .store-line is the composite's own flex row. Whether to centre it is the PAGE's
 * concern, not this file's: the promo page opts in by passing
 * store_line_class='store-line--centered' to the partial. The one exception is the
 * narrow-screen centring below — that is the composite restacking itself, so it
 * travels with the composite and both pages stay identical when stacked.
 */

/* One tile width, shared by the Apple artwork and the Android placeholder so the
   two always match; the centred variant below leans on it to size its column. */
.store-line {
  --store-tile-w: 120px;
  margin-top: 18px; display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
}
.store-android { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.store-line a { line-height: 0; flex: none; }
.store-line img { height: 40px; width: auto; }
/* Mirrors the Apple badge footprint: black tile, 40px tall, icon + two-line label. */
.store-badge-soon {
  display: inline-flex; align-items: center; gap: 7px; box-sizing: border-box;
  width: var(--store-tile-w); height: 40px; padding: 0 0 0 9px; border-radius: 6px;
  background: var(--store-badge-bg); color: var(--store-badge-fg);
  border: 1px solid var(--store-badge-border); opacity: .85;
  font-family: -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
}
.store-badge-soon .bi { font-size: 24px; line-height: 1; color: var(--store-badge-glyph); }
.store-badge-text { display: flex; flex-direction: column; line-height: 1; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.store-badge-text small { font-size: 8px; font-weight: 400; letter-spacing: .02em; margin-bottom: 2px; }
.store-hint { font-size: 11px; line-height: 1.3; color: var(--text-2); white-space: nowrap; }
.store-hint b { color: var(--black); }

/* Centred variant — the promo page, where the line sits under the centred video.
   Centring the row alone is not enough: the install hint is wider than the tile it
   hangs off, so the row's box would centre while the two tiles stayed visibly left
   of it. Pinning the Android column to the tile width makes the row exactly two
   tiles wide, so the tiles centre on the page and the hint wraps beneath its own
   tile instead of dragging the pair off-centre. */
.store-line--centered { justify-content: center; }
.store-line--centered .store-android { width: var(--store-tile-w); }
.store-line--centered .store-hint { white-space: normal; text-align: center; }

@media (max-width: 880px) {
  .store-line { text-align: center; justify-content: center; }
}