/*
 * Estilo das páginas públicas do Studify (/adeus e /privacidade, e em inglês /en/goodbye e
 * /en/privacy), servidas pelo Worker
 * studify-api. Sem build: os tokens e as regras de claro/escuro são cópia de
 * packages/tema/tema.css (fonte da verdade; regras e nomes em DESIGN.md). Se mudarem lá,
 * mudam aqui.
 */

/* Archivo Variable (OFL, ver fontes/LICENSE-OFL.txt): eixos de peso e de largura. */
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("/fontes/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("/fontes/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Papel cru, tinta preta, ocre e azul profundo, sempre chapados. */
:root {
  color-scheme: light;
  --fundo: #f1eadc;
  --texto: #1c1b19;
  --discreto: #6a645a;
  --filete: #1c1b19;
  --ocre: #d69a2d;
  --sobre-ocre: #1c1b19;
  --acao: #1f3e8a;
  --sobre-acao: #f1eadc;
  --vazio: #e3d9c5;
  --riscado: #8c857a;
  --margem: clamp(20px, 5vw, 72px);
  --letra: "Archivo Variable", ui-sans-serif, system-ui, sans-serif;
}

/* No escuro o papel passa a tinta: fundo tinta, letra papel, o mesmo ocre, um azul mais claro. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fundo: #1c1b19;
    --texto: #f1eadc;
    --discreto: #a8a193;
    --filete: #7a7468;
    --ocre: #d69a2d;
    --sobre-ocre: #1c1b19;
    --acao: #9db4f0;
    --sobre-acao: #1c1b19;
    --vazio: #2f2c27;
    --riscado: #a8a193;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--letra);
  caret-color: var(--acao);
  scrollbar-color: var(--discreto) var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

::selection {
  background: var(--ocre);
  color: var(--sobre-ocre);
}

:focus-visible {
  outline: 3px solid var(--acao);
  outline-offset: 3px;
}

/* Ligação em texto corrido: azul de ação, sublinhado de 1px a 4px da letra, 2px por cima. */
a {
  color: var(--acao);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Ligação de navegação (cabeçalho, rodapé, índice): tinta, com o mesmo sublinhado. */
.cabecalho a,
.rodape a,
.indice a {
  color: var(--texto);
}

button {
  font: inherit;
  cursor: pointer;
}

[hidden] {
  display: none;
}

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

/* ---------- Peças do cartaz ---------- */

/* Faixa de demonstração: invertida em relação à página, nunca parte do produto. */
.demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 6px var(--margem);
  background: var(--texto);
  color: var(--fundo);
  font-size: 13px;
}

.demo[hidden] {
  display: none;
}

.demo p {
  margin-right: 8px;
  font-weight: 700;
}

.demo label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.demo select {
  min-height: 24px;
  padding: 2px 6px;
  border: 1px solid var(--fundo);
  border-radius: 0;
  background: var(--texto);
  color: var(--fundo);
  font: inherit;
}

.demo select:focus-visible {
  outline-color: var(--ocre);
}

/* Faixa de topo: o logótipo e o nome da página, por cima de um filete. 65px como na extensão. */
.cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  min-height: 65px;
  padding: 16px var(--margem);
  border-bottom: 1px solid var(--filete);
}

/* O logótipo: o quadrado com o S a fazer de inicial de "tudify", que tem o corpo de 24px.
   Cores por tokens: no escuro passa sozinho ao negativo. */
.marca {
  display: block;
  flex: none;
  width: auto;
  height: 24.9px;
}

.marca-texto {
  fill: var(--texto);
}

.marca-fundo {
  fill: var(--fundo);
}

.marca-ocre {
  fill: var(--ocre);
}

/* À direita do logótipo: o nome da página e a troca de língua, na mesma linha de 15px. */
.cabecalho-fim {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}

.cabecalho p,
.cabecalho a {
  font-size: 15px;
}

/* A troca de língua: alvo de 24px de altura sem mexer na linha. */
.cabecalho a {
  display: inline-block;
  padding: 2px 0;
}

