/* UNICHAT-GUIDED-ONBOARDING-HELP-SUPPORT-01 — D-40: tour contextual.

   "Novo componente funcional, mesma linguagem visual" (steering do proprietário). Tudo aqui vem
   de token: a ficha do cartão é a mesma de UniModal (surface, radius-lg, shadow-md, border), o
   cabeçalho usa o eyebrow em caixa-alta que a Ajuda já usa em "Nesta categoria", os botões são
   UniButton, e o realce é um contorno na cor primária com um halo suave — não uma máscara escura
   sobre a tela. O realce não captura clique: o produto continua utilizável durante o tour.

   Camada: `--uni-z-tooltip` (70), acima de sheet/modal/toast? Não — abaixo do toast (60)? O tour
   é um popover ancorado, mesma natureza do tooltip; o toast (60) pode passar por cima dele sem
   prejuízo, e um modal aberto (51) fica ABAIXO do tour, o que é correto: o tour aponta para
   elementos da página, nunca abre em cima de um modal (a página fecha o tour ao abrir diálogo).

   CUT 5F (Workstream C) — autoridade de camadas: docs/design-system/UNI_LAYERING_AUTHORITY_01.md.
   O tour usa o token próprio `--uni-z-tour` (= tooltip, 70/71). A sidebar do desktop (50) fica
   ABAIXO do tour por z-index, mas o defeito medido não era de z-index: a sidebar expandida por
   hover/foco cresce POR CIMA do conteúdo e cobria o alvo realçado. Enquanto `html.uni-tour-open`
   existir, o shell não expande a sidebar (crm-shell.css) e o cartão nunca é posicionado sob a rail. */

.uni-tour-spotlight {
    position: fixed;
    z-index: var(--uni-z-tour);
    pointer-events: none;
    border-radius: var(--uni-radius-md);
    box-shadow:
        0 0 0 2px var(--uni-color-primary),
        0 0 0 6px var(--uni-color-primary-soft),
        0 0 0 100vmax rgba(15, 23, 42, 0.18);
    transition: left .16s ease, top .16s ease, width .16s ease, height .16s ease;
}

.uni-tour-card {
    position: fixed;
    z-index: calc(var(--uni-z-tour) + 1);
    width: min(360px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    padding: var(--uni-space-4) var(--uni-space-5) var(--uni-space-4);
    background: var(--uni-color-surface);
    color: var(--uni-color-text);
    border: 1px solid var(--uni-color-border);
    border-radius: var(--uni-radius-lg);
    box-shadow: var(--uni-shadow-md);
    outline: none;
}

/* O foco chega ao cartão só por programa (tabindex=-1), para Esc/setas funcionarem; o anel de
   foco fica nos botões, que são o que a pessoa de fato aciona — um anel no cartão inteiro lia
   como "erro" na folha inferior do celular (medido). */
.uni-tour-card:focus-visible { outline: none; }

/* Sem alvo (ou antes de o JS medir): centralizado, ainda uma ficha — nunca um modal. */
.uni-tour-card.is-centered {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.uni-tour-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-3);
    margin-right: calc(var(--uni-space-3) * -1);
}

.uni-tour-kicker {
    font-size: var(--uni-font-size-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--uni-color-primary-soft-text);
}

.uni-tour-close { width: 32px; height: 32px; }

.uni-tour-card h2 {
    margin: 0;
    font-size: var(--uni-font-size-lg);
    font-weight: 700;
    line-height: 1.3;
}

.uni-tour-card p {
    margin: 0;
    font-size: var(--uni-font-size-sm);
    line-height: 1.55;
    color: var(--uni-color-text-muted);
}

.uni-tour-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-3);
    margin-top: var(--uni-space-2);
}

.uni-tour-progress {
    font-size: var(--uni-font-size-xs);
    color: var(--uni-color-text-muted);
    white-space: nowrap;
}

.uni-tour-actions {
    display: flex;
    gap: var(--uni-space-2);
}

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

/* Celular: o cartão vira folha inferior (mesma gramática das sheets mobile); o realce continua
   ancorado no elemento real. A composição muda, a linguagem não. */
@media (max-width: 767px) {
    .uni-tour-card,
    .uni-tour-card.is-centered {
        left: var(--uni-space-3) !important;
        right: var(--uni-space-3);
        top: auto !important;
        bottom: calc(var(--uni-space-3) + env(safe-area-inset-bottom, 0px));
        width: auto;
        transform: none;
    }
}