/* CLASS D — CAMPAIGN. The only CSS this class adds on top of the shipped
 * common.css + lab.css, which style the hero itself.
 *
 * A REAL FILE, not a <style is:global> in the layout, and that is load-bearing.
 * `pages/[...path].astro` imports all five layouts to dispatch on page class, so Astro
 * bundles every layout's inline styles into ONE hashed stylesheet that EVERY page links.
 * Adding 60 lines there changes that bundle's hash, which rewrites the <link> href in all
 * ~2,600 built pages — so a six-page change becomes a whole-corpus release. Linking a
 * static file from pages-assets/ instead leaves the shared bundle byte-identical, which is
 * also exactly how Transactional.astro loads common.css and lab.css.
 */
/* Everything above is styled by the SHIPPED common.css + lab.css. The only rules here
   are for the two things this class has that the transactional hero does not: a live
   input where it has a placeholder paragraph, and the suggestion chips under it. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The composer is a <form> here, not a <div>. lab.css sizes and positions
   `.intent-composer`; nothing below re-states that — these only cover the swap of a
   <p class="intent-composer-ph"> for a real field, which has a UA appearance of its own
   that has to be undone to match the paragraph it replaces.

   THE CARD IS WHITE. lab.css: `.intent-composer-card { background:#fff }`, with the
   placeholder paragraph at `#8a8a92`. The field inherits those colours rather than the
   dark hero's — styling it for the dark ground around it puts white text on a white
   card, which renders as an empty box that still accepts typing. */
.campaign-composer-input {
  display: block; width: 100%; box-sizing: border-box;
  /* the 14px is `.intent-composer-ph`'s own bottom margin — it is what holds the bar
     (attach + submit) off the text, and the bar sits flush against the field without it */
  margin: 0 0 14px; padding: 0; border: 0; outline: 0;
  background: transparent; color: #1a1a1f;
  font: inherit; font-size: .95rem; line-height: 1.45;
  -webkit-appearance: none; appearance: none;
}
.campaign-composer-input::placeholder { color: #8a8a92; opacity: 1; }
/* The card is the focus surface, not the bare input: a ring drawn on a transparent,
   borderless field inside a card reads as a rectangle floating in the card rather than
   as "this card is focused". The card's own drop shadow is restated because a second
   box-shadow REPLACES it rather than adding to it — dropping it would make the card
   jump flat the moment it is focused. */
.campaign-composer:focus-within .intent-composer-card {
  box-shadow: 0 18px 44px rgba(0, 0, 0, .12), 0 0 0 3px rgba(255, 204, 0, .45);
}
/* `.intent-composer-submit` is a <span> on the transactional page and a <button> here;
   a button brings its own background, border, font and padding. */
.campaign-composer-submit {
  padding: 0; border: 0; font: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}

.campaign-prompts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 12px auto 0; max-width: 620px;
}
.campaign-prompt {
  font: inherit; font-size: 12.5px; line-height: 1;
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.campaign-prompt:hover, .campaign-prompt:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 204, 0, .7);
}
/* The chips are the first thing to go on a phone: the field and its submit are the
   path forward, and six wrapping chips push the download row off a short viewport. */
@media (max-width: 600px) { .campaign-prompts { display: none; } }
@media (prefers-reduced-motion: reduce) { .campaign-prompt { transition: none; } }

/* ── the header: transparent over the hero, solid once the page moves ────────────────
 *
 * At rest the bar floats on the hero, which common.css and lab.css already arrange:
 *
 *     body:has(.globe-intent) .site-header,
 *     body:has(.globe-intent) .site-header.is-solid { background:transparent; … }
 *
 * Note that rule pins `.is-solid` transparent TOO — on the reference intent pages the bar
 * is meant to stay clear the whole way down, because the article below it is its own dark
 * world. These six pages are one screen with a footer, and a bar with no ground runs the
 * hero's own copy into the buttons as it scrolls past.
 *
 * So the solid state keys off `.is-scrolled` (pages-assets/header-scroll.js) rather than
 * `.is-solid`, which stays exactly as the shipped stylesheets left it. The values below
 * are lab.css's own `html[data-dir] body .site-header.is-solid` — the dark glass and gold
 * hairline this design already defines for a scrolled bar — not a new colour.
 *
 * SPECIFICITY: the transparent rule above is (0,3,2). This is (0,4,2): one more class from
 * `[data-dir]`, which every page in this class sets. Nothing lower would take. */
html[data-dir] body:has(.globe-intent) .site-header.is-scrolled {
  background: rgba(4, 4, 4, .9);
  border-bottom: 1px solid rgba(246, 210, 122, .18);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
  backdrop-filter: saturate(150%) blur(20px);
  box-shadow: 0 12px 40px -26px rgba(0, 0, 0, .95);
}

/* lab.css already transitions background/border on this element, so the bar fades in
   rather than snapping. Restated here only for the reduced-motion case, where an abrupt
   change is the correct behaviour and the transition should not be inherited. */
@media (prefers-reduced-motion: reduce) {
  html[data-dir] body:has(.globe-intent) .site-header,
  html[data-dir] body:has(.globe-intent) .site-header.is-scrolled { transition: none; }
}