/* Rótulo em frase com dois pontos. */
.rotulo {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
}

/* Título de cartaz: Archivo largo e pesado. */
.titulo {
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

@media (min-width: 900px) {
  .titulo {
    font-size: clamp(48px, 4.4vw, 60px);
  }
}

/* = DESIGN typography.body */
.corpo {
  font-size: clamp(19px, min(1.8vw, 2.9vh), 26px);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: pretty;
}

/* Botões de cartaz: quadrados, inteiros, a toda a largura da coluna. */
.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 6px 16px;
  border: 0;
  border-radius: 0;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.botao-principal {
  background: var(--acao);
  color: var(--sobre-acao);
}

.botao-principal:hover {
  background: var(--texto);
  color: var(--fundo);
}

.botao-contorno {
  border: 2px solid var(--texto);
  background: transparent;
  color: var(--texto);
}

.botao-contorno:hover {
  background: var(--vazio);
  color: var(--texto);
}

/* Em espera (a apagar): tinta gasta, sem resposta ao rato, com o disco de espera. */
.botao[aria-disabled="true"],
.botao[aria-disabled="true"]:hover {
  gap: 10px;
  border: 2px solid var(--discreto);
  background: transparent;
  color: var(--discreto);
  cursor: not-allowed;
}

/* Disco de espera: enche um quarto por segundo, aos saltos; parado com movimento reduzido. */
.botao[aria-disabled="true"]::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: conic-gradient(currentColor 0 var(--quarto), transparent 0);
  animation: espera-quartos 4s steps(1, end) infinite;
}

@property --quarto {
  syntax: "<angle>";
  inherits: false;
  initial-value: 90deg;
}

@keyframes espera-quartos {
  0% {
    --quarto: 90deg;
  }
  25% {
    --quarto: 180deg;
  }
  50% {
    --quarto: 270deg;
  }
  75% {
    --quarto: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .botao[aria-disabled="true"]::before {
    animation: none;
    --quarto: 180deg;
  }
}

/* Linha de registo: um quadrado ocre chapado de 14px, pendurado a 10px da frase. */
.registo {
  position: relative;
  padding-left: 24px;
}

.registo::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.625em - 7px);
  width: 14px;
  height: 14px;
  background: var(--ocre);
}

/* Aviso (sem rede, erro): faixa com 3px de tinta em cima e em baixo sobre papel vazio. */
.aviso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 14px;
  border-block: 3px solid var(--texto);
  background: var(--vazio);
}

.rodape {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  padding: 20px var(--margem) 24px;
  border-top: 1px solid var(--filete);
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- /adeus ---------- */

/* Abaixo de 900px: título, escolhas e só depois a lista, para a decisão ficar no primeiro ecrã. */
.adeus {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "palco" "escolhas" "inventario";
  align-content: start;
}

.adeus-palco {
  grid-area: palco;
  padding: clamp(32px, 6vh, 80px) var(--margem) clamp(32px, 6vh, 72px);
}

.adeus-palco .titulo {
  max-width: 14ch;
}

.adeus-palco .corpo {
  max-width: 34ch;
  margin-top: clamp(14px, 2.5vh, 24px);
}

.inventario {
  grid-area: inventario;
  padding: clamp(28px, 5vh, 56px) var(--margem) clamp(32px, 6vh, 72px);
  border-top: 1px solid var(--filete);
}

.inventario > * {
  max-width: 46rem;
}

.inventario .rotulo {
  margin-bottom: 10px;
}

.inventario ul {
  list-style: none;
  border-top: 1px solid var(--filete);
}

.inventario li {
  position: relative;
  padding: 10px 0 10px 28px;
  border-bottom: 1px solid var(--filete);
  font-size: 18px;
  line-height: 1.35;
  text-wrap: pretty;
}

/* Estado por forma: contorno = por decidir, cheio a ocre = guardado, riscado = apagado. */
.inventario li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(10px + 0.675em - 7px);
  width: 14px;
  height: 14px;
  border: 2px solid var(--texto);
}

.inventario .condicao {
  color: var(--discreto);
}

