/* Affiliate portal. Every colour, radius and space is a var() from tokens.css
   (GENERATED by tools/design_tokens.py --css) — no literals here. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-24); }

/* header */
.top { border-bottom: 1px solid var(--hairline); background: var(--surface); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--s-16); }
.brand { font-weight: 800; letter-spacing: -0.018em; font-size: 18px; color: var(--ink); text-decoration: none; }
.brand span { color: var(--ink-subtle); font-weight: 500; }
.who { display: flex; align-items: center; gap: var(--s-12); color: var(--ink-muted); font-size: 14px; }
.who form { margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch-target-min); padding: 0 var(--s-16);
  border-radius: var(--r-md); border: 1px solid transparent;
  font: 600 14px/1 var(--sans); cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--ink-muted); border-color: var(--hairline); }
.btn-ghost:hover { background: var(--surface-hover); }
.btn:focus-visible, input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* page head */
.head { padding: var(--s-48) 0 var(--s-24); }
.head h1 { margin: 0 0 var(--s-8); font-size: 36px; font-weight: 800; line-height: 1.12; letter-spacing: -0.036em; }
.deal { display: inline-flex; gap: var(--s-8); align-items: center; padding: var(--s-8) var(--s-12);
        background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--r-pill);
        color: var(--ink); font-size: 14px; }
.deal b { font-weight: 600; }
.banner { margin-top: var(--s-16); padding: var(--s-12) var(--s-16); border-radius: var(--r-md);
          background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-fg); font-size: 14px; }

/* KPI grid: 3-up desktop, 2-up tablet+mobile (house layout rule, mobile 2-up because the numbers are short) */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-16); }
.kpi { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-24); }
.kpi .label { color: var(--ink-subtle); font-size: 13px; font-weight: 500; margin-bottom: var(--s-8); }
.kpi .value { font-size: 42px; font-weight: 800; line-height: 1.05; letter-spacing: -0.042em; font-variant-numeric: tabular-nums; }
.kpi .sub { color: var(--ink-subtle); font-size: 13px; margin-top: var(--s-8); }
.kpi.hero { background: var(--accent-soft); border-color: var(--accent-border); }
.kpi.hero .value { color: var(--accent); }

/* sections + tables */
.section { margin-top: var(--s-48); }
.section h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.018em; margin: 0 0 var(--s-4); }
.section .hint { color: var(--ink-subtle); font-size: 14px; margin: 0 0 var(--s-16); }
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; font-size: 13px; color: var(--ink-subtle); background: var(--surface-sunk);
     padding: var(--s-12) var(--s-16); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
td { padding: var(--s-12) var(--s-16); border-bottom: 1px solid var(--hairline-soft); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.strong { font-weight: 600; }
.neg { color: var(--danger-fg); }
.empty { padding: var(--s-32) var(--s-16); color: var(--ink-subtle); text-align: center; font-size: 14px; }

.pill { display: inline-block; padding: var(--s-2) var(--s-8); border-radius: var(--r-pill); font-size: 12px; font-weight: 600; border: 1px solid; }
.pill.ok { color: var(--success-fg); background: var(--success-bg); border-color: var(--success-border); }
.pill.off { color: var(--ink-subtle); background: var(--surface-2); border-color: var(--hairline); }
.pill.info { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-border); }
.pill.warn { color: var(--warning-fg); background: var(--warning-bg); border-color: var(--warning-border); }

.foot { color: var(--ink-subtle); font-size: 13px; padding: var(--s-48) 0 var(--s-64); }

/* auth pages */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s-24) var(--s-16); }
.auth .box { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--hairline);
             border-radius: var(--r-xl); padding: var(--s-32); }
.auth h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.028em; line-height: 1.18; margin: var(--s-16) 0 var(--s-8); }
.auth p { color: var(--ink-muted); margin: 0 0 var(--s-24); font-size: 15px; }
.auth label { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--s-8); }
.auth input { width: 100%; min-height: var(--touch-target-min); padding: 0 var(--s-12); font: 16px var(--sans);
              color: var(--ink); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--r-md); }
.auth input:hover { border-color: var(--field-border-hover); }
.auth .btn { width: 100%; margin-top: var(--s-16); }
.flash { margin-bottom: var(--s-16); padding: var(--s-12); border-radius: var(--r-md); font-size: 14px;
         background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-fg); }

@media (max-width: 1023px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .wrap { padding: 0 var(--s-16); }
  .head { padding: var(--s-32) 0 var(--s-16); }
  .head h1 { font-size: 28px; letter-spacing: -0.028em; }
  .kpis { gap: var(--s-12); }
  .kpi { padding: var(--s-16); }
  .kpi .value { font-size: 28px; letter-spacing: -0.028em; }
  .who .name { display: none; }
  .section { margin-top: var(--s-32); }
  .deal { display: block; border-radius: var(--r-md); }

  /* tables become one card per row: the money column is never scrolled off-screen */
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tr { padding: var(--s-12) var(--s-16); border-bottom: 1px solid var(--hairline); }
  tr:last-child { border-bottom: 0; }
  td { display: flex; justify-content: space-between; align-items: center; gap: var(--s-12);
       padding: var(--s-4) 0; border: 0; white-space: normal; }
  td::before { content: attr(data-label); color: var(--ink-subtle); font-size: 13px; font-weight: 500; }
  td:first-child { font-weight: 600; font-size: 15px; padding-bottom: var(--s-8); }
  td:first-child::before, td[data-label=""]::before { content: none; }
  td.num { text-align: right; }
}