/* coach.css — guided onboarding coach-marks for peerforce.
   Dark "operator console" base with a bold ORANGE accent (#f97316) so the marks
   stand out sharply against the app's blue UI and read as explicit callouts.
   The engine lives in coach.js. */

.coach-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  /* Non-modal: dims + spotlights but never blocks the app; only the card
     (pointer-events: auto) catches events. */
  pointer-events: none;
}

/* Spotlight: a huge box-shadow spread dims everything OUTSIDE it, leaving the
   anchored element bright, plus a bold orange ring + glow. */
.coach-spotlight {
  position: fixed;
  z-index: 401;
  pointer-events: none;
  border-radius: 10px;
  box-shadow:
    0 0 0 9999px rgba(6, 9, 14, 0.74),
    0 0 0 3px #f97316,
    0 0 24px 6px rgba(249, 115, 22, 0.55);
  transition: left 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
              top 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
              width 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
              height 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Interactive mode → ring + glow only, no dark spread, so the app stays usable. */
.coach-overlay.coach-interactive .coach-spotlight {
  box-shadow: 0 0 0 3px #f97316, 0 0 26px 6px rgba(249, 115, 22, 0.6);
}
.coach-spotlight.coach-hidden { display: none; }

/* Anchorless (centered) steps have no spotlight, so dim the backdrop directly. */
.coach-overlay.coach-nospot { background: rgba(6, 9, 14, 0.74); }

/* The card — orange top accent + halo so it reads as an explicit, branded callout. */
.coach-card {
  position: fixed;
  z-index: 402;
  pointer-events: auto;
  box-sizing: border-box;
  width: 352px;
  max-width: calc(100vw - 28px);
  background: #14161d;
  border: 1px solid #2f3542;
  border-top: 3px solid #f97316;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 30px rgba(249, 115, 22, 0.16);
  color: #e8e8e8;
  padding: 18px 18px 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  animation: coach-pop 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes coach-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
.coach-card.coach-dragging { user-select: none; }

.coach-grip {
  position: absolute;
  top: 8px;
  left: 0; right: 0;
  text-align: center;
  color: #5a4a3a;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 2px;
  cursor: grab;
  user-select: none;
}
.coach-card.coach-dragging .coach-grip { cursor: grabbing; }

.coach-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 10px;
  font: 700 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fb923c;
}
.coach-badge .coach-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #f97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22);
}
.coach-card h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}
.coach-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #d3d8e2;
}
.coach-card p em { color: #fdba74; font-style: normal; font-weight: 600; }

.coach-chip {
  display: inline-block;
  margin-top: 12px;
  max-width: 100%;
  max-height: 140px;
  overflow-y: auto;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  font: 600 12.5px/1.3 ui-monospace, "SF Mono", Menlo, monospace;
  color: #fdba74;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.35);
  border-radius: 8px;
  padding: 7px 10px;
}
.coach-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font: 600 12.5px/1 -apple-system, system-ui, sans-serif;
  color: #fdba74;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.35);
  border-radius: 9px;
  padding: 9px 12px;
  text-decoration: none;
}
.coach-download:hover { border-color: #f97316; color: #fed7aa; background: rgba(249, 115, 22, 0.16); }

.coach-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}
.coach-count {
  font: 500 11px/1 ui-monospace, Menlo, monospace;
  color: #8a8074;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.coach-dots { display: flex; gap: 5px; }
.coach-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3a3542; display: block; transition: background 0.2s;
}
.coach-dots i.on { background: #f97316; }

.coach-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.coach-controls .coach-spacer { flex: 1; }

.coach-btn {
  font: 600 13px/1 -apple-system, system-ui, sans-serif;
  padding: 9px 15px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.coach-btn:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; }
.coach-btn-primary { background: #f97316; color: #1a0e04; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset; }
.coach-btn-primary:hover { background: #fb923c; transform: translateY(-1px); }
.coach-btn-ghost { background: transparent; color: #d3d8e2; border-color: #3a3542; }
.coach-btn-ghost:hover { border-color: #f97316; color: #fff; }
.coach-btn-text { background: transparent; color: #8a8074; padding: 9px 4px; }
.coach-btn-text:hover { color: #d3d8e2; }

/* "Show me around" replay entry in the settings menu. */
.coach-replay-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: #cbd3e3;
  font: 500 12px/1 -apple-system, system-ui, sans-serif;
  padding: 9px 12px;
  cursor: pointer;
  border-radius: 6px;
}
.coach-replay-item:hover { background: #201a14; color: #fed7aa; }

@media (prefers-reduced-motion: reduce) {
  .coach-card { animation: none; }
  .coach-spotlight { transition: none; }
}