/* ═══════════════════════════════════════════════════════════════════════════
   Formulário ao vivo. Escopo .lf-*, só tokens.
   Tela de takeover: ocupa a viewport inteira, sem topnav do sistema — quem
   responde é o cliente, não o time.
   ═══════════════════════════════════════════════════════════════════════════ */

.lf {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    background: var(--surface-base);
    color: var(--text-primary);
    font-family: var(--font-sans);
    overflow: hidden;
}

/* ── Borda de progresso ─────────────────────────────────────────────────────
   Laterais sobem até 70% do percurso; o topo fecha do centro nos 30% finais. */
.lf-borda { position: fixed; z-index: 5; pointer-events: none; }
.lf-borda__fill { position: absolute; background: var(--gradient-flow-y); background-size: 100% 300%; }

.lf-borda--esq, .lf-borda--dir { top: 0; bottom: 0; width: 4px; }
.lf-borda--esq { left: 0; }
.lf-borda--dir { right: 0; }
.lf-borda--esq .lf-borda__fill, .lf-borda--dir .lf-borda__fill {
    bottom: 0; left: 0; width: 100%; height: 0;
    transition: height var(--dur-slow) var(--ease-out);
}

.lf-borda--topo { top: 0; left: 0; right: 0; height: 4px; }
.lf-borda--topo .lf-borda__fill {
    top: 0; height: 100%; width: 0;
    background: var(--gradient-flow-x); background-size: 300% 100%;
    transition: width var(--dur-slow) var(--ease-out);
}
.lf-borda__fill--e { left: 0; }
.lf-borda__fill--d { right: 0; }

/* ── Topo e rodapé ──────────────────────────────────────────────────────── */
.lf-topo, .lf-rodape {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-5) var(--space-8);
    flex-shrink: 0;
}
.lf-logo { height: 18px; width: auto; display: block; opacity: 0.8; }
html[data-theme="light"] .lf-logo { content: url("/assets/logo/5k9-lockup-horizontal-ink.png"); }
.lf-contagem {
    font-size: var(--text-xs); font-weight: 700;
    color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
.lf-dica { font-size: var(--text-xs); color: var(--text-tertiary); }
.lf-rodape button:disabled { opacity: 0.35; pointer-events: none; }

/* ── Palco ──────────────────────────────────────────────────────────────── */
.lf-palco {
    flex: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-6) var(--space-8);
    overflow-y: auto;
    opacity: 0; transform: translateY(12px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.lf-palco.is-visivel { opacity: 1; transform: translateY(0); }

.lf-pergunta {
    width: 100%; max-width: 620px;
    display: flex; flex-direction: column; gap: var(--space-4);
}

.lf-ordem {
    display: inline-flex; align-items: baseline; gap: 4px;
    font-size: var(--text-sm); font-weight: 700; color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.lf-ordem span { color: var(--text-tertiary); font-weight: 500; }

.lf-titulo {
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 600; line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary); margin: 0;
    text-wrap: balance;
}
.lf-obrig { color: var(--accent); margin-left: 2px; }
.lf-desc {
    font-size: var(--text-body); color: var(--text-secondary);
    line-height: var(--leading-body); margin: 0;
}

.lf-campo { margin-top: var(--space-2); }

/* ── Tela de início ─────────────────────────────────────────────────────── */
.lf-capa { gap: var(--space-5); }
.lf-capa__titulo {
    font-size: clamp(30px, 5vw, 48px);
    font-weight: 700; line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--text-primary); margin: 0;
    text-wrap: balance;
}
.lf-capa__texto {
    font-size: var(--text-lg, 20px); color: var(--text-secondary);
    line-height: var(--leading-body); margin: 0; max-width: 52ch;
    white-space: pre-wrap;
}
.lf-capa__meta { font-size: var(--text-sm); color: var(--text-tertiary); }

/* ── Entradas de texto ──────────────────────────────────────────────────── */
.lf-input {
    width: 100%;
    font-family: var(--font-sans);
    font-size: clamp(18px, 2.2vw, 22px);
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-default);
    padding: var(--space-3) 0;
    outline: none;
    transition: border-color var(--dur-fast);
}
.lf-input:focus { border-bottom-color: var(--accent); }
.lf-input::placeholder { color: var(--text-tertiary); }
.lf-textarea {
    border: 2px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    line-height: var(--leading-body);
    resize: vertical;
    min-height: 120px;
}
.lf-textarea:focus { border-color: var(--accent); }

.lf-campo.is-invalido .lf-input { border-color: var(--danger); }
.lf-erro { margin: 0; font-size: var(--text-sm); color: var(--danger); }
.lf-erro[hidden] { display: none; }

/* ── Opções ─────────────────────────────────────────────────────────────── */
.lf-opcoes { display: flex; flex-direction: column; gap: var(--space-2); }
/* Muitas opções (o briefing tem 16) precisam de coluna dupla, senão a lista
   passa da altura da tela e some o botão de confirmar. */
.lf-opcoes--multi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-2);
}

.lf-opcao {
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 52px; padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-sans); font-size: var(--text-body);
    text-align: left; cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.lf-opcao:hover { border-color: var(--accent-border); transform: translateY(-1px); }
.lf-opcao.is-sel {
    background: var(--accent-muted);
    border-color: var(--accent);
    color: var(--text-primary);
}
.lf-opcao--grande { flex: 1; justify-content: center; min-height: 68px; font-weight: 600; }

.lf-tecla {
    width: 22px; height: 22px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xs);
    background: var(--surface-3);
    font-size: var(--text-xs); font-weight: 700; color: var(--text-tertiary);
}
.lf-tecla--box { border-radius: var(--radius-xs); }
.lf-opcao.is-sel .lf-tecla {
    background: var(--accent); border-color: var(--accent);
    color: var(--accent-contrast);
}

