/* Nexyo UI 2026: tokens (fonte da verdade, compartilhada pelo dash e pelo painel da extensão).
   Valores do iOS (system colors, grouped backgrounds, labels, fills, separators, Dynamic Type) traduzidos
   em custom properties. Cor só nas tags e nas semânticas; tint = label. Claro e escuro pelo sistema
   (prefers-color-scheme) com sobreposição por html[data-theme="light"|"dark"].

   Regras que este arquivo cumpre (skill apple-hig, foundations Color/Dark Mode/Typography):
   - todo texto legível passa 4,5:1 nos dois temas (node scripts/contraste.mjs mede e falha se não);
   - label secundário sobe de 0,60 (iOS; 3,4:1 sobre branco) para 0,78 no claro e 0,64 no escuro, pra passar 4,5:1 até sobre a linha selecionada (fill-3);
   - --tag-*-fg é a cor iOS ajustada em luminosidade até 4,5:1 sobre o fundo 14% e sobre os grupos;
   - --nx-label-3 e --nx-label-4 NÃO são texto (placeholder desabilitado, glifo decorativo, fill);
   - as cores semânticas têm duas formas: --nx-sys-<c> (texto e ícone) e --nx-sys-<c>-fill (fundo com texto branco).

   O bloco escuro aparece duas vezes (media query e data-theme) porque CSS puro não reaproveita blocos;
   o contraste.mjs falha se os dois divergirem. Edite os dois. */

