/* Ficha técnica e créditos (creditos.html): uma folha do arquivo, como o «sobre» — papel, arestas creme e
   vermelha, dobra ponteada — com a tipografia da app: Garamond para ler, Mono em minúsculas para rótulos. */

/* a app prende a página ao ecrã (por causa do grafo); aqui a página rola */
html.pagina-creditos, html.pagina-creditos body { height: auto; min-height: 100%; }
html.pagina-creditos { scroll-behavior: smooth; scroll-padding-top: 6em; }
html.pagina-creditos body {
  overflow: visible; overscroll-behavior: auto; touch-action: auto;
  background: var(--paper-deep);
}

/* uma língua de cada vez: cada texto existe em pt e em en */
:root[data-lang="pt"] [data-l="en"], :root[data-lang="en"] [data-l="pt"] { display: none !important; }
html:not(.js) .cr-ferramentas, html:not(.js) .cr-copiar { display: none; }
/* quiosque: sem copiar nem abrir ficheiros; ligações externas ficam só como texto */
.is-kiosk .cr-so-web { display: none !important; }
a.is-texto { pointer-events: none; text-decoration: none !important; }

/* ─────────── barra ─────────── */
.cr-barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em var(--gap);
  padding: calc(var(--gap) * .8) max(16px, calc(var(--gap) * 1.4));
  background: color-mix(in srgb, var(--paper-deep) 86%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px dotted var(--rule);
}
.cr-voltar {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: var(--touch); padding: 0 1em;
  font-family: var(--mono); font-size: var(--s-1); text-transform: lowercase;
  color: var(--ink); text-decoration: none;
  background: var(--paper); border: 1px solid var(--ink);
  box-shadow: .25em .25em 0 var(--edge-cream);
  transition: color .2s, border-color .2s;
}
.cr-voltar:hover, .cr-voltar:focus-visible { color: var(--accent); border-color: var(--accent); }
.cr-mao { width: 1.7em; transform: scaleX(-1); } /* a manícula aponta para trás */
:root[data-theme="dark"] .cr-mao, :root[data-theme="dark"] .cr-manicula { filter: invert(1); }

.cr-ferramentas { display: flex; align-items: center; gap: .5em; }
.cr-segmentos { display: inline-flex; background: var(--veil); border: 1px solid var(--rule); }
.cr-seg, .cr-botao {
  min-height: var(--touch); min-width: var(--touch); padding: 0 .85em;
  font-family: var(--mono); font-size: var(--s-1); text-transform: lowercase;
  transition: color .2s, background-color .2s, border-color .2s;
}
.cr-seg { border-right: 1px dotted var(--rule); }
.cr-seg:last-child { border-right: 0; }
.cr-seg[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.cr-botao { background: var(--veil); border: 1px solid var(--rule); }
.cr-seg:hover, .cr-botao:hover { color: var(--accent); }
.cr-seg[aria-pressed="true"]:hover { color: var(--paper); }
.cr-botao:hover { border-color: var(--accent); }

/* ─────────── a folha ─────────── */
.cr-folha {
  position: relative; z-index: 1;
  width: min(100% - 32px, 66em);
  margin: clamp(20px, 4vw, 90px) auto clamp(40px, 8vw, 160px);
  padding: clamp(28px, 5vw, 130px) clamp(20px, 6vw, 160px) clamp(28px, 4vw, 110px);
  background: var(--paper);
  border-left: 2px dotted var(--rule);
  box-shadow: 1.2vmin 1.2vmin 0 var(--edge-cream), 2vmin 1.8vmin 0 var(--edge-red), var(--shadow);
}
/* grão do papel, como a folha do cartaz */
.cr-folha::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .36  0 0 0 0 .3  0 0 0 .12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
:where(.cr-folha) a {
  color: inherit;
  text-decoration: underline dotted var(--accent) 1px; text-underline-offset: .22em;
}
:where(.cr-folha) a:hover, :where(.cr-folha) a:focus-visible { color: var(--accent); }
.cr-folha code { font-family: var(--mono); font-size: .8em; overflow-wrap: anywhere; }
.cr-folha abbr { text-decoration: none; }

.cr-manicula { width: clamp(24px, 2vw, 64px); margin-bottom: 1em; }
.cr-antetitulo {
  margin: 0;
  font-family: var(--serif); font-weight: 600; font-size: var(--s0);
  font-variant-caps: all-small-caps; letter-spacing: .16em; line-height: 1.45;
}
.cr-titulo {
  margin: .2em 0 .7em;
  font-family: var(--serif); font-weight: 400; font-size: var(--s3); line-height: 1.08;
  text-transform: uppercase; letter-spacing: .12em;
  overflow-wrap: break-word;
}
.cr-entrada { max-width: 36em; }
.cr-entrada p { margin: 0; }

/* índice: um fio de etiquetas, numeradas como as secções */
.cr-indice { margin: 2.2em 0 0; }
.cr-indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em .45em; counter-reset: seccao; }
.cr-indice li { counter-increment: seccao; }
.cr-indice a {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: calc(var(--touch) * .8); padding: .2em .85em;
  font-family: var(--mono); font-size: var(--s-2); text-transform: lowercase; text-decoration: none;
  border: 1px dotted var(--rule); border-radius: 999px;
}
.cr-indice a::before { content: counter(seccao); color: var(--accent); }
.cr-indice a:hover, .cr-indice a:focus-visible { border-color: var(--accent); }

