/* Participation history request page: intro, benefits and the email form on
   the left; a mock of the email the visitor receives alongside, framed like
   the homepage step previews. Sits on a white canvas like the homepage. */
body:has(.history-shell) {
  background-color: #fff;
}

.history-page {
  --history-panel: #edf8ff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--spacing-5xl);
  row-gap: var(--spacing-3xl);
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--spacing-4xs) var(--spacing-xl) 6rem;
}

/* Same block rhythm as the app's centered pages (title + subtitle, then
   32px between blocks) */
.history-page__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
}

.history-page__body {
  margin: 0;
  line-height: 1.5;
  color: var(--text-primary);
}

.history-page__main [data-controller="turnstile"] {
  display: flex;
  justify-content: center;
  text-align: center;
}

.history-page__note {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.history-page__note p {
  margin: 0;
}

.history-page__benefits-title {
  font-size: var(--font-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
}

.history-page__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-page__benefit {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-md);
  line-height: 1.4;
  color: var(--text-primary);
}

.history-page__benefit strong {
  font-weight: var(--font-weight-semibold);
}

/* Check in a soft green disc, the success badge colour */
.history-page__benefit-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--rounded-full);
  background: #e6f4d8;
  color: var(--interactive-primary);
}

.history-page__benefit-check svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

/* --- Email preview -------------------------------------------------------- */
.history-panel {
  display: flex;
  justify-content: center;
  padding: var(--spacing-4xl) var(--spacing-2xl) 0;
  background: var(--history-panel);
  border-radius: var(--unit-32);
}

/* Mail-client window that fades into the panel so the list reads as continuing */
.history-mail {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: var(--unit-16) var(--unit-16) 0 0;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
}

.history-mail__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--background-neutral);
}

.history-mail__dots {
  display: flex;
  gap: var(--spacing-3xs);
}

.history-mail__dots i {
  width: 10px;
  height: 10px;
  border-radius: var(--rounded-full);
  background: rgb(0 0 0 / 0.12);
}

.history-mail__chrome-label {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.history-mail__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--background-screen);
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.history-mail__subject {
  font-size: var(--font-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.history-mail__from {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2xs);
}

.history-mail__sender-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--rounded-3xs);
  background: var(--interactive-primary);
  font-family: var(--font-family-bricolage);
  font-weight: var(--font-weight-bold);
  color: white;
}

.history-mail__sender {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.history-mail__to strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.history-mail__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-3xl);
}

.history-mail__heading {
  font-family: var(--font-family-bricolage);
  font-size: var(--font-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
}

/* Cards mirror the email template (same tinted background). The action
   pills are outlined rather than filled so they don't pass for real buttons. */
.history-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  padding: var(--spacing-md);
  background: var(--background-screen);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--rounded-xs);
}

.history-item__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.history-item__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid #e8e8e8;
  border-radius: var(--rounded-3xs);
}

.history-item__pot {
  flex: 1;
  min-width: 0;
  font-weight: var(--font-weight-semibold);
}

.history-item__amount {
  margin-left: auto;
  font-family: var(--font-family-bricolage);
  font-size: var(--font-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  white-space: nowrap;
  text-align: right;
}

.history-item__date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2xs);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.history-item__message {
  margin: 0;
  font-size: var(--font-sm);
  font-style: italic;
  color: var(--text-secondary);
}

.history-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
  margin-top: var(--spacing-3xs);
}

.history-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3xs);
  padding: var(--spacing-4xs) var(--spacing-xs);
  border: 1px dashed var(--color-border-neutral);
  border-radius: var(--rounded-full);
  font-size: var(--unit-12);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  user-select: none;
}

.history-chip--primary {
  border-color: var(--interactive-primary);
  color: var(--interactive-primary);
}

.history-chip svg {
  width: 14px;
  height: 14px;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 48rem) {
  .history-page {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--spacing-3xl);
    padding: var(--spacing-xl) var(--spacing-md) 6rem;
  }

  .history-panel {
    padding: var(--spacing-2xl) var(--spacing-md) 0;
  }
}