:root {
  color-scheme: light;

  /* ---------- Fundos (grouped) ---------- */
  --nx-bg: #F2F2F7;               /* systemGroupedBackground */
  --nx-bg-group: #FFFFFF;         /* secondarySystemGroupedBackground: o cartão da lista */
  --nx-bg-group-2: #F2F2F7;       /* tertiarySystemGroupedBackground: campo dentro do grupo */
  --nx-bg-elevated: #FFFFFF;      /* sheet, popover, menu */

  /* ---------- Labels (4 níveis) ---------- */
  --nx-label: #000000;
  --nx-label-2: rgb(60 60 67 / 0.78);
  --nx-label-3: rgb(60 60 67 / 0.30);
  --nx-label-4: rgb(60 60 67 / 0.18);
  --nx-on-label: #FFFFFF;         /* texto sobre botão primário (fundo = label) */

  /* ---------- Fills (4 níveis) ---------- */
  --nx-fill: rgb(120 120 128 / 0.20);
  --nx-fill-2: rgb(120 120 128 / 0.16);
  --nx-fill-3: rgb(118 118 128 / 0.12);
  --nx-fill-4: rgb(116 116 128 / 0.08);

  /* ---------- Separadores ---------- */
  --nx-sep: rgb(60 60 67 / 0.29);
  --nx-sep-opaque: #C6C6C8;

  /* ---------- Tint (ação interativa = label) ---------- */
  --nx-tint: var(--nx-label);
  --nx-tint-2: var(--nx-label-2);
  --nx-focus: var(--nx-label);

  /* ---------- Semânticas (só quando significam algo) ---------- */
  --nx-sys-red: var(--tag-red-fg);        /* erro, destrutivo (texto e ícone) */
  --nx-sys-orange: var(--tag-orange-fg);  /* aviso */
  --nx-sys-green: var(--tag-green-fg);    /* sucesso */
  --nx-sys-red-fill: #EA0C00;             /* fundo com texto --nx-on-fill (badge, botão destrutivo) */
  --nx-sys-orange-fill: #AB6400;
  --nx-sys-green-fill: #23863C;           /* também o trilho do toggle ligado */
  --nx-on-fill: #FFFFFF;

  /* ---------- Liquid Glass (só navegação: nav, tab bar, trilho, toolbar flutuante) ---------- */
  --nx-glass-bg: rgb(242 242 247 / 0.72);
  --nx-glass-blur: blur(20px) saturate(1.8);
  --nx-glass-border: var(--nx-sep);

  /* ---------- Sombras e scrim (só sheet, popover, menu; conteúdo não tem sombra) ---------- */
  --nx-shadow-sheet: 0 8px 32px rgb(0 0 0 / 0.18), 0 0 0 1px rgb(0 0 0 / 0.04);
  --nx-shadow-pop: 0 4px 16px rgb(0 0 0 / 0.14), 0 0 0 1px rgb(0 0 0 / 0.04);
  --nx-scrim: rgb(0 0 0 / 0.40);

  /* ---------- Tipografia (pilha SF, Inter de reserva; escala iOS em rem, 16 px = 1 rem) ---------- */
  --nx-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, system-ui, "Segoe UI", sans-serif;
  --nx-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --nx-fs-large-title: 2.125rem;  --nx-lh-large-title: 2.5625rem; /* 34/41 bold */
  --nx-fs-title-1: 1.75rem;       --nx-lh-title-1: 2.125rem;      /* 28/34 bold */
  --nx-fs-title-2: 1.375rem;      --nx-lh-title-2: 1.75rem;       /* 22/28 bold */
  --nx-fs-title-3: 1.25rem;       --nx-lh-title-3: 1.5625rem;     /* 20/25 semibold */
  --nx-fs-headline: 1.0625rem;    --nx-lh-headline: 1.375rem;     /* 17/22 semibold */
  --nx-fs-body: 1.0625rem;        --nx-lh-body: 1.375rem;         /* 17/22 regular */
  --nx-fs-callout: 1rem;          --nx-lh-callout: 1.3125rem;     /* 16/21 */
  --nx-fs-subheadline: 0.9375rem; --nx-lh-subheadline: 1.25rem;   /* 15/20 */
  --nx-fs-footnote: 0.8125rem;    --nx-lh-footnote: 1.125rem;     /* 13/18 */
  --nx-fs-caption-1: 0.75rem;     --nx-lh-caption-1: 1rem;        /* 12/16 */
  --nx-fs-caption-2: 0.6875rem;   --nx-lh-caption-2: 0.8125rem;   /* 11/13 (mínimo iOS) */
  --nx-fw-regular: 400;
  --nx-fw-medium: 500;
  --nx-fw-semibold: 600;
  --nx-fw-bold: 700;
  --nx-ls-large: 0.01em;          /* tracking de títulos (28 px ou mais) */
  --nx-ls-body: -0.02em;          /* 15 a 22 px */
  --nx-ls-small: 0;               /* 13 px ou menos */

  /* ---------- Raios: UMA escala (4 · 8 · 12 · 16 · 20 · pill). Nada de px solto em border-radius: sempre um destes. ---------- */
  --nx-r-xs: 4px;                 /* kbd, marcador, trilho de barra, caixa de seleção */
  --nx-r-sm: 8px;                 /* chip, nó de diagrama, campo compacto, miniatura */
  --nx-r-md: 12px;                /* campo, grupo, cartão, tabela, menu, botão em bloco, item de sidebar */
  --nx-r-lg: 16px;                /* sheet, alerta, toast grande, cartão-resumo */
  --nx-r-xl: 20px;                /* sidebar flutuante, painel grande */
  --nx-r-full: 999px;             /* pill (botões de barra, pílulas), avatar, badge, ponto */
  /* aliases semânticos (os nomes que os componentes usam) */
  --nx-r-chip: var(--nx-r-sm);
  --nx-r-field: var(--nx-r-md);
  --nx-r-group: var(--nx-r-md);
  --nx-r-pill: var(--nx-r-full);
  --nx-r-sheet: var(--nx-r-lg);

  /* ---------- Espaço (grade de 8) ---------- */
  --nx-s-1: 4px;
  --nx-s-2: 8px;
  --nx-s-3: 12px;
  --nx-s-4: 16px;
  --nx-s-5: 20px;
  --nx-s-6: 24px;
  --nx-s-8: 32px;
  --nx-s-10: 40px;
  --nx-s-12: 48px;
  --nx-inset: 16px;               /* margem lateral da inset grouped list e da página */
  --nx-target: 44px;              /* alvo mínimo de toque */
  --nx-row-h: 44px;               /* linha só com título */
  --nx-row-h-sub: 52px;           /* linha com subtítulo */
  --nx-row-h-lg: 60px;            /* linha com avatar + chips (lista de leads) */
  --nx-nav-h: 44px;
  --nx-nav-large-h: 52px;         /* faixa do Large Title */
  --nx-tabbar-h: 56px;            /* ícone 24 + rótulo 11 + respiro */
  --nx-sidebar-w: 256px;
  --nx-sidebar-w-min: 68px;       /* sidebar recolhida (só ícones) */
  --nx-sheet-w: 560px;            /* sheet centralizada no desktop */
  --nx-icon: 20px;                /* ícone em linha */
  --nx-icon-lg: 24px;             /* ícone em tab bar e trilho */

  /* ---------- Movimento ---------- */
  --nx-dur-fast: 120ms;           /* resposta de controle (hover, pressed) */
  --nx-dur: 200ms;                /* aparecer, trocar */
  --nx-dur-sheet: 300ms;          /* sheet subindo */
  --nx-ease: cubic-bezier(0, 0, 0.2, 1);          /* ease-out */
  --nx-spring: cubic-bezier(0.34, 1.2, 0.64, 1);  /* spring leve */

  /* ---------- Camadas ---------- */
  --nx-z-nav: 10;
  --nx-z-menu: 20;
  --nx-z-sheet: 30;
  --nx-z-toast: 40;

  /* ---------- Cores de tag (base iOS; -bg = 14% sobre o fundo; -fg = ajustada até 4,5:1) ---------- */
  --tag-red: #FF3B30;    --tag-red-bg: rgb(255 59 48 / 0.14);    --tag-red-fg: #C40A00;
  --tag-orange: #FF9500; --tag-orange-bg: rgb(255 149 0 / 0.14); --tag-orange-fg: #945600;
  --tag-yellow: #FFCC00; --tag-yellow-bg: rgb(255 204 0 / 0.14); --tag-yellow-fg: #7F6600;
  --tag-green: #34C759;  --tag-green-bg: rgb(52 199 89 / 0.14);  --tag-green-fg: #1E7434;
  --tag-mint: #00C7BE;   --tag-mint-bg: rgb(0 199 190 / 0.14);   --tag-mint-fg: #00736E;
  --tag-teal: #30B0C7;   --tag-teal-bg: rgb(48 176 199 / 0.14);  --tag-teal-fg: #1E6F7D;
  --tag-blue: #007AFF;   --tag-blue-bg: rgb(0 122 255 / 0.14);   --tag-blue-fg: #005EC4;
  --tag-indigo: #5856D6; --tag-indigo-bg: rgb(88 86 214 / 0.14); --tag-indigo-fg: #504ED4;
  --tag-purple: #AF52DE; --tag-purple-bg: rgb(175 82 222 / 0.14); --tag-purple-fg: #9527CC;
  --tag-pink: #FF2D55;   --tag-pink-bg: rgb(255 45 85 / 0.14);   --tag-pink-fg: #C30025;
  --tag-gray: #8E8E93;   --tag-gray-bg: rgb(142 142 147 / 0.14); --tag-gray-fg: #646469;

  /* Tier do lead */
  --tag-hot: var(--tag-red);      --tag-hot-bg: var(--tag-red-bg);      --tag-hot-fg: var(--tag-red-fg);
  --tag-warm: var(--tag-orange);  --tag-warm-bg: var(--tag-orange-bg);  --tag-warm-fg: var(--tag-orange-fg);
  --tag-cold: var(--tag-gray);    --tag-cold-bg: var(--tag-gray-bg);    --tag-cold-fg: var(--tag-gray-fg);
  /* Classe da triagem do Atendente */
  --tag-quente: var(--tag-green); --tag-quente-bg: var(--tag-green-bg); --tag-quente-fg: var(--tag-green-fg);
  --tag-morno: var(--tag-orange); --tag-morno-bg: var(--tag-orange-bg); --tag-morno-fg: var(--tag-orange-fg);
  --tag-frio: var(--tag-gray);    --tag-frio-bg: var(--tag-gray-bg);    --tag-frio-fg: var(--tag-gray-fg);
  --tag-parar: var(--tag-red);    --tag-parar-bg: var(--tag-red-bg);    --tag-parar-fg: var(--tag-red-fg);

  /* ---------- Aliases legados (painel v2 e dash atuais continuam funcionando; migrar aos poucos) ---------- */
  --nx-fg: var(--nx-label);
  --nx-fg-dim: var(--nx-label-2);
  --nx-fg-mute: var(--nx-label-3);
  --nx-line: var(--nx-sep);
  --nx-line-2: var(--nx-fill);
  --nx-bg-1: var(--nx-bg-group);
  --nx-bg-2: var(--nx-bg-group-2);
  --nx-bg-3: var(--nx-fill);
  --nx-accent: var(--nx-tint);
  --nx-accent-dim: var(--nx-tint-2);
  --nx-amber: var(--nx-sys-orange);
  --nx-red: var(--nx-sys-red);
  --nx-purple: var(--tag-purple-fg);
  --nx-blue: var(--tag-blue-fg);
  --nx-sans: var(--nx-font);
  --nx-mono: var(--nx-font-mono);
  --nx-t: var(--nx-dur-fast) var(--nx-ease);
}