/* Opção fora de alcance por causa do limite: continua legível (quem responde
   precisa ler o que descartou), mas claramente indisponível. */
.lf-opcao.is-bloqueada {
    opacity: 0.42;
    cursor: not-allowed;
    border-style: dashed;
}
.lf-opcao.is-bloqueada:hover { border-color: var(--border-default); transform: none; }

.lf-contador { font-variant-numeric: tabular-nums; }

.lf-sn { display: flex; gap: var(--space-3); }

/* ── Nota ───────────────────────────────────────────────────────────────── */
.lf-nota-bloco { display: flex; flex-direction: column; gap: var(--space-3); }
.lf-notas { display: flex; gap: var(--space-2); }
.lf-nota {
    flex: 1; height: 60px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-sans); font-size: var(--text-h3); font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.lf-nota:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.lf-nota.is-sel { background: var(--accent-muted); border-color: var(--accent); color: var(--accent); }
.lf-nota-legenda {
    display: flex; justify-content: space-between;
    font-size: var(--text-xs); color: var(--text-tertiary);
}

/* ── Ações ──────────────────────────────────────────────────────────────── */
.lf-acoes { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.lf-pular {
    background: none; border: none; cursor: pointer;
    font-family: var(--font-sans); font-size: var(--text-sm);
    color: var(--text-tertiary); text-decoration: underline;
    text-underline-offset: 3px;
}
.lf-pular:hover { color: var(--text-primary); }

.lf-ajuda { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-tertiary); }
.lf-ajuda--bloco {
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--warning-muted);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}

/* ── Aviso de retomada ──────────────────────────────────────────────────── */
.lf-retomada {
    position: fixed; bottom: var(--space-8); left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    font-size: var(--text-xs); color: var(--text-secondary);
    z-index: 20;
}
.lf-retomada i, .lf-retomada svg { width: 13px; height: 13px; color: var(--accent); }

/* ── Tela final ─────────────────────────────────────────────────────────── */
.lf-fim { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }

/* UMA superfície de gradiente, não duas metades.
   A revelação vem de clip-path: o retângulo abre do centro para as bordas
   enquanto o gradiente permanece inteiro por baixo — então não existe
   emenda no meio, e a diagonal do gradiente atravessa a tela sem quebra.
   A borda de progresso da página continua sendo dois objetos porque ali a
   função é outra: medir avanço, não preencher. */
.lf-fim__fundo {
    position: absolute; inset: 0;
    background: var(--gradient-violet);
    background-size: 160% 160%;
    background-position: 50% 50%;
    clip-path: inset(0 50% 0 50%);
    transition: clip-path 0.62s cubic-bezier(0.6, 0, 0.2, 1);
    animation: ds-drift 22s var(--ease-inout) infinite;
}
.lf-fim.is-aberto .lf-fim__fundo { clip-path: inset(0 0 0 0); }

.lf-fim__conteudo {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: var(--space-6);
    opacity: 0; transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.lf-fim__conteudo.is-visivel { opacity: 1; transform: translateY(0); }
.lf-fim__marca {
    width: 68px; height: 68px; margin-bottom: var(--space-5);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
}
.lf-fim__marca i, .lf-fim__marca svg { width: 32px; height: 32px; color: #fff; }
.lf-fim__conteudo h1 {
    font-size: clamp(36px, 6vw, 56px); font-weight: 700;
    letter-spacing: var(--tracking-display);
    color: #fff; margin: 0 0 var(--space-3);
}
.lf-fim__conteudo p {
    font-size: var(--text-body); line-height: var(--leading-body);
    color: rgba(255, 255, 255, 0.88); max-width: 400px; margin: 0;
}
.lf-fim__cta {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin-top: var(--space-6); height: 44px; padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    background: #fff; color: var(--brand-raw, #7F00E1);
    font-size: var(--text-sm); font-weight: 600; text-decoration: none;
}
.lf-fim__cta i, .lf-fim__cta svg { width: 15px; height: 15px; }
.lf-fim__nota { margin-top: var(--space-6); font-size: var(--text-sm); color: rgba(255,255,255,0.75); }

/* ── Telas simples (erro) ───────────────────────────────────────────────── */
.lf--simples { align-items: center; justify-content: center; text-align: center; padding: var(--space-8); }
.lf--simples .lf-pergunta { align-items: center; }

@media (prefers-reduced-motion: reduce) {
    .lf-palco, .lf-borda__fill, .lf-fim__fundo, .lf-fim__conteudo { transition: none !important; }
    .lf-fim__fundo { clip-path: inset(0) !important; animation: none !important; }
    .lf-opcao:hover, .lf-nota:hover { transform: none; }
}

/* ── Celular ────────────────────────────────────────────────────────────────
   É onde a maior parte dos briefings é respondida. O rodapé sai do fluxo e o
   palco recebe o espaço, para o teclado virtual não engolir o botão. */
@media (max-width: 640px) {
    .lf-topo, .lf-rodape { padding: var(--space-4) var(--space-5); }
    .lf-palco { padding: var(--space-4) var(--space-5); align-items: flex-start; }
    .lf-pergunta { padding-top: var(--space-4); }
    .lf-dica { display: none; }
    .lf-opcoes--multi { grid-template-columns: minmax(0, 1fr); }
    .lf-acoes { flex-direction: column; align-items: stretch; }
    .lf-acoes .ds-btn { width: 100%; }
    .lf-nota { height: 52px; font-size: var(--text-body); }
}