/* ============================================================
   SLP Onboarding Scaffolding Styles
   Mobile-first. Reuses index.html token vars (--surface, --borderL,
   --gold, --goldbg, --text1, --text2, --text3, --okbg).
   No em dashes, no en dashes anywhere.
   ============================================================ */

/* ---- Invite SLP modal overlay (mirrors #cl-form-overlay) ---- */
#slp-invite-overlay{
  position:fixed;inset:0;z-index:10850;
  background:rgba(6,13,26,.82);
  backdrop-filter:blur(5px);
  display:none;align-items:center;justify-content:center;
  padding:16px;
}
#slp-invite-overlay.open{display:flex}
#slp-invite-overlay:not(.open){display:none !important;pointer-events:none !important}

#slp-invite-overlay .cl-form-card{
  max-width:560px;
  background:var(--surface);
  border:1px solid var(--borderL);
  border-radius:16px;
  padding:24px;
  width:100%;
  max-height:88vh;
  overflow-y:auto;
}

/* ---- Tier selector chips inside the invite modal ---- */
.slp-tier-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.slp-tier-chip{
  flex:1 1 140px;
  min-width:120px;
  padding:10px 12px;
  border:1px solid var(--borderL);
  border-radius:10px;
  background:transparent;
  color:var(--text2);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  text-align:left;
  transition:border-color .15s, box-shadow .15s;
}
.slp-tier-chip .price{
  display:block;font-size:18px;color:var(--text1);
  font-weight:800;margin-top:2px;
}
.slp-tier-chip .per{font-size:10px;color:var(--text3);font-weight:400}
.slp-tier-chip.active{
  border-color:var(--gold);
  box-shadow:0 0 0 2px var(--goldbg);
  color:var(--text1);
}

/* ---- Generated invite message variants ---- */
.slp-invite-variants{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.slp-invite-variant{
  border:1px solid var(--borderL);
  border-radius:10px;
  padding:12px;
  background:var(--okbg, rgba(0,0,0,.04));
}
.slp-invite-variant h4{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:800;margin:0 0 6px;
}
.slp-invite-variant pre{
  font-family:inherit;font-size:12px;line-height:1.55;
  color:var(--text2);white-space:pre-wrap;word-wrap:break-word;
  margin:0 0 8px;max-height:180px;overflow-y:auto;
}
.slp-invite-variant .copy-btn{font-size:11px;padding:6px 10px}

/* ---- Token display block ---- */
.slp-invite-token{
  margin-top:14px;padding:10px 12px;
  border:1px dashed var(--gold);border-radius:8px;
  background:var(--goldbg);
  font-family:ui-monospace,Menlo,Monaco,monospace;
  font-size:12px;color:var(--text1);
  word-break:break-all;
}
.slp-invite-token small{
  display:block;font-family:inherit;font-size:10px;
  color:var(--text3);margin-bottom:4px;
  letter-spacing:.12em;text-transform:uppercase;
}

/* ---- First-week checklist tiles ---- */
.slp-week-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:14px;
}
@media(min-width:560px){
  .slp-week-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:900px){
  .slp-week-grid{grid-template-columns:repeat(7,1fr)}
}
.slp-week-day{
  border:1px solid var(--borderL);
  border-radius:12px;
  padding:14px;
  background:var(--surface);
  display:flex;flex-direction:column;gap:8px;
  position:relative;
}
.slp-week-day.done{
  border-color:var(--gold);
  background:var(--goldbg);
}
.slp-week-day .day-num{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);font-weight:800;
}
.slp-week-day .day-task{font-size:13px;color:var(--text1);font-weight:600;line-height:1.4}
.slp-week-day .day-meta{font-size:11px;color:var(--text3)}
.slp-week-day .day-toggle{
  margin-top:auto;font-size:11px;padding:6px 10px;
}

/* ---- SLP switcher pill in Owner View ---- */
.slp-switcher{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--borderL);background:var(--surface);
  font-size:12px;color:var(--text2);cursor:pointer;
}
.slp-switcher select{
  background:transparent;border:none;color:var(--text1);
  font-size:12px;font-weight:600;outline:none;cursor:pointer;
}

/* ---- Intake form layout ---- */
.slp-intake-card{
  max-width:680px;margin:0 auto;
  border:1px solid var(--borderL);
  border-radius:16px;padding:24px;
  background:var(--surface);
}
.slp-intake-card h2{font-size:20px;font-weight:800;color:var(--text1);margin:0 0 6px}
.slp-intake-card .sub{font-size:13px;color:var(--text2);margin-bottom:18px}
.slp-intake-card label{
  display:block;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text3);margin:14px 0 6px;
}
.slp-intake-card input[type="text"],
.slp-intake-card input[type="number"],
.slp-intake-card textarea,
.slp-intake-card select{
  width:100%;padding:10px 12px;border-radius:8px;
  border:1px solid var(--borderL);background:var(--surface);
  color:var(--text1);font-size:14px;font-family:inherit;
  box-sizing:border-box;
}
.slp-intake-card textarea{min-height:90px;resize:vertical}

/* Mobile narrow safety: 375px */
@media(max-width:400px){
  #slp-invite-overlay .cl-form-card{padding:18px}
  .slp-tier-chip{flex:1 1 100%}
}