/* ---------- Escuro pelo sistema (a menos que a pessoa force claro) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --nx-bg: #0A0A0B;               /* quase preto com leve tom frio (as referências de dash: página #0A, superfície #16) */
    --nx-bg-group: #161618;
    --nx-bg-group-2: #212124;
    --nx-bg-elevated: #1E1E21;
    --nx-label: #FFFFFF;
    --nx-label-2: rgb(235 235 245 / 0.64);
    --nx-label-3: rgb(235 235 245 / 0.30);
    --nx-label-4: rgb(235 235 245 / 0.16);
    --nx-on-label: #000000;
    --nx-fill: rgb(120 120 128 / 0.36);
    --nx-fill-2: rgb(120 120 128 / 0.32);
    --nx-fill-3: rgb(118 118 128 / 0.24);
    --nx-fill-4: rgb(118 118 128 / 0.18);
    --nx-sep: rgb(84 84 88 / 0.60);
    --nx-sep-opaque: #38383A;
    --nx-sys-red-fill: #EA0D00;
    --nx-sys-orange-fill: #A66500;
    --nx-sys-green-fill: #1E8537;
    --nx-glass-bg: rgb(22 22 24 / 0.72);
    --nx-shadow-sheet: 0 8px 32px rgb(0 0 0 / 0.60), 0 0 0 1px rgb(255 255 255 / 0.06);
    --nx-shadow-pop: 0 4px 16px rgb(0 0 0 / 0.50), 0 0 0 1px rgb(255 255 255 / 0.06);
    --nx-scrim: rgb(0 0 0 / 0.60);
    --tag-red: #FF453A;    --tag-red-bg: rgb(255 69 58 / 0.14);    --tag-red-fg: #FF756D;
    --tag-orange: #FF9F0A; --tag-orange-bg: rgb(255 159 10 / 0.14); --tag-orange-fg: #FF9F0A;
    --tag-yellow: #FFD60A; --tag-yellow-bg: rgb(255 214 10 / 0.14); --tag-yellow-fg: #FFD60A;
    --tag-green: #30D158;  --tag-green-bg: rgb(48 209 88 / 0.14);   --tag-green-fg: #30D158;
    --tag-mint: #63E6E2;   --tag-mint-bg: rgb(99 230 226 / 0.14);   --tag-mint-fg: #63E6E2;
    --tag-teal: #40C8E0;   --tag-teal-bg: rgb(64 200 224 / 0.14);   --tag-teal-fg: #40C8E0;
    --tag-blue: #0A84FF;   --tag-blue-bg: rgb(10 132 255 / 0.14);   --tag-blue-fg: #4CA5FF;
    --tag-indigo: #5E5CE6; --tag-indigo-bg: rgb(94 92 230 / 0.14);  --tag-indigo-fg: #9795EF;
    --tag-purple: #BF5AF2; --tag-purple-bg: rgb(191 90 242 / 0.14); --tag-purple-fg: #D085F5;
    --tag-pink: #FF375F;   --tag-pink-bg: rgb(255 55 95 / 0.14);    --tag-pink-fg: #FF728E;
    --tag-gray: #8E8E93;   --tag-gray-bg: rgb(142 142 147 / 0.14);  --tag-gray-fg: #A5A5A9;
  }
}

