/* Formulário inicial do Produto em <dialog> (modal do board): geometria SHARP + tokens da casa,
   espelha Ui::Confirm (dialog transparente; a caixa carrega borda/sombra; sem cantos arredondados)
   e Systems::Form (labels mono uppercase, inputs flat com foco na marca). Reusa as keyframes do confirm. */
.c-project-form-dialog{
  padding: 0; border: 0; background: transparent; color: var(--ink);
  max-width: 520px; width: calc(100vw - 40px);
}
.c-project-form-dialog::backdrop{
  background: color-mix(in srgb, var(--ink) 46%, transparent); backdrop-filter: blur(2px);
}
.c-project-form-dialog[open]{ animation: c-ui-confirm-in 160ms var(--ease) both; }
.c-project-form-dialog[open]::backdrop{ animation: c-ui-confirm-fade 160ms var(--ease) both; }
.c-project-form-dialog__close{
  position: absolute; top: 16px; right: 18px; width: 26px; height: 26px; border: 0; padding: 0;
  background: transparent; color: var(--ink-3); cursor: pointer; font: 400 var(--fs-body)/1 var(--font-ui);
}
.c-project-form-dialog__close:hover{ color: var(--ink); }

.c-project-form{
  position: relative; background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px -28px rgba(17, 17, 17, .55); padding: 26px 28px 28px;
}
.c-project-form__head{ margin-bottom: 22px; }
.c-project-form__eyebrow{
  font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.c-project-form__title{ font-weight: 800; font-size: var(--fs-section); letter-spacing: -.02em; margin: 9px 0 0; }
.c-project-form__error{
  font: 500 var(--fs-meta)/1.4 var(--font-mono); color: var(--danger); border: 1px solid var(--danger);
  padding: 10px 12px; margin: 0 0 20px;
}
.c-project-form__body{ display: flex; flex-direction: column; gap: 20px; }
.c-project-form__field{ display: flex; flex-direction: column; gap: 8px; }
.c-project-form__label{
  font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.c-project-form__opt{ letter-spacing: .12em; color: var(--line-2); } /* "opcional" — herda o mono do label, mais claro */
.c-project-form__input{
  width: 100%; font: 400 var(--fs-body)/1.3 var(--font-ui); color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line-2); padding: 11px 13px; outline: none;
  transition: border-color var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
}
.c-project-form__input::placeholder{ color: var(--ink-3); }
.c-project-form__input:focus{ border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.c-project-form__textarea{ resize: vertical; min-height: 88px; }
.c-project-form__date{ width: auto; }
.c-project-form__submit{ margin-top: 6px; width: 100%; text-align: center; }

/* Sistema: checkbox + revelação em dois níveis (escolher qual · batizar o novo). */
.c-project-form__check{ display: flex; align-items: center; gap: 9px; cursor: pointer; }
.c-project-form__checkbox{
  appearance: none; width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer;
  border: 1.5px solid var(--line-2); background: var(--surface);
  transition: background var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.c-project-form__checkbox:checked{ background: var(--brand); border-color: var(--brand); }
/* o "tique" é desenhado, não um glifo: geometria sharp, como o resto do DS */
.c-project-form__checkbox:checked::after{
  content: ""; display: block; width: 4px; height: 8px; margin: 1px 0 0 4.5px;
  border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
.c-project-form__checkbox:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }
.c-project-form__check-label{ font: 500 var(--fs-ui)/1.2 var(--font-ui); color: var(--ink); }

.c-project-form__hint{ font: 400 var(--fs-meta)/1.45 var(--font-ui); color: var(--ink-3); }
/* O select tinha tamanho SÓ porque o ERB (projects/_form.html.erb) aplica __input junto — regra
   própria desfaz a dependência da ordem de classes (achado do doc 50). */
.c-project-form__select{ font-family: inherit; font-size: var(--fs-body); }

.c-project-form__nested{
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 4px; padding-left: 13px; border-left: 2px solid var(--line);
}
/* O CSS de autor (display:flex acima) VENCE o [hidden] do UA — sem este override, o bloco revelado
   nunca esconde. Armadilha documentada no CLAUDE.md; já mordeu duas vezes. */
.c-project-form__nested[hidden],
.c-project-form__field[hidden]{ display: none; }