/* ==========================================================================
   Briefing — o diálogo que abre no "Start a project"
   <dialog> nativo: traz o aprisionamento de foco, o Esc e a inércia do fundo
   sem uma linha de JavaScript. Cada pergunta é um passo; cada controlo tem
   <label> a sério e os grupos vivem em <fieldset>/<legend>.
   ========================================================================== */

.brief{
  --panel:#121212;
  --panel-2:#1c1c1c;
  --line-d:rgba(244,242,236,.16);
  border:0; padding:0; background:none;
  margin:auto;   /* o reset global apaga o auto do browser e o diálogo encosta ao canto */
  inline-size:min(880px, 94vw); max-block-size:92dvh;
  color:var(--on-dark);
}
.brief::backdrop{ background:rgba(20,19,15,.55); backdrop-filter:blur(3px); }

.brief-shell{
  background:var(--panel); border-radius:6px; overflow:hidden;
  display:flex; flex-direction:column; max-block-size:92dvh;
}

/* ---- cartão de entrada: um pedaço do logótipo, como no cartão deles ---- */
.brief-cover{ position:relative; aspect-ratio:16/7; background:var(--blue); overflow:hidden; }
.brief-cover::before{
  content:""; position:absolute; inset:-70% -20%;
  background-color:var(--bg);
  -webkit-mask:url(../img/logo.svg) no-repeat 34% center / 240% auto;
  mask:url(../img/logo.svg) no-repeat 34% center / 240% auto;
}

.brief-body{ padding:clamp(26px,4vw,48px); overflow-y:auto; }
.brief-body h2{ font-size:clamp(1.4rem,2.6vw,2rem); font-weight:800; letter-spacing:-.03em; }
.brief-body > p{ margin-block-start:.6em; color:rgba(244,242,236,.7); line-height:1.6; }

/* ---- escolha de caminho ---- */
.brief-paths{ display:grid; gap:14px; margin-block-start:2rem; }
.path{
  display:block; inline-size:100%; text-align:start; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line-d); border-radius:6px;
  padding:1.15em 1.3em; color:inherit; font:inherit;
  transition:border-color .25s ease, background .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.path:hover, .path:focus-visible{ border-color:var(--blue); background:#232323; transform:translateY(-2px); }
.path b{ display:block; font-size:1.05rem; font-weight:700; letter-spacing:-.02em; }
.path span{ display:block; margin-block-start:.35em; font-size:var(--step-small); color:rgba(244,242,236,.62); }
.path em{ display:inline-block; margin-block-start:.7em; font-style:normal;
  font-size:.78rem; color:var(--blue); }

/* ---- passos ---- */
.step{ display:none; }
.step[data-on]{ display:block; }
.step-n{ display:inline-flex; align-items:center; justify-content:center;
  min-inline-size:1.6em; padding:.1em .45em; margin-inline-end:.6em;
  background:var(--on-dark); color:var(--panel);
  border-radius:3px; font-size:.72em; font-weight:700; vertical-align:.22em; }
.step h3{ font-size:clamp(1.15rem,2.1vw,1.6rem); font-weight:700; letter-spacing:-.025em; line-height:1.3; }
.step .hint{ margin-block-start:.7em; color:rgba(244,242,236,.6); font-size:var(--step-small); line-height:1.55; }

.field{ margin-block-start:1.6rem; }
.field label{ display:block; font-size:var(--step-small); color:rgba(244,242,236,.75); margin-block-end:.5em; }
.field input[type=text], .field input[type=email], .field input[type=url], .field textarea{
  inline-size:100%; background:none; color:var(--on-dark);
  border:0; border-block-end:1px solid var(--line-d);
  padding:.6em 0; font:inherit; font-size:1.05rem;
  transition:border-color .25s ease;
}
.field textarea{ min-block-size:5em; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-block-end-color:var(--blue); }
/* :user-invalid e não :invalid — um campo vazio ainda por tocar não é um erro */
.field input:user-invalid, .field textarea:user-invalid{ border-block-end-color:#ff8b7a; }
.field input:user-invalid + .err, .field textarea:user-invalid + .err{ display:block; }
.err{ display:none; margin-block-start:.5em; font-size:.8rem; color:#ff8b7a; }

fieldset{ border:0; padding:0; margin-block-start:1.6rem; }
legend{ font-size:var(--step-small); color:rgba(244,242,236,.75); margin-block-end:.8em; padding:0; }
.opts{ display:grid; gap:10px; }
.opts.two{ grid-template-columns:repeat(2,1fr); }
.opt{ position:relative; }
.opt input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.opt span{
  display:flex; align-items:center; gap:.9em; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line-d); border-radius:5px;
  padding:.85em 1em; font-size:.98rem;
  transition:border-color .2s ease, background .2s ease;
}
.opt span::before{
  content:attr(data-k); flex:none;
  inline-size:1.7em; block-size:1.7em; display:grid; place-items:center;
  border:1px solid var(--line-d); border-radius:3px;
  font-size:.72em; color:rgba(244,242,236,.7);
}
.opt input:checked + span{ border-color:var(--on-dark); background:#252525; }
.opt input:checked + span::before{ background:var(--on-dark); color:var(--panel); border-color:var(--on-dark); }
.opt input:focus-visible + span{ outline:2px solid var(--blue); outline-offset:2px; }

/* ---- rodapé do diálogo ---- */
.brief-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:1rem clamp(26px,4vw,48px) 1.4rem;
  border-block-start:1px solid var(--line-d);
}
.brief-foot .count{ font-size:var(--step-small); color:rgba(244,242,236,.55); }
.brief-foot .nav{ display:flex; gap:8px; }
.btn-b{
  font:inherit; font-size:.95rem; font-weight:600; cursor:pointer;
  border:0; border-radius:5px; padding:.75em 1.4em;
  background:var(--blue); color:var(--panel);
  transition:filter .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.btn-b:hover, .btn-b:focus-visible{ filter:brightness(1.08); transform:translateY(-1px); }
.btn-b[disabled]{ opacity:.35; cursor:not-allowed; transform:none; }
.btn-ghost{ background:none; color:rgba(244,242,236,.7); border:1px solid var(--line-d); }
.btn-ghost:hover{ color:var(--on-dark); border-color:var(--on-dark); filter:none; }

.brief-close{
  position:absolute; inset-block-start:10px; inset-inline-end:10px; z-index:3;
  inline-size:40px; block-size:40px; display:grid; place-items:center;
  background:rgba(18,18,18,.7); color:var(--on-dark);
  border:0; border-radius:50%; cursor:pointer; font-size:1.1rem; line-height:1;
}
.brief-close:hover{ background:var(--panel); }

.brief-done{ text-align:center; padding-block:2rem; }
.brief-done h2{ font-size:clamp(1.5rem,3vw,2.2rem); }
.brief-done p{ max-inline-size:46ch; margin-inline:auto; }

@media (max-width:640px){
  .opts.two{ grid-template-columns:1fr; }
  .brief-cover{ aspect-ratio:16/9; }
}
@media (prefers-reduced-motion:reduce){
  .path, .btn-b{ transition:none; }
}