/* ──────────────────────────────────────────────────────────────────────────
   ExtPromo — scoped "extpromo-" classes ONLY. Reads existing design tokens from
   styles.css (never defines new colours), so dark mode comes for free. It is a
   SUBORDINATE ad/promo: a quiet band with a text-link CTA — never a filled
   button, so it never competes with the page's primary Download CTA. No
   animation (it is persistent, not a win-moment), so nothing to reduce for
   prefers-reduced-motion.
   ────────────────────────────────────────────────────────────────────────── */

.extpromo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 13px 16px;
  background: var(--surface-2, #f4f4f5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary); /* quiet accent edge, matches pcshare */
  border-radius: 12px;
}

.extpromo-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
}
.extpromo-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--primary);
}

/* Grows to fill the band on wide screens (pushing the badge to the right edge);
   the 260px basis makes the badge wrap to its own line in any container narrower
   than ~500px — including narrow INLINE placements, which a viewport media query
   would miss. min-width:0 keeps long words from forcing overflow. */
.extpromo-body { flex: 1 1 260px; min-width: 0; }

/* CTA is a text link (not a button) so it stays subordinate to the real CTA. */
.extpromo-cta {
  display: inline-block;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--primary);
  text-decoration: none;
}
.extpromo-cta:hover { text-decoration: underline; }
.extpromo-cta:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: 3px;
}

.extpromo-text {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ── Chrome Web Store install badge ───────────────────────────────────────────
   The ONE piece of deliberate visual weight in this band: a Play/App-Store-style
   dark pill (glyph + eyebrow over wordmark) giving already-sold users a direct
   install, while the text CTA still routes through the UTM'd landing page. Pure
   inline SVG + CSS — no image request, no CDN, no layout shift.

   The pill is the only place this component may use a literal colour: it is a
   store badge, so it must stay dark-filled in BOTH themes (an inverted white pill
   would become the loudest thing on the page in dark mode, and this band is
   subordinate by contract). Legibility on the dark band is handled by the hairline
   below, not by inverting. Label contrast: #fff on #101014 ≈ 19:1. */
.extpromo-badge {
  flex: none;
  align-self: center;
  margin-left: auto; /* right-aligns on a wide row AND on its own wrapped line */
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  min-height: 44px; /* mobile tap target */
  box-sizing: border-box;
  background: #101014;
  border: 1px solid #101014;
  border-radius: 10px;
  color: #ffffff;
  text-decoration: none;
}
.extpromo-badge:hover { background: #26262c; border-color: #26262c; }
.extpromo-badge:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
.extpromo-badge-glyph {
  flex: none;
  display: grid;
  place-items: center;
}
.extpromo-badge-glyph svg {
  width: 22px;
  height: 22px;
  fill: currentColor; /* follows the pill's label colour in both themes */
  display: block;
}
.extpromo-badge-stack {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
/* Uppercased in CSS only — the DOM keeps sentence case so the anchor's
   accessible name reads "Get it on Chrome Web Store". */
.extpromo-badge-eyebrow {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.82; /* ≈ #d1d1d3 on #101014 ≈ 13:1 — still far past AA */
}
.extpromo-badge-store {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Dark mode: the pill stays dark (see above), so it needs an explicit edge or it
   melts into --surface-2 (#1c1c1f vs #101014 ≈ 1.35:1, under the 3:1 that WCAG
   1.4.11 wants for a control boundary). --text-muted (#6f6f76) hairline ≈ 3.4:1
   against the band — a token, not a new colour. */
@media (prefers-color-scheme: dark) {
  .extpromo-badge { border-color: var(--text-muted); }
  .extpromo-badge:hover { border-color: var(--text-secondary); }
}

/* ── Site-wide inline band wrapper ────────────────────────────────────────────
   The auto-injected slot lives in normal document flow, immediately below the
   site header (see ext-promo.js autoInject). It is NOT fixed/floating and cannot
   be dismissed — so it never overlays the tool UI; it simply pushes content down.
   The wrapper constrains the band to the same centred column as the nav content
   (max-width 1200px, matching .nav-inner) with the site's 20px gutter, and adds
   a little breathing room below the sticky nav. The inner .extpromo keeps its
   band styling; we zero its default top margin since the wrapper supplies the gap. */
.extpromo-sitewide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px 0;
}
.extpromo-sitewide .extpromo { margin-top: 0; }

@media (max-width: 600px) {
  .extpromo-sitewide { padding: 12px 12px 0; }
  /* Force the badge onto its own line and align it under the text column (34px
     icon + 12px gap = 46px) rather than under the icon — deterministic, instead
     of relying on where the flex basis happens to break at this width. */
  /* 46px = the 34px icon + the 12px gap, so the body still shares line 1 with the
     icon and it is the BADGE that wraps (a flat 100% would wrap the body too). */
  .extpromo-body { flex-basis: calc(100% - 47px); }
  .extpromo-badge {
    align-self: flex-start;
    margin: 2px 0 0 46px;
  }
}
/* Very narrow phones (360px): drop the indent so the pill can't push the band
   into horizontal overflow. */
@media (max-width: 400px) {
  .extpromo-badge { margin-left: 0; }
}