/* The guided tour: a bubble beside what it describes, everything else dimmed.
   The veil and the hole in it are one element — see `.onb-tour__spotlight`. */

@layer components {
  .onb-tour {
    inset: 0;
    pointer-events: none;
    position: fixed;
    /* Above the app's own layers (the nav, dropdowns, toasts) but below a
       native `<dialog>`, which lives in the top layer whatever this says. */
    z-index: var(--z-sheet);
  }

  /* Nothing here catches a click except the bubble: the veil is the shadow of
     an element the pointer passes straight through, so the app underneath
     stays operable — a tour that blocked the thing it points at could not ask
     anyone to click it. */
  .onb-tour__bubble,
  .onb-tour__greeting {
    pointer-events: auto;
  }

  .onb-tour__spotlight {
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 100vmax oklch(from var(--color-ink) l c h / 45%),
                inset 0 0 0 2px var(--color-surface);
    pointer-events: none;
    position: fixed;
    transition: inset-block-start 0.2s ease, inset-inline-start 0.2s ease,
                inline-size 0.2s ease, block-size 0.2s ease;
  }

  /* The same colour the veil dims with, at full strength: the bar reads as one
     inert band rather than a half-legible navigation. */
  .onb-tour__topbar {
    background: var(--color-ink);
    block-size: var(--nav-height);
    inset-block-start: 0;
    inset-inline: 0;
    pointer-events: none;
    position: fixed;
  }

  .onb-tour__bubble {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lifted);
    inline-size: min(24rem, calc(100dvw - 2rem));
    position: fixed;
  }

  .onb-tour__bubble--centred {
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
  }

  /* ─── Head: the count and how far along ──── */

  .onb-tour__head {
    align-items: center;
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0;
  }

  .onb-tour__step {
    color: var(--color-brand);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .onb-tour__progress {
    background: var(--color-brand-tint);
    block-size: 4px;
    border-radius: var(--radius-pill);
    flex: 1;
    overflow: hidden;
  }

  .onb-tour__progress-bar {
    background: var(--color-brand);
    block-size: 100%;
    border-radius: var(--radius-pill);
    display: block;
    transition: inline-size 0.25s ease;
  }

  /* ─── Body ───────────────────────────────── */

  .onb-tour__body {
    padding: 0.625rem 1.5rem 1.25rem;
  }

  .onb-tour__title {
    color: var(--color-ink);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
  }

  .onb-tour__text {
    color: var(--color-ink-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0.5rem 0 0;
  }

  /* ─── Actions ────────────────────────────── */

  .onb-tour__actions {
    align-items: center;
    border-block-start: 1px solid var(--color-border-subtle);
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
  }

  .onb-tour__btn {
    padding: 0.5rem 1rem;
  }

  .onb-tour__btn--back {
    color: var(--color-ink-secondary);
  }

  .onb-tour__btn--back:hover {
    border-color: var(--color-border-strong);
    color: var(--color-ink);
  }

  /* Skipping is the quiet way out: available, not invited. */
  .onb-tour__btn--skip {
    background: none;
    color: var(--color-ink-muted);
  }

  .onb-tour__btn--skip:hover {
    color: var(--color-ink);
  }

  .onb-tour__btn--next {
    /* Pushed to the far end, away from the two ways out, so the two kinds of
       answer are not next to each other. */
    margin-inline-start: auto;
  }

  /* ─── Greeting: the mascot's offer ───────── */

  /* The corner of the page, out of the way of what the reader came to see:
     the bubble above, the mascot under its tail, both pulled to the end. */
  .onb-tour__greeting {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    inset-block-end: 1.5rem;
    inset-inline-end: 1.5rem;
    position: fixed;
  }

  .onb-tour__greeting-bubble {
    animation: onb-tour-greet 0.3s ease-out both;
    background: var(--color-surface);
    /* The corner over the mascot is squared off, the way a speech bubble's
       tail leaves it. */
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
    box-shadow: var(--shadow-lifted);
    inline-size: min(20rem, calc(100dvw - 3rem));
    padding: 1rem 1.25rem 1.125rem;
    position: relative;
    /* The bubble grows from the tail, where the mascot is. */
    transform-origin: 100% 100%;
  }

  /* The tail: a square turned on its corner, half of it below the bubble,
     pointing down at the mascot. */
  .onb-tour__greeting-bubble::after {
    background: var(--color-surface);
    block-size: 0.75rem;
    content: "";
    inline-size: 0.75rem;
    inset-block-end: -0.375rem;
    inset-inline-end: 1.5rem;
    position: absolute;
    rotate: 45deg;
  }

  .onb-tour__greeting-text {
    color: var(--color-ink);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0;
    text-wrap: pretty;
  }

  .onb-tour__greeting-actions {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-block-start: 0.875rem;
  }

  /* Answering is the invitation, so the primary button comes first here and
     "No, thanks" stays the quiet way out beside it. */
  .onb-tour__greeting-actions .onb-tour__btn--next {
    margin-inline-start: 0;
  }

  /* The mascot stands under the tail, on a floor of its own width. */
  .onb-tour__greeting .mascot-stage {
    margin-inline-end: 0.875rem;
  }

  @keyframes onb-tour-greet {
    from {
      opacity: 0;
      scale: 0.9;
    }
  }

  @media (width < 480px) {
    .onb-tour__greeting {
      inset-block-end: 1rem;
      inset-inline-end: 1rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .onb-tour__spotlight,
    .onb-tour__progress-bar {
      transition: none;
    }

    .onb-tour__greeting-bubble {
      animation: none;
    }
  }
}