/* The registration wizard.
 *
 * Its own stylesheet because the landing page and the wizard share only the
 * brand: one is read, the other is worked through. Tokens only; brand.css must
 * load first.
 */

.wizard-body { background: var(--z-surface-1); }

.wizard {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--z-space-6) var(--z-space-4) var(--z-space-8);
}

.wizard h1 {
  margin: 0 0 var(--z-space-5);
  font-size: var(--z-text-h1);
}

/* ------------------------------------------------------------- the stepper */

.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-space-2);
  margin: 0 0 var(--z-space-6);
  padding: 0;
  list-style: none;
}

.stepper-item {
  display: flex;
  align-items: center;
  gap: var(--z-space-2);
  padding: var(--z-space-2) var(--z-space-3);
  border-radius: var(--z-r-pill);
  font-size: var(--z-text-sm);
  color: var(--z-ink-300);
  background: var(--z-surface-2);
}

.stepper-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--z-r-pill);
  background: var(--z-border);
  color: var(--z-ink-500);
  font-size: var(--z-text-xs);
  font-weight: 600;
}

.stepper-item.current {
  background: var(--z-brand-1);
  color: var(--z-brand-1-ink);
}

.stepper-item.current .stepper-number {
  background: color-mix(in srgb, var(--z-brand-1-ink) 24%, transparent);
  color: var(--z-brand-1-ink);
}

.stepper-item.done { color: var(--z-ok); }
.stepper-item.done .stepper-number { background: var(--z-ok); color: var(--z-surface-0); }

/* Only completed steps are clickable. Jumping forward is not offered, because
   the backend would refuse it and a control that refuses itself is noise. */
.stepper-item.clickable { cursor: pointer; }
.stepper-item.clickable:hover { background: var(--z-surface-0); }

/* ---------------------------------------------------------------- the steps */

.wizard-step {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-4);
  padding: var(--z-space-6);
  background: var(--z-surface-0);
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-lg);
}

.wizard-step[hidden] { display: none; }

.step-lead { margin: 0; color: var(--z-ink-500); }

.wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-space-3);
  justify-content: flex-end;
}

.colour-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--z-space-3);
}

input[type="color"] {
  padding: var(--z-space-1);
  height: var(--z-tap-min);
  cursor: pointer;
}

/* Visually gone, still an input. The file picker is driven by a real button,
   but the input keeps focus, keyboard and assistive-technology behaviour. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------- the palette */

.palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: var(--z-space-3);
}

/* Each swatch shows BOTH colours of the pair, in the proportion the product
   uses them: the chrome fills, the accent is a bar. A single square would be
   asking somebody to choose a pair while showing them half of it. */
.palette-swatch {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
  height: 3.75rem;
  padding: 0;
  border: 2px solid var(--z-border);
  border-radius: var(--z-r-md);
  background: var(--swatch-1);
  cursor: pointer;
  overflow: hidden;
}

.palette-swatch .swatch-accent {
  height: 0.875rem;
  background: var(--swatch-2);
}

.palette-swatch:hover { border-color: var(--z-border-strong); filter: none; }

.palette-swatch[aria-checked="true"] {
  border-color: var(--z-ink-800);
  box-shadow: 0 0 0 2px var(--z-surface-0) inset;
}

/* The fine-tuning drawer. Closed by default: the palette is the decision, the
   two wells are the adjustment, and showing both at once is what made the step
   read as two unrelated colour fields. */
.tune > summary {
  cursor: pointer;
  font-size: var(--z-text-sm);
  font-weight: 600;
  color: var(--z-ink-500);
  list-style: revert;
}

.tune[open] > summary { margin-bottom: var(--z-space-3); }

/* ------------------------------------------------------------ the logo */

.logo-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--z-space-3);
}

/* Round, centred and large enough to judge: a 24px thumbnail cannot tell you
   whether a logo survives being small, which is the one thing this preview is
   for. */
.logo-frame {
  display: grid;
  place-items: center;
  width: 7.5rem;
  height: 7.5rem;
  padding: var(--z-space-3);
  border: 2px dashed var(--z-border-strong);
  border-radius: var(--z-r-pill);
  background: var(--z-surface-1);
  cursor: pointer;
  overflow: hidden;
}

.logo-frame:hover { border-color: var(--z-ink-300); filter: none; }

.logo-frame[data-empty="false"] {
  border-style: solid;
  border-color: var(--z-border);
  background: var(--z-surface-0);
}

.logo-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-frame .material-symbols-outlined {
  font-size: 32px;
  color: var(--z-ink-300);
}

.logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-space-2);
  justify-content: center;
}

/* The code is short and exact, so it reads as data. */
.code-input {
  font-family: var(--z-font-mono);
  font-size: var(--z-text-h2);
  letter-spacing: 0.24em;
  text-align: center;
}

/* ------------------------------------------------------------------ fields */

/* The panel defines these too. Duplicated rather than shared because the two
   surfaces deploy from separate roots and neither can link the other's
   stylesheet — the same reason each carries its own copy of brand.css. */

.field { display: flex; flex-direction: column; gap: var(--z-space-2); }

.field > span {
  font-size: var(--z-text-sm);
  font-weight: 600;
  color: var(--z-ink-500);
}

.field-help {
  margin: 0;
  font-size: var(--z-text-sm);
  color: var(--z-ink-400);
}

.field-help[hidden] { display: none; }

.field-error {
  margin: 0;
  color: var(--z-sev-critico);
  font-size: var(--z-text-sm);
}

