/* ============================================================
   button.css — Pill buttons: primary, ghost, accent, tertiary,
   plus a pending placeholder and a loading (disabled) state.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--control-py-lg) var(--control-px-lg);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  /* ── DECLARED BECAUSE A HOST THEME DECLARES THEM ───────────
     `.btn` is the one class name this bundle shares with the INRIX
     WordPress theme, and a shared name is only half the problem: the
     theme's own .btn sets `min-width: 18em` and `text-transform:
     uppercase`, and a property we simply never mention is a property
     the other stylesheet wins by default however the cascade is
     ordered. On staging that is what turned a 182px "Read the report"
     into a 270px "READ THE REPORT" and broke the masthead row.

     Not !important, and not a rename. Our CSS already loads after the
     theme's, so declaring the value is enough — the fix for inherited
     damage is to have an opinion, not to shout. text-align and
     vertical-align are here for the same reason before anyone sets
     them: a button whose label is centred by its flexbox does not
     care, right up until a host makes it a block. See
     docs/embedding.md. */
  min-width: 0;
  text-transform: none;
  text-align: center;
  vertical-align: middle;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color    var(--dur-fast) var(--ease-out),
              color           var(--dur-fast) var(--ease-out),
              transform       var(--dur-fast) var(--ease-out);
}

/* Cluster of two or three buttons, e.g. retry beside a way out. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* --btn-primary-bg, not --primary: a link colour and a button fill are
   different jobs and need different values on the dark theme. See the
   token's note in tokens.css. */
.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--on-fill);
  border-color: var(--btn-primary-bg);
}
/* Hover swaps to the bright end and flips the ink to the page colour, so
   the pair stays high-contrast in the other direction. */
.btn--primary:hover { background: var(--primary-bright); border-color: var(--primary-bright); color: var(--bg); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover { color: var(--primary-bright); border-color: var(--primary-bright); }

/* Sparing accent variant — use only when contrast against the primary CTA matters. */
.btn--accent {
  background: var(--gold);
  color: var(--on-accent);
  border-color: var(--gold);
}
.btn--accent:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.btn--xl { padding: var(--control-py-xl) var(--control-px-xl); font-size: var(--text-lg); }
/* Compact — for a button riding in page chrome rather than in content,
   where a full-size pill would out-weigh the nav links beside it. */
.btn--sm { padding: var(--control-py-sm) var(--control-px-pill); font-size: var(--text-sm); }

/* Tertiary — lowest-emphasis text button. Use in clusters under hero copy. */
.btn--tertiary {
  background: transparent;
  color: var(--text-soft);
  border-color: transparent;
  padding: var(--control-py-md) var(--control-px-md);
  font-weight: 700;
}
.btn--tertiary:hover {
  color: var(--primary-bright);
  background: var(--primary-soft);
  border-color: transparent;
}

/* Subtle tactile feedback on press. */
.btn:active { transform: translateY(1px); }
/* Reduced motion keeps the press, and drops the ANIMATION of it. The
   1px dip is the only confirmation a tap registered, so removing it
   would cost feedback rather than motion; what the preference objects
   to is the travel being drawn over 180ms. The colour legs are left
   animating — prefers-reduced-motion is about movement, not about a
   cross-fade, and killing those would flatten every button on the site
   for a reader who only asked not to be moved. */
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color    var(--dur-fast) var(--ease-out),
                color           var(--dur-fast) var(--ease-out);
  }
}

/* ── Touch target ───────────────────────────────────────────
   The inset ladder puts the default button at 38px — fine under a
   pointer, six short of the floor under a finger. "Read the report" is
   the masthead CTA and sits on every page, so this is the most-offered
   control on the site.

   min-height, not padding: --control-p{y,x}-* is keyed to type size
   rather than the layout grid (see tokens.css), and raising the inset
   would pull every size off that ladder. The floor leaves it intact
   and align-items keeps the label centred in whatever height results.

   Short height is in the query beside narrow width because a phone on
   its side is 852px wide and clears every width arm on the site. */
@media (hover: none) and (pointer: coarse), (max-width: 720px), (max-height: 500px) {
  .btn { min-height: 44px; }
}

/* Pending placeholder — visible but inert (the not-yet-enabled
   "Download the report" CTA). Reads as a dashed, dimmed coming-soon chip. */
.btn[data-pending] {
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  background: transparent;
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

/* Plain disabled — e.g. a primary button mid-request ("Locating…"). Keeps its
   variant fill but dims; must NOT inherit the dashed placeholder look above. */
.btn:disabled:not([data-pending]) {
  opacity: 0.6;
  cursor: progress;
}

/* ── Report CTA row ─────────────────────────────────────────
   The "Download the Full Report" button that opens every page.

   It gets a row of its own rather than a slot in the hero's meta
   strip, because those strips are counts — cities, countries,
   spaces — and a button standing among them reads as a fourth one.
   The landing hero is the exception: its meta line is a single
   source credit, so the button sits IN it, to the left of the
   credit. See .scene--hero .meta in scene.css.

   .btn-row already exists for clusters that follow body copy; this
   is the same idea sized for a hero, where the space below has to
   clear a headline rather than a paragraph. */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}