/* ============================================================================
   OneMediaKit — the affiliate page. Loads AFTER assets/site.css and reuses
   its sections, steps, tiles, notes, forms and tables; only what the page
   adds lives here. Light only, mobile first, tokens from tokens.css.
   ============================================================================ */

.omk-affiliate-page { background: var(--paper); color: var(--ink); }

/* The dashboard tiles hold a code and a long URL: let them wrap, and give
   the two of them a monospace face so a code is easy to copy by eye. */
#dashboard .omk-tile-value {
  font-size: var(--text-base);
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;
}
#dashboard .omk-tile:nth-child(1) .omk-tile-value,
#dashboard .omk-tile:nth-child(2) .omk-tile-value {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
#dashboard .omk-tile:nth-child(1) .omk-tile-value {
  font-size: var(--text-h3);
  letter-spacing: 0.08em;
}

/* Money reads as a figure, not as prose. */
#dashboard .omk-tile:nth-child(n + 5) .omk-tile-value {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

/* The rules list is the part people actually have to read: give it room. */
#rules .omk-list li { margin-bottom: var(--space-3); max-width: 62ch; }

/* The post-submission card sits inside the dashboard section. */
#post { margin-top: var(--space-6); }
#post .omk-input[type="url"] { font-family: var(--font-mono); font-size: var(--text-small); }

/* Both public forms stack on one column and stay thumb-sized on a phone. */
.omk-affiliate-page .omk-form .omk-label { display: block; margin-top: var(--space-3); }
.omk-affiliate-page .omk-form .omk-input { width: 100%; }

@media (min-width: 720px) {
  #dashboard .omk-tiles { grid-template-columns: repeat(4, 1fr); }
  #dashboard .omk-tile:nth-child(2) { grid-column: span 3; }
}