/* First-run recruiter tour (onboarding-tour.js).
 *
 * A viewport overlay, so it is not a per-page `.page-root` file — its root is
 * `.tour-root`. Structure lives in @layer components, colour in @layer theme,
 * per the CSS checklist; every colour is a site token, so the tour tracks the
 * light/dark theme with no rules of its own. The scrim + ring are painted by the
 * spotlight's box-shadow (a hole punched in a full-viewport shadow), which is
 * why the highlighted element shows through un-dimmed. */

@layer components {
  .tour-root {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;

    .tour-blocker {
      position: fixed;
      inset: 0;
      pointer-events: auto;
    }

    .tour-spotlight {
      position: fixed;
      border-radius: 12px;
      pointer-events: none;
      transition:
        top 0.25s ease,
        left 0.25s ease,
        width 0.25s ease,
        height 0.25s ease;
    }

    .tour-pop {
      position: fixed;
      inline-size: min(340px, calc(100vw - 20px));
      box-sizing: border-box;
      padding: 20px;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      pointer-events: auto;
      transition:
        top 0.25s ease,
        left 0.25s ease;

      &:focus {
        outline: none;
      }

      &[data-placement='center'] {
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .tour-step-count {
      margin: 0;
      font-family: var(--font-primary);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .tour-title {
      margin: 0;
      font-family: var(--font-heading);
      font-size: 1.15rem;
      font-weight: 600;
      line-height: 1.25;
    }

    .tour-body {
      margin: 0;
      font-family: var(--font-primary);
      font-size: 0.92rem;
      line-height: 1.55;
    }

    .tour-dots {
      display: flex;
      gap: 6px;
      margin-block: 2px 4px;

      .tour-dot {
        inline-size: 6px;
        block-size: 6px;
        border-radius: 50%;
        transition: transform 0.2s ease;

        &.is-active {
          transform: scale(1.5);
        }
      }
    }

    .tour-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-block-start: 4px;

      .tour-actions-spacer {
        flex: 1;
      }
    }

    .tour-btn {
      padding: 8px 16px;
      border-radius: 100px;
      border: 1px solid transparent;
      font-family: var(--font-heading);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;

      &:disabled {
        opacity: 0.4;
        cursor: default;
      }
    }
  }

  /* A reader who prefers less motion gets none of the sliding. */
  .tour-root[data-reduce-motion='true'] {
    .tour-spotlight,
    .tour-pop {
      transition: none;
    }
  }
}

@layer theme {
  .tour-root {
    /* Centred steps (welcome, and any whose target is absent) have no spotlight
       to dim the page, so the click-blocker carries the scrim there instead. */
    &[data-mode='center'] .tour-blocker {
      background: oklch(0% 0 0 / 0.55);
    }

    .tour-spotlight {
      /* The hole: a crisp accent ring, then the scrim filling the rest of the
         viewport. Ring first so it paints over the scrim at the edge. */
      box-shadow:
        0 0 0 3px oklch(from var(--accent-primary) l c h / 0.9),
        0 0 0 100vmax oklch(0% 0 0 / 0.55);
    }

    .tour-pop {
      background: var(--surface-elevated);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-md);
      color: var(--text-primary);
    }

    .tour-step-count {
      color: var(--accent-primary);
    }

    .tour-body {
      color: var(--text-secondary);
    }

    .tour-dots .tour-dot {
      background: var(--border-color);

      &.is-done {
        background: oklch(from var(--accent-primary) l c h / 0.5);
      }

      &.is-active {
        background: var(--accent-primary);
      }
    }

    .tour-btn--ghost {
      background: transparent;
      color: var(--text-secondary);

      &:hover:not(:disabled) {
        color: var(--text-primary);
        border-color: var(--border-color);
      }
    }

    .tour-btn--primary {
      background: var(--accent-primary);
      color: var(--button-text-color);

      &:hover:not(:disabled) {
        filter: brightness(1.05);
      }
    }
  }
}