.field-error[hidden] { display: none; }

.handle-echo {
  margin: 0;
  padding: var(--z-space-3);
  border-radius: var(--z-r-sm);
  background: var(--z-surface-2);
  font-family: var(--z-font-mono);
  color: var(--z-ink-700);
}

.handle-echo[hidden] { display: none; }

/* ------------------------------------------------------------- the preview */

/* What makes a colour choice a decision rather than a guess: the header and a
   module tile as they will actually look. */
.brand-preview { margin: 0; }

.brand-preview figcaption {
  margin-bottom: var(--z-space-2);
  font-size: var(--z-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--z-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--z-ink-300);
}

.preview-frame {
  --preview-1: var(--z-ink-800);
  --preview-2: var(--z-ink-700);
  /* Written by the wizard from the chosen colour, so a light choice does not
     paint white bars on a white header. */
  --preview-ink: var(--z-surface-0);
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-md);
  overflow: hidden;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: var(--z-space-3);
  padding: var(--z-space-3) var(--z-space-4);
  background: var(--preview-1);
}

.preview-logo {
  width: 24px;
  height: 24px;
  border-radius: var(--z-r-xs);
  background: var(--preview-ink);
  opacity: .9;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Once a real logo is chosen it replaces the placeholder block, so the preview
   stops being a diagram of a header and becomes that company's header. */
.preview-logo[data-has-logo="true"] { opacity: 1; background-color: transparent; }

.preview-company {
  flex: 1;
  height: 10px;
  border-radius: var(--z-r-pill);
  background: var(--preview-ink);
  opacity: .5;
  max-width: 9rem;
}

.preview-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--z-space-2);
  margin: var(--z-space-4);
  padding: var(--z-space-4);
  border-radius: var(--z-r-md);
  box-shadow: inset 0 0 0 1px var(--z-border);
}

.preview-tile .material-symbols-outlined {
  font-size: 28px;
  color: var(--preview-2);
}

@media (max-width: 26rem) {
  /* Usable at 360px: the wizard is filled in on a phone, standing up. */
  .wizard { padding: var(--z-space-4) var(--z-space-3); }
  .wizard-step { padding: var(--z-space-4); }
  .colour-row { grid-template-columns: 1fr; }
  .wizard-actions { flex-direction: column-reverse; }
  .wizard-actions > * { width: 100%; }
  .stepper-item span:last-child { display: none; }
}

/* ------------------------------------------- a moldura da landing, no assistente

   O assistente passou a carregar `landing.css` para vestir o mesmo cabeçalho, o
   mesmo rodapé e a mesma aurora. O que segue são os ajustes de encaixe:
   `wizard.css` carrega por último e vence onde as duas folhas dizem coisas
   diferentes sobre o mesmo elemento.

   **A aurora fica mais fraca aqui.** Na landing ela tem 26% de opacidade atrás
   de texto para ler; aqui, atrás de um formulário de CNPJ, ela é ruído — e um
   campo com fundo desfocado atrás é um campo que a pessoa relê para ter certeza
   do que digitou. */

.wizard-body { background: var(--z-surface-1); }
.wizard-body .aurora { opacity: .14; }

/* Coluna, com o rodapé no fim — como no resto do site. */
.wizard-body {
  display: flex;
  flex-direction: column;
  /* `100dvh` depois de `100vh`, pelo mesmo motivo de `styles.css`. Aqui pesa
     mais: a tela neutra de `/entrar-na-empresa` — "Link indisponível" e um
     botão — cabe inteira num celular, e `100vh` fazia sobrar rolagem embaixo
     dela como se houvesse mais alguma coisa para ler. */
  min-height: 100vh;
  min-height: 100dvh;
}

.wizard {
  flex: 1;
  width: 100%;
  /* 46rem contra 40rem: o cartão de vidro tem preenchimento próprio, e sem o
     acréscimo a coluna de campos ficaria mais estreita do que era antes. */
  max-width: 46rem;
  padding-block: var(--z-space-7);
}

/* O passo a passo vive num cartão de vidro, como os da landing. Sem ele o
   formulário flutuaria direto sobre a aurora, e um campo branco sobre um fundo
   colorido perde a borda. */
.wizard-step,
.wizard > .stepper {
  background: color-mix(in srgb, var(--z-surface-0) 92%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--z-border) 70%, transparent);
  border-radius: var(--z-r-lg);
  padding: var(--z-space-6);
  box-shadow: 0 24px 60px -44px color-mix(in srgb, var(--z-ink-900) 70%, transparent);
}

.wizard > .stepper {
  padding: var(--z-space-4);
  margin-bottom: var(--z-space-5);
}

/* O título com o degradê da marca, na ordem da revisão 2 — o mesmo do herói e
   das páginas legais. É a mesma página do mesmo produto. */
.wizard h1 {
  color: var(--z-ink-900);
  background: linear-gradient(100deg,
    var(--z-cat-saude), var(--z-cat-seguranca) 38%,
    var(--z-cat-ambiente) 68%, var(--z-cat-qualidade));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--z-font-display);
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  letter-spacing: var(--z-tracking-display);
}

/* `landing.css` dá aos botões um brilho que corre no hover e uma elevação. Num
   assistente isso vira movimento a cada passo; aqui eles voltam a ser botões. */
.wizard-body .primary-button::after { content: none; }
.wizard-body .primary-button:hover,
.wizard-body .ghost-button:hover { transform: none; }