/* ---------- Escuro forçado pelo toggle (Config > Aparência); idêntico ao bloco de cima ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --nx-bg: #0A0A0B;               /* quase preto com leve tom frio (as referências de dash: página #0A, superfície #16) */
  --nx-bg-group: #161618;
  --nx-bg-group-2: #212124;
  --nx-bg-elevated: #1E1E21;
  --nx-label: #FFFFFF;
  --nx-label-2: rgb(235 235 245 / 0.64);
  --nx-label-3: rgb(235 235 245 / 0.30);
  --nx-label-4: rgb(235 235 245 / 0.16);
  --nx-on-label: #000000;
  --nx-fill: rgb(120 120 128 / 0.36);
  --nx-fill-2: rgb(120 120 128 / 0.32);
  --nx-fill-3: rgb(118 118 128 / 0.24);
  --nx-fill-4: rgb(118 118 128 / 0.18);
  --nx-sep: rgb(84 84 88 / 0.60);
  --nx-sep-opaque: #38383A;
  --nx-sys-red-fill: #EA0D00;
  --nx-sys-orange-fill: #A66500;
  --nx-sys-green-fill: #1E8537;
  --nx-glass-bg: rgb(22 22 24 / 0.72);
  --nx-shadow-sheet: 0 8px 32px rgb(0 0 0 / 0.60), 0 0 0 1px rgb(255 255 255 / 0.06);
  --nx-shadow-pop: 0 4px 16px rgb(0 0 0 / 0.50), 0 0 0 1px rgb(255 255 255 / 0.06);
  --nx-scrim: rgb(0 0 0 / 0.60);
  --tag-red: #FF453A;    --tag-red-bg: rgb(255 69 58 / 0.14);    --tag-red-fg: #FF756D;
  --tag-orange: #FF9F0A; --tag-orange-bg: rgb(255 159 10 / 0.14); --tag-orange-fg: #FF9F0A;
  --tag-yellow: #FFD60A; --tag-yellow-bg: rgb(255 214 10 / 0.14); --tag-yellow-fg: #FFD60A;
  --tag-green: #30D158;  --tag-green-bg: rgb(48 209 88 / 0.14);   --tag-green-fg: #30D158;
  --tag-mint: #63E6E2;   --tag-mint-bg: rgb(99 230 226 / 0.14);   --tag-mint-fg: #63E6E2;
  --tag-teal: #40C8E0;   --tag-teal-bg: rgb(64 200 224 / 0.14);   --tag-teal-fg: #40C8E0;
  --tag-blue: #0A84FF;   --tag-blue-bg: rgb(10 132 255 / 0.14);   --tag-blue-fg: #4CA5FF;
  --tag-indigo: #5E5CE6; --tag-indigo-bg: rgb(94 92 230 / 0.14);  --tag-indigo-fg: #9795EF;
  --tag-purple: #BF5AF2; --tag-purple-bg: rgb(191 90 242 / 0.14); --tag-purple-fg: #D085F5;
  --tag-pink: #FF375F;   --tag-pink-bg: rgb(255 55 95 / 0.14);    --tag-pink-fg: #FF728E;
  --tag-gray: #8E8E93;   --tag-gray-bg: rgb(142 142 147 / 0.14);  --tag-gray-fg: #A5A5A9;
}

