:root {
  --bg: #f7f8fa;
  --text: #20242a;
  --muted: #5d6876;
  --line: #d8dde5;
  --brand: #116149;
  --brand-dark: #0b3f30;
  --surface: #ffffff;
  --danger: #b3261e;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

header a {
  color: var(--brand-dark);
  font-weight: 700;
  text-decoration: none;
}

nav {
  display: flex;
  gap: 16px;
}

main {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 32px;
}

h1 {
  margin: 0 0 16px;
  font-size: 32px;
}

p {
  color: var(--muted);
}

a.button,
button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--brand);
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

form {
  display: grid;
  gap: 14px;
  max-width: 720px;
}

td form {
  display: flex;
  align-items: center;
  gap: 10px;
}

label {
  display: grid;
  gap: 6px;
  font-weight: 650;
}

input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

textarea {
  resize: vertical;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 14px;
}

/* Nome, e-mail e telefone da lista de participantes: uma linha só, com
   reticências quando o valor não cabe. SÓ estes três campos — as outras
   colunas são curtas, e cortá-las esconderia o conteúdo sem ganhar espaço.

   O texto INTEIRO continua no DOM: o Ctrl+F do navegador acha e conta o
   trecho escondido e rola a célula até ele, porque uma caixa com
   `overflow: hidden` continua rolável por código mesmo sem barra. Recortar
   em JavaScript, sim, quebraria a busca — por isso o corte é de CSS. O
   `title` de cada célula repete o valor completo para quem passa o mouse. */
.trunca {
  display: block;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

output {
  min-height: 24px;
  color: var(--danger);
}

.intro {
  padding: 48px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.logo {
  height: 32px;
  width: auto;
}

.about p {
  max-width: 68ch;
}

.actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.actions form {
  display: inline;
}

/* "complete o seu cadastro" prompt on the painel — a nudge, not an error */
.aviso {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--brand-dark);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

/* ...and the same block in green for something that just went RIGHT (the
   questionnaire recorded), so a confirmation never reads as one more pending
   task. Declared after .aviso, same specificity: the last rule wins. */
.aviso-sucesso {
  border-left-color: var(--brand);
  background: rgba(17, 97, 73, 0.09);
  color: var(--brand-dark);
}

.action-link {
  display: inline;
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--brand-dark);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 720px) {
  header,
  nav,
  td form {
    align-items: stretch;
    flex-direction: column;
  }

  main {
    padding: 24px 16px;
  }

  table {
    display: block;
    overflow-x: auto;
  }
}


/* --- Certificado (Fase G): página imprimível --- */
.certificado {
  border: 6px double #116149;
  border-radius: 8px;
  padding: 3rem 2.5rem;
  text-align: center;
  max-width: 52rem;
  margin: 2rem auto;
  background: #fff;
}
.certificado .logo { height: 64px; margin-bottom: 1rem; }

@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .no-print, header, nav, footer { display: none !important; }
  .certificado { margin: 0 auto; border-color: #116149; }
}

/* checkboxes/radios must not stretch to 100% and must sit inline with their
   label (the required toggle in the form builder, multiselect options, etc.) */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin: 0;
  flex: none;
}

label.form-group:has(> input[type="checkbox"]),
label.form-group:has(> input[type="radio"]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  margin: 0.25rem 0;
}

/* multiselect: htmlbox's checkboxGroup, one option per line. This stylesheet is
   the app's own design, not htmlbox's template, so the group's layout rules
   have to be repeated here. */
.choice-group {
  display: block;
  margin: 0.5rem 0;
  /* o título da pergunta é um nó de texto direto dentro do span (htmlbox não
     o envolve em elemento próprio), então o peso vem por herança daqui — igual
     ao das perguntas de seleção (label, 650); as opções voltam a 400 abaixo */
  font-weight: 650;
}

.choice-group > .choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  margin: 0.25rem 0;
}

/* secondary link under a form ("Esqueci minha senha") — present but quiet, so
   it never competes with the submit button */
.form-aside {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

/* the public signup URL is meant to be read and copied by hand, so it wraps
   instead of overflowing and keeps a monospace shape */
.signup-link a {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

/* the enable/regenerate/disable buttons sit side by side; each is its own form
   (they post different actions), which is why this is a flex row and not a <p> */
.link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin: 0.25rem 0 1rem;
}

/* Show/hide password. assets/password.js lifts the input out of its <label>
   (a label may not contain another labelable element) and drops both, plus the
   button, into this wrapper — which therefore has to reproduce what `label`
   gives them: a grid with the caption above the control. None of this exists
   with the script off; the field is then a plain password input. */
.password-wrap {
  display: grid;
  gap: 6px;
}

/* the button shares the input's GRID CELL and stretches to it, so it is exactly
   as tall as the field with no magic numbers to drift out of sync when the font
   or the input padding changes */
.password-wrap > input,
.password-wrap > .password-toggle {
  grid-column: 1;
  grid-row: 2;
}

.password-toggle {
  justify-self: end;
  align-self: stretch;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 1px;
  border: none;
  border-radius: 0 8px 8px 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--text);
}

