/* ══════════════════════════════════════════════════════════════════════════
   IMP FOUNDATION — o piso que TODA página da Impressive tem, pública ou interna.

   Nasceu da auditoria de 14/09/2026 (Vercel Web Interface Guidelines,
   PLANNING/auditoria-site/). Os achados de base apareciam em 14 páginas ao mesmo
   tempo porque cada uma escrevia o próprio `outline: none`. Consertar página por
   página é como a divergência começa — então o piso mora aqui, uma vez:

     · imp-shell.css importa este arquivo (todas as ferramentas internas)
     · as páginas que não usam o shell (studio, schedule, site público) linkam direto

   Consumidores: imp-shell.css · studio.html · schedule.html · website/*.html
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tema escuro de verdade ───────────────────────────────────────────────
   Sem isto a barra de rolagem, o calendário do <input type=date> e o menu do
   <select> nascem CLAROS sobre o fundo #09090e. */
:root { color-scheme: dark; }

/* `hidden` esconde, sempre. Sem isto, qualquer `display:flex` de página vence o
   atributo e o elemento que a regra mandou sumir continua na tela. */
[hidden] { display: none !important; }

/* ── Foco visível ─────────────────────────────────────────────────────────
   As páginas zeravam o outline e trocavam só a cor da borda: quem navega por
   teclado não enxergava onde estava. O anel só aparece com teclado
   (:focus-visible) — clique de mouse não acende nada, então nada muda para quem
   usa o mouse. O !important é deliberado e único: o foco é o que não pode ser
   apagado por uma regra de página. */
:where(a, button, summary, [role="button"], [role="checkbox"], [role="tab"], [tabindex]):focus-visible {
  outline: 2px solid #e879f9 !important;
  outline-offset: 2px;
}
:where(input, select, textarea):focus-visible {
  outline: 2px solid rgba(232, 121, 249, .55) !important;
  outline-offset: 1px;
}

/* ── Só para leitor de tela ───────────────────────────────────────────────
   Um título que organiza a página para quem não enxerga, sem mudar o visual. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Pular para o conteúdo ────────────────────────────────────────────────
   Invisível até alguém apertar Tab: aí aparece no topo e leva direto ao
   conteúdo, sem atravessar o menu inteiro. */
.skip-link {
  position: fixed; left: 1rem; top: -100px; z-index: 1000;
  padding: .6rem 1rem; border-radius: 10px;
  background: #16141e; color: #fff; font-weight: 700; text-decoration: none;
  border: 1px solid rgba(232, 121, 249, .5);
  transition: top 160ms ease;
}
.skip-link:focus { top: 1rem; }

/* ── Toque ────────────────────────────────────────────────────────────────
   manipulation: tira o atraso de ~300ms do duplo-toque no celular.
   tap-highlight: o flash cinza do iOS some; o feedback é do próprio botão. */
a, button, input, select, textarea, label, summary, [role="button"], [role="checkbox"] {
  touch-action: manipulation;
}
html { -webkit-tap-highlight-color: transparent; }

/* ── Elementos com papel de botão ─────────────────────────────────────────
   Quem não é <button> mas se comporta como um ganha o cursor e a mesma regra. */
[role="button"], [role="checkbox"] { cursor: pointer; }

/* ── Modais e gavetas ─────────────────────────────────────────────────────
   A página de trás não rola junto quando o dedo chega ao fim do modal. */
.imp-overlay, .imp-dialog, .drawer, .drawer-overlay, dialog { overscroll-behavior: contain; }

/* ── Títulos ──────────────────────────────────────────────────────────────
   Sem palavra sozinha na última linha de um título. */
h1, h2, h3 { text-wrap: balance; }

/* ── Movimento reduzido ───────────────────────────────────────────────────
   O Lucas gosta de motion — e o site tem motion. Isto vale só para quem pediu
   ao sistema operacional para reduzir animação; para todo o resto nada muda. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══ Undo — a janela de desfazer ══════════════════════════════════════════
   Visual do motor em imp-foundation.js. Fica acima do Vincent (que publica a
   própria altura em --v-reserve), no canto no desktop e em faixa no celular. */
.imp-undo-stack {
  position: fixed; z-index: 120;
  left: 1rem; bottom: calc(var(--v-reserve, 0px) + 1rem);
  display: flex; flex-direction: column; gap: .5rem;
  width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}
.imp-undo {
  pointer-events: auto;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .75rem .7rem 1rem; border-radius: 14px;
  background: rgba(22, 20, 30, .92);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .06) inset;
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: #fff; font-size: .8rem; font-variant-numeric: tabular-nums;
  /* Entra de baixo e sai para baixo — o mesmo caminho nos dois sentidos. */
  transform: translateY(12px) scale(.98); opacity: 0;
  transition: transform 320ms cubic-bezier(.2, .9, .25, 1), opacity 200ms ease;
}
.imp-undo.dentro { transform: none; opacity: 1; }
.imp-undo.saindo { transform: translateY(12px) scale(.98); opacity: 0; }
.imp-undo-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-undo-btn {
  flex: 0 0 auto; min-height: 36px; padding: 0 .9rem; border-radius: 9px;
  border: 1px solid rgba(232, 121, 249, .45); background: rgba(192, 9, 193, .18);
  color: #f5d0fe; font: inherit; font-weight: 800; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  transition: background-color 150ms ease, transform 110ms ease;
}
.imp-undo-btn:hover { background: rgba(192, 9, 193, .32); }
.imp-undo-btn:active { transform: scale(.96); }
/* O tempo que falta, como uma barra que encolhe — só transform, 60fps. */
.imp-undo-tempo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #ff1090, #8b2fc9);
  transform-origin: left center;
}
/* O item que está para sair: meio apagado, ainda visível na lista até o
   motor confirmar — some de verdade da tela via [hidden] pelo consumidor. */
.imp-saindo { opacity: .35; pointer-events: none; transition: opacity 200ms ease; }

@media (max-width: 640px) {
  .imp-undo-stack { left: .75rem; right: .75rem; width: auto; }
  .imp-undo-btn { min-height: 44px; }
}