/*
 * MyPreferredSources — custom "preferred source" button.
 *
 * This is the HOSTED single source of truth for the custom button's look. The
 * generator's live preview and the copy-paste embed BOTH load this exact file
 * (the preview via /btn.css on our own origin, the embed via the absolute
 * https://mypreferredsources.com/btn.css). Same file + same markup ⇒ the
 * preview is exactly what a publisher copies, hover animation included.
 *
 * Hosting the stylesheet (instead of inlining it in every snippet) is what keeps
 * the pasted embed tiny — a single <a> + <link>. The trade-off: a publisher's
 * button depends on this file staying reachable. The markup degrades to readable
 * text + favicon if it ever 404s.
 *
 * Look is config-driven by MODIFIER CLASSES, not a generated string:
 *   .mps-pref-btn                 base (defaults to medium + light)
 *   .mps-sz-sm | .mps-sz-lg       size step (md is the base default)
 *   .mps-th-dark                  dark surface (light is the base default)
 * The serializer (src/lib/widget-code.ts → customButtonClasses) emits the class
 * list; change a size/color/spacing token HERE and both preview and embed move
 * together. The two icons are pulled in BY this stylesheet (so they never bloat
 * the snippet): the leading star via `mask` + `currentColor` so it tracks the
 * button text per theme; the trailing 4-color Google G via `background-image`.
 */

/* ---------------------------------------------------------------------------
 * CSS isolation — neutralize the HOST PAGE's styles.
 *
 * These buttons get pasted into arbitrary publisher pages. Without a Shadow DOM
 * boundary (which would force JS, or declarative-shadow markup that CMSes drop
 * when they inject the snippet via innerHTML), the host's global CSS cascades
 * INTO the button and drifts it away from the on-site preview: `* { box-sizing }`,
 * `a { color / text-decoration }`, `img { max-width }`, and inherited typography
 * (`font`, `color`, `line-height`, `letter-spacing`, …).
 *
 * `all: revert` rolls every property on the button subtree back to the
 * user-agent defaults — dropping the host's AUTHOR declarations — and the rules
 * below (also author-level, but later in source order, and a class beats a bare
 * `a`/`span`/`img` selector on specificity) re-establish the intended look. The
 * `--mps-*` custom properties survive (`all` never resets variables). The few
 * INHERITED props `revert` can still pull from the host parent are pinned
 * explicitly on each root, so nothing typographic leaks through inheritance.
 *
 * Residual: a host rule MORE specific than our scoped reset (e.g.
 * `.theirclass span {}` happening to match our text) can still win — that's the
 * price of not using Shadow DOM, and it's vanishingly rare next to the global
 * resets above. Because this lives in the HOSTED stylesheet, deploying it fixes
 * every already-pasted button at once.
 * ------------------------------------------------------------------------- */
.mps-pref-btn,
.mps-pref-btn::before,
.mps-pref-btn::after,
.mps-pref-btn *,
.mps-pref-btn *::before,
.mps-pref-btn *::after,
.mps-store-btn,
.mps-store-btn::before,
.mps-store-btn::after,
.mps-store-btn *,
.mps-store-btn *::before,
.mps-store-btn *::after {
  /* `A *` never matches A itself, so the root's OWN ::before/::after are listed
     explicitly — otherwise a host `a::after { content: "…" }` injects a glyph
     into the button (the button root IS the <a>). `all: revert` resets their
     `content` to `normal`, deleting it. */
  all: revert;
  box-sizing: border-box;
}

/* Pin the inherited typographic props on each root: `revert` still inherits
   these from the host parent, so set them explicitly. Leaf rules below override
   where needed (e.g. .mps-store-lead → uppercase, .mps-store-name → nowrap). */
.mps-pref-btn,
.mps-store-btn {
  font-style: normal;
  font-variant: normal;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-align: left;
  text-indent: 0;
  text-shadow: none;
  white-space: normal;
}

.mps-pref-btn {
  /* medium + light defaults (overridden by the modifier classes below) */
  --mps-pad: 11px 18px;
  --mps-fs: 14px;
  --mps-gap: 11px;
  --mps-ic: 20px;
  --mps-gic: 18px;
  --mps-rad: 11px;
  --mps-bg: #ffffff;
  --mps-fg: #202124;
  --mps-bd: #dadce0;
  --mps-bdh: #d2d5d9;
  --mps-dv: rgba(60, 64, 67, 0.18);
  --mps-sh: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);

  display: inline-flex;
  align-items: center;
  gap: var(--mps-gap);
  padding: var(--mps-pad);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--mps-fs);
  font-weight: 500;
  line-height: 1.2;
  color: var(--mps-fg);
  background: var(--mps-bg);
  border: 1px solid var(--mps-bd);
  border-radius: var(--mps-rad);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mps-pref-btn.mps-sz-sm {
  --mps-pad: 9px 14px;
  --mps-fs: 13px;
  --mps-gap: 10px;
  --mps-ic: 18px;
  --mps-gic: 16px;
  --mps-rad: 10px;
}

.mps-pref-btn.mps-sz-lg {
  --mps-pad: 13px 22px;
  --mps-fs: 15px;
  --mps-gap: 12px;
  --mps-ic: 22px;
  --mps-gic: 20px;
  --mps-rad: 12px;
}

.mps-pref-btn.mps-th-dark {
  --mps-bg: #202124;
  --mps-fg: #e8eaed;
  --mps-bd: #5f6368;
  --mps-bdh: #80868b;
  --mps-dv: rgba(255, 255, 255, 0.18);
  --mps-sh: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 4px 1px rgba(0, 0, 0, 0.3);
}

