/* ============================================================
   GP Team Hub - process.css
   The Process page's own pieces: the SPICED letter picker and the
   Salesforce view cards. Split out because tools.css reached its
   size ceiling.
   ============================================================ */

/* ---- S.P.I.C.E.D. ----
   Six letters as the control, one panel open. The letter is the label
   a rep already carries in their head, so it is what they click. */
.spiced{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:8px;
  margin-top:14px;
}
.spiced-letter{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 8px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
}
.spiced-letter:hover,
.spiced-letter.spiced-on{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
}
.spiced-l{
  font-size:1.5rem;font-weight:700;line-height:1;
  letter-spacing:-.5px;
  color:var(--ink-faint);
}
.spiced-word{
  font-size:.78rem;font-weight:600;
  color:var(--ink-soft);
  text-align:center;line-height:1.3;
}
.spiced-letter:hover .spiced-l,
.spiced-letter:hover .spiced-word,
.spiced-on .spiced-l,
.spiced-on .spiced-word{color:var(--ink-inverse);}

.spiced-panel{margin-top:16px;}
.spiced-panel[hidden]{display:none;}
.spiced-head{
  font-size:1rem;font-weight:700;
  color:var(--ink);
}
.spiced-ask{
  margin:5px 0 14px;
  font-size:.92rem;line-height:1.6;
  color:var(--ink-soft);
}
.spiced-good,
.spiced-bad{
  margin:0;
  font-size:.9rem;line-height:1.6;
  color:var(--ink-soft);
}
.spiced-good{font-weight:600;color:var(--ink);}

/* ---- Salesforce views ----
   A card per view rather than a table row, because the thing a rep
   does with this is find one name and go set it up. */
.viewcard{
  display:flex;flex-direction:column;gap:4px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  color:var(--ink);
}
.viewcard:hover{background:var(--surface-high);border-color:var(--line-strong);text-decoration:none;}
.viewcard-top{display:flex;align-items:center;gap:9px;}
.viewcard-rec{
  font-size:.7rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink-faint);
}
.viewcard-tag{
  margin-left:auto;
  font-size:.68rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  background:var(--accent);
  color:var(--ink-inverse);
  border-radius:var(--radius-pill);
  padding:2px 9px;
}
.viewcard-name{font-size:.96rem;font-weight:700;line-height:1.3;}
.viewcard-use{font-size:.82rem;line-height:1.5;color:var(--ink-soft);}
.viewcard-pref{border-color:var(--accent-edge);}

/* ---- Incentives by month ----
   One row per one-pager on file, because the fact is which sheets
   existed that month rather than a comparison across months. */
.inc-month{display:grid;gap:6px;margin-top:14px;}
.inc-month-row{
  display:grid;
  grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr);
  align-items:baseline;
  gap:11px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px 13px;
}
.inc-month-ic{font-size:.82rem;color:var(--ic);}
.inc-month-name{font-size:.9rem;font-weight:600;color:var(--ink);}
.inc-month-terms{font-size:.82rem;color:var(--ink-soft);}
@media (max-width:700px){
  .inc-month-row{grid-template-columns:auto minmax(0,1fr);}
  .inc-month-terms{grid-column:2;}
}

/* ---- Numbers: the four that answer most of it, and the inboxes ---- */
.num-top{align-items:stretch;margin-top:6px;}
.num-top > .card{display:flex;flex-direction:column;}

/* The four fill whatever height the inbox list settles at, so the two
   cards finish level without either being padded to fake it. */
.numfour{
  flex:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:8px;
}
.numfour-card{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 13px;
  color:var(--ink);
}
.numfour-card:hover{background:var(--surface-high);border-color:var(--line-strong);text-decoration:none;}
/* The name is what a rep scans for, so it is read at a glance rather
   than as a caption over the number. */
.numfour-who{
  font-size:.84rem;font-weight:700;letter-spacing:.2px;
  color:var(--ink);
}
.numfour-num{
  display:flex;align-items:center;gap:7px;
  font-size:1.06rem;font-weight:700;letter-spacing:-.2px;
  white-space:nowrap;
}
.numfour-num i{font-size:.75rem;color:var(--ink-faint);}
.numfour-for{font-size:.77rem;line-height:1.4;color:var(--ink-soft);}

/* Every inbox on screen at once. The list was scrolling inside a fixed
   height, which hid half of it behind a bar nobody looks for. */
.inbox-hold{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.inbox{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  font-size:.82rem;
}
.inbox tr + tr td{border-top:1px solid var(--line);}
.inbox td{padding:4px 8px;vertical-align:middle;}
.inbox-c{width:28px;}
/* The address takes a narrower column than it did, which is what gives
   the description room to be read. */
.inbox-a{width:31%;}
.inbox-a a{font-weight:600;}
.inbox-w{color:var(--ink-soft);}

/* A cell is its own scroller: drag it sideways to read the rest, with
   no bar of its own to take up a row's height. */
.inbox-a,
.inbox-w{position:relative;padding-right:0;}
.inbox-x{
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-right:8px;
}
.inbox-x::-webkit-scrollbar{display:none;}
/* Marked by dial.js only where the text really is cut off. The mark
   fades the last of the text out rather than dropping a block on top of
   it, so an address ends mid-word instead of mid-letter. */
.inbox-cut::after{
  content:"\2026";
  position:absolute;
  top:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:flex-end;
  width:34px;
  padding-right:6px;
  background:linear-gradient(to right, transparent, var(--surface-raised) 55%);
  color:var(--ink-faint);
  pointer-events:none;
}
.inbox tr:hover td{background:var(--surface-high);}
.inbox tr:hover .inbox-cut::after{background:linear-gradient(to right, transparent, var(--surface-high) 55%);}
.inbox-copy{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;
  border-radius:var(--radius-sm);
  font-size:.76rem;
  color:var(--ink-faint);
}
.inbox-copy:hover{background:var(--surface-high);color:var(--ink);}
.inbox-copy[data-done="1"]{color:var(--accent);}

@media (max-width:520px){
  .numfour{grid-template-columns:1fr;grid-auto-rows:auto;}
  .inbox-w{display:none;}
  .inbox-a{width:auto;}
}