/* --------------------------------------------------------------------------
   Affiliates

   A list of partners and the one that is open beside it, the same shape as the company
   workspace. The list row carries the facts a partner call opens with — who, what rate,
   what we owe — so most questions are answered before a partner is opened at all.

   The page itself should not scroll while Partners is open. The grid is sized to the
   window below the header (`--chrome-h`, measured at runtime), and the list and the open
   partner each scroll inside their own box. Scrolling the page to find a partner, then
   again to find their payouts, was most of the work of using this screen.
   -------------------------------------------------------------------------- */

#view-affiliates > h2 { margin-bottom: var(--xs); }
.aff-intro { margin: 0 0 var(--sm); }

.aff-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sm) var(--md);
}
.aff-controls #affiliate-new { margin-left: auto; }
#affiliate-summary { margin: var(--xs) 0 var(--sm); }

.aff-grid {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: var(--md);
  align-items: stretch;
  /* The window, less the header and everything else on the page when Partners is open:
     measured at 1440×900 as 263px above the grid (title, intro, panel summary, filters)
     and 155px below it (the Payouts and Plans summaries and the page's own padding). */
  height: clamp(380px, calc(100dvh - var(--chrome-h, 56px) - 420px), 1100px);
}

.aff-list {
  height: 100%;
  overflow-y: auto;
  border: 1px solid var(--rule);
}

.aff-row {
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 6px var(--md);
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.aff-row:last-child { border-bottom: 0; }
.aff-row:hover { background: var(--paper-lit); }
.aff-row.selected { background: var(--paper-lit); border-left-color: var(--ink); }
.aff-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.aff-name { font-weight: 600; overflow-wrap: anywhere; }
.aff-row.selected .aff-name { font-weight: 650; }
.aff-meta,
.aff-money { font-size: 0.8125rem; color: var(--ink-secondary); }
.aff-money { font-variant-numeric: tabular-nums; }
.aff-flags:empty { display: none; }

/* The open partner: a head that stays put, tabs under it, and one tab's content. */
.aff-pane {
  height: 100%;
  min-width: 0;
  overflow-y: auto;
  border: 1px solid var(--rule);
}
.aff-pane .pane-empty,
.aff-pane #affiliate-detail > .result,
.aff-pane #affiliate-detail > .loading { margin: var(--md); }

.aff-sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
}
.aff-head { padding: var(--sm) var(--md) var(--xs); }
.aff-head h4 { margin: 0; }
.aff-headline { margin: 2px 0 0; font-size: 0.8125rem; color: var(--ink-secondary); }
.aff-tabs { padding: 0 var(--md); }

.aff-tabpanel { padding: var(--md); }
.aff-tabpanel > :first-child { margin-top: 0; }
.aff-facts { margin: 0 0 var(--md); }
.aff-plan { flex-wrap: wrap; align-items: end; gap: var(--sm); margin: 0 0 var(--md); }
#affiliate-actions { padding: 0 var(--md) var(--md); }

/* Payouts and plans are registers that grow every month. They scroll in their own box,
   under a header that stays, rather than pushing the next panel off the screen. */
#payout-list .scroller,
#plan-list .scroller {
  max-height: clamp(240px, calc(100dvh - var(--chrome-h, 56px) - 360px), 900px);
  overflow-y: auto;
}
#payout-list thead th,
#plan-list thead th,
.aff-tabpanel thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper-lit);
}

.aff-payouts td { vertical-align: top; }
.aff-actions { white-space: nowrap; }
.aff-actions button + button { margin-left: var(--xs); }

.plan-ladder { font-variant-numeric: tabular-nums; }

/* Narrow: stack, and let the page scroll again — two boxes each a third of a phone
   screen tall is worse than one long page. */
@media (max-width: 900px) {
  .aff-grid { grid-template-columns: 1fr; height: auto; }
  .aff-list { height: auto; max-height: 36vh; }
  .aff-pane { height: auto; overflow: visible; }
  .aff-sticky { position: static; }
}