.gt-overlay {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: block;
  background: color-mix(in srgb, var(--t-hero-bg) 72%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--t-on-primary);
  opacity: 1;
  transition: opacity var(--t-motion-base, 180ms) var(--t-ease-premium, ease);
}

.gt-overlay[hidden] {
  display: none;
}

body.app-shell--tour .app-topbar,
body.app-shell--tour .app-access-banner,
body.app-shell--tour .app-scrim--top {
  pointer-events: none;
}

body.app-shell--tour .app-access-banner,
body.app-shell--tour .app-scrim--top {
  opacity: 0;
}

/*
 * Keep enough scrollable space below long screens while a tour is active.
 * Without this reserve, targets near the end of a Progress page cannot move
 * into the upper focus zone because the persistent dock already consumes the
 * remaining viewport. The normal shell clearance returns when the tour ends.
 */
body.app-shell.app-shell--tour .app-content {
  --app-content-bottom-clearance: calc(
    var(--app-tabs-h)
    + min(52vh, 360px)
    + var(--kb-inset)
    + var(--app-browser-bottom-inset)
  );
  --app-content-bottom-clearance: calc(
    var(--app-tabs-h)
    + min(52dvh, 360px)
    + var(--kb-inset)
    + var(--app-browser-bottom-inset)
  );
  scroll-padding-bottom: var(--app-content-bottom-clearance);
}

.gt-spotlight {
  position: fixed;
  z-index: 2602;
  border-radius: 18px;
  pointer-events: none;
  box-shadow:
    0 0 0 2px var(--t-accent),
    0 0 22px color-mix(in srgb, var(--t-primary) 52%, transparent),
    0 0 0 9999px color-mix(in srgb, var(--t-hero-bg) 78%, transparent),
    0 18px 60px color-mix(in srgb, var(--t-hero-bg) 46%, transparent);
  transition: none;
}

.gt-spotlight--tight {
  box-shadow:
    0 0 0 2px var(--t-accent),
    0 0 18px color-mix(in srgb, var(--t-primary) 70%, transparent),
    0 0 0 9999px color-mix(in srgb, var(--t-hero-bg) 78%, transparent);
}

.gt-tour-surface {
  position: relative;
  z-index: 2603;
}

.gt-tour-target {
  position: relative;
  z-index: 2604;
}

.app-tabs__item.gt-tour-target {
  background: color-mix(in srgb, var(--t-primary) 24%, transparent);
  border-radius: 16px;
}

.app-tabs.gt-tour-surface .app-tabs__item:not(.gt-tour-target) {
  opacity: 0.28;
  pointer-events: none;
}

.gt-card {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 2606;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 11px;
  height: min(42vh, 248px);
  height: min(42dvh, 248px);
  max-height: min(42vh, 340px);
  max-height: min(42dvh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  border: 1.5px solid color-mix(in srgb, var(--t-accent) 72%, var(--t-row-border));
  border-top-width: 4px;
  border-radius: 20px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--t-bg) 84%, var(--t-hero-bg)),
      color-mix(in srgb, var(--t-bg) 94%, var(--t-card)));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--t-accent) 20%, transparent),
    0 24px 80px color-mix(in srgb, var(--t-bg) 82%, transparent),
    0 0 42px color-mix(in srgb, var(--t-accent) 18%, transparent);
  color: var(--t-text);
  will-change: top;
}

.gt-card__eyebrow {
  color: var(--t-accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.gt-progress {
  display: grid;
  grid-template-columns: repeat(var(--gt-progress-count, 5), minmax(0, 1fr));
  gap: 6px;
}

.gt-progress__dot {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t-text) 18%, transparent);
  transition:
    background-color var(--t-motion-base, 180ms) var(--t-ease-premium, ease),
    transform var(--t-motion-base, 180ms) var(--t-ease-premium, ease);
}

.gt-progress__dot--active {
  background: var(--t-accent);
  transform: scaleY(1.25);
}

.gt-card__title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 900;
  text-wrap: balance;
}

.gt-card__text {
  margin: 0;
  min-height: 0;
  overflow-y: auto;
  color: color-mix(in srgb, var(--t-text) 80%, var(--t-text-muted));
  line-height: 1.45;
  text-wrap: pretty;
}