/* ---------- Contraste aumentado: separadores e labels secundários mais fortes ---------- */
@media (prefers-contrast: more) {
  :root {
    --nx-sep: rgb(60 60 67 / 0.60);
    --nx-sep-opaque: #6C6C70;
    --nx-label-2: rgb(60 60 67 / 0.90);
    --nx-label-3: rgb(60 60 67 / 0.60);
    --nx-glass-bg: var(--nx-bg-group);
  }
  :root[data-theme="dark"] {
    --nx-sep: rgb(235 235 245 / 0.50);
    --nx-sep-opaque: #8E8E93;
    --nx-label-2: rgb(235 235 245 / 0.85);
    --nx-label-3: rgb(235 235 245 / 0.60);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nx-sep: rgb(235 235 245 / 0.50);
    --nx-sep-opaque: #8E8E93;
    --nx-label-2: rgb(235 235 245 / 0.85);
    --nx-label-3: rgb(235 235 245 / 0.60);
  }
}

/* ---------- Transparência reduzida: o vidro vira opaco ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --nx-glass-bg: var(--nx-bg-group);
    --nx-glass-blur: none;
  }
}

/* A página pública do diagnóstico. CSS puro sobre os tokens `nx-*` do dash — sem Tailwind, sem build de
   CSS, sem fonte remota: o prospect abre isto num celular, por link de WhatsApp, em rede de rua.

   Só aparecem aqui pares de cor que `nexyo-financeiro/scripts/contraste.mjs` já mede e aprova
   (label/bg, label-2/bg-group, tag-<c>-fg/tag-<c>-bg, on-label/label). Cor nova sem par medido é
   texto que alguém não lê — por isso este arquivo não inventa nenhuma. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nx-bg);
  color: var(--nx-label);
  font-family: var(--nx-font);
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-body);
  letter-spacing: var(--nx-ls-body);
}

/* 34rem ≈ 68 caracteres na medida do corpo: leitura longa sem linha de jornal. */
.pagina {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--nx-s-8) var(--nx-inset) var(--nx-s-12);
}

