/* Guided tours (tours.js): Vibe "Tipseen" bubble, spotlight cut-out, click blockers; plus the Help menu under the top bar "?". */

/* The layer is a manual popover in the top layer (inside the topmost modal dialog when one is open). */
#crm-tour { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; overflow: visible; pointer-events: none; color: var(--text-color-on-primary); font: var(--font-text2-normal); z-index: 2147483000; }
#crm-tour:not(.is-open) { display: none; }
#crm-tour, #crm-tour * { box-sizing: border-box; }
#crm-tour::backdrop { background: transparent; }

/* Dim: the ring's huge shadow darkens everything around the target; without a target the full-screen dim does it. */
.tour-dim { position: fixed; inset: 0; background: rgba(41, 47, 76, 0.5); }
.tour-dim[hidden] { display: none; }
.tour-ring { position: fixed; display: none; border-radius: var(--border-radius-medium);
  box-shadow: 0 0 0 2px var(--primary-color), 0 0 0 6px rgba(0, 115, 234, 0.28), 0 0 0 200vmax rgba(41, 47, 76, 0.5);
  transition: left var(--motion-expressive-short) var(--motion-timing-transition), top var(--motion-expressive-short) var(--motion-timing-transition),
    width var(--motion-expressive-short) var(--motion-timing-transition), height var(--motion-expressive-short) var(--motion-timing-transition); }
#crm-tour.has-target .tour-ring { display: block; }
/* Transparent blockers keep the page from being clicked; the "hole" one opens up on interactive steps. */
.tour-block { position: fixed; pointer-events: auto; background: transparent; }
#crm-tour.is-interactive .tour-block[data-side="hole"] { pointer-events: none; }

/* Bubble */
.tour-bubble { position: fixed; left: 0; top: 0; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto;
  padding: var(--space-20) var(--space-24) var(--space-12); border-radius: var(--border-radius-medium); background: var(--primary-color);
  color: var(--text-color-on-primary); box-shadow: var(--box-shadow-large); pointer-events: auto; outline: none; text-align: left;
  animation: tour-in var(--motion-expressive-short) var(--motion-timing-enter); }
