/*
 * Ritmo vertical das páginas de formulário e de resumo.
 *
 * O export entrega este espaçamento através de um utilitário de fluxo que só
 * existe no catálogo (l-catalog-flow); nas páginas reais os blocos ficavam
 * encostados uns aos outros. Aqui repõem-se apenas os tokens que o próprio
 * sistema de design já define — sem novos valores, cores ou componentes.
 */

/*
 * Lacuna da UI Library: componentes que definem o próprio `display`
 * (c-alert, c-error-summary) ignoram o atributo `hidden`.
 */
[hidden] {
  display: none;
}

body:not([data-page-family="submission-flow"]) .c-error-summary {
  margin-bottom: 50px;
}

/*
 * Lacuna da UI Library: a folga entre a caixa e o texto só existe nas
 * variantes `.c-choice-group--plain/--checkbox-card`. Uma opção isolada
 * (ex.: consentimento de privacidade no formulário de contacto) ficava com a
 * caixa encostada à etiqueta. O `gap` base não altera essas variantes, que o
 * definem com maior especificidade.
 */
body:not([data-page-family="submission-flow"]) .c-choice-group__option {
  gap: var(--esil-choice-gap);
}

/* Campos depois do texto introdutório da secção. */
body:not([data-page-family="submission-flow"]) .c-section__intro + .l-fields,
body:not([data-page-family="submission-flow"]) .l-fields + .l-fields,
body:not([data-page-family="submission-flow"]) .c-section__title + form,
body:not([data-page-family="submission-flow"]) .c-section__title + .c-alert,
body:not([data-page-family="submission-flow"]) .c-section__title + .l-fields,
body:not([data-page-family="submission-flow"]) .c-section__intro + form {
  margin-top: var(--esil-space-form-group);
}

/* Navegação/checklist do resumo. */
body:not([data-page-family="submission-flow"]) .c-section__title + nav,
body:not([data-page-family="submission-flow"]) .c-section__intro + nav,
body:not([data-page-family="submission-flow"]) nav + .c-review-section {
  margin-top: var(--esil-space-form-group);
}

/* Co-autores: os papéis (corresponding/presenting) seguem o repetidor; com o
 * status vazio a etiqueta encostava ao botão "Add Another Co-author". */
body:not([data-page-family="submission-flow"]) .c-repeater + .l-fields {
  margin-top: var(--esil-space-form-group);
}

/* Avisos/notas que acompanham um grupo de campos. */
body:not([data-page-family="submission-flow"]) .l-fields + .c-note,
body:not([data-page-family="submission-flow"]) .l-fields + .c-copy-reference,
body:not([data-page-family="submission-flow"]) .c-alert + .l-fields,
body:not([data-page-family="submission-flow"]) .c-alert + .c-form-actions {
  margin-top: var(--esil-space-form-group);
}

/* Blocos do resumo (Review e Status). */
body:not([data-page-family="submission-flow"]) .c-review-section + .c-review-section,
body:not([data-page-family="submission-flow"]) .c-status-card + .c-alert,
body:not([data-page-family="submission-flow"]) .c-alert + .c-status-card,
body:not([data-page-family="submission-flow"]) .c-section__intro + .c-form-actions {
  margin-top: var(--esil-space-section-gap);
}

/* Bloco de filtros/ações acima de uma tabela (backoffice). */
body:not([data-page-family="submission-flow"]) .l-fields + .c-editorial-table__viewport,
body:not([data-page-family="submission-flow"]) .c-form-actions + .c-editorial-table__viewport,
body:not([data-page-family="submission-flow"]) .c-form-field + .l-actions {
  margin-top: var(--esil-space-form-group);
}


/* Densidade do backoffice: é uma ferramenta de trabalho, não uma página
 * editorial. Reduz apenas o ritmo vertical, com os tokens existentes. */
.admin-shell > .c-section {
  padding-block: 0;
}

.admin-shell > .c-section + .c-section {
  padding-top: var(--esil-space-section-gap);
}

.admin-shell > .c-section:first-child {
  padding-top: var(--esil-space-section-gap);
}

