/* On-this-day memories — warm card + Rediscover section. Follows the app's
   quote convention (calendar-preview__excerpt): gold left rule, soft bg. */

.on-this-day-card {
  margin-top: var(--space-4);
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 5%, var(--surface));
}

.on-this-day-card__heading .eyebrow {
  margin-bottom: var(--space-1);
}

.on-this-day-card__heading h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
  letter-spacing: -.02em;
}

.on-this-day-list {
  display: grid;
  gap: var(--space-4);
}

.on-this-day-memory + .on-this-day-memory {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.on-this-day-memory__meta {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.on-this-day-memory__quote {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid color-mix(in srgb, var(--gold) 55%, var(--border));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: color-mix(in srgb, var(--gold) 6%, var(--surface-elevated));
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.on-this-day-memory__open {
  min-height: 44px;
}

/* Rediscover view: same card, shown as a full-width section above the list. */
.on-this-day-section {
  margin-bottom: var(--space-4);
}

.on-this-day-section .on-this-day-card__heading h2 {
  font-size: var(--text-lg);
}

:root[data-theme="night"] .on-this-day-card {
  border-left-color: color-mix(in srgb, var(--gold) 80%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, var(--surface));
}

:root[data-theme="night"] .on-this-day-memory__quote {
  border-left-color: color-mix(in srgb, var(--gold) 45%, var(--border));
  background: color-mix(in srgb, var(--gold) 9%, var(--surface-elevated));
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .on-this-day-card {
    animation: none;
  }
}