@layer components {
  /* The one-time invitation, above the list. */
  .tour-invitation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background: var(--leaf-soft);
    border-color: var(--mint);
  }
  .tour-invitation > div:first-child { flex: 1 1 16rem; }
  .tour-invitation h2 { margin-bottom: var(--space-1); }
  .tour-invitation__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

  /* "Your first shop": a highlight around the target, and a callout beside
     it (wide screens) or a sheet (phones). Above the tab bar and toasts. */
  .tour__ring {
    position: fixed;
    z-index: 39;
    border: 3px solid var(--leaf);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 4px rgb(251 247 239 / 0.9), 0 0 0 9999px rgb(43 42 39 / 0.18);
    pointer-events: none;
    transition: top 160ms ease, left 160ms ease, width 160ms ease, height 160ms ease;
  }

  .tour__panel {
    position: fixed;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 20px 50px -18px rgb(35 79 62 / 0.55), 0 2px 0 rgb(43 42 39 / 0.04);
  }
  .tour__panel[hidden] { display: none; }

  .tour__panel--callout {
    width: min(22rem, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    padding: var(--space-4) var(--space-5) var(--space-3);
    border-radius: var(--radius-lg);
  }

  /* Phones: full width at the bottom (or top, when the target is down
     there), clear of the home indicator and notch, never taller than the
     screen: the text scrolls, the buttons stay. */
  .tour__panel--sheet {
    inset-inline: 0;
    bottom: 0;
    max-height: min(26rem, 70dvh);
    padding: var(--space-4) max(var(--space-4), env(safe-area-inset-right))
      calc(var(--space-3) + env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
    border-width: 1px 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .tour__panel--sheet.tour__panel--top {
    top: 0;
    bottom: auto;
    padding-top: calc(var(--space-4) + env(safe-area-inset-top));
    padding-bottom: var(--space-3);
    border-width: 0 0 1px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  /* Short screens (landscape phones, big text): the sheet may take most of
     the height; the step names its control in words. */
  @media (max-height: 420px) {
    .tour__panel--sheet { max-height: 100dvh; }
  }

  .tour__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .tour__count { color: var(--muted); font-size: var(--text-sm); font-weight: 800; }
  .tour__close {
    display: grid;
    place-items: center;
    width: var(--touch);
    height: var(--touch);
    margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-3)) calc(-1 * var(--space-2)) 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    font-size: 1.75rem;
    line-height: 1;
  }
  .tour__close:hover { background: var(--cream); color: var(--ink); }

  .tour__title { font-size: var(--text-lg); }
  .tour__title:focus { outline: none; }
  .tour__title:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; border-radius: 4px; }

  .tour__body { display: grid; gap: var(--space-2); min-height: 0; overflow-y: auto; }
  .tour__named { color: var(--muted); font-weight: 700; }

  .tour__nav {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-1);
  }
  .tour__nav [data-tour-target="skip"] { margin-right: auto; }
  .tour__nav .button--small { min-height: var(--touch); }
  .tour__nav [hidden] { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .tour__ring { transition: none; }
  }
}