.gt-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gt-btn {
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--t-text) 22%, var(--t-row-border));
  background: color-mix(in srgb, var(--t-text) 9%, transparent);
  color: var(--t-text);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform var(--t-motion-fast, 120ms) var(--t-ease-premium, ease),
    background-color var(--t-motion-base, 180ms) var(--t-ease-premium, ease),
    border-color var(--t-motion-base, 180ms) var(--t-ease-premium, ease);
}

.gt-btn--primary {
  background: var(--t-cta-bg);
  border-color: color-mix(in srgb, var(--t-cta-bg) 82%, var(--t-row-border));
  color: var(--t-cta-fg);
  box-shadow: var(--t-cta-glow), var(--t-cta-inset);
}

.gt-btn:active {
  transform: scale(0.96);
}

.ctx-mini-tour {
  display: grid;
  gap: 14px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1.5px solid var(--t-row-border);
  border-radius: var(--t-radius-row, 16px);
  background: var(--t-card);
  box-shadow: var(--t-row-shadow);
}

.ctx-mini-tour[hidden] {
  display: none;
}

.ctx-mini-tour__body {
  display: grid;
  gap: 4px;
}

.ctx-mini-tour__title {
  color: var(--t-text);
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.2;
}

.ctx-mini-tour__text {
  color: var(--t-text-muted);
  font-size: 0.86rem;
  line-height: 1.42;
}

.ctx-mini-tour__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ctx-mini-tour__btn {
  min-height: 44px;
  border: 1px solid var(--t-row-border);
  border-radius: 12px;
  background: var(--t-row-bg, var(--t-card));
  color: var(--t-text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.ctx-mini-tour__btn--primary {
  border-color: color-mix(in srgb, var(--t-cta-bg) 82%, var(--t-row-border));
  background: var(--t-cta-bg);
  color: var(--t-cta-fg);
  box-shadow: var(--t-cta-glow), var(--t-cta-inset);
}

.ctx-mini-tour__btn:active {
  transform: scale(0.98);
}

.ctx-mini-tour__done {
  color: var(--t-text-muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.prog-hero__info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.prog-hero__learn-btn,
.nu-tour__learn-btn,
.pf-tour__learn-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--t-cta-bg) 50%, var(--t-hero-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--t-cta-bg) 14%, transparent);
  color: var(--t-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
}

.prog-hero__learn-btn svg,
.nu-tour__learn-btn svg,
.pf-tour__learn-btn svg {
  flex: 0 0 auto;
}

.prog-hero__learn-btn:active,
.nu-tour__learn-btn:active,
.pf-tour__learn-btn:active {
  transform: scale(0.98);
}

.nu-tour-actions,
.pf-tour-actions {
  display: flex;
  justify-content: flex-start;
}

.nu-tour-actions {
  margin-top: -8px;
}

.pf-tour-actions {
  margin: -4px 0 4px;
}

@media (min-width: 760px) {
  .gt-card {
    width: min(360px, calc(100vw - 32px));
    height: 230px;
    left: auto;
    right: 24px;
    bottom: 24px;
  }

  .ctx-mini-tour {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .ctx-mini-tour__actions {
    width: 260px;
  }

  .ctx-mini-tour__done {
    grid-column: 1 / -1;
  }
}

@media (max-width: 759px) {
  .gt-overlay {
    background: transparent;
  }

  .gt-spotlight {
    box-shadow:
      0 0 0 3px var(--t-accent),
      0 0 26px color-mix(in srgb, var(--t-accent) 44%, transparent),
      0 0 0 9999px color-mix(in srgb, var(--t-hero-bg) 54%, transparent),
      0 18px 56px color-mix(in srgb, var(--t-hero-bg) 34%, transparent);
  }

  .gt-spotlight--tight {
    box-shadow:
      0 0 0 3px var(--t-accent),
      0 0 22px color-mix(in srgb, var(--t-accent) 50%, transparent),
      0 0 0 9999px color-mix(in srgb, var(--t-hero-bg) 54%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gt-overlay,
  .gt-spotlight,
  .gt-progress__dot,
  .gt-btn {
    transition: none;
  }
}