/* ============================================================
   conversion.css — the ask surfaces
   ------------------------------------------------------------
   Four surfaces, one visual family:

     .ask--popunder   mobile, bottom-anchored, 90% read
     .ask--rail       desktop, bottom-right, 90% read
     .ask--mid        injected into .post-content, ~40% read
     .ask--end        inline, at the content↔comments anchor

   The first three are governed by the one-ask budget in
   assets/js/membership-ux.js; .ask--end is inline furniture and is
   always present.

   Deferred stylesheet. The HIDDEN state of every surface lives in
   the critical inline CSS in default.hbs — keep the two in sync or a
   surface flashes on screen before this file lands.

   Brand rules that constrain this file (docs/CONVENTIONS.md):
     • The gradient is trans-flag identity, not decoration. It is used
       here as a rule or an accent only — never as a large fill, and
       never as `color:` on text.
     • Tokens only. No hardcoded colour, spacing, radius or easing.
     • Every control ≥44px; every input ≥16px (below 16px iOS Safari
       zooms the viewport on focus).
     • Under prefers-reduced-motion nothing slides. It fades in place,
       and the auto-dismiss timer still fires.
   ============================================================ */

/* ── 1. SHARED SHELL ──────────────────────────────────────── */

.ask {
  color: var(--text-color);
  background: var(--card-bg);
  /* transform and opacity only. visibility must NOT be transitioned: it
     would then flip as part of an animation, and a surface revealed in a
     throttled frame loop (a backgrounded tab, a stalled rAF) stays
     invisible while it is already non-inert and already counted as an
     impression. Reveal has to be instant and unconditional; only the
     movement is allowed to animate. */
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.ask__inner {
  position: relative;
  padding: 18px 20px calc(18px + var(--safe-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The gradient as a rule. Full-bleed on the popunder because it is the
   surface's only brand mark; the rail and the inline surfaces carry it
   the same way for family resemblance. */
.ask--end::before { content: none; }

.ask::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand-gradient);
  pointer-events: none;
}

/* Only the in-flow surfaces. The popunder and the rail are
   position:fixed in the critical inline CSS, and `relative` here would
   override it at equal specificity and drop both back into the
   document — a bottom bar 2000px down the page. A fixed element is
   already a containing block, so .ask::before needs nothing from us. */
.ask--mid,
.ask--end { position: relative; }

.ask__heading {
  margin: 0;
  font-family: var(--font1, Georgia, serif);
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.25;
  font-weight: 700;
  text-wrap: balance;
}

/* The one-line "why": the funding model and the community, stated at
   the point of decision. One sentence, functional register. */
.ask__why {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-color-55);
}

.ask__provenance {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-color-55);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ask__provenance a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ask__provenance a:hover { color: var(--text-color); }

/* ── 2. DISMISS ───────────────────────────────────────────── */

/* One click, remembered, always visible alongside the CTA. No
   interstitial and no confirmshaming: docs/CONVENTIONS.md golden
   rule 5 and the publication's own integrity model both forbid it. */
.ask__dismiss {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--text-color-55);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.ask__dismiss:hover { color: var(--text-color); }

/* ── 3. THE FORM ──────────────────────────────────────────── */

.ask-form { margin: 0; }

/* Visible label. The placeholder is not a label — it disappears the
   moment the reader types, which is exactly when they need it. */
.ask-form__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-color-80);
}

.ask-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ask-form__input {
  flex: 1 1 12ch;
  min-width: 0;
  min-height: 44px;
  /* 16px floor: below it iOS Safari zooms the viewport on focus. */
  font-size: 16px;
  font-family: inherit;
  padding: 10px 12px;
  color: var(--text-color);
  background: var(--background-color, transparent);
  /* WCAG 1.4.11: a form field's boundary is what identifies it as a field.
     At --border (.15 / .14) it measured 1.41:1 light and 1.53:1 dark against
     the card — visible to nobody. --border-interactive clears 3:1 on both. */
  border: 1px solid var(--border-interactive, var(--border));
  border-radius: var(--radius-sm);
}

.ask-form__input:focus { border-color: var(--brand-g1); }

.ask-form__submit {
  min-height: 44px;
  flex: 0 0 auto;
  padding: 10px 20px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-color);
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  /* Gradient as a border, not a fill: the label keeps the page's own
     ink colour, so contrast is the body-text contrast and the
     gradient never becomes text colour. */
  background-image: linear-gradient(var(--card-bg), var(--card-bg)), var(--brand-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: transform var(--transition-base);
}

.ask-form__submit:hover { transform: translateY(-1px); }
.ask-form__submit:active { transform: translateY(0); }

.ask-form__fine {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-color-55);
}

/* Ghost sets loading / success / error on the <form>; theme.css
   already keys .form-alert visibility off those classes. Nothing new
   is invented here — this only spaces the region. */
.ask-form__alerts { margin-top: 8px; }
.ask-form__alerts .form-alert { font-size: 13px; line-height: 1.4; }

/* ── 4. THE CONFIRMATION ──────────────────────────────────── */

/* On success the surface morphs in place rather than vanishing, so
   the reader sees what happened where they did it. membership-ux.js
   then withdraws the floating surfaces after ~6s and leaves the
   inline ones standing. */
.ask__confirm { display: none; margin: 0; font-size: 15px; font-weight: 600; }

.ask[data-ask-converted="true"] .ask-form,
.ask[data-ask-converted="true"] .ask__why,
.ask[data-ask-converted="true"] .ask__heading { display: none; }

.ask[data-ask-converted="true"] .ask__confirm { display: block; }

/* ── 5. POPUNDER (mobile, 90% read) ───────────────────────── */

