/* ============================================================
   GP Team Hub - stages.css
   The pipeline stage picker and the panel it opens. Each of the seven
   stages is built from the blocks its own content needs, so the rules
   here are per block rather than per stage.

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

.stg-pick{
  display:flex;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:4px;
}
.stg-pick::-webkit-scrollbar{display:none;}

.stg-chip{
  position:relative;
  flex:1 0 108px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:14px 6px 12px;
  font-size:.78rem;
  font-weight:600;
  line-height:1.3;
  text-align:center;
  color:var(--ink-faint);
}

/* The connecting track runs behind the nodes, stopping at each end. */
.stg-chip::before{
  content:"";
  position:absolute;
  top:calc(14px + 17px);
  left:0;right:0;
  height:2px;
  background:var(--line);
  z-index:0;
}
.stg-chip:first-child::before{left:50%;}
.stg-chip:last-child::before{right:50%;}

.stg-n{
  position:relative;
  z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex-shrink:0;
  border-radius:var(--radius-pill);
  background:var(--surface-high);
  border:2px solid var(--line);
  color:var(--ink-soft);
  font-size:.88rem;font-weight:700;
  transition:background .14s,border-color .14s,color .14s;
}
/* Same rule as the deal track: hover fills, and the selected stage
   keeps its fill while the pointer is on it. */
.stg-chip:hover{color:var(--ink);}
.stg-chip:hover .stg-n,
.stg-on .stg-n{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:var(--ink-inverse);
}
.stg-on:hover .stg-n{background:var(--accent-hover);border-color:var(--accent-hover);}

.stg-on{color:var(--ink);}

.stg-name{display:block;}

.stg-out{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-raised);
  padding:16px 17px;
  margin-top:12px;
}
.stg-out-head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:1.06rem;font-weight:700;line-height:1.35;
  color:var(--ink);
  padding-bottom:12px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.stg-out-head i{font-size:.94rem;color:var(--accent);align-self:center;}
.stg-when{
  margin-left:auto;
  color:var(--ink-faint);
  font-size:.79rem;font-weight:400;
}
.stg-block{margin-top:16px;}
.stg-block:first-of-type{margin-top:0;}
.stg-label{
  color:var(--ink-faint);font-size:.68rem;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;margin-bottom:7px;
}

/* The stage in one sentence, set large enough to be the thing a rep
   reads first and often the only thing they need. */
.stg-lead{
  font-size:1rem;line-height:1.6;
  color:var(--ink);
  max-width:88ch;
  margin:0;
}
.stg-lead + .stg-block,
.stg-lead + .stg-tbl,
.stg-lead + .stg-split,
.stg-lead + .stg-rules{margin-top:16px;}

/* ---- Steps: an order that matters ---- */
.stg-steps{
  counter-reset:stg;
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.stg-steps li{
  counter-increment:stg;
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  align-items:start;
  gap:11px;
  font-size:.91rem;line-height:1.55;
  color:var(--ink-soft);
}
.stg-steps li::before{
  content:counter(stg);
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  border-radius:var(--radius-pill);
  background:var(--surface-high);
  color:var(--ink);
  font-size:.78rem;font-weight:700;
}

/* ---- Checks: conditions that are all required ---- */
.stg-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.stg-checks li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.91rem;line-height:1.55;
  color:var(--ink-soft);
}
.stg-checks li i{color:var(--accent);font-size:.85rem;line-height:1.7;flex-shrink:0;}

/* ---- Rules: the short list that decides the stage ---- */
.stg-rules{
  margin-top:16px;
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:13px 15px;
}
.stg-rules-head{
  display:flex;align-items:center;gap:9px;
  font-size:.83rem;font-weight:700;
  color:var(--ink);
  margin-bottom:8px;
}
.stg-rules-head i{color:var(--danger);font-size:.85rem;}
.stg-rules ul{margin:0;padding-left:18px;}
.stg-rules li{font-size:.88rem;line-height:1.55;color:var(--ink-soft);}
.stg-rules li + li{margin-top:5px;}

/* ---- Table: a branch, read across ---- */
.stg-tbl{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.stg-tbl-head,
.stg-tbl-row{
  display:grid;
  grid-template-columns:repeat(var(--stg-cols,3),minmax(0,1fr));
  gap:12px;
  padding:9px 13px;
}
.stg-tbl-head{
  background:var(--surface-high);
  border-bottom:1px solid var(--line);
  font-size:.66rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-faint);
}
.stg-tbl-row + .stg-tbl-row{border-top:1px solid var(--line);}
.stg-tbl-row span{font-size:.87rem;line-height:1.5;color:var(--ink-soft);}
.stg-tbl-row .stg-tbl-k{color:var(--ink);font-weight:600;}

/* ---- Facts: short label, short value ---- */
.stg-facts{
  display:grid;
  grid-template-columns:minmax(90px,auto) minmax(0,1fr);
  gap:6px 14px;
  margin:0;
}
.stg-facts dt{font-size:.8rem;font-weight:700;color:var(--ink);}
.stg-facts dd{margin:0;font-size:.87rem;line-height:1.5;color:var(--ink-soft);}

/* ---- Split: two outcomes and what each pays ---- */
.stg-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.stg-opt{
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:13px 15px;
}
.stg-opt-name{
  font-size:.7rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-faint);
}
.stg-opt-fig{
  font-size:1.5rem;font-weight:700;letter-spacing:-.5px;
  color:var(--accent);
  line-height:1.15;
  margin-top:4px;
}
.stg-opt-under{font-size:.79rem;color:var(--ink-faint);margin-top:2px;}
.stg-opt ul{margin:10px 0 0;padding-left:17px;}
.stg-opt li{font-size:.85rem;line-height:1.5;color:var(--ink-soft);}
.stg-opt li + li{margin-top:4px;}

/* ---- The line that ends the stage ---- */
.stg-done{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:16px;
  padding:11px 14px;
  background:var(--accent-wash);
  border-radius:var(--radius-sm);
  font-size:.89rem;line-height:1.55;
  color:var(--ink);
}
.stg-done i{color:var(--accent);font-size:.88rem;line-height:1.7;flex-shrink:0;}

@media (max-width:700px){
  .stg-split{grid-template-columns:1fr;}
  .stg-tbl-head{display:none;}
  .stg-tbl-row{grid-template-columns:1fr;gap:4px;}
  .stg-facts{grid-template-columns:1fr;gap:2px 0;}
  .stg-facts dd{margin-bottom:8px;}
  .stg-when{margin-left:0;}
}

.stg-acts{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:7px;}
.stg-act{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-weight:700;font-size:.88rem;
  padding:9px 14px;
  border-radius:var(--radius-sm);
}
.stg-act:hover{background:var(--accent-hover);text-decoration:none;}
.stg-more{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line-strong);
  color:var(--ink);
  font-size:.85rem;font-weight:600;
  padding:9px 14px;
  border-radius:var(--radius-sm);
}
.stg-more:hover{background:var(--surface-high);text-decoration:none;}
.stg-more i{font-size:.75rem;color:var(--ink-faint);}