/* ============================================================
   GP Team Hub - referrals.css
   The partner list: a row per person, the three one-press updates, and
   the editor that opens inside the row.

   COLOR RULE: no literal color values. Tokens only.
   ============================================================ */

.ref{margin-top:14px;}

/* What the list adds up to, above it rather than at the end, because
   the number that matters is how many have gone quiet. */
.ref-tally{
  display:flex;flex-wrap:wrap;
  gap:8px 22px;
  padding:12px 15px;
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:12px;
}
.ref-t{font-size:.83rem;color:var(--ink-soft);}
.ref-t b{font-size:1.06rem;font-weight:700;color:var(--ink);margin-right:5px;}
.ref-t-cold b{color:var(--danger);}

.ref-list{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.ref-row{
  display:grid;
  grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr) 56px 56px minmax(96px,auto) auto;
  align-items:center;
  gap:12px;
  padding:11px 15px;
}
.ref-row + .ref-row{border-top:1px solid var(--line);}
.ref-row:hover{background:var(--surface-high);}
.ref-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ref-name{font-size:.94rem;font-weight:700;line-height:1.3;}
.ref-sub{font-size:.79rem;color:var(--ink-faint);line-height:1.35;}
.ref-note{font-size:.81rem;color:var(--ink-soft);line-height:1.45;margin-top:3px;}
.ref-contact{
  font-size:.84rem;color:var(--ink-soft);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ref-count{display:flex;flex-direction:column;align-items:center;gap:1px;}
.ref-count b{font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.1;}
.ref-count small{font-size:.64rem;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint);}
.ref-when{font-size:.79rem;color:var(--ink-faint);}

/* A partner nobody has called in two months is the point of the list,
   so the row says so in its own text rather than by tinting. */
.ref-cold .ref-when{color:var(--danger);font-weight:600;}

.ref-acts{display:flex;align-items:center;gap:5px;}
.ref-b{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink-faint);
  font-size:.8rem;
}
.ref-b:hover{background:var(--surface-page);border-color:var(--line-strong);color:var(--ink);}
.ref-b:disabled{opacity:.5;}

/* ---- The editor, inside the row it belongs to ---- */
.ref-form{
  grid-column:1 / -1;
  display:grid;
  gap:9px;
  padding:12px 0 4px;
  margin-top:8px;
  border-top:1px solid var(--line);
}
@media (min-width:760px){
  .ref-form{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ref-f-wide,
  .ref-form-acts{grid-column:1 / -1;}
}
.ref-f{display:flex;flex-direction:column;gap:4px;min-width:0;}
.ref-f > span{
  color:var(--ink-faint);
  font-size:.68rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
}
.ref-form-acts{display:flex;flex-wrap:wrap;gap:7px;}

.ref-in{
  width:100%;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:8px 11px;
  font-size:.86rem;
  min-width:0;
  outline:none;
}
.ref-in::placeholder{color:var(--ink-faint);}
.ref-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}

/* ---- The add row, at the bottom of the list it adds to ---- */
.ref-new{
  display:grid;
  grid-template-columns:minmax(120px,1.2fr) minmax(120px,1.2fr) minmax(140px,1fr) minmax(140px,1.3fr) auto;
  gap:8px;
  align-items:center;
  padding:12px 15px;
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
}

@media (max-width:900px){
  .ref-row{
    grid-template-columns:minmax(0,1fr) 56px 56px;
    row-gap:8px;
  }
  .ref-main{grid-column:1 / -1;}
  .ref-contact{grid-column:1 / -1;white-space:normal;}
  .ref-when{grid-column:1 / -1;}
  .ref-acts{grid-column:1 / -1;flex-wrap:wrap;}
  .ref-form{grid-template-columns:1fr;}
  .ref-new{grid-template-columns:1fr;}
}

/* ---- Nobody on the list yet ----
   The list keeps its own surface and the sentence sits inside it with
   the padding a row would have, so an empty list reads as an empty
   list rather than as a stray line of text on white. */
.ref-none{
  margin:0;
  padding:18px 15px;
  background:var(--surface-sunken);
  color:var(--ink-soft);
  font-size:.87rem;
  line-height:1.5;
}

/* ---- Off the list ----
   Coming off the list is a decision about this week rather than a
   deletion, so the rows that came off keep a place on the page. The
   block appears only once somebody is in it and folds shut, because
   the list being worked is what the page should open on. */
.ref-off{margin-top:12px;}
.ref-off-head{
  display:flex;align-items:center;gap:9px;
  width:100%;
  padding:10px 15px;
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink-soft);
  font:inherit;font-size:.85rem;font-weight:700;
  text-align:left;
  cursor:pointer;
}
.ref-off-head:hover{background:var(--surface-high);border-color:var(--line-strong);color:var(--ink);}
.ref-off-ic{font-size:.7rem;color:var(--ink-faint);width:10px;flex-shrink:0;}
.ref-off-n{
  margin-left:auto;
  min-width:22px;
  padding:1px 7px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  font-size:.76rem;
  text-align:center;
}
.ref-list-off{margin-top:7px;}
/* Nobody is chasing a partner who is off the list, so the count of days
   since the last call stops being the warning it is above. */
.ref-list-off .ref-when{color:var(--ink-faint);font-weight:400;}

/* Erasing asks once, in the button itself, and the ask lapses on its
   own so a stray press cannot leave it armed. */
.ref-b[data-armed="true"]{
  background:var(--accent-wash);
  border-color:var(--accent);
  color:var(--ink);
}

/* ---- Find one this week ----
   The page has something to do on it before it has anything on it. */
.nxt{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  margin-top:14px;
}
.nxt-head{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin-bottom:11px;
}
.nxt-head-ic{color:var(--accent);font-size:.92rem;align-self:center;}
.nxt-title{font-size:.98rem;font-weight:700;}
.nxt-sub{font-size:.82rem;color:var(--ink-faint);}
.nxt-picks{display:flex;flex-wrap:wrap;gap:7px;}
.nxt-pick{
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface-page);
  color:var(--ink-soft);
  font-size:.82rem;font-weight:600;
  white-space:nowrap;
}
.nxt-pick:hover{background:var(--surface-high);border-color:var(--line-strong);color:var(--ink);}
.nxt-pick.nxt-on{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:var(--ink-inverse);
}
.nxt-out{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.nxt-out[hidden]{display:none;}
.nxt-move{font-size:.92rem;line-height:1.6;color:var(--ink);max-width:82ch;}
.nxt-say{
  margin-top:9px;
  padding:11px 14px;
  background:var(--accent-wash);
  border-radius:var(--radius-sm);
  font-size:.9rem;line-height:1.55;
  color:var(--ink);
}
.nxt-acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;}