/* A genuine popunder, not a modal: no scrim, no scroll lock, no focus
   trap, role="complementary". That is what keeps it from fighting the
   accessibility panel, which runs its own focus trap.
   z-index 1160 — above the old sheet level (1150), below
   .reading-progress (1200) and the nav overlay (1300). */
.ask--popunder {
  border-top: 0;
  box-shadow: var(--shadow-brand);
  padding-left: var(--safe-left, 0px);
  padding-right: var(--safe-right, 0px);
}

.ask--popunder .ask__inner { padding-right: 56px; }

/* ── 6. RAIL (desktop, 90% read) ──────────────────────────── */

/* Offset upward to clear #a11y-fab (52px at bottom:24px) rather than
   displacing it. The FAB lift is the popunder's problem: shoving the
   accessibility button around on every desktop article would be
   worse than sitting above it. */
.ask--rail {
  border: 1px solid var(--border-interactive, var(--border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-brand);
  overflow: hidden;
}

.ask--rail .ask__inner { padding-right: 56px; }

/* ── 7. MID-CAPTURE (inline, ~40% read) ───────────────────── */

.ask--mid {
  margin: 32px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ask--mid .ask__inner { padding-right: 56px; }

/* ── 8. END-OF-STORY (inline furniture) ───────────────────── */

/* Sized off its own container, not the page. This is the theme's
   first container query: the newsletter partial next door still
   coordinates through a page-level .newsletter-outer-for-post
   display toggle, which is the hack container queries exist to
   remove. That fallback is deliberately left in place rather than
   deleted in the same change. */
/* The gradient-bordered "shiny" card the in-article widget used to carry,
   restored here verbatim in values: gradient as a BORDER via the
   padding-box/border-box pair, never as a fill and never as colour on text
   (CONVENTIONS §2 rule 2). It grows on hover on desktop only — hover does not
   exist on touch, so a phone gets the static card. */
.ask--end {
  container-type: inline-size;
  margin: 2.2em auto;
  max-width: var(--narrow-container-width, 100%);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
              var(--brand-gradient, linear-gradient(45deg,#F545A2,#CF2E84,#9B4DB8,#5E9DBA)) border-box;
  box-shadow: 0 4px 20px rgba(245, 69, 162, .16);
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ask--end:hover {
    transform: scale(1.025);
    box-shadow: 0 10px 34px rgba(245, 69, 162, .30);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ask--end, .ask--end:hover { transform: none; transition: box-shadow .25s ease; }
}

/* Centred, like the card this replaces. */
.ask--end .ask__inner { padding: 32px 28px; text-align: center; align-items: center; }

.ask--end .ask__heading {
  font-family: var(--font2, 'Old Standard TT'), serif;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.3;
  color: var(--text-color);
}

.ask--end .ask-form { width: 100%; max-width: 34rem; }
.ask--end .ask-form__label { text-align: left; }

/* The gradient belongs on the button here, matching the card it restores. */
.ask--end .ask-form__submit,
.ask--end .ask__button {
  background-image: none;
  background: var(--brand-gradient, linear-gradient(45deg,#F545A2,#CF2E84,#9B4DB8,#5E9DBA));
  /* Transparent 1px rather than 0: the one-time link beside it in
     .ask__actions carries a real 1px border, and a borderless button next to
     a bordered one is exactly 2px shorter with identical padding. */
  border: 1px solid transparent;
  color: #fff;
}

.ask--end .ask__button { align-self: center; }

@container (min-width: 560px) {
  .ask--end .ask__inner { padding: 30px 32px; gap: 12px; }
  .ask--end .ask-form__row { flex-wrap: nowrap; }
}

.ask__button {
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  font-weight: 700;
  text-decoration: none;
  color: var(--text-color);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background-image: linear-gradient(var(--card-bg), var(--card-bg)), var(--brand-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* ── 8a. ONE-TIME GIVING ──────────────────────────────────── */

/* The secondary route, and it must read as secondary: the recurring ask
   is the primary path on every surface that carries both. A quiet
   bordered link rather than a second gradient control — two
   gradient-bordered buttons side by side read as a choice between
   equals, which this is not.

   44px tall like every other control here. Loaded site-wide with
   conversion.css, so the membership page gets the same treatment
   without a second ruleset. */
.ask__once { margin: 2px 0 0; }

.ask__once-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-color);
  border: 1px solid var(--border-interactive, var(--border));
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base);
}

.ask__once-link:hover { border-color: var(--brand-g1); }

/* ── 8b. THE ACTION ROW ───────────────────────────────────── */

/* The paying routes, side by side. Wraps to a stack when the pair will not
   fit; the gap is comfortably past the 8px WCAG asks between adjacent
   targets, and both controls are already 44px tall. */
.ask__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.ask__actions .ask__once { margin: 0; }
.ask__actions .ask__button { align-self: auto; }

/* Match the button's box exactly: same padding, and the button carries a
   transparent border of the same width so the two boxes resolve identically.
   Left alone they measured 62px and 64px and their labels sat two pixels out
   of line. */
.ask__actions .ask__once-link { padding: 10px 24px; }

/* ── 9. REDUCED MOTION ────────────────────────────────────── */

/* Fade in place. theme.css already zeroes the transition tokens under
   this query; the transforms have to be cancelled explicitly or the
   surface still jumps from its offscreen position. */
@media (prefers-reduced-motion: reduce) {
  .ask--popunder,
  .ask--rail {
    transform: none;
    opacity: 0;
    transition: opacity 1ms linear, visibility 1ms linear;
  }

  .ask--popunder[data-ask-visible="true"],
  .ask--rail[data-ask-visible="true"] {
    transform: none;
    opacity: 1;
  }
}

/* ── 10. PRINT ────────────────────────────────────────────── */

@media print {
  .ask--popunder,
  .ask--rail,
  .ask--mid { display: none !important; }
}