/* Tours (tour.js): the approved test design. Every rule is under .oep-tour* so it can sit on any page. */
.oep-tour, .oep-tour-offer, .oep-tour-note {
  --t-bg:#f7f6f2; --t-card:#ffffff; --t-line:#e7e5e0; --t-ink:#1c1917; --t-ink-2:#44403c; --t-muted:#57534e;
  --t-accent:#0f766e; --t-on-accent:#ffffff; --t-dot:#fbbf24; --t-scrim:rgba(28,25,23,.55);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--t-ink);
}
.oep-tour *, .oep-tour-offer * { box-sizing: border-box; }
.oep-tour-block { position: fixed; z-index: 2147483000; background: transparent; }
.oep-tour-block[hidden] { display: none; }
.oep-tour-hole { position: fixed; z-index: 2147483001; pointer-events: none; border-radius: 10px;
  box-shadow: 0 0 0 3px var(--t-accent), 0 0 0 200vmax var(--t-scrim); transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; }
.oep-tour-center .oep-tour-hole { box-shadow: 0 0 0 200vmax var(--t-scrim); }
.oep-tour-bubble { position: fixed; z-index: 2147483002; width: min(340px, calc(100vw - 32px)); border-radius: 12px; padding: 18px 18px 14px;
  display: flex; flex-direction: column; gap: 10px; background: var(--t-bg); color: var(--t-ink); box-shadow: 0 16px 40px rgba(28,25,23,.28);
  transition: top .3s ease, left .3s ease; }
.oep-tour-bubble:focus { outline: none; }
.oep-tour-bubble h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.oep-tour-bubble p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--t-ink-2); }
.oep-tour-arrow { position: absolute; width: 14px; height: 14px; transform: rotate(45deg); background: var(--t-bg); }
.oep-tour-arrow[data-side="below"] { top: -7px; } .oep-tour-arrow[data-side="above"] { bottom: -7px; }
.oep-tour-arrow[data-side="right"] { left: -7px !important; } .oep-tour-arrow[data-side="left"] { right: -7px; }
.oep-tour-doit { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.oep-tour-doit i { width: 8px; height: 8px; border-radius: 99px; background: var(--t-dot); animation: oep-tour-pulse 1.4s ease-in-out infinite; }
.oep-tour-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.oep-tour-prog { margin-right: auto; font-size: 12px; color: var(--t-muted); font-variant-numeric: tabular-nums; }
.oep-tour-link { font: inherit; cursor: pointer; background: none; border: none; padding: 6px 4px; font-size: 13px; color: var(--t-muted);
  text-decoration: underline; text-underline-offset: 3px; }
.oep-tour-next { font: inherit; cursor: pointer; min-height: 38px; padding: 0 16px; border-radius: 8px; border: none; font-size: 14px; font-weight: 600;
  background: var(--t-accent); color: var(--t-on-accent); }
.oep-tour-next:disabled { cursor: not-allowed; opacity: .45; }
.oep-tour-link:focus-visible, .oep-tour-next:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.oep-tour-loading { width: auto; padding: 16px 20px; }
.oep-tour-wait { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--t-ink-2); }
.oep-tour-spin { flex: none; width: 18px; height: 18px; border-radius: 99px; border: 2px solid rgba(15,118,110,.25); border-top-color: var(--t-accent);
  animation: oep-tour-spin .8s linear infinite; }
@keyframes oep-tour-spin { to { transform: rotate(360deg); } }
.oep-tour-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* the offer card, bottom right */
.oep-tour-offer { position: fixed; z-index: 2147482990; right: 24px; bottom: 24px; width: min(320px, calc(100vw - 32px)); padding: 16px 18px 12px;
  border-radius: 12px; background: var(--t-bg); border: 1px solid var(--t-line); box-shadow: 0 16px 40px rgba(28,25,23,.18);
  display: flex; flex-direction: column; gap: 4px; animation: oep-tour-rise .3s ease-out; }
.oep-tour-offer b { font-size: 15px; font-weight: 600; } .oep-tour-offer span { font-size: 13px; color: var(--t-muted); }
.oep-tour-offer .oep-tour-row { justify-content: flex-end; }
.oep-tour-note { position: fixed; z-index: 2147483003; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100vw - 32px);
  background: var(--t-ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 8px 24px rgba(28,25,23,.2); }
@keyframes oep-tour-pulse { 50% { opacity: .35; } }
@keyframes oep-tour-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.oep-tour-enter { animation: oep-tour-rise .3s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .oep-tour *, .oep-tour-hole, .oep-tour-bubble, .oep-tour-offer, .oep-tour-doit i { animation: none !important; transition: none !important; }
  .oep-tour .oep-tour-spin { animation: oep-tour-spin 1.6s linear infinite !important; }   /* a loader still says "working" */
}