/* ---------------------------------------------------------------- capa */

.capa__nome {
  margin: 0;
  font-size: var(--nx-fs-large-title);
  line-height: var(--nx-lh-large-title);
  font-weight: var(--nx-fw-bold);
  letter-spacing: var(--nx-ls-large);
  text-wrap: balance;
}

.capa__medicao {
  margin: var(--nx-s-3) 0 0;
  font-size: var(--nx-fs-title-3);
  line-height: var(--nx-lh-title-3);
}

.capa__local {
  margin: var(--nx-s-2) 0 0;
  color: var(--nx-label-2);
  font-size: var(--nx-fs-footnote);
  line-height: var(--nx-lh-footnote);
  letter-spacing: var(--nx-ls-small);
}

.elo {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Tarja de exemplo: ela precisa ser lida ANTES do nome da empresa, senão a página se passa por um
   diagnóstico real. Azul informativo, não laranja: não é alarme sobre o site, é o que a página é. */
.exemplo {
  margin: 0 0 var(--nx-s-5);
  padding: var(--nx-s-3) var(--nx-s-4);
  border-radius: var(--nx-r-md);
  background: var(--tag-blue-bg);
  color: var(--tag-blue-fg);
  font-size: var(--nx-fs-subheadline);
  line-height: var(--nx-lh-subheadline);
}

/* Medição velha: o aviso é fato (a idade), não alarme — daí o tom de aviso do sistema, não vermelho. */
.aviso {
  margin: var(--nx-s-5) 0 0;
  padding: var(--nx-s-3) var(--nx-s-4);
  border-radius: var(--nx-r-md);
  background: var(--tag-orange-bg);
  color: var(--tag-orange-fg);
  font-size: var(--nx-fs-subheadline);
  line-height: var(--nx-lh-subheadline);
}

/* ---------------------------------------------------------------- seções */

/* Mais ar acima do título do que abaixo: o respiro pertence à separação, não ao par título+conteúdo. */
.secao { margin-top: var(--nx-s-12); }

.secao__titulo {
  margin: 0 0 var(--nx-s-4);
  font-size: var(--nx-fs-title-2);
  line-height: var(--nx-lh-title-2);
  font-weight: var(--nx-fw-bold);
  letter-spacing: var(--nx-ls-body);
}

.sub {
  margin: var(--nx-s-6) 0 var(--nx-s-3);
  font-size: var(--nx-fs-footnote);
  line-height: var(--nx-lh-footnote);
  letter-spacing: var(--nx-ls-small);
  font-weight: var(--nx-fw-semibold);
  color: var(--nx-label-2);
  text-transform: uppercase;
}

.grupo + .grupo { margin-top: var(--nx-s-8); }

.grupo__cabeca {
  display: flex;
  align-items: baseline;
  gap: var(--nx-s-3);
  margin: 0 0 var(--nx-s-3);
  font-size: var(--nx-fs-footnote);
  line-height: var(--nx-lh-footnote);
  letter-spacing: var(--nx-ls-small);
  font-weight: var(--nx-fw-regular);
}

/* A severidade vem escrita, nunca só na cor: a classificação precisa sobreviver a daltonismo e a print
   em preto e branco (HIG, Color: "nunca comunique estado só por cor"). */
.chip {
  padding: 2px var(--nx-s-2);
  border-radius: var(--nx-r-full);
  font-weight: var(--nx-fw-semibold);
  background: var(--tag-gray-bg);
  color: var(--tag-gray-fg);
}
.chip--bloqueador { background: var(--tag-red-bg); color: var(--tag-red-fg); }
.chip--alta { background: var(--tag-orange-bg); color: var(--tag-orange-fg); }
.chip--media { background: var(--tag-yellow-bg); color: var(--tag-yellow-fg); }

.grupo__conta { color: var(--nx-label-2); }

/* ---------------------------------------------------------------- listas */

.lista {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--nx-bg-group);
  border-radius: var(--nx-r-group);
}

