/* First-time walkthroughs (js/tour.js): dimmed screen with a spotlight cut-out + a Pokédex-style card */
.tour { position: fixed; inset: 0; z-index: 200; font-family: Poppins, "Helvetica Neue", Helvetica, sans-serif; color: #1b1b1f;
  -webkit-font-smoothing: antialiased; animation: tourIn .2s ease both; }
.tour.out { animation: tourOut .2s ease both; }
.tour-spot { position: fixed; box-shadow: 0 0 0 200vmax rgba(14,20,32,.62); outline: 2px solid rgba(243,195,23,.95); outline-offset: 0;
  transition: left .3s cubic-bezier(.2,.8,.2,1), top .3s cubic-bezier(.2,.8,.2,1), width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1);
  pointer-events: none; }
.tour-spot[style*="width: 0px"] { outline: 0; }
.tour-card { position: fixed; width: min(360px, calc(100vw - 24px)); background: #fff; border-radius: 22px; padding: 18px 20px 14px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); transition: left .3s cubic-bezier(.2,.8,.2,1), top .3s cubic-bezier(.2,.8,.2,1); }
.tour-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #e3353c; }
.tour-title { margin: 6px 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.tour-body { font-size: 14px; line-height: 1.5; color: #4a4a55; }
.tour-body p { margin: 0 0 8px; }
.tour-body ul { margin: 4px 0 6px; padding-left: 18px; }
.tour-body li { margin: 3px 0; }
.tour-body b { color: #1b1b1f; }
.tour-body kbd { font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: #f1f1f4; border: 1px solid #e3e3ea; color: #1b1b1f; }
.tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.tour-foot button { font-family: inherit; font-size: 14px; font-weight: 700; border-radius: 999px; padding: 10px 16px; cursor: pointer; border: 0; }
.tour-foot button[hidden] { display: none; }
.tour-skip { background: none; color: #9a9aa3; padding: 10px 4px !important; margin-right: auto; }
.tour-back { background: #fff; color: #1b1b1f; border: 1px solid #e6e6ec !important; }
.tour-next { background: #e3353c; color: #fff; box-shadow: 0 12px 24px -14px rgba(227,53,60,.8); }
.tour-foot button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(243,195,23,.95); }
.tour-dots { display: flex; gap: 4px; margin-right: 4px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: #e3e3ea; }
.tour-dots i.on { background: #e3353c; }
.tour-keys { margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .06em; color: #b4b4bd; }
.tour-keys:empty { display: none; }
@keyframes tourIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tourOut { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 720px) {
  .tour-card { padding: 16px 16px 12px; border-radius: 20px; }
  .tour-title { font-size: 18px; }
  .tour-body { font-size: 13.5px; }
  .tour-dots { display: none; }
}
/* "?" buttons that replay a tour */
.help-btn { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #1b1b1f; color: #fff; font: 700 15px/1 Poppins, sans-serif; cursor: pointer; flex: none; }
.pdx-searchbar .help-btn { width: 48px; height: 48px; font-size: 20px; background: rgba(0,0,0,.14); }
.topbar .help-btn { width: 22px; height: 22px; font-size: 13px; }
/* phone team builder header: the "?" sits at the end of the search row */
@media (max-width: 720px) {
  .pdx-searchbar { grid-template-columns: auto 1fr auto auto; grid-template-areas: "back regions regions filter" "search search search help"; }
  .pdx-searchbar .help-btn { grid-area: help; width: 38px; height: 38px; font-size: 17px; align-self: center; }
}