/* Filtros do backoffice: várias colunas em ecrã largo (o formulário do site
 * empilha a duas colunas, o que dá três linhas para seis filtros).
 * 110px de mínimo com o gap de 24px: os sete campos cabem numa linha a partir
 * de ~950px. O gap de 48px deixava-os com 155px e cortava o placeholder. */
.admin-shell .l-fields__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--esil-space-24);
}

.admin-shell .l-fields__row > * + * {
  margin-top: 0;
}

/* Páginas curtas: o rodapé fica no fundo da janela em vez de meio da página. */
body[data-chrome="admin"] {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body[data-chrome="admin"] > main {
  flex: 1 0 auto;
}

/* Rodapé do backoffice: faixa legal curta e separada do último bloco. O
 * `.admin-shell > .c-section` anula o `padding-block`, o que colava o conteúdo
 * ao rodapé. */
.admin-shell > .c-section:last-child {
  padding-bottom: var(--esil-space-section-gap);
}

.c-site-footer--admin {
  padding-top: var(--esil-space-16);
}

/* No site a faixa legal afasta-se do bloco de marcas; aqui não há bloco acima. */
.c-site-footer--admin .c-site-footer__legal {
  margin-top: 0;
}

.c-site-footer--admin .c-site-footer__legal-inner {
  padding-block: var(--esil-space-16);
}

/* Blocos empilhados dentro do backoffice: 24px em vez do intervalo editorial. */
.admin-shell .l-stack > :not(:first-child) {
  margin-top: var(--esil-space-24);
}

.admin-shell > .c-section + .c-section {
  padding-top: var(--esil-space-24);
}

.admin-topbar__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esil-space-form-group);
  align-items: flex-end;
  justify-content: space-between;
}

.admin-topbar__row .l-actions {
  margin-top: 0;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esil-space-action) var(--esil-space-form-group);
}

.admin-shell .c-editorial-table td,
.admin-shell .c-editorial-table th {
  padding-block: var(--esil-space-label-control);
}

/* Listas de passos depois de uma introdução (Success). */
body:not([data-page-family="submission-flow"]) .c-section__intro + .c-editorial-list {
  margin-top: var(--esil-space-form-group);
}

body:not([data-page-family="submission-flow"]) .c-editorial-list + .l-actions {
  margin-top: var(--esil-space-form-group);
}

/* Ações na mesma linha dos campos: a célula alinha com os controlos (etiqueta
 * vazia igual à dos vizinhos) e as ações quebram com o gap canónico. */
.admin-shell .l-fields__row > .admin-inline-actions {
  align-self: start;
}

.admin-shell .admin-inline-actions .l-actions {
  margin-top: 0;
}

/* O ritmo do site (`body[data-page-family="cfp-site"] … .l-actions`) é mais
 * específico e voltava a empurrar o botão 24px abaixo do controlo. */
.admin-shell .l-fields__row > .admin-inline-actions > .l-actions {
  margin-top: 0;
}

/* Título de secção seguido de conteúdo: separa a linha de acento do bloco. */
.admin-shell .c-section__title + :not(.c-section__intro) {
  margin-top: var(--esil-space-24);
}

/* Título com um bloco acima: mais ar em cima do que em baixo. */
.admin-shell .c-section__title:not(:first-child) {
  margin-top: var(--esil-space-form-group);
}

/* Colunas de referência/data não quebram. */
.admin-shell .admin-nowrap {
  white-space: nowrap;
}

/* Secções consecutivas do backoffice: ar em cima do bloco seguinte. */
.admin-shell > .c-section + .c-section {
  padding-top: var(--esil-section-inset-block);
}

/* Texto explicativo depois de uma tabela não fica colado a ela. */
.admin-shell .c-editorial-table__viewport + p {
  margin-top: var(--esil-space-24);
}

/* Coluna de seleção: encosta ao controlo, com o mesmo espaço dos dois lados. */
.admin-shell .c-editorial-table th:first-child,
.admin-shell .c-editorial-table td:first-child {
  width: 1px;
  white-space: nowrap;
  /* A célula seguinte já traz o seu inset: sem este corte o espaço à direita
   * do controlo ficava a dobrar. */
  padding-inline-end: 0;
}

