/* ============================================================================
   FieldSync — Feature Tips / Walkthroughs ("tips.css")
   A persistent, revisitable onboarding system: contextual multi-step tours
   that explain features in depth (Devices/Athlete Display/Scoreboard, meet
   collaborators, meet selection, running a competition). Presenter-styled
   (dark/purple) to match the rest of the app. Loaded on Meet Manager +
   Competition Run.
   ========================================================================== */

:root{
  --tp-accent:  #7c3aed;
  --tp-accent2: #a78bfa;
  --tp-accent3: #c4b5fd;
  --tp-card:    #161a24;
  --tp-card2:   #1b2030;
  --tp-line:    rgba(148,163,184,.16);
  --tp-line2:   rgba(148,163,184,.28);
  --tp-text:    #f1f5f9;
  --tp-muted:   #93a1b8;
  --tp-dim:     #64748b;
  --tp-good:    #22c55e;
  --tp-ease:    cubic-bezier(.22,.61,.36,1);
}

/* ── Floating "Tips" pill (matches .mgrHelpPill sizing/spot in the topbar) ── */
.tpPill{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.35);
  color:#e9e3ff; border-radius:999px; padding:8px 14px; font-size:13px; font-weight:700;
  cursor:pointer; transition:background .15s, border-color .15s, transform .12s;
}
.tpPill:hover{ background:rgba(124,58,237,.22); border-color:rgba(167,139,250,.6); transform:translateY(-1px); }
.tpPillIcon{ font-size:14px; line-height:1; }

/* ── Overlay shared backdrop ────────────────────────────────────────────── */
.tpBackdrop{
  position:fixed; inset:0; z-index:5000; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(6,7,12,.72); backdrop-filter:blur(3px);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
.tpBackdrop.show{ display:flex; }

/* ── Tour card (coach-mark walkthrough) ─────────────────────────────────── */
.tpCard{
  position:relative; width:100%; max-width:520px;
  background:linear-gradient(180deg,var(--tp-card),var(--tp-card2));
  border:1px solid var(--tp-line2); border-radius:20px;
  padding:28px 30px 22px; color:var(--tp-text);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  animation:tpIn .3s var(--tp-ease);
}
@keyframes tpIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.tpKicker{
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tp-accent3);
  background:rgba(124,58,237,.14); border:1px solid rgba(124,58,237,.3);
  padding:4px 12px; border-radius:999px; margin-bottom:14px;
}
.tpTitle{ font-size:clamp(19px,3vw,24px); font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.tpBody{ margin-top:12px; font-size:14px; line-height:1.65; color:var(--tp-muted); }
.tpBody b, .tpBody strong{ color:var(--tp-text); }
.tpBody ul{ margin:10px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.tpBody li::marker{ color:var(--tp-accent2); }
.tpBody p + p{ margin-top:10px; }

.tpDots{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:20px; }
.tpDot{ width:7px; height:7px; border-radius:50%; background:var(--tp-line2); transition:background .2s, transform .2s; }
.tpDot.on{ background:linear-gradient(135deg,#7c3aed,#a78bfa); transform:scale(1.3); }

.tpFoot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:20px; }
.tpFootLeft{ display:flex; flex-direction:column; gap:4px; }
.tpLink{ background:none; border:none; padding:0; cursor:pointer; font-size:12px; color:var(--tp-dim); text-align:left; transition:color .15s; }
.tpLink:hover{ color:var(--tp-muted); text-decoration:underline; }
.tpNavBtns{ display:flex; gap:8px; }
.tpBtn{
  border:none; cursor:pointer; border-radius:11px; font-weight:800; font-size:13.5px;
  padding:11px 20px; transition:transform .12s var(--tp-ease), box-shadow .15s, border-color .15s, background .15s;
}
.tpBtnBack{ background:rgba(255,255,255,.05); border:1px solid var(--tp-line2); color:var(--tp-text); }
.tpBtnBack:hover{ border-color:rgba(167,139,250,.5); }
.tpBtnNext{ background:linear-gradient(135deg,#7c3aed,#a78bfa); color:#fff; box-shadow:0 6px 18px rgba(124,58,237,.4); }
.tpBtnNext:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(124,58,237,.55); }
.tpClose{
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:9px;
  background:rgba(255,255,255,.04); border:1px solid var(--tp-line); color:var(--tp-muted);
  cursor:pointer; font-size:16px; line-height:1; transition:background .15s, color .15s;
}
.tpClose:hover{ background:rgba(255,255,255,.09); color:var(--tp-text); }

/* ── Tips Library panel ─────────────────────────────────────────────────── */
.tpLibBackdrop{ align-items:flex-start; padding-top:8vh; }
.tpLibCard{ max-width:640px; max-height:78vh; display:flex; flex-direction:column; padding:26px 0 0; }
.tpLibHead{ padding:0 28px 16px; border-bottom:1px solid var(--tp-line); }
.tpLibTitle{ font-size:20px; font-weight:800; }
.tpLibSub{ margin-top:6px; font-size:13px; color:var(--tp-muted); }
.tpLibList{ overflow-y:auto; padding:10px 28px 24px; display:flex; flex-direction:column; gap:10px; }
.tpLibItem{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px;
  background:rgba(255,255,255,.02); border:1px solid var(--tp-line);
}
.tpLibIcon{ flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(167,139,250,.1)); font-size:17px; }
.tpLibInfo{ flex:1 1 auto; min-width:0; }
.tpLibName{ font-size:14px; font-weight:700; color:var(--tp-text); }
.tpLibDesc{ font-size:12.5px; color:var(--tp-muted); margin-top:2px; }
.tpLibPage{ display:inline-block; margin-top:4px; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tp-accent3); background:rgba(124,58,237,.14); border:1px solid rgba(124,58,237,.3); padding:2px 8px; border-radius:999px; }
.tpLibActions{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.tpLibView{ background:rgba(255,255,255,.05); border:1px solid var(--tp-line2); color:var(--tp-text);
  border-radius:9px; padding:7px 14px; font-size:12.5px; font-weight:700; cursor:pointer; transition:border-color .15s, background .15s; }
.tpLibView:hover{ border-color:rgba(167,139,250,.5); background:rgba(124,58,237,.12); }
.tpLibToggle{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--tp-muted); cursor:pointer; user-select:none; }
.tpLibSwitch{ position:relative; width:32px; height:18px; border-radius:999px; background:#0f131c; border:1px solid var(--tp-line2); transition:background .15s; }
.tpLibSwitch::after{ content:""; position:absolute; top:1px; left:1px; width:14px; height:14px; border-radius:50%; background:var(--tp-muted); transition:transform .15s, background .15s; }
.tpLibToggle.on .tpLibSwitch{ background:rgba(124,58,237,.35); border-color:rgba(167,139,250,.5); }
.tpLibToggle.on .tpLibSwitch::after{ transform:translateX(14px); background:#fff; }
.tpLibClose{ position:absolute; top:16px; right:18px; }

@media (max-width:560px){
  .tpFoot{ flex-direction:column; align-items:stretch; }
  .tpNavBtns{ justify-content:flex-end; }
  .tpLibItem{ flex-wrap:wrap; }
  .tpLibActions{ flex-direction:row; align-items:center; width:100%; justify-content:space-between; }
}

@media (prefers-reduced-motion: reduce){
  .tpCard{ animation:none; }
}