[data-estado="mantido"] .inventario li::before {
  border-color: var(--texto);
  background: var(--ocre);
}

[data-estado="apagado"] .inventario li {
  color: var(--discreto);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* Apagado: o quadrado passa a riscado em tinta gasta, como a linha. */
[data-estado="apagado"] .inventario li::before {
  border-color: var(--discreto);
  background: repeating-linear-gradient(0deg, var(--discreto) 0 2px, transparent 2px 5px);
}

.adeus-escolhas {
  grid-area: escolhas;
  border-top: 1px solid var(--filete);
}

.escolha {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px var(--margem) 28px;
  border-bottom: 1px solid var(--filete);
}

.escolha:last-child {
  border-bottom: 0;
}

.escolha p {
  font-size: 18px;
  line-height: 1.4;
  text-wrap: pretty;
}

.escolha .rotulo {
  font-size: clamp(17px, 1.4vw, 20px);
}

.escolha .botao {
  margin-top: 8px;
}

.escolha .botao + .botao {
  margin-top: 0;
}

.escolha .nota {
  color: var(--discreto);
  font-size: 15px;
}

/* Título curto do lado das escolhas (confirmar, erros): o mesmo título de secção da política. */
.escolha h2 {
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.escolha h2:focus {
  outline: none;
}

.escolha h2:focus-visible {
  outline: 3px solid var(--acao);
  outline-offset: 3px;
}

.escolha .registo {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  line-height: 1.25;
}

@media (min-width: 900px) {
  .adeus {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.62fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "palco escolhas" "inventario escolhas";
  }

  .adeus-palco {
    padding-bottom: 0;
  }

  .inventario {
    border-top: 0;
  }

  .adeus-escolhas {
    border-top: 0;
    border-left: 1px solid var(--filete);
  }

  .escolha {
    padding: 28px var(--margem) 32px 36px;
  }

  .adeus-escolhas > .escolha:first-child,
  .adeus-escolhas > div > .escolha:first-child {
    padding-top: clamp(32px, 6vh, 80px);
  }
}

/* ---------- /privacidade ---------- */

.politica-topo {
  padding: clamp(32px, 6vh, 72px) var(--margem) clamp(28px, 5vh, 56px);
  border-bottom: 1px solid var(--filete);
}

.politica-topo .titulo {
  font-size: clamp(40px, 5.6vw, 76px);
}

.politica-topo .data {
  margin-top: 16px;
  color: var(--discreto);
  font-size: 15px;
}

.politica-topo .corpo {
  max-width: 40ch;
  margin-top: clamp(16px, 3vh, 28px);
}

.resumo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 1px solid var(--filete);
}

.resumo > .rotulo {
  padding: 24px var(--margem) 0;
}

.resumo ul {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 10px 0 0;
}

.resumo li {
  padding: 14px var(--margem) 18px;
  border-top: 1px solid var(--filete);
  font-size: 18px;
  line-height: 1.4;
  text-wrap: pretty;
}

.resumo li::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin-bottom: 10px;
  background: var(--ocre);
}

@media (min-width: 720px) {
  .resumo ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resumo li:nth-child(odd) {
    border-right: 1px solid var(--filete);
  }
}

/* A partir de 1024px a 1.ª coluna tem os 340px do índice, para os filetes continuarem
   e o texto das colunas seguintes começar onde começa o da política. */