.linha { padding: var(--nx-s-4); }
.linha + .linha { border-top: 1px solid var(--nx-sep); }

.linha__titulo {
  margin: 0;
  font-size: var(--nx-fs-headline);
  line-height: var(--nx-lh-headline);
  font-weight: var(--nx-fw-semibold);
}

/* O número medido mora aqui. É ele que convence — a página não acrescenta o que ele significa. */
.linha__detalhe {
  margin: var(--nx-s-1) 0 0;
  color: var(--nx-label-2);
  font-size: var(--nx-fs-subheadline);
  line-height: var(--nx-lh-subheadline);
}

.certo {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--nx-s-3);
}

.certo__item {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--nx-s-3);
  align-items: start;
  font-size: var(--nx-fs-callout);
  line-height: var(--nx-lh-callout);
}

.ok {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 1px;
  fill: none;
  stroke: var(--tag-green-fg);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- estados sem item */

/* Página sem achado é o estado que mais se erra: sem isto ela pareceria quebrada, e um diagnóstico que
   só sabe acusar perde a autoridade de ter olhado. Por isso o estado vazio é desenhado, não é ausência. */
.nada {
  padding: var(--nx-s-5);
  border-radius: var(--nx-r-group);
  background: var(--nx-bg-group);
  border: 1px solid var(--nx-sep);
}

.nada__titulo {
  margin: 0;
  font-size: var(--nx-fs-title-3);
  line-height: var(--nx-lh-title-3);
  font-weight: var(--nx-fw-semibold);
  text-wrap: balance;
}

.nada__detalhe {
  margin: var(--nx-s-2) 0 0;
  color: var(--nx-label-2);
  font-size: var(--nx-fs-subheadline);
  line-height: var(--nx-lh-subheadline);
}

.vazio {
  margin: 0;
  color: var(--nx-label-2);
  font-size: var(--nx-fs-callout);
  line-height: var(--nx-lh-callout);
}

/* Site que não respondeu: um motivo para todas as medidas. Ele aparece uma vez, e a lista abaixo fica
   sendo o que ela é — o que ficou sem observação, não treze repetições da mesma frase. */
.motivo {
  margin: 0 0 var(--nx-s-4);
  font-size: var(--nx-fs-callout);
  line-height: var(--nx-lh-callout);
}

.faltou {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nx-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.faltou li {
  padding: var(--nx-s-1) var(--nx-s-3);
  border-radius: var(--nx-r-full);
  background: var(--nx-bg-group);
  color: var(--nx-label-2);
  font-size: var(--nx-fs-footnote);
  line-height: var(--nx-lh-footnote);
  letter-spacing: var(--nx-ls-small);
}

/* ---------------------------------------------------------------- chamada */

.cta {
  margin-top: var(--nx-s-12);
  padding: var(--nx-s-6) var(--nx-s-5);
  border-radius: var(--nx-r-lg);
  background: var(--nx-bg-group);
}

.cta__fala {
  margin: 0 0 var(--nx-s-5);
  font-size: var(--nx-fs-title-3);
  line-height: var(--nx-lh-title-3);
  font-weight: var(--nx-fw-semibold);
  text-wrap: balance;
}

/* Alvo de toque inteiro (HIG: 44 pt), largura toda no celular — o polegar não persegue link de texto. */
.cta__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--nx-target);
  padding: var(--nx-s-3) var(--nx-s-5);
  border-radius: var(--nx-r-md);
  background: var(--nx-label);
  color: var(--nx-on-label);
  font-size: var(--nx-fs-headline);
  font-weight: var(--nx-fw-semibold);
  text-decoration: none;
  transition: opacity var(--nx-dur-fast) var(--nx-ease);
}