/* Ritmo de conteúdo no site: uma linha de ações, uma lista ou uma nota nunca
 * fica colada ao elemento anterior. (As margens do export estão a zero, pelo
 * que o ritmo tem de ser declarado aqui.) */
body[data-page-family="cfp-site"] .c-form-actions:not(:first-child),
body[data-page-family="cfp-site"] .l-actions:not(:first-child),
body[data-page-family="cfp-site"] .c-editorial-list:not(:first-child),
body[data-page-family="cfp-site"] .c-verification:not(:first-child),
body[data-page-family="cfp-site"] .c-note:not(:first-child) {
  margin-top: var(--esil-space-24);
}

/* Lista (passos, itens) seguida de texto explicativo. */
body[data-page-family="cfp-site"] .c-editorial-list + .c-section__text,
body[data-page-family="cfp-site"] .c-editorial-list + .c-context-text {
  margin-top: var(--esil-space-24);
}

/* Ação final de um card depois do texto. */
body[data-page-family="cfp-site"] .c-card__text + .c-card__action {
  margin-top: var(--esil-space-16);
}

/* Checklist de ligações do Review: alinhado à esquerda, sem marcadores. */
body[data-page-family="cfp-site"] .c-review-checklist {
  padding-inline-start: 0;
  list-style: none;
}

body[data-page-family="cfp-site"] .c-review-checklist > li + li {
  margin-top: var(--esil-space-8);
}

/*
 * Fact com badge circular (PDF 03-03-A, secção 01). A UI Library não tem
 * componente para "ícone + label + valor"; a lacuna está registada em
 * tools/README.md e só se compõe com peças existentes (badge = c-alert__icon).
 */
body:not([data-page-family="submission-flow"]) [data-panel-facts] > dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esil-layout-gap);
  margin: 0;
}

@media (min-width: 768px) {
  body:not([data-page-family="submission-flow"]) [data-panel-facts] > dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body:not([data-page-family="submission-flow"]) [data-panel-facts] > dl > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--esil-space-16);
  row-gap: var(--esil-space-4);
  align-items: center;
}

/* `display: contents`: badge, label e valor passam a ser itens da grelha. */
body:not([data-page-family="submission-flow"]) [data-panel-facts] > dl dt {
  display: contents;
  color: var(--esil-simple-card-heading);
  font-size: var(--esil-control-label-text);
  font-weight: var(--esil-weight-medium);
  line-height: var(--esil-leading-body);
}

body:not([data-page-family="submission-flow"]) [data-panel-facts] > dl dt > span:not(.c-alert__icon) {
  grid-column: 2;
}

body:not([data-page-family="submission-flow"]) [data-panel-facts] > dl dt > .c-alert__icon {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: center;
}

/* Abaixo de 768px o badge do alerta não é circular (é a aba do alerta). */
@media (max-width: 767px) {
  body:not([data-page-family="submission-flow"]) [data-panel-facts] > dl dt > .c-alert__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--esil-size-48);
    height: var(--esil-size-48);
    border-radius: 50%;
  }
}

body:not([data-page-family="submission-flow"]) [data-panel-facts] > dl dd {
  grid-column: 2;
  margin: 0;
  color: var(--esil-color-text);
  font-size: var(--esil-text-h5);
  font-weight: var(--esil-weight-semibold);
  line-height: var(--esil-leading-heading);
}

/*
 * Rota de submissão (PDF 03-03). "Already submitted?" é a coluna de aside da
 * Section (o slot já existe na Library) e no desenho alinha à direita.
 */
@media (min-width: 1280px) {
  body:not([data-page-family="submission-flow"]) #already-submitted {
    text-align: right;
  }
}

/* No desenho o título do painel é menor do que a escala de subtítulo (40px a
 * 1920); a cor, o peso e o intervalo mantêm-se os do componente. */
body:not([data-page-family="submission-flow"]) #already-submitted .c-section__subtitle {
  font-size: var(--esil-font-size-28);
}

