/* ==========================================================================
   Card Thing - Reasons
   Displays why a thing appears in the feed (recent rec, stats, etc.)
   ========================================================================== */

/* Reason section - fills remaining space */
.card-thing__reason {
  flex: 1;
}

/* Reason Shown Component */
.reason-shown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-width) solid var(--np-color-inverse-surface);
  border-width: var(--border-normal);
}

.reason-shown__recent {
  font-family: var(--font-primary);
  font-size: var(--type-display-md-size);
  font-weight: var(--font-weight-regular);
  line-height: 44px;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--np-color-on-surface);
}

.reason-shown__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.reason-shown__stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.reason-shown__stat {
  font-family: var(--font-primary);
  font-size: var(--type-body-xl-size);
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  color: var(--np-color-on-surface-variant);
}

.reason-shown__totals {
  display: flex;
}

.reason-shown__total-all,
.reason-shown__total-network {
  font-family: var(--font-primary);
  font-size: var(--text-normal-size);
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  padding-inline: var(--space-2);
  color: var(--np-color-on-surface-variant);
  border-inline-end: var(--border-normal) var(--np-color-on-surface-variant);
}

.reason-shown__total-network {
  border-inline-end: none;
}

/* ==========================================================================
   Card Thing v2 - Reason Area
   ========================================================================== */

/* Reason Area - fills remaining space in info container */
.card-thing__reason-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  min-height: 0;
}

.card-thing__main-reason {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-primary);
  font-size: var(--text-card-reason-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-card-reason-line-height);
  letter-spacing: var(--text-card-reason-letter-spacing);
  color: var(--np-color-on-surface);
}

.card-thing__reason-icon .material-symbols-outlined {
  font-size: var(--size-icon-xl);
  font-variation-settings: "wght" 200, "OPSZ" 40;
}

.card-thing__stats-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.card-thing__stat-item {
  font-family: var(--font-primary);
  font-size: var(--text-card-stats-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--text-card-stats-line-height);
  color: var(--np-color-on-surface-variant);
}