/*
 * Folha das páginas legais (privacidade e termos).
 *
 * Por que não reaproveita o `src/styles.css`: aquele arquivo é empacotado
 * pelo Vite com hash no nome (`index-BeO09ETw.css`), que muda a cada build.
 * Um <link> para ele apontaria para um arquivo inexistente na build seguinte.
 * Estas páginas moram em `public/` e são copiadas verbatim, então precisam de
 * CSS próprio, que também é copiado verbatim.
 *
 * O caminho no <link> é relativo (`legal.css`, sem barra inicial) pelo mesmo
 * motivo do `base: './'` no `vite.config.ts`: assim o site continua abrindo
 * se um dia for publicado em subcaminho, e não só na raiz do domínio.
 *
 * As cores são cópia das variáveis do app. Duplicar meia dúzia de hex aqui é
 * mais barato que criar um terceiro arquivo compartilhado para servir duas
 * páginas que quase nunca mudam.
 */
:root {
    --bg: #0f1115;
    --surface: #171a21;
    --border: #2a2f3a;
    --text: #e6e8ee;
    --muted: #9aa3b2;
    --accent: #6c8cff;
    --radius: 10px;

    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

/*
 * 720px é largura de leitura, não de aplicativo. O app usa três colunas
 * porque são três coisas consultadas ao mesmo tempo; aqui é texto corrido,
 * e linha longa demais faz o olho perder a próxima ao voltar.
 */
.doc {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 20px 64px;
}

.doc__voltar {
    display: inline-block;
    margin-bottom: 24px;
    color: var(--muted);
    text-decoration: none;
}

.doc__voltar:hover {
    color: var(--accent);
}

h1 {
    font-size: 26px;
    line-height: 1.2;
    margin: 0 0 4px;
}

h2 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin: 36px 0 10px;
}

h3 {
    font-size: 15px;
    margin: 24px 0 6px;
}

p,
li {
    margin: 0 0 12px;
}

ul {
    padding-left: 20px;
}

a {
    color: var(--accent);
}

strong {
    color: #fff;
}

code {
    background: #1f232c;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.9em;
    /* Chave do localStorage e escopo do OAuth não podem quebrar no meio. */
    white-space: nowrap;
}

.doc__data {
    color: var(--muted);
    margin-bottom: 28px;
}

/*
 * O resumo existe porque ninguém lê política de privacidade inteira. Se a
 * pessoa ler só a primeira caixa, ela precisa sair sabendo o principal: que
 * os dados ficam no navegador dela.
 */
.doc__resumo {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 16px 18px 4px;
    margin-bottom: 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    /* Sem isto a coluna do "o que é lido" estica a página no celular. */
    table-layout: fixed;
}

th,
td {
    border: 1px solid var(--border);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
    /* Nomes de campo da API do Google não têm espaço para quebrar sozinhos. */
    overflow-wrap: anywhere;
}

th {
    background: var(--surface);
    color: var(--muted);
    font-weight: 600;
}

footer {
    margin-top: 48px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 14px;
}