/* ─────────── secções ─────────── */
.cr-seccao { margin-top: clamp(2.6em, 5vw, 4.6em); }
.cr-rotulo {
  display: flex; align-items: baseline; gap: .7em;
  margin: 0 0 1.1em;
  font-family: var(--serif); font-weight: 600; font-size: var(--s1); line-height: 1.2;
  font-variant-caps: all-small-caps; letter-spacing: .16em;
}
.cr-rotulo::after { content: ""; flex: 1; min-width: 2em; border-top: 2px dotted var(--rule); transform: translateY(-.28em); }
.cr-n { font-family: var(--mono); font-weight: 500; font-size: var(--s-1); font-variant-caps: normal; letter-spacing: 0; color: var(--accent); }

.cr-texto { max-width: 38em; }
.cr-texto p { margin: 0 0 .8em; }
.cr-lista + .cr-texto { margin-top: 1.6em; }
.cr-miudo { font-size: .8em; line-height: 1.55; color: var(--muted); }
.cr-maiusculas { font-variant-caps: all-small-caps; letter-spacing: .05em; }
.cr-ligacao { margin: .2em 0 0; font-family: var(--mono); font-size: var(--s-1); }

/* listas de definição (ficha técnica, informação técnica, tipos de letra) */
.cr-lista { margin: 0; display: grid; gap: 1em; }
.cr-item { display: grid; grid-template-columns: minmax(8em, 24%) 1fr; gap: 1.2em; align-items: baseline; }
.cr-item[hidden] { display: none; }
.cr-item dt { font-family: var(--mono); font-size: var(--s-2); color: var(--muted); text-transform: lowercase; }
.cr-item dd { margin: 0; font-family: var(--serif); font-size: calc(var(--s0) * 1.12); line-height: 1.45; }
.cr-item--pessoas { padding: .35em 0; }
.cr-nomes { display: block; font-size: calc(var(--s1) * 1.12); line-height: 1.25; }
.cr-afiliacao { font-size: .78em; color: var(--muted); }
.cr-nota { display: block; margin-top: .3em; font-size: var(--s0); line-height: 1.45; color: var(--muted); }
.cr-dados { display: block; font-family: var(--mono); font-size: var(--s-2); line-height: 1.5; }
.cr-item dd > a { display: inline-block; margin-top: .35em; font-family: var(--mono); font-size: var(--s-2); }
.cr-item .cr-amostra { font-size: var(--s2); line-height: 1.1; color: var(--ink); text-transform: none; }
.cr-item .cr-amostra--serif { font-family: var(--serif); }
.cr-item .cr-amostra--mono { font-family: var(--mono); font-size: calc(var(--s2) * .82); }
.cr-lista--letra .cr-item { grid-template-columns: minmax(8em, 32%) 1fr; }

