/* Share offer popup. Shown on the two course pages when an Enroll button is
   clicked, before the handoff to Stripe hosted checkout.

   Kept in its own stylesheet rather than added to styles.css because
   styles.css loads on all five public pages plus the portal and admin, and
   this feature belongs to exactly two pages. Same reasoning as shell.css.

   The script reads back the computed position of the popup root and refuses
   to run at all if this file failed to load, so a missing stylesheet turns
   the feature off instead of dumping unstyled text over a dead buy button.

   Every colour here is an existing brand token. No new colours, no gradients.
   The one literal is the Facebook blue inside the logo, which Meta requires
   to stay exactly as issued. */

.so-root {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.so-root.is-mounted { display: flex; }

.so-scrim {
  position: absolute;
  inset: 0;
  background: rgba(27, 42, 74, .38);
  opacity: 0;
  transition: opacity .16s ease;
}
.so-root.is-open .so-scrim { opacity: 1; }

.so-dialog {
  position: relative;
  width: 100%;
  max-width: 34rem;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.so-root.is-open .so-dialog { opacity: 1; transform: none; }

/* Close affordance in the corner. Sized to the 44px touch target guidance. */
.so-x {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.so-x:hover { color: var(--ink); background: var(--mist); }

.so-dialog h2 {
  font-family: var(--serif);
  color: var(--ink);
  font-size: clamp(1.45rem, 3.4vw, 1.85rem);
  line-height: 1.18;
  margin: .5rem 0 0;
  outline: none;
}
.so-lede {
  font-family: var(--sans);
  color: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  margin: .7rem 0 0;
}
.so-label {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.5rem 0 .5rem;
}

/* The suggested post. Selectable on purpose so that if both clipboard paths
   fail the visitor can still highlight it and copy by hand. */
.so-caption {
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--mist);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius-sm);
  margin: 0;
  padding: .9rem 1rem;
  white-space: pre-wrap;
  user-select: text;
}
.so-note {
  font-family: var(--sans);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--muted);
  margin: .6rem 0 0;
}
.so-note a { color: var(--teal); }

.so-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem;
  margin-top: 1.5rem;
}
.so-actions .btn { flex: 0 0 auto; }

/* The quiet link style is written for anchors, so a button borrowing it
   needs the user agent button chrome removed. */
.so-actions button.text-link,
.so-copy-inline {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* Facebook share button. The mark keeps its issued colour and is never
   recoloured, outlined or shadowed, per the Meta brand guidelines. Clear
   space is one quarter of the logo width, which is the gap below. */
.so-share { gap: .6rem; }
.so-fb {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: block;
}

.so-copy { margin-top: .8rem; }

/* Revealed code. */
.so-code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem;
  margin-top: 1.25rem;
}
.so-code {
  font-family: var(--sans);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink);
  background: var(--teal-soft);
  border: 1px dashed var(--teal-line);
  border-radius: var(--radius-sm);
  padding: .75rem 1.35rem;
  user-select: all;
}

.so-status {
  font-family: var(--sans);
  font-size: .84rem;
  color: var(--teal-dark);
  margin: .9rem 0 0;
  min-height: 1.2em;
}

@media (max-width: 520px) {
  .so-actions { flex-direction: column; align-items: stretch; }
  .so-actions .btn { width: 100%; }
  .so-actions button.text-link { text-align: center; }
  /* The suggested post is long enough to push the buttons off a short
     screen. Give it its own scroll so the share action stays in view. */
  .so-caption { max-height: 9rem; overflow-y: auto; }
  .so-copy { width: 100%; }
}

/* Motion is decorative only. Under reduced motion the final state is
   rendered immediately, matching site.js and the page load overlay. */
@media (prefers-reduced-motion: reduce) {
  .so-scrim, .so-dialog { transition: none; }
  .so-dialog { transform: none; }
}