/* Leading mark — favicon (<img>) when enabled. */
.mps-pref-btn .mps-ic {
  width: var(--mps-ic);
  height: var(--mps-ic);
  flex-shrink: 0;
  display: block;
  border-radius: 4px;
  object-fit: contain;
}

/* Leading mark — default star, tinted by currentColor so it tracks the text. */
.mps-pref-btn .mps-star {
  width: var(--mps-ic);
  height: var(--mps-ic);
  flex-shrink: 0;
  display: block;
  background: currentColor;
  -webkit-mask: url("/marks/cards-star.svg") center / contain no-repeat;
  mask: url("/marks/cards-star.svg") center / contain no-repeat;
}

/* Single-line text that slide-swaps to the hover line; both lines share one grid
   cell sized to the wider line, so the button never reflows. */
.mps-pref-btn .mps-swap {
  display: inline-grid;
  overflow: hidden;
  align-items: center;
  justify-items: start;
}

.mps-pref-btn .mps-swap > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.26s ease;
}

.mps-pref-btn .mps-swap .mps-hover {
  transform: translateY(115%);
  opacity: 0;
}

/* Trailing Google-G trust mark behind a hairline divider. */
.mps-pref-btn .mps-tm {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: var(--mps-gap);
  border-left: 1px solid var(--mps-dv);
}

.mps-pref-btn .mps-g {
  width: var(--mps-gic);
  height: var(--mps-gic);
  display: block;
  background: url("/marks/google-g.svg") center / contain no-repeat;
}

.mps-pref-btn:hover {
  border-color: var(--mps-bdh);
  transform: translateY(-1px);
  box-shadow: var(--mps-sh);
}

.mps-pref-btn:hover .mps-swap .mps-rest {
  transform: translateY(-115%);
  opacity: 0;
}

.mps-pref-btn:hover .mps-swap .mps-hover {
  transform: translateY(0);
  opacity: 1;
}

/* =========================================================================
 * Stacked "preferred source" badge — the App-Store / Google-Play shape.
 *
 * A simpler, "basic" alternative to .mps-pref-btn: the 4-color Google G LEADS
 * (the platform mark), then two stacked text lines — a small uppercase lead-in
 * over a large name line. No hover text-swap, no favicon, no editable copy; the
 * size/theme modifier classes (.mps-sz-*, .mps-th-*) drive it just like the
 * custom button. Same hosted stylesheet ⇒ preview equals copy, snippet stays
 * tiny. Reuses /marks/google-g.svg (no new asset).
 * ====================================================================== */

.mps-store-btn {
  /* medium + light defaults (overridden by the modifier classes below) */
  --mps-pad: 9px 18px;
  --mps-gap: 12px;
  --mps-gic: 26px;
  --mps-lead-fs: 12px;
  --mps-name-fs: 18px;
  --mps-rad: 12px;
  --mps-bg: #ffffff;
  --mps-fg: #202124;
  --mps-fg2: #5f6368;
  --mps-bd: #dadce0;
  --mps-bdh: #d2d5d9;
  --mps-sh: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);

  display: inline-flex;
  align-items: center;
  gap: var(--mps-gap);
  padding: var(--mps-pad);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--mps-fg);
  background: var(--mps-bg);
  border: 1px solid var(--mps-bd);
  border-radius: var(--mps-rad);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mps-store-btn.mps-sz-sm {
  --mps-pad: 7px 14px;
  --mps-gap: 10px;
  --mps-gic: 22px;
  --mps-lead-fs: 10px;
  --mps-name-fs: 15px;
  --mps-rad: 10px;
}

.mps-store-btn.mps-sz-lg {
  --mps-pad: 11px 22px;
  --mps-gap: 14px;
  --mps-gic: 30px;
  --mps-lead-fs: 13px;
  --mps-name-fs: 21px;
  --mps-rad: 14px;
}

.mps-store-btn.mps-th-dark {
  --mps-bg: #202124;
  --mps-fg: #e8eaed;
  --mps-fg2: #9aa0a6;
  --mps-bd: #5f6368;
  --mps-bdh: #80868b;
  --mps-sh: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 4px 1px rgba(0, 0, 0, 0.3);
}

/* Leading mark — one of three (selected by markup): the 4-color Google G, the
   star (tinted to the text color), or the site favicon. All share one box. */
.mps-store-btn .mps-store-g,
.mps-store-btn .mps-store-star,
.mps-store-btn .mps-store-ic {
  width: var(--mps-gic);
  height: var(--mps-gic);
  flex-shrink: 0;
  display: block;
}

/* Google G — flat 4-color, full color (the platform mark). */
.mps-store-btn .mps-store-g {
  background: url("/marks/google-g.svg") center / contain no-repeat;
}

/* Star — tinted by currentColor so it tracks the button text per theme. */
.mps-store-btn .mps-store-star {
  background: currentColor;
  -webkit-mask: url("/marks/cards-star.svg") center / contain no-repeat;
  mask: url("/marks/cards-star.svg") center / contain no-repeat;
}

/* Favicon — the site's own icon (an <img>), rounded like an app icon. */
.mps-store-btn .mps-store-ic {
  border-radius: 5px;
  object-fit: contain;
}

/* Two stacked text lines (lead-in over name). */
.mps-store-btn .mps-store-tx {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.mps-store-btn .mps-store-lead {
  font-size: var(--mps-lead-fs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mps-fg2);
}

.mps-store-btn .mps-store-name {
  margin-top: 3px;
  font-size: var(--mps-name-fs);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--mps-fg);
}

.mps-store-btn:hover {
  border-color: var(--mps-bdh);
  transform: translateY(-1px);
  box-shadow: var(--mps-sh);
}