/* ==========================================================================
   Report flow — the pieces that follow a submission around.

   Two components, two pages:

     .track-block   The optional "follow what happens to it" panel on the
                    report form's thank-you screen. One email box, one
                    button, one status line. It must read as an offer, not
                    a demand — anonymous is the default and the copy above
                    the box says so.

     .share         The share row on a report's public page. A row of
                    ordinary buttons; on browsers with navigator.share it
                    collapses to one.

   Tokens only, no new colour. Buttons inherit the site's .btn styles and
   the global :focus-visible ring from base.css; nothing here animates, so
   there is nothing for prefers-reduced-motion to switch off.
   ========================================================================== */

/* ---- Track this report --------------------------------------------------- */

.track-block {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: var(--border-width) solid var(--border);
  border-left: var(--rule-heavy) solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
}

.track-block h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
}

.track-block p {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.track-block__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: stretch;
}

/* The input takes the room; the button keeps its size. At 375px both wrap
   to full-width rows rather than squeezing. */
.track-block__form .input {
  flex: 1 1 220px;
  min-width: 0;
}

.track-block__form .btn {
  flex: 0 0 auto;
}

.track-block__status {
  margin: var(--space-2) 0 0;
  min-height: 1.2em; /* Keeps the layout still when the message appears. */
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.track-block__status--ok {
  color: var(--success);
}

.track-block__status--error {
  color: var(--danger);
}

/* ---- Share row ------------------------------------------------------------ */

.share__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Long labels ("Share on Facebook") must never force a sideways scroll on a
   phone: let each button shrink and wrap its text before the row overflows. */
.share__row .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.share__status {
  margin: var(--space-2) 0 0;
  min-height: 1.2em;
  color: var(--success);
}