.cta__botao:hover { opacity: 0.88; }
.cta__botao:active { opacity: 0.76; }

/* ---------------------------------------------------------------- rodapé */

.rodape {
  margin-top: var(--nx-s-10);
  padding-top: var(--nx-s-5);
  border-top: 1px solid var(--nx-sep);
  color: var(--nx-label-2);
  font-size: var(--nx-fs-footnote);
  line-height: var(--nx-lh-footnote);
  letter-spacing: var(--nx-ls-small);
}

.rodape p { margin: 0; }

/* ---------------------------------------------------------------- foco */

:focus-visible {
  outline: 2px solid var(--nx-focus);
  outline-offset: 2px;
  border-radius: var(--nx-r-xs);
}

/* ---------------------------------------------------------------- telas maiores */

@media (min-width: 40rem) {
  .pagina { padding-top: var(--nx-s-12); }
  .capa__nome { font-size: 2.5rem; line-height: 3rem; }
  /* `auto-fit` e não `1fr 1fr`: com um crédito só, duas colunas fixas quebrariam a frase no meio. */
  .certo { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--nx-s-3) var(--nx-s-6); }
  .cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-s-6);
    padding: var(--nx-s-6);
  }
  .cta__fala { margin: 0; flex: 1 1 auto; }
  .cta__botao { flex: none; }
}

/* ---------------------------------------------------------------- movimento */

/* Um único momento: a página assenta ao abrir. O conteúdo NÃO nasce invisível esperando script — a
   animação parte de um estado já visível, então JS bloqueado ou animação desligada não deixam tela branca. */
@keyframes entra {
  from { transform: translateY(6px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}

.entra { animation: entra var(--nx-dur) var(--nx-ease) both; }

/* `@media` NÃO soma especificidade: uma regra `.entra` dentro da media query empata com a de cima e perde
   por ordem se alguém reordenar o arquivo. `html body .entra` vence por especificidade própria, sempre. */
@media (prefers-reduced-motion: reduce) {
  html body .entra { animation: none; }
  html body .cta__botao { transition: none; }
}