/* room for the button, so a long password never runs underneath it */
.password-wrap > input {
  padding-right: 3rem;
}

/* the label of a textarea reads better above the box than beside it */
label.form-group > textarea {
  display: block;
  margin-top: 0.25rem;
}

/* hour:minute selects side by side */
.time-control {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.time-control select { width: auto; }

/* --- avatars (foto de perfil) ---------------------------------------------
   Two shapes share these rules: an <img> with the uploaded photo and a <span>
   with generated initials, so a person without a photo occupies exactly the
   same space and nothing reflows when they add one. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  object-fit: cover;      /* square-crops any photo that slipped through */
  background: #445;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
  vertical-align: middle;
}
.avatar-sm { width: 2rem; height: 2rem; font-size: 0.8rem; }
.avatar-lg { width: 6rem; height: 6rem; font-size: 2rem; }

/* The `hidden` attribute is enforced by a UA rule of the form
   `[hidden] { display: none }`, which ANY explicit display above beats. Without
   this the empty preview shows as a second blank circle next to the initials. */
.avatar[hidden] { display: none; }

/* avatar + name on one line, inside a table cell */
.avatar-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* profile photo editor: current photo beside the controls */
.photo-editor {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}
.photo-hint {
  font-size: 0.85rem;
  opacity: 0.8;
  margin: 0.25rem 0 0;
}

/* --- questionário: seções, numeração e a segunda linha do enunciado --- */

/* O formulário oficial imprime a orientação ("Regra: …", "Orientação: …") como
   uma segunda linha DENTRO do mesmo enunciado, e é assim que ela é montada aqui
   (src/routes/forms.fat, rotuloDoCampo). `pre-line` é o que mantém essa quebra
   visível — o htmlbox junta a marcação sem espaço nenhum, então nenhuma outra
   quebra de linha entra por engano. */
.form-group {
  white-space: pre-line;
}

/* Termos de aceite do questionário (consentimento LGPD, uso de imagem): um
   texto corrido em parágrafos de peso normal e, só depois, a caixa com a
   legenda — não é uma pergunta com título em negrito e opções embaixo. A
   moldura separa o termo da última pergunta da seção. */
.termo {
  margin: 1.5rem 0 0.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.termo p {
  margin: 0 0 0.75rem;
  font-weight: 400;
}
.termo .choice-group {
  margin: 0.25rem 0 0;
}

/* As seções do questionário ("Perfil", "Trajetória profissional", …). O
   questionário é longo por natureza; sem um respiro entre os blocos ele vira
   uma parede de campos. */
h2.form-section {
  margin: 2rem 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 1.1rem;
  color: var(--brand-dark);
}
h2.form-section:first-child {
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: none;
}

/* Mural de recados: o aviso da coordenação, primeiro item do bloco da turma
   no painel (e a prévia na página da turma, no admin). O conteúdo vem do
   serviço de recados já sanitizado — só as tags de formatação da lista
   permitida chegam aqui, por isso há estilo para p/ul/ol e nada mais. */
.mural {
  margin: 0.5rem 0 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 6px;
  background: var(--surface);
}
.mural h3 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-dark);
}
.mural-texto p {
  margin: 0 0 0.75rem;
}
.mural-texto ul,
.mural-texto ol {
  margin: 0.25rem 0 0.75rem 1.25rem;
  padding: 0;
}
.mural-texto > :last-child {
  margin-bottom: 0;
}
/* a prévia fica logo abaixo da textarea que a gera */
.mural-previa {
  margin-top: 0;
}


/* O crédito de rodapé (pedido do usuário, 2026-09-09). Discreto de propósito:
   fecha a página sem competir com o conteúdo. A regra de impressão lá em cima
   já esconde o <footer>, e a página do certificado passa um rodapé vazio, então
   nada disto aparece no que é feito para imprimir. */
footer {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 24px 32px 32px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

footer a {
  color: var(--brand);
}

/* Um campo desabilitado tem que PARECER desabilitado. A regra base acima define
   fundo, cor e borda em todo input/select/textarea, e declaração de autor vence
   o cinza que o navegador aplicaria sozinho — então sem isto os campos que o
   observador não pode editar ficavam pixel a pixel iguais aos editáveis, e a
   única forma de descobrir era clicar (revisão adversarial, 2026-09-09). */
input:disabled,
select:disabled,
textarea:disabled {
  background: #eef0f4;
  color: var(--muted);
  border-color: var(--line);
  cursor: not-allowed;
  opacity: 1; /* iOS aplica 0.4 por conta própria e some com o texto */
}

label:has(input:disabled),
label:has(select:disabled),
label:has(textarea:disabled) {
  color: var(--muted);
}