@media (min-width: 1024px) {
  .resumo ul {
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .resumo li:nth-child(even) {
    padding-left: clamp(36px, 5vw, 80px);
  }
}

/* A partir de 1200px, as quatro numa linha. */
@media (min-width: 1200px) {
  .resumo ul {
    grid-template-columns: 340px repeat(3, minmax(0, 1fr));
  }

  .resumo li {
    padding: 16px 28px 22px clamp(36px, 5vw, 80px);
    border-right: 1px solid var(--filete);
  }

  .resumo li:first-child {
    padding-left: var(--margem);
  }

  .resumo li:last-child {
    padding-right: var(--margem);
    border-right: 0;
  }
}

.politica {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.indice {
  padding: 24px var(--margem) 28px;
  border-bottom: 1px solid var(--filete);
}

.indice ol {
  list-style: none;
  margin-top: 10px;
  columns: 2 15rem;
  column-gap: calc(var(--margem) * 2);
}

.indice li {
  break-inside: avoid;
}

/* O sublinhado fica só no título; o número é a calha. */
.indice a {
  display: flex;
  gap: 10px;
  min-height: 32px;
  padding: 4px 0;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.35;
  text-decoration: none;
}

.indice a span:first-child {
  min-width: 2ch;
  color: var(--discreto);
  font-variant-numeric: tabular-nums;
}

.indice a span:last-child {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.indice a:hover span:last-child {
  text-decoration-thickness: 2px;
}

.texto {
  padding: clamp(28px, 5vh, 56px) var(--margem) clamp(48px, 8vh, 96px);
  font-size: 18px;
  line-height: 1.55;
}

.texto p,
.texto li {
  text-wrap: pretty;
}

.texto > section {
  max-width: 68ch;
  scroll-margin-top: 24px;
}

.texto > section + section {
  margin-top: 56px;
}

.texto h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* O número fica sempre a 14px do título (o gap do h2). */
.texto h2 span {
  flex: none;
  color: var(--discreto);
  font-variant-numeric: tabular-nums;
}

.texto h3 {
  margin: 28px 0 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.texto p + p,
.texto p + ul,
.texto ul + p,
.texto p + .tabela,
.texto .tabela + p {
  margin-top: 14px;
}

.texto ul {
  list-style: none;
}

.texto ul li {
  position: relative;
  padding-left: 26px;
}

.texto ul li + li {
  margin-top: 8px;
}

/* Marcador: quadrado de tinta de 8px, a única forma de lista do sistema. */
.texto ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--texto);
}

.texto strong {
  font-weight: 700;
}

.texto code {
  font-family: var(--letra);
  font-weight: 600;
}

/* Tabela dos dados: filetes de tinta, cabeçalho em rótulo, sem fundos alternados. */
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.45;
}

.tabela caption {
  padding-bottom: 10px;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
}

.tabela th,
.tabela td {
  padding: 12px 16px 14px 0;
  border-top: 1px solid var(--filete);
  text-align: left;
  vertical-align: top;
}

.tabela thead th {
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: 2px solid var(--texto);
  font-weight: 700;
}

.tabela tbody tr:last-child > * {
  border-bottom: 1px solid var(--filete);
}

.tabela tbody th {
  font-weight: 600;
}

.tabela tbody td:nth-of-type(1) {
  white-space: nowrap;
}

@media (width < 640px) {
  .tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tabela tr,
  .tabela th,
  .tabela td {
    display: block;
  }

  .tabela tbody tr {
    padding: 12px 0 14px;
    border-top: 1px solid var(--filete);
  }

  .tabela tbody tr:last-child {
    border-bottom: 1px solid var(--filete);
  }

  .tabela tbody tr > *,
  .tabela tbody tr:last-child > * {
    padding: 0;
    border: 0;
  }

  .tabela tbody td {
    margin-top: 6px;
  }

  .tabela tbody td::before {
    content: attr(data-coluna) ": ";
    font-weight: 700;
  }
}

@media (min-width: 1024px) {
  .politica {
    grid-template-columns: 340px minmax(0, 1fr);
  }

  .indice {
    border-bottom: 0;
    border-right: 1px solid var(--filete);
    padding: clamp(28px, 5vh, 56px) 28px 28px var(--margem);
  }

  .indice > div {
    position: sticky;
    top: 24px;
  }

  .indice ol {
    columns: auto;
  }

  .texto {
    padding-left: clamp(36px, 5vw, 80px);
  }
}

/* Com a calha larga, o número pendura nela: o título alinha com o parágrafo. */
@media (min-width: 1400px) {
  .texto h2 span {
    min-width: 1.4em;
    margin-left: calc(-1.4em - 14px);
    text-align: right;
  }
}