/* CLAUDE 10-24: Account > Affiliate (affiliate.js). Graphite like Team: hairlines, no boxes, one primary (Copy link). */

.af .page-head {
  display: block;
  margin-bottom: var(--s-5);
  text-align: left;
}
.af .page-sub {
  margin: var(--s-1) 0 0;
  color: var(--c-fg-2);
}
.af-sec {
  max-width: 560px;
  margin-bottom: var(--s-6);
}
.af-sec h3 {
  margin: 0 0 var(--s-3);
  color: var(--c-fg);
  font-size: var(--t-body);
  font-weight: 600;
}
.af-link {
  display: flex;
  gap: var(--s-2);
}
.af-link .m-field {
  flex: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.af-hint {
  margin: var(--s-2) 0 0;
  color: var(--c-fg-3);
  font-size: var(--t-label);
}

/* the numbers: label, value, a quiet note; a hairline under each, two columns where there is room */
.af-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* two columns on a phone */
  gap: 0 var(--s-5);
  max-width: 560px;
  margin: 0 0 var(--s-5);
}
.af-stats > div {
  display: grid;
  gap: 2px;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-line);
}
.af-stats dt {
  color: var(--c-fg-2);
  font-size: var(--t-label);
}
.af-stats dd {
  margin: 0;
  color: var(--c-fg);
  font-size: var(--t-page);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.af-stats small {
  color: var(--c-fg-3);
  font-size: var(--t-label);
}
.af-fine {
  max-width: 560px;
  margin: 0;
  color: var(--c-fg-3);
  font-size: var(--t-label);
}
.af-fine a {
  color: var(--c-fg-2);
}