@layer components {
  body:has(.board-tour[open]) #flash { visibility: hidden; }
  .board--touring { padding-bottom: 26rem; }
  .board--touring > .page-section { scroll-margin-top: calc(var(--header-h) + 2rem); }

  .board-tour {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    overflow: hidden;
  }

  .board-tour::backdrop { background: transparent; }
  .board-tour-spotlight {
    position: fixed;
    border: 2px solid var(--accent);
    border-radius: var(--r-3);
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / 55%);
    pointer-events: none;
    transition: top 300ms ease, left 300ms ease, width 300ms ease, height 300ms ease;
  }

  .board-tour-panel {
    position: absolute;
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: min(34rem, calc(100% - 2rem));
    max-height: calc(100% - 6rem);
    overflow-y: auto;
    padding: clamp(1rem, 3vw, 1.75rem);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-4);
    box-shadow: var(--shadow-3);
  }

  .board-tour-heading, .board-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .board-tour-progress { font-size: var(--text-sm); color: var(--muted); margin: 0; }
  .board-tour-panel h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 1.8rem); line-height: 1.15; margin: 1rem 0 0.75rem; }
  .board-tour-panel > p { line-height: 1.55; }
  .board-tour-actions { margin-top: 1.25rem; }
  .board-tour-error { color: var(--danger); }

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