/* =====================================================================
   RESPONSIVE - base above is the phone; these widen it.
   ===================================================================== */
@media (min-width: 620px) {
  .aff-rates { grid-template-columns: repeat(2, 1fr); }
  .aff-rules { grid-template-columns: repeat(2, 1fr); }
  .aff-balance__grid { grid-template-columns: repeat(4, 1fr); }
  .aff-linkbox {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .aff-linkbox__actions { flex: 0 0 auto; }
  .aff-linkbox__actions .btn { flex: 0 0 auto; }

  /* Horizontal funnel once there's room for three columns + two arrows. */
  .aff-funnel { flex-direction: row; align-items: stretch; }
  .aff-funnel__step { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .aff-funnel__arrow { flex-direction: column; padding: 0 4px; }
  .aff-funnel__arrow svg { transform: none; }
}

@media (min-width: 900px) {
  .aff-rates { grid-template-columns: repeat(3, 1fr); }
  .aff-rules { grid-template-columns: repeat(3, 1fr); }
}

/* The theme sweep overlay is created by script.js, which this page doesn't
   load. Nothing to do here - the toggle just swaps data-theme, and every
   colour above is a token, so both themes follow automatically. */

@media (prefers-reduced-motion: reduce) {
  .aff-rail__btn,
  .aff-input { transition: none; }
}

/* ---- Referral breakdown + timing strip ---- */
@media (min-width: 620px) {
  /* Two timing cards side by side once both fit without cramping. */
  .aff-timing { grid-template-columns: repeat(2, 1fr); }

  /* Referral card becomes a row: identity left, money right, so a long list
     scans vertically down the amounts instead of zig-zagging. */
  .aff-ref {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "top   money"
      "meta  money"
      "hint  hint";
    column-gap: 20px;
    align-items: start;
  }
  .aff-ref__top   { grid-area: top; justify-content: flex-start; gap: 10px; }
  .aff-ref__meta  { grid-area: meta; }
  .aff-ref__money {
    grid-area: money;
    margin-top: 0;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 2px;
  }
  .aff-ref__next { flex-basis: auto; }
  .aff-ref__hint { grid-area: hint; }
}