/* Layout → aviso do topo e aviso → escolha da rota: mais ar no desenho do que
 * o ritmo de 24/48 px do `.l-container` e do `.l-stack`. */
body:not([data-page-family="submission-flow"]) #submission-route .l-container > .l-stack {
  margin-top: var(--esil-space-64);
}

body:not([data-page-family="submission-flow"]) #route-cards {
  margin-top: var(--esil-space-64);
}

@media (min-width: 1024px) {
  body:not([data-page-family="submission-flow"]) #route-cards {
    margin-top: var(--esil-space-96);
  }
}

/* Ajuda da escolha da rota: corpo do texto (18px no desenho) e não a ajuda de
 * controlo (14px), com o intervalo do desenho até aos cartões. */
body:not([data-page-family="submission-flow"]) #route-cards .c-choice-group__help {
  margin-top: var(--esil-space-24);
  font-size: var(--esil-text-body);
  line-height: var(--esil-leading-body);
}

body:not([data-page-family="submission-flow"]) #route-cards .c-choice-group__options {
  margin-top: var(--esil-space-64);
}

/*
 * Secções do formulário (PDF 03-03): no desenho partilham a mesma superfície
 * muted e separa-as um único intervalo; cada Section traz o inset de topo e de
 * fundo, o que somava 256px entre blocos.
 */
body:not([data-page-family="submission-flow"]) [data-route-panel] > form > .c-section--muted:first-child,
body:not([data-page-family="submission-flow"]) [data-route-panel] .c-section--muted + .c-section--muted {
  padding-top: var(--esil-space-96);
}

/* O ritmo do `.l-container` (`* + :not(.c-review-section)`) somava 24px ao
 * intervalo entre secções; o título já encabeça a secção. */
body:not([data-page-family="submission-flow"]) [data-route-panel] form > .c-section--muted > .l-container > .c-review-section__title {
  margin-top: 0;
}

body:not([data-page-family="submission-flow"]) #submission-route > .c-section--muted,
body:not([data-page-family="submission-flow"]) [data-route-panel] > form > .c-section--muted:not(:last-child) {
  padding-bottom: 0;
}

/* Sem o inset de fundo a margem do último filho escapa da secção e abre uma
 * faixa branca entre superfícies; `flow-root` mantém-na dentro. */
body:not([data-page-family="submission-flow"]) #submission-route > .c-section--muted,
body:not([data-page-family="submission-flow"]) [data-route-panel] form > .c-section--muted {
  display: flow-root;
}

/* Separador entre os facts e a nota, como no PDF. */
body:not([data-page-family="submission-flow"]) [data-panel-facts] > .c-note {
  border-top: var(--esil-border-divider-width) solid var(--esil-simple-card-border);
  padding-top: var(--esil-space-24);
}

/* Título de grupo dentro do cartão de um repetidor ("Paper details",
 * "Authorship", "Early-Career Scholar Prize"): no desenho tem a escala h5
 * (24px no topo); o h4 de `.c-repeater__title` é do cabeçalho do cartão. */
body:not([data-page-family="submission-flow"]) .c-repeater__group-title {
  margin: 0;
  font-size: var(--esil-text-h5);
  font-weight: var(--esil-weight-medium);
  line-height: var(--esil-leading-130);
  color: var(--esil-blue-700);
}

/* Ações que fecham uma secção: o FormActions já traz a divisória azul do
 * export, mas fica encostado ao grid de cartões que a antecede. */
body:not([data-page-family="submission-flow"]) .l-card-grid-container + .c-form-actions {
  margin-top: var(--esil-layout-gap);
}

/* Alerta dentro da faixa do Result (Review): separa-o do texto introdutório e,
 * a partir do layout 8/4, acompanha a largura da prosa. */
body:not([data-page-family="submission-flow"]) .c-result__main > .c-result__prose + .c-alert {
  margin-top: var(--esil-layout-gap);
}

@media (min-width: 1280px) {
  body:not([data-page-family="submission-flow"]) .c-result--strong.c-result--with-support .c-result__main > .c-alert {
    width: calc((100% + var(--esil-layout-gap)) * 0.75 - var(--esil-layout-gap));
  }
}