/* tabelas (bibliotecas, ferramentas) */
.cr-tabela-caixa { margin: 1.3em 0 .6em; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cr-tabela { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: var(--s-2); line-height: 1.4; }
.cr-tabela th, .cr-tabela td {
  padding: .6em 1em .6em 0; text-align: left; vertical-align: baseline;
  border-bottom: 1px dotted var(--rule);
}
.cr-tabela thead th { font-weight: 500; color: var(--muted); text-transform: lowercase; border-bottom: 1px solid var(--rule); }
.cr-tabela tbody th { font-weight: 500; }
.cr-tabela--bibliotecas td:nth-child(2), .cr-tabela--bibliotecas td:nth-child(3),
.cr-tabela--ferramentas td:nth-child(2) { white-space: nowrap; }
.cr-papel { display: block; font-weight: 400; color: var(--muted); }
.cr-principal th a { font-weight: 700; }
.cr-incorporado th, .cr-incorporado td { color: var(--muted); }

/* textos completos das licenças, carregados só quando se abrem */
.cr-licencas { margin-top: .4em; }
.cr-licencas summary {
  display: flex; align-items: center; gap: .6em;
  min-height: var(--touch); cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: var(--s-1); text-transform: lowercase;
}
.cr-licencas summary::-webkit-details-marker { display: none; }
.cr-licencas summary::before { content: "☞"; font-family: var(--serif); font-size: 1.3em; color: var(--accent); transition: transform .3s var(--ease); }
.cr-licencas[open] summary::before { transform: rotate(90deg); }
.cr-licencas summary:hover { color: var(--accent); }
.cr-pre {
  margin: .4em 0 .8em; padding: 1em 1.2em; max-height: 60vh; overflow: auto;
  background: var(--paper-deep); border: 1px dotted var(--rule);
  font-family: var(--mono); font-size: var(--s-2); line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.cr-licencas .cr-so-web { margin: 0; font-family: var(--mono); font-size: var(--s-2); }

/* como creditar */
.cr-citacao { margin: 0 0 1.8em; }
.cr-citacao-rotulo { margin: 0 0 .5em; font-family: var(--mono); font-size: var(--s-2); color: var(--muted); text-transform: lowercase; }
.cr-citacao-texto {
  margin: 0 0 .7em; padding: 1em 1.3em;
  background: color-mix(in srgb, var(--edge-cream) 45%, var(--paper));
  border-left: 3px solid var(--accent);
  font-family: var(--serif); font-size: calc(var(--s0) * 1.12); line-height: 1.5;
  overflow-wrap: break-word;
}
.cr-citacao-texto p { margin: 0; }
.cr-copiar { min-height: calc(var(--touch) * .8); }
.cr-copiar .cr-feito, .cr-copiar.is-feito .cr-acao { display: none; }
.cr-copiar.is-feito .cr-feito { display: inline; color: var(--accent); }

/* colofão */
.cr-colofao {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1em;
  margin-top: clamp(3em, 6vw, 6em); padding-top: 1.4em;
  border-top: 2px dotted var(--rule);
  font-family: var(--serif); font-size: var(--s0); color: var(--muted);
}
.cr-colofao p { margin: 0; }

/* telemóvel: listas numa coluna, tabelas em fichas */
@media (max-width: 720px) {
  .cr-item, .cr-lista--letra .cr-item { grid-template-columns: 1fr; gap: .15em; }
  .cr-tabela thead { display: none; }
  .cr-tabela, .cr-tabela tbody { display: block; }
  .cr-tabela tr {
    display: grid; grid-template-columns: 1fr auto; gap: .15em 1em;
    padding: .7em 0; border-bottom: 1px dotted var(--rule);
  }
  .cr-tabela th, .cr-tabela td { padding: 0; border: 0; }
  .cr-tabela tbody th { grid-column: 1; grid-row: 1 / span 2; }
  .cr-tabela td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
  .cr-tabela td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; }
  .cr-tabela td:nth-child(4) { grid-column: 1 / -1; color: var(--muted); }
  .cr-colofao { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html.pagina-creditos { scroll-behavior: auto; }
}

@media print {
  html.pagina-creditos body { background: #fff; }
  body::before, .cr-folha::after, .cr-barra, .cr-indice, .cr-licencas, .cr-copiar, .cr-colofao .cr-voltar { display: none !important; }
  .cr-folha { width: auto; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .cr-tabela-caixa { overflow: visible; }
}