.tour-bubble.dark { background: var(--inverted-color-background); }
.tour-bubble.is-busy { opacity: .85; }
.tour-bubble:focus-visible { box-shadow: var(--box-shadow-large), 0 0 0 3px rgba(255, 255, 255, 0.6); }
.tour-bubble[data-placement="top"], .tour-bubble[data-placement="bottom"], .tour-bubble[data-placement="left"], .tour-bubble[data-placement="right"] { overflow: visible; }
@keyframes tour-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tour-arrow { position: absolute; display: none; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.tour-bubble[data-placement="bottom"] .tour-arrow { display: block; top: -6px; margin-left: -7px; }
.tour-bubble[data-placement="top"] .tour-arrow { display: block; bottom: -6px; margin-left: -7px; }
.tour-bubble[data-placement="right"] .tour-arrow { display: block; left: -6px; margin-top: -7px; }
.tour-bubble[data-placement="left"] .tour-arrow { display: block; right: -6px; margin-top: -7px; }
.tour-close { position: absolute; top: var(--space-8); right: var(--space-8); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  padding: 0; border: 0; border-radius: var(--border-radius-small); background: transparent; color: inherit; cursor: pointer; }
.tour-close:hover { background: rgba(255, 255, 255, 0.2); }
.tour-close:focus-visible, .tour-btn:focus-visible, .tour-skip:focus-visible, .tour-lang button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tour-title { margin: 0 var(--space-32) var(--space-8) 0; font: var(--font-h3-bold); letter-spacing: var(--letter-spacing-h3); color: inherit; }
.tour-body { font: var(--font-text2-normal); color: inherit; }
.tour-body p { margin: 0 0 var(--space-8); }
.tour-body strong, .tour-title strong { font-weight: 700; }
.tour-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-top: var(--space-16); }
.tour-progress { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-8); min-width: 0; }
.tour-count { font: var(--font-text2-medium); white-space: nowrap; }
.tour-dots { display: inline-flex; flex-wrap: nowrap; gap: 6px; flex: none; }
/* Long tours: tighter dots so the counter, dots and buttons stay on one line. */
.tour-dots.many { gap: 3px; }
.tour-dots.many .tour-dot { width: 5px; height: 5px; }
.tour-dots[hidden] { display: none; }
.tour-dots.many .tour-dot.on { width: 10px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.tour-dot.on { width: 16px; border-radius: 3px; background: #fff; }
.tour-actions { display: flex; align-items: center; gap: var(--space-8); flex: none; }
.tour-btn { height: 32px; padding: 0 var(--space-16); border: 1px solid transparent; border-radius: var(--border-radius-small); font: var(--font-text2-normal); cursor: pointer; white-space: nowrap; }
.tour-btn:active { transform: scale(.95); }
.tour-back { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.tour-back:hover { background: rgba(255, 255, 255, 0.15); }
.tour-next { background: #fff; color: var(--primary-color); font-weight: 600; }
.tour-bubble.dark .tour-next { color: var(--inverted-color-background); }
.tour-next:hover { background: var(--primary-highlighted-color); }
.tour-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); margin-top: var(--space-12); padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.25); }
.tour-skip { padding: 2px 0; border: 0; background: none; color: rgba(255, 255, 255, 0.9); font: var(--font-text3-normal); text-decoration: underline; cursor: pointer; }
.tour-skip:hover { color: #fff; }

/* EN / ES switch (bubble footer, Help menu and Help center) */
.tour-lang { display: inline-flex; flex: none; border-radius: var(--border-radius-small); overflow: hidden; }
.tour-lang button { min-width: 32px; height: 24px; padding: 0 var(--space-8); border: 0; background: transparent; font: var(--font-text3-medium); cursor: pointer; }
.tour-lang.on-primary { border: 1px solid rgba(255, 255, 255, 0.6); }
.tour-lang.on-primary button { color: #fff; }
.tour-lang.on-primary button[aria-pressed="true"] { background: #fff; color: var(--primary-color); }
.tour-lang.in-menu, .tour-lang.on-page { border: 1px solid var(--ui-border-color); }
.tour-lang.in-menu button, .tour-lang.on-page button { color: var(--primary-text-color); }
.tour-lang.in-menu button:hover, .tour-lang.on-page button:hover { background: var(--primary-background-hover-color); }
.tour-lang.in-menu button[aria-pressed="true"], .tour-lang.on-page button[aria-pressed="true"] { background: var(--primary-selected-color); color: var(--primary-color); }

/* Phones: a full-width card docked at the bottom (or top), no arrow. */
.tour-bubble.sheet { left: var(--space-8) !important; right: var(--space-8); width: auto; max-width: none; max-height: 60vh; padding: var(--space-16) var(--space-16) var(--space-12); }
.tour-bubble.sheet .tour-arrow { display: none; }
.tour-bubble.sheet[data-placement="dock-bottom"] { top: auto; bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }
.tour-bubble.sheet .tour-btn { height: 40px; }

@media (prefers-reduced-motion: reduce) {
  .tour-ring { transition: none; }
  .tour-bubble { animation: none; }
}

/* Help menu (top bar "?") */
.help-menu-wrap { position: relative; display: inline-flex; }
.help-menu { right: 0; top: calc(100% + 4px); width: 300px; max-height: calc(100vh - 80px); overflow-y: auto; }
.help-menu .menu-item { color: var(--primary-text-color); }
.help-menu .menu-item span { overflow: hidden; text-overflow: ellipsis; }
.help-menu .menu-caption { padding: var(--space-4) var(--space-8); font: var(--font-text3-normal); color: var(--secondary-text-color); }
.help-menu .help-menu-lang { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.topbar-help[aria-expanded="true"] { background: var(--primary-selected-color); }
@media (max-width: 760px) {
  .help-menu-wrap { display: none; }
}

/* Controls that normally show on hover stay visible while the tour points at their cell. */
#view .board-table [data-tour-active] .cell-hover-add, #view .board-table [data-tour-active] .button-cell.on-hover,
#view .board-table [data-tour-active] .open-mini, #view .board-table [data-tour-active] .cell-check, #view .board-table [data-tour-active] .cell-pencil-btn, #view .calendar-day[data-tour-active] .calendar-add { opacity: 1; }
/* On a phone the bubble is narrower: long tours show only the step counter, so the buttons stay on one line. */
.tour-bubble.sheet .tour-dots.many { display: none; }