/* ==========================================================================
   panel.css — o painel do InfinityMail
   ==========================================================================
   SUBSTITUI a folha anterior por completo, e com ela o vocabulário: `.card`,
   `.tb`, `.kpi`, `.ph`, `.sidebar` saíram; entra `c-card`, `c-table`,
   `c-metric`, `c-page-head`, `c-sidebar`.

   POR QUE TROCAR O VOCABULÁRIO INTEIRO, E NÃO SÓ O VISUAL
   -------------------------------------------------------
   Manter os dois convivendo garante que daqui a três meses ninguém saiba qual
   usar, e que uma correção conserte metade das telas. O custo de unificar é
   maior hoje e menor em toda tela que vier depois.

   A ORDEM É A REGRA
   Tokens definem escala, temas dão papel à escala, componentes consomem papel.
   Custom property indefinida não falha: cai para o valor inicial e a tela
   renderiza sem cor, o que a olho parece "quase certo".

   COR LITERAL SÓ NA ESCALA E NO TEMA. Componente nenhum conhece `#EFF0F4`;
   ele conhece `--color-border`, e é por isso que o tema escuro funciona sem
   uma regra a mais em nenhum componente.

   ONDE ISTO MORA
   No projeto, não na sharedcode. Dezenove projetos usam o kit compartilhado, e
   uma folha que redefine componente deles muda telas de gente que não pediu.
   Se a casca se provar aqui, sobe para lá DEPOIS, como arquivo novo.
   ========================================================================== */


/* ===== escala e cor literal ===== */
/* ==========================================================================
   kit · tokens — A ÚNICA FONTE DE COR LITERAL DO KIT
   ==========================================================================
   Contrato §Frontend: "cor literal fora de tokens/* e themes/* é erro de CI".
   Este arquivo e os dois de themes/ são os únicos onde um hexadecimal pode
   aparecer. Todo componente referencia var(--color-*), sem exceção.

   As escalas aqui são CRUAS e não têm significado. Quem dá significado é
   themes/, que mapeia --color-bg-surface para um degrau da escala. É isso que
   faz "trocar só o CSS" funcionar: um SaaS que quer outra marca reescreve
   apenas este arquivo e herda todo o resto do kit.

   A escala de marca é deliberadamente sóbria. Um kit que nasce índigo faz
   dezenove produtos parecerem o mesmo produto.
   ========================================================================== */

:root {
  /* ── escala neutra ───────────────────────────────────────────────────── */
  --kit-neutral-0:   #FFFFFF;
  --kit-neutral-25:  #FBFBFD;
  --kit-neutral-50:  #F7F8FA;
  --kit-neutral-100: #EFF0F4;
  --kit-neutral-200: #E4E6EE;
  --kit-neutral-300: #CDD0DC;
  --kit-neutral-400: #A6AAB9;
  --kit-neutral-500: #858A9B;
  --kit-neutral-600: #656A7C;
  --kit-neutral-700: #4A4F60;
  --kit-neutral-800: #2A2E3C;
  --kit-neutral-900: #16181F;
  --kit-neutral-950: #0E1016;

  /* ── escala de marca ─────────────────────────────────────────────────── */
  --kit-brand-50:  #EEF0FE;
  --kit-brand-100: #DDE1FD;
  --kit-brand-200: #BAC2FB;
  --kit-brand-400: #7086F2;
  --kit-brand-500: #3B54E8;
  --kit-brand-600: #2A3FC4;
  --kit-brand-700: #1F2E93;

  /* ── escalas de estado ───────────────────────────────────────────────── */
  --kit-success-50:  #E6F6EF;
  --kit-success-200: #BFE6D6;
  --kit-success-400: #2E9E76;
  --kit-success-500: #0B7A55;
  --kit-success-700: #075B3F;

  --kit-warning-50:  #FFF6E5;
  --kit-warning-200: #F0DDB0;
  --kit-warning-400: #C08A2A;
  --kit-warning-500: #8A5A00;
  --kit-warning-700: #66430A;

  --kit-danger-50:  #FDF0EC;
  --kit-danger-200: #F2CFC5;
  --kit-danger-400: #E0674A;
  --kit-danger-500: #C0391C;
  --kit-danger-700: #8E2814;

  /* ── tipografia ──────────────────────────────────────────────────────── */
  /* Stack de sistema, e isso é decisão de segurança antes de ser de gosto: a
     tela de pagamento tem cartão em campo, e a regra da casa é que nada de
     terceiro carrega enquanto um cartão está na tela. Um host de fonte vê o
     referrer dessa página. Trocar por webfont é uma decisão sobre dado de
     portador, não sobre tipografia. */
  --font-family-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --font-size-xs:   0.75rem;
  --font-size-sm:   0.8125rem;
  --font-size-md:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.0625rem;
  --font-size-xl:   1.1875rem;
  --font-size-2xl:  1.375rem;
  --font-size-3xl:  1.75rem;
  --font-size-4xl:  2.25rem;
  --font-size-5xl:  2.75rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;
  --font-weight-black:  800;

  --line-height-tight: 1.1;
  --line-height-snug:  1.35;
  --line-height-base:  1.6;

  --letter-spacing-tight: -0.03em;
  --letter-spacing-wide:  0.14em;

  /* ── espaçamento ─────────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ── forma ───────────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   9px;
  --radius-lg:   14px;
  --radius-full: 999px;
  --border-width: 1px;

  /* ── medidas de leitura ──────────────────────────────────────────────── */
  --measure-narrow: 34rem;
  --measure-base:   46rem;
  --measure-wide:   70rem;

  /* ── camadas ─────────────────────────────────────────────────────────── */
  --z-sticky:  20;
  --z-overlay: 40;
}

/* ===== tema claro: papel semântico ===== */
/* ==========================================================================
   kit · tema claro — camada semântica
   ==========================================================================
   Aqui um degrau da escala ganha um papel. Componente nenhum conhece
   --kit-neutral-200; ele conhece --color-border, e é por isso que trocar de
   tema não exige tocar em componente.

   Nomes seguem o contrato (§Frontend, exemplo var(--color-bg-primary)):
   --color-<papel>[-<variação>].
   ========================================================================== */

:root {
  color-scheme: light;

  /* superfícies */
  --color-bg-primary:    var(--kit-neutral-50);
  --color-bg-surface:    var(--kit-neutral-0);
  --color-bg-subtle:     var(--kit-neutral-25);
  --color-bg-inverse:    var(--kit-neutral-900);
  --color-bg-muted:      var(--kit-neutral-100);

  /* texto */
  --color-text-primary:   var(--kit-neutral-900);
  --color-text-secondary: var(--kit-neutral-700);
  --color-text-muted:     var(--kit-neutral-500);
  --color-text-inverse:   var(--kit-neutral-0);
  --color-text-on-accent: var(--kit-neutral-0);

  /* linhas */
  --color-border:        var(--kit-neutral-200);
  --color-border-strong: var(--kit-neutral-300);

  /* ação */
  --color-accent:        var(--kit-brand-500);
  --color-accent-hover:  var(--kit-brand-600);
  --color-accent-subtle: var(--kit-brand-50);
  --color-accent-text:   var(--kit-brand-600);

  /* estados */
  --color-success:        var(--kit-success-500);
  --color-success-subtle: var(--kit-success-50);
  --color-success-border: var(--kit-success-200);
  --color-success-text:   var(--kit-success-700);

  --color-warning:        var(--kit-warning-500);
  --color-warning-subtle: var(--kit-warning-50);
  --color-warning-border: var(--kit-warning-200);
  --color-warning-text:   var(--kit-warning-700);

  --color-danger:        var(--kit-danger-500);
  --color-danger-subtle: var(--kit-danger-50);
  --color-danger-border: var(--kit-danger-200);
  --color-danger-text:   var(--kit-danger-700);

  /* sombras — literais de cor porque rgba não sai de escala */
  --shadow-sm: 0 1px 2px rgba(16, 18, 31, 0.06);
  --shadow-md: 0 2px 4px rgba(16, 18, 31, 0.05), 0 18px 40px -26px rgba(16, 18, 31, 0.35);
  --shadow-accent: 0 20px 44px -22px rgba(59, 84, 232, 0.4);

  /* skeleton */
  --color-skeleton-base:  var(--kit-neutral-100);
  --color-skeleton-shine: var(--kit-neutral-200);
}

/* ===== tema escuro por prefers-color-scheme ===== */
/* ==========================================================================
   kit · tema escuro
   ==========================================================================
   Contrato §Frontend: "dark mode automático via prefers-color-scheme". Não há
   toggle no kit — um toggle exige persistir preferência, e persistir
   preferência é decisão de produto que dezenove projetos tomariam diferente.
   O SaaS que quiser o botão troca a media query por [data-theme="dark"] neste
   arquivo, sem tocar em componente.

   Não é o tema claro com as cores invertidas. Superfície escura precisa de
   menos contraste de borda e de texto secundário mais claro, ou tudo vibra.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --color-bg-primary:    var(--kit-neutral-950);
    --color-bg-surface:    var(--kit-neutral-900);
    --color-bg-subtle:     #1A1D26;
    --color-bg-inverse:    var(--kit-neutral-50);
    --color-bg-muted:      var(--kit-neutral-800);

    --color-text-primary:   var(--kit-neutral-50);
    --color-text-secondary: var(--kit-neutral-300);
    --color-text-muted:     var(--kit-neutral-400);
    --color-text-inverse:   var(--kit-neutral-900);
    --color-text-on-accent: var(--kit-neutral-0);

    --color-border:        #2C3140;
    --color-border-strong: #3D4355;

    --color-accent:        var(--kit-brand-400);
    --color-accent-hover:  var(--kit-brand-500);
    --color-accent-subtle: #1D2340;
    --color-accent-text:   var(--kit-brand-200);

    --color-success:        var(--kit-success-400);
    --color-success-subtle: #12281F;
    --color-success-border: #1E4736;
    --color-success-text:   #74D3AC;

    --color-warning:        var(--kit-warning-400);
    --color-warning-subtle: #2A2113;
    --color-warning-border: #4A3A1C;
    --color-warning-text:   #E8C177;

    --color-danger:        var(--kit-danger-400);
    --color-danger-subtle: #2E1712;
    --color-danger-border: #52281D;
    --color-danger-text:   #F0A08A;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 18px 40px -26px rgba(0, 0, 0, 0.7);
    --shadow-accent: 0 20px 44px -22px rgba(112, 134, 242, 0.35);

    --color-skeleton-base:  var(--kit-neutral-800);
    --color-skeleton-shine: #333947;
  }
}

/* ===== reset, layout, tipografia, prosa ===== */
/* ==========================================================================
   kit · base, layout e tipografia
   ==========================================================================
   Mobile-first, como manda o contrato. Toda media query é min-width.

   Os nomes de classe são os que o kit JÁ usava — c-section, c-container,
   c-alert, c-button, c-field, c-form, c-plan, c-empty. Isso reverte a rodada
   anterior, que inventou um prefixo próprio: um SaaS que já estilizou
   .c-button não pode perder esse estilo por causa de um kit novo, e um SaaS
   que não tem nada recebe o daqui. Vocabulário compartilhado é o que faz as
   duas coisas serem verdade ao mesmo tempo.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}

p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--color-accent-text); }

/* Foco visível em tudo que recebe foco. Remover outline sem repor é a falha
   de acessibilidade mais comum e a mais barata de evitar. */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Conteúdo só para leitor de tela. Usado nos rótulos que a tela mostra por
   contexto visual e o leitor precisa ouvir. */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Primeiro elemento focável do layout. Sem ele, quem navega por teclado
   percorre o menu inteiro em toda página. */
.c-skip-link {
  position: absolute;
  left: var(--space-2);
  top: calc(var(--space-2) * -10);
  z-index: var(--z-overlay);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: top 0.12s;
}
.c-skip-link:focus { top: var(--space-2); }

/* ── contêineres ─────────────────────────────────────────────────────── */
.c-container {
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.c-container--narrow { max-width: var(--measure-narrow); }
.c-container--base   { max-width: var(--measure-base); }

.c-section { padding-block: var(--space-10); }
@media (min-width: 48rem) {
  .c-section { padding-block: var(--space-16); }
}
.c-section--tight { padding-block: var(--space-8); }

/* `--narrow` limita a LARGURA da seção, não o respiro. Usada por preços, pela
   página de erro do roteador e pela tela de conta bloqueada — e até 2026-09-08
   a regra NÃO EXISTIA em folha nenhuma: as três telas renderizavam o texto na
   largura inteira da viewport, linha de 200+ caracteres, sem erro em lugar
   algum (é o padrão do §0.2 do handoff — classe sem regra falha em silêncio).
   O teto é o mesmo `--measure-narrow` do `.c-container--narrow`, que existia
   órfão na folha: cheiro de renomeação pela metade, resolvida aqui criando a
   variante que as views realmente usam. */
.c-section--narrow {
  max-width: var(--measure-narrow);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.c-section--surface {
  background: var(--color-bg-surface);
  border-block: var(--border-width) solid var(--color-border);
}
.c-section--inverse {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}
.c-section--inverse h1,
.c-section--inverse h2,
.c-section--inverse h3 { color: var(--color-text-inverse); }
.c-section--inverse .c-section__lead { color: var(--color-text-muted); }

.c-section__header { max-width: var(--measure-base); }
.c-section__header--center { margin-inline: auto; text-align: center; }
.c-section__eyebrow {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.c-section__header h1 { font-size: var(--font-size-4xl); margin-top: var(--space-3); }
.c-section__header h2 { font-size: var(--font-size-3xl); margin-top: var(--space-3); }
@media (min-width: 48rem) {
  .c-section__header h1 { font-size: var(--font-size-5xl); }
  .c-section__header h2 { font-size: var(--font-size-4xl); }
}
.c-section__lead {
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
}

/* ── prosa (termos, privacidade, artigo de ajuda) ────────────────────── */
.c-prose { max-width: var(--measure-base); color: var(--color-text-secondary); }
.c-prose h2 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-2xl);
  color: var(--color-text-primary);
}
.c-prose h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}
.c-prose p + p { margin-top: var(--space-4); }
.c-prose ul, .c-prose ol { margin: var(--space-4) 0; padding-left: var(--space-6); }
.c-prose li + li { margin-top: var(--space-2); }
.c-prose table { width: 100%; border-collapse: collapse; margin-block: var(--space-6); }
.c-prose th, .c-prose td {
  padding: var(--space-3);
  text-align: left;
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-md);
}

.c-meta {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ── cabeçalho e rodapé do layout ────────────────────────────────────── */
.c-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--color-bg-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}
.c-header__inner {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: 3.5rem;
}
.c-header__brand {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-lg);
  text-decoration: none;
  color: var(--color-text-primary);
}
.c-header__nav { display: none; gap: var(--space-5); margin-left: auto; }
.c-header__nav a {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  color: var(--color-text-secondary);
}
.c-header__nav a:hover,
.c-header__nav a[aria-current="page"] { color: var(--color-text-primary); }
.c-header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
@media (min-width: 48rem) {
  .c-header__nav { display: flex; }
  .c-header__actions { margin-left: 0; }
}

.c-footer {
  margin-top: var(--space-16);
  padding-block: var(--space-8);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}
.c-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); }
.c-footer__links a { color: var(--color-text-secondary); text-decoration: none; }
.c-footer__links a:hover { text-decoration: underline; }

/* ===== botão, campo, escolha, seletor ===== */
/* ==========================================================================
   kit · botões, campos e formulários
   ========================================================================== */

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.c-button--primary { background: var(--color-accent); color: var(--color-text-on-accent); }
.c-button--primary:hover { background: var(--color-accent-hover); color: var(--color-text-on-accent); }
.c-button--secondary {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.c-button--secondary:hover { border-color: var(--color-text-primary); }
.c-button--danger {
  background: var(--color-bg-surface);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}
.c-button--danger:hover { background: var(--color-danger-subtle); }
.c-button--quiet {
  background: transparent;
  color: var(--color-text-secondary);
  padding-inline: 0;
}
.c-button--quiet:hover { color: var(--color-text-primary); }
.c-button--block { width: 100%; }
.c-button--large { font-size: var(--font-size-lg); padding: var(--space-4) var(--space-6); }
.c-button--small { font-size: var(--font-size-md); padding: var(--space-2) var(--space-4); }
.c-button[disabled],
.c-button[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.c-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.c-button-row--center { justify-content: center; }

/* ── campos ──────────────────────────────────────────────────────────── */
.c-form { display: grid; gap: var(--space-5); }

/* Filtro de uma linha: campos curtos e o botão ao lado, em vez da coluna alta
   que a tela de Uso mostrava — duas datas empilhadas empurravam o gráfico para
   baixo da dobra.

   Empilhado continua sendo o comportamento no telefone, e de propósito: dois
   campos de data lado a lado em 360px ficam menores que o dedo. A variante só
   vale a partir de 45rem.

   `align-items: end` alinha pela BASE dos controles, não pelo topo da célula —
   sem isso o botão sobe para a altura dos rótulos, que é o desalinhamento
   clássico de filtro em linha. E `auto-fit` com mínimo faz o conjunto quebrar
   sozinho quando não couber, sem precisar de um modificador por quantidade de
   campos. */
@media (min-width: 45rem) {
  .c-form--inline {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    align-items: end;
    gap: var(--space-4);
  }

  /* O respiro existe para separar as ações dos campos quando estão empilhados.
     Em linha eles são vizinhos laterais, e o padding só desalinha o botão. */
  .c-form--inline .c-form__actions { padding-top: 0; }
}
.c-form__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  padding-top: var(--space-2);
}

.c-field { display: grid; gap: var(--space-2); }
.c-field__label {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.c-field__required { color: var(--color-danger-text); }

.c-field__input,
.c-field__select,
.c-field__textarea {
  width: 100%;
  font-family: var(--font-family-body);
  /* 16px é o mínimo que impede o iOS de dar zoom ao focar um campo. Abaixo
     disso, todo formulário do celular pula de escala no primeiro toque. */
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.c-field__textarea { min-height: 8rem; resize: vertical; }
.c-field__input:focus,
.c-field__select:focus,
.c-field__textarea:focus {
  outline: 0;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}
.c-field__input[aria-invalid="true"],
.c-field__select[aria-invalid="true"],
.c-field__textarea[aria-invalid="true"] { border-color: var(--color-danger); }

/* Campo que não se edita precisa PARECER que não se edita.

   O e-mail de acesso da tela de perfil é `disabled` desde sempre e saía com a
   mesma borda, o mesmo fundo e o mesmo texto de um campo editável: o cliente
   clica, digita, nada acontece, e a conclusão razoável é que a tela quebrou.
   Até aqui a folha só tinha estado desabilitado para `.c-button`.

   Cobre `[readonly]` junto porque a view daquela tela é do kit
   (`kit::account/profile`, com namespace explícito, então sem precedência
   local): o atributo pode virar `readonly` lá sem passar por este projeto, e a
   aparência não pode depender de qual dos dois o pacote escolheu. */
.c-field__input:disabled,
.c-field__select:disabled,
.c-field__textarea:disabled,
.c-field__input[readonly],
.c-field__textarea[readonly] {
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  cursor: not-allowed;
}

/* `readonly` continua focável, e o anel em cor de acento é exatamente o sinal
   de "pode escrever aqui". Neutraliza o anel sem apagar o foco: a borda ainda
   muda, o campo segue alcançável por teclado e o e-mail segue selecionável para
   copiar — que é a única coisa que alguém quer fazer com ele. */
.c-field__input[readonly]:focus,
.c-field__textarea[readonly]:focus {
  border-color: var(--color-border-strong);
  box-shadow: none;
}

.c-field__hint { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.c-field__error {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-danger-text);
}

.c-field-row { display: grid; gap: var(--space-4); }
@media (min-width: 30rem) {
  .c-field-row--2 { grid-template-columns: 1fr 1fr; }
  .c-field-row--3 { grid-template-columns: 1fr 1fr 1fr; }
}

.c-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.c-fieldset__legend {
  padding: 0;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── escolha em cartão (rádio e checkbox) ────────────────────────────── */
.c-choice {
  position: relative;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}
.c-choice:hover { border-color: var(--color-text-muted); }
.c-choice input { margin: 0.2rem 0 0; accent-color: var(--color-accent); flex: none; width: 1.05rem; height: 1.05rem; }
.c-choice__title { display: block; font-weight: var(--font-weight-bold); }
.c-choice__text { display: block; font-size: var(--font-size-md); color: var(--color-text-secondary); margin-top: var(--space-1); }
.c-choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-subtle); }
.c-choice:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.c-choice-group { display: grid; gap: var(--space-3); }

/* ── seletor segmentado (periodicidade) ─────────────────────────────── */
.c-toggle-group { display: flex; justify-content: center; }
.c-toggle {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
}
.c-toggle__option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.c-toggle__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.c-toggle__option:has(input:checked) {
  background: var(--color-text-primary);
  color: var(--color-bg-surface);
}
.c-toggle__option:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.c-toggle__badge {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-success-subtle);
  color: var(--color-success-text);
  font-style: normal;
}
.c-toggle__option:has(input:checked) .c-toggle__badge {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

/* ── medidor de força de senha, sem JS obrigatório ───────────────────── */
.c-strength { display: grid; gap: var(--space-2); }
.c-strength__bar {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  overflow: hidden;
}
.c-strength__fill { height: 100%; width: 0; background: var(--color-danger); transition: width 0.2s, background-color 0.2s; }
.c-strength__fill[data-level="2"] { width: 50%; background: var(--color-warning); }
.c-strength__fill[data-level="3"] { width: 75%; background: var(--color-accent); }
.c-strength__fill[data-level="4"] { width: 100%; background: var(--color-success); }

/* ===== alerta, selo, vazio, skeleton, cartão ===== */
/* ==========================================================================
   kit · alertas, selos, vazios, skeleton, cartões
   ==========================================================================
   Os quatro modificadores de .c-alert são --info, --success, --warning e
   --danger, e são exatamente os que já existiam nas folhas dos projetos.
   Modificador desconhecido não falha: renderiza uma caixa sem estilo, e a
   mensagem que o usuário mais precisa ver vira a que parece nada. Por isso
   estes quatro nomes não mudam.
   ========================================================================== */

.c-alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}
.c-alert + .c-alert { margin-top: var(--space-3); }
.c-alert__text { flex: 1; }
.c-alert__text strong { color: inherit; }
.c-alert__action { flex: none; }
.c-alert--info    { background: var(--color-accent-subtle);  border-color: var(--color-accent);        color: var(--color-accent-text); }
.c-alert--success { background: var(--color-success-subtle); border-color: var(--color-success-border); color: var(--color-success-text); }
.c-alert--warning { background: var(--color-warning-subtle); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.c-alert--danger  { background: var(--color-danger-subtle);  border-color: var(--color-danger-border);  color: var(--color-danger-text); }
@media (max-width: 36rem) {
  .c-alert { flex-direction: column; }
}

.c-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}
.c-badge--accent  { background: var(--color-accent-subtle);  color: var(--color-accent-text); }
.c-badge--success { background: var(--color-success-subtle); color: var(--color-success-text); }
.c-badge--warning { background: var(--color-warning-subtle); color: var(--color-warning-text); }
.c-badge--danger  { background: var(--color-danger-subtle);  color: var(--color-danger-text); }

.c-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
}
.c-empty h2 { font-size: var(--font-size-xl); margin-bottom: var(--space-2); color: var(--color-text-primary); }
.c-empty__actions { margin-top: var(--space-6); }

/* ── skeleton ────────────────────────────────────────────────────────── */
/* O CI exige descendente c-skeleton*. Os três abaixo cobrem o que o kit
   precisa: linha de texto, bloco e cartão inteiro. */
.c-skeleton { display: grid; gap: var(--space-3); }
.c-skeleton__line,
.c-skeleton__block {
  background: linear-gradient(90deg,
    var(--color-skeleton-base) 25%,
    var(--color-skeleton-shine) 37%,
    var(--color-skeleton-base) 63%);
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: c-skeleton-shine 1.4s ease-in-out infinite;
}
.c-skeleton__line { height: 0.85rem; }
.c-skeleton__line--short { width: 40%; }
.c-skeleton__line--half { width: 60%; }
.c-skeleton__block { height: 8rem; border-radius: var(--radius-lg); }
@keyframes c-skeleton-shine {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .c-skeleton__line,
  .c-skeleton__block { animation: none; }
}

/* ── cartão de painel ────────────────────────────────────────────────── */
.c-card {
  background: var(--color-bg-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.c-card__header {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center;
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-bg-subtle);
}
.c-card__header h2 { font-size: var(--font-size-xl); }
.c-card__body { padding: var(--space-2) var(--space-6) var(--space-6); }
.c-card__footer {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-bg-subtle);
}
.c-card__footer form { margin: 0; }
.c-card + .c-card { margin-top: var(--space-5); }

/* ── lista de definições (dado do painel) ────────────────────────────── */
.c-datalist { display: grid; margin: 0; }
.c-datalist__row {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
}
.c-datalist__row + .c-datalist__row { border-top: var(--border-width) solid var(--color-border); }
.c-datalist__term {
  flex: none; width: 100%;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.c-datalist__value { margin: 0; flex: 1 1 14rem; }
.c-datalist__value small { display: block; font-size: var(--font-size-md); color: var(--color-text-muted); margin-top: var(--space-1); }
@media (min-width: 36rem) {
  .c-datalist__term { width: 11rem; }
}

/* ── caixa de autenticação ───────────────────────────────────────────── */
.c-auth { display: grid; place-items: center; min-height: 100vh; padding-block: var(--space-8); }
.c-auth__form-container {
  width: 100%;
  max-width: 26rem;
  background: var(--color-bg-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}
.c-auth__form-header { margin-bottom: var(--space-6); }
.c-auth__form-header h1 { font-size: var(--font-size-2xl); }
.c-auth__form-header p { margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-md); }
.c-auth__footer { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); font-size: var(--font-size-md); color: var(--color-text-secondary); }
.c-auth__brand { display: block; text-align: center; margin-bottom: var(--space-6); font-family: var(--font-family-display); font-weight: var(--font-weight-black); font-size: var(--font-size-xl); text-decoration: none; color: var(--color-text-primary); }

/* ── página de erro ──────────────────────────────────────────────────── */
.c-error { display: grid; place-items: center; min-height: 70vh; text-align: center; }
.c-error__code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-tight);
}
.c-error h1 { font-size: var(--font-size-3xl); margin-top: var(--space-4); }
.c-error p { margin-top: var(--space-4); color: var(--color-text-secondary); max-width: var(--measure-narrow); margin-inline: auto; }
.c-error__actions { margin-top: var(--space-8); }
.c-error__id { margin-top: var(--space-8); font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); }


/* ==========================================================================
   painel · a casca do painel (barra lateral, topo, área de conteúdo)
   ==========================================================================
   O kit já tinha `layouts/main`: cabeçalho horizontal, conteúdo, rodapé. Serve
   para tela pública e para formulário solto, não para painel — um painel tem
   navegação permanente, contexto de conta sempre visível e conteúdo que rola
   sozinho. Esta folha é a casca; `kit-data.css` é o que vai dentro dela.

   TRÊS DECISÕES QUE VALEM MAIS QUE O CSS
   --------------------------------------

   1. NENHUM JAVASCRIPT, INCLUSIVE NO MENU MOBILE.

      O padrão da indústria é gaveta com botão hamburguer, que exige JS para
      abrir, `aria-expanded` para narrar, foco preso enquanto aberta e Esc para
      fechar. Quatro coisas para errar num menu.

      Aqui, abaixo de 60rem a barra lateral vira uma trilha horizontal rolável
      logo abaixo do topo. Sempre visível, sem estado, sem foco preso, sem
      atributo para sincronizar. Rolagem horizontal com muitos itens é o preço,
      e é barato perto de uma gaveta quebrada.

      O menu da conta usa `<details>`/`<summary>`, que é disclosure nativo:
      abre no clique e no Enter, fecha no Esc, e o navegador narra o estado
      sozinho. Também sem JS.

   2. A CASCA NÃO TEM COR PRÓPRIA.

      Toda superfície sai de `--color-bg-*` e toda linha de `--color-border`.
      Um SaaS que reescreve `tokens/` ganha o painel na marca dele sem tocar
      aqui, e o tema escuro do kit já funciona sem uma regra a mais.

   3. AS MEDIDAS DA CASCA SÃO VARIÁVEIS, NÃO NÚMEROS SOLTOS.

      `--app-sidebar-width` e `--app-topbar-height` existem para o projeto
      sobrescrever numa linha. Não são cor, então podem morar aqui.
   ========================================================================== */

:root {
  --app-sidebar-width: 15.5rem;
  --app-topbar-height: 3.5rem;

  /* Sem teto por padrão — ver o comentário de .c-app__content. Projeto que
     queira limitar troca por um valor (ex.: 88rem) e o conteúdo se centraliza
     sozinho, sem sobra de um lado só. */
  --app-content-max:   100%;
}

/* ── esqueleto ─────────────────────────────────────────────────────────────
   Mobile: uma coluna, tudo empilhado. A partir de 60rem vira grade de duas
   colunas com a lateral fixa. Grade, não flex, porque a lateral precisa de
   largura exata e o conteúdo do resto — `1fr` faz isso sem `calc`. */
.c-app {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg-primary);
}

@media (min-width: 60rem) {
  .c-app {
    grid-template-columns: var(--app-sidebar-width) 1fr;
  }
}

/* ── barra lateral ─────────────────────────────────────────────────────── */
.c-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

@media (min-width: 60rem) {
  .c-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    padding: var(--space-5) var(--space-4);
    border-bottom: 0;
    border-right: var(--border-width) solid var(--color-border);
    overflow-y: auto;
  }
}

.c-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  text-decoration: none;
}

.c-sidebar__brand:hover { color: var(--color-accent-text); }

.c-sidebar__mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-weight: var(--font-weight-bold);

  /* Corpo maior que o texto normal, senão o símbolo de infinito some dentro do
     quadrado de 28px. E `place-items: center` alinha a CAIXA da linha, não o
     glifo — daí o `line-height: 1`.

     Estava provisoriamente no `critical.css` porque aquele lote não abria esta
     folha. E lá a regra não tinha efeito nenhum depois do carregamento: mesma
     especificidade, e o `panel.css` chega por último, então o
     `font-size: var(--font-size-sm)` que estava AQUI é que vencia. Voltou para
     o lugar certo. O quadrado do cabeçalho público tem a regra equivalente no
     `public.css`. */
  font-size: 1.15rem;
  line-height: 1;
}

/* A trilha: horizontal e rolável no telefone, vertical no desktop. */
.c-sidebar__nav {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: thin;
}

@media (min-width: 60rem) {
  .c-sidebar__nav {
    flex-direction: column;
    gap: var(--space-4);
    overflow-x: visible;
  }
}

.c-sidebar__group {
  display: flex;
  gap: var(--space-1);
}

@media (min-width: 60rem) {
  .c-sidebar__group { flex-direction: column; }
}

/* O rótulo do grupo é ruído na trilha horizontal — só aparece na vertical. */
.c-sidebar__group-label { display: none; }

@media (min-width: 60rem) {
  .c-sidebar__group-label {
    display: block;
    padding: 0 var(--space-2);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
}

.c-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.c-sidebar__link:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

/* `aria-current` faz o trabalho de estado. Sem classe `is-active` paralela:
   duas fontes de verdade para a mesma coisa é como uma delas fica errada. */
.c-sidebar__link[aria-current="page"] {
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
}

.c-sidebar__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Contador à direita do item (fila, dead-letter, pendências). */
.c-sidebar__count {
  margin-left: auto;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

.c-sidebar__link[aria-current="page"] .c-sidebar__count {
  background: var(--color-bg-surface);
  color: var(--color-accent-text);
}

.c-sidebar__count--danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}

.c-sidebar__footer {
  display: none;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

@media (min-width: 60rem) {
  .c-sidebar__footer { display: block; }
}

/* ── coluna principal ──────────────────────────────────────────────────── */
.c-app__main {
  display: flex;
  flex-direction: column;
  min-width: 0; /* sem isto, tabela larga estica a grade e quebra a lateral */
}

/* ── topo ──────────────────────────────────────────────────────────────── */
.c-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--app-topbar-height);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

@media (min-width: 60rem) {
  .c-topbar { padding-inline: var(--space-6); }
}

.c-topbar__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin: 0;
}

.c-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* Trilha de contexto. Um nível só no telefone: caminho completo em 360px vira
   três linhas de migalha antes do conteúdo. */
.c-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.c-breadcrumb__item { display: none; }

@media (min-width: 48rem) {
  .c-breadcrumb__item { display: inline; }
}

.c-breadcrumb__item--current { display: inline; color: var(--color-text-primary); }
.c-breadcrumb a { color: inherit; text-decoration: none; }
.c-breadcrumb a:hover { text-decoration: underline; }
.c-breadcrumb__sep { display: none; }

@media (min-width: 48rem) {
  .c-breadcrumb__sep { display: inline; color: var(--color-border-strong); }
}

/* ── menu da conta (disclosure nativo) ─────────────────────────────────── */
.c-usermenu { position: relative; }

.c-usermenu__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  list-style: none;
}

/* O triângulo do <summary> some nos dois motores; a seta é do ícone. */
.c-usermenu__trigger::-webkit-details-marker { display: none; }
.c-usermenu__trigger::marker { content: ""; }
.c-usermenu__trigger:hover { background: var(--color-bg-muted); }

.c-usermenu__trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.c-avatar {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.c-usermenu__name { display: none; }

@media (min-width: 48rem) {
  .c-usermenu__name { display: inline; }
}

.c-usermenu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: var(--z-overlay);
  min-width: 13rem;
  padding: var(--space-2);
  background: var(--color-bg-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.c-usermenu__meta {
  padding: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  word-break: break-all;
}

.c-usermenu__item {
  display: block;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.c-usermenu__item:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.c-usermenu__form { margin: 0; }

.c-usermenu__form button {
  width: 100%;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: var(--font-size-md);
  text-align: left;
  color: var(--color-danger-text);
  cursor: pointer;
}

.c-usermenu__form button:hover { background: var(--color-danger-subtle); }

/* ── área de conteúdo ──────────────────────────────────────────────────── */
/* O teto era 88rem e o conteúdo ficava encostado à esquerda: em tela larga
   sobrava uma faixa morta à direita, do tamanho da diferença. Duas coisas
   estavam erradas juntas.

   Primeira: o teto não faz sentido como padrão num painel. Ele existe para
   proteger a LEITURA de texto corrido, e quem precisa disso já tem
   `--measure-base` no próprio componente (a linha de apoio do cabeçalho usa).
   Tabela de entrega quer a largura que houver — cada rem a mais é uma coluna
   que não precisa quebrar.

   Segunda: teto sem centralização produz sobra assimétrica, que o olho lê como
   defeito de alinhamento e não como margem. Com `margin-inline: auto`, projeto
   que QUEIRA limitar continua podendo, e o resultado fica simétrico. */
.c-app__content {
  flex: 1;
  width: 100%;
  max-width: var(--app-content-max);
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) var(--space-12);
}

@media (min-width: 60rem) {
  .c-app__content { padding: var(--space-8) var(--space-6) var(--space-16); }
}

/* Cabeçalho de página do painel: título à esquerda, ações à direita, e as
   ações caem para baixo no telefone em vez de espremer o título. */
.c-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.c-page-head__text { flex: 1 1 18rem; min-width: 0; }

.c-page-head__text h1 {
  font-size: var(--font-size-2xl);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0;
}

.c-page-head__lead {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  max-width: var(--measure-base);
}

.c-page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── ícone ─────────────────────────────────────────────────────────────── */
.c-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.c-icon--sm { width: 0.875rem; height: 0.875rem; }
.c-icon--lg { width: 1.5rem;  height: 1.5rem; }

/* O sprite é inline no HTML e não deve ocupar espaço nem ser lido. */
.c-icon-sprite { display: none; }

/* ── aviso flutuante (toast) ───────────────────────────────────────────────
   ÚNICO COMPONENTE DO KIT QUE SÓ EXISTE COM JAVASCRIPT.

   Está aqui, e não em kit-feedback.css, porque não é feedback de formulário: é
   camada da casca, irmã do menu suspenso. Nenhuma tela depende dele — é o
   retorno de uma ação que já era melhoria progressiva (copiar). Sem JS não há
   botão de copiar, logo não há o que avisar.

   `popover` EM VEZ DE z-index — É A CORREÇÃO DO C3
   -------------------------------------------------
   O toast antigo tinha `z-index: 200` e sumia sob o modal. Não era número baixo
   demais: `<dialog>` aberto por `showModal()` vai para a TOP LAYER do
   navegador, que fica acima de qualquer z-index — subir para 999999 não
   resolveria.

   Um elemento com `popover` também vive na top layer. Dois elementos lá dentro
   empilham por ordem de abertura, e o toast abre depois do modal. É a única
   forma de o aviso aparecer sobre o diálogo sem hackear o DOM do diálogo.

   O bloco `:popover-open` é o estado real; as propriedades fora dele valem
   como queda para navegador sem suporte, onde o toast vira posicionado
   normalmente (e volta a perder do modal — degradação aceitável, já que sem
   suporte a popover também não há top layer para disputar). */
.c-toast {
  position: fixed;
  inset: auto var(--space-4) var(--space-4) auto;
  width: auto;
  max-width: min(28rem, calc(100vw - var(--space-8)));
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-md);
}

.c-toast--success { border-left-color: var(--color-success); }
.c-toast--warning { border-left-color: var(--color-warning); }
.c-toast--danger  { border-left-color: var(--color-danger); }

/* Vários avisos ao mesmo tempo empilham para cima em vez de se sobrepor. */
.c-toast + .c-toast { inset-block-end: calc(var(--space-4) + 3.25rem); }

@media (prefers-reduced-motion: no-preference) {
  .c-toast { animation: c-toast-in 160ms ease-out; }
}

@keyframes c-toast-in {
  from { opacity: 0; transform: translateY(var(--space-2)); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   painel · o que vai dentro da casca do painel
   ==========================================================================
   Tabela, métrica, linha do tempo, barra de filtros, paginação, abas, bloco de
   código e barra de progresso. É o vocabulário que separa "formulário bonito"
   de "painel de operação": um painel mostra MUITA linha e precisa que a linha
   seja legível, comparável e acionável.

   TABELA QUE VIRA CARTÃO NO TELEFONE, SEM JAVASCRIPT
   --------------------------------------------------
   A saída comum para tabela em 360px é rolagem horizontal — o usuário arrasta
   para os lados e perde a coluna de referência. A outra é montar dois HTMLs, um
   de tabela e um de cartão, o que dobra o template e garante que os dois
   divirjam.

   Aqui a MESMA tabela vira lista de cartões abaixo de 48rem: cada `<td>` carrega
   `data-label` e o CSS imprime esse rótulo via `::before`. Um HTML, semântica de
   tabela preservada para leitor de tela, e nenhuma linha de JS.

   O custo honesto: `data-label` é repetido em toda célula, o que engorda o HTML.
   Vale para as tabelas de painel (dezenas de linhas). Para milhares de linhas, a
   resposta certa é paginar, não trocar de técnica.

   NÚMERO SEMPRE COM `tabular-nums`
   --------------------------------
   Fonte de sistema tem dígito proporcional: numa coluna de valores, "111" fica
   mais estreito que "999" e a coluna parece desalinhada mesmo alinhada à
   direita. `font-variant-numeric: tabular-nums` corrige, e é a diferença entre
   uma tabela de números que dá para ler na diagonal e uma que não dá.
   ========================================================================== */

/* ── barra de ferramentas / filtros ────────────────────────────────────── */
.c-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--color-bg-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.c-toolbar__field { flex: 1 1 12rem; min-width: 0; }
.c-toolbar__field .c-field { margin: 0; }

.c-toolbar__actions {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

/* Resumo do filtro aplicado — quem chega por link precisa saber o que está
   vendo antes de interpretar os números. */
.c-toolbar__summary {
  flex-basis: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ── tabela ────────────────────────────────────────────────────────────── */
.c-table-wrap {
  background: var(--color-bg-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-md);
}

.c-table th,
.c-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
}

.c-table thead th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-bottom: var(--border-width) solid var(--color-border);
  white-space: nowrap;
}

.c-table tbody tr + tr td { border-top: var(--border-width) solid var(--color-border); }
.c-table tbody tr:hover { background: var(--color-bg-subtle); }

.c-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.c-table__mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  word-break: break-all;
}

.c-table__actions { text-align: right; white-space: nowrap; }

.c-table__sub {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.c-table a { color: var(--color-accent-text); text-decoration: none; }
.c-table a:hover { text-decoration: underline; }

/* Ordenação por link (o servidor ordena; a seta só informa). */
.c-table thead a { color: inherit; }
.c-table th[aria-sort] a { color: var(--color-text-primary); }

/* ── tabela → cartões no telefone ──────────────────────────────────────── */
@media (max-width: 47.999rem) {
  .c-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .c-table,
  .c-table tbody,
  .c-table tr,
  .c-table td { display: block; }

  .c-table tr {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border);
  }

  .c-table tbody tr + tr td { border-top: 0; }

  .c-table td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-1) 0;
    text-align: right;
  }

  .c-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: left;
  }

  /* Célula sem rótulo (ações) ocupa a linha inteira. */
  .c-table td:not([data-label]) { justify-content: flex-end; }
  .c-table__actions { text-align: right; }
}

/* ── paginação ─────────────────────────────────────────────────────────── */
.c-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.c-pagination__status {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.c-pagination__nav { display: flex; gap: var(--space-2); margin-left: auto; }

/* ── métricas ──────────────────────────────────────────────────────────── */
.c-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.c-metric {
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}

.c-metric__label {
  margin: 0;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.c-metric__value {
  margin: var(--space-2) 0 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

.c-metric__note {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Sinal de direção. Cor sozinha não comunica — o texto do sinal ("+12%",
   "3 falhas") já carrega o significado, e a cor só reforça. */
.c-metric__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.c-metric__trend--up      { color: var(--color-success-text); }
.c-metric__trend--down    { color: var(--color-danger-text); }
.c-metric__trend--neutral { color: var(--color-text-muted); }

/* Métrica em estado ruim ganha borda, não só número vermelho. */
.c-metric--danger  { border-color: var(--color-danger-border); }
.c-metric--warning { border-color: var(--color-warning-border); }

/* ── ponto de estado ───────────────────────────────────────────────────── */
.c-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  vertical-align: baseline;
}

.c-dot--success { background: var(--color-success); }
.c-dot--warning { background: var(--color-warning); }
.c-dot--danger  { background: var(--color-danger); }
.c-dot--accent  { background: var(--color-accent); }

/* ── linha do tempo ────────────────────────────────────────────────────── */
.c-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--space-6);
  list-style: none;
}

.c-timeline::before {
  content: "";
  position: absolute;
  left: 0.3125rem;
  top: var(--space-2);
  bottom: var(--space-2);
  width: var(--border-width);
  background: var(--color-border);
}

.c-timeline__entry { position: relative; padding-bottom: var(--space-5); }
.c-timeline__entry:last-child { padding-bottom: 0; }

.c-timeline__entry::before {
  content: "";
  position: absolute;
  left: calc(var(--space-6) * -1);
  top: 0.3125rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  border: 2px solid var(--color-border-strong);
}

.c-timeline__entry--success::before { border-color: var(--color-success); }
.c-timeline__entry--warning::before { border-color: var(--color-warning); }
.c-timeline__entry--danger::before  { border-color: var(--color-danger); }
.c-timeline__entry--accent::before  { border-color: var(--color-accent); }

.c-timeline__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.c-timeline__time {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.c-timeline__detail {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ── abas por link ─────────────────────────────────────────────────────── */
.c-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  overflow-x: auto;
}

.c-tabs__link {
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.c-tabs__link:hover { color: var(--color-text-primary); }

.c-tabs__link[aria-current="page"] {
  color: var(--color-accent-text);
  border-bottom-color: var(--color-accent);
}

/* ── bloco de código / valor copiável ──────────────────────────────────── */
.c-code {
  display: block;
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}

.c-copy {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

/* Campo de leitura: existe para SELECIONAR sem JS. Sem o botão funcionar, o
   usuário ainda consegue copiar o valor inteiro com um toque de seleção. */
.c-copy__value {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-subtle);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.c-copy__value:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
}

/* ── barra de progresso ────────────────────────────────────────────────────
   `<progress>` NATIVO, e isso é decisão, não preguiça.

   A barra de div dupla (`.c-progress > .c-progress__fill`) precisa de largura, e
   largura variável só sai por `style="width:72%"` — estilo inline, que o kit
   proíbe — ou por JS lendo um data-attribute. As duas quebram: a primeira no
   lint, a segunda com o JS desligado, e a segunda quebra MOSTRANDO UMA BARRA
   VAZIA, que é pior que não mostrar barra nenhuma.

   `<progress max="100" value="72">` carrega o número no próprio HTML, tem papel
   e valor narrados sem nenhum ARIA, e degrada para texto onde não renderiza. O
   preço é estilizar por pseudo-elemento de motor, que é feio e é uma vez só. */
.c-progress {
  display: block;
  width: 100%;
  height: 0.5rem;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  overflow: hidden;
  appearance: none;
}

/* Firefox: a barra é o próprio elemento; o preenchimento é ::-moz-progress-bar. */
.c-progress::-moz-progress-bar {
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

/* WebKit/Blink: precisa dos dois pseudo-elementos. */
.c-progress::-webkit-progress-bar {
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
}

.c-progress::-webkit-progress-value {
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.c-progress--success::-moz-progress-bar    { background: var(--color-success); }
.c-progress--success::-webkit-progress-value { background: var(--color-success); }
.c-progress--warning::-moz-progress-bar    { background: var(--color-warning); }
.c-progress--warning::-webkit-progress-value { background: var(--color-warning); }
.c-progress--danger::-moz-progress-bar     { background: var(--color-danger); }
.c-progress--danger::-webkit-progress-value  { background: var(--color-danger); }

.c-progress__legend {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

/* ── grade de cartões ──────────────────────────────────────────────────── */
.c-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .c-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .c-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Coluna principal + coluna de apoio. A de apoio vem DEPOIS no HTML e embaixo
   no telefone: quem lê em 360px quer o conteúdo antes do contexto. */
@media (min-width: 64rem) {
  .c-grid--aside { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* ==========================================================================
   CORREÇÕES DE ESPAÇAMENTO NO PAINEL
   ==========================================================================
   Três defeitos vistos em tela, com a mesma origem: os componentes do kit
   nasceram para páginas de uma coluna, e o painel os põe em grade e empilhados
   dentro de cartão. Estas regras vêm DEPOIS de kit-feedback.css no kit.css, que
   é o que permite corrigir sem !important.
   ========================================================================== */

/* ── 1. Cartões da grade nascendo desalinhados ─────────────────────────────
   `.c-card + .c-card { margin-top }` existe para cartões EMPILHADOS, e está
   certo lá. Mas dentro de `.c-grid` os dois cartões também são irmãos — o
   seletor casa, o segundo ganha margem no topo e desce em relação ao primeiro.

   Parecia margem sobrando no cartão estreito; era margem de empilhamento
   aplicada onde não há empilhamento. A grade já tem `gap`, que é quem deve
   cuidar do espaço entre colunas. */
.c-grid > .c-card + .c-card,
.c-metrics > .c-card + .c-card {
  margin-top: 0;
}

/* ── 2. Conteúdo colado dentro do cartão ───────────────────────────────────
   `.c-card__body` só dá padding; o que vai dentro se vira. Num formulário do
   kit isso funciona, porque `.c-form` é grid com `gap`. Mas a tela de DNS
   empilha rótulo, bloco de código, campo de cópia e alerta como irmãos
   diretos — sem grid, sem gap, tudo encostado.

   O ritmo vertical entra pelo irmão seguinte (`* + *`), nunca pelo primeiro
   filho: margem no primeiro brigaria com o padding do cartão e dobraria o
   espaço logo abaixo do cabeçalho. */
.c-card__body > * + * {
  margin-top: var(--space-4);
}

/* Rótulo solto pertence ao bloco que vem DEPOIS dele, não ao anterior: o
   espaço maior fica acima do par, e o rótulo cola no que ele nomeia. Sem isto,
   "O que já está publicado" flutua no meio, à mesma distância dos dois. */
.c-card__body > .c-field__label + * {
  margin-top: var(--space-2);
}

.c-card__body > .c-field__label {
  display: block;
  margin-top: var(--space-5);
}

/* Dois corpos seguidos no mesmo cartão (progresso + propriedades) ficavam
   grudados: o segundo começa com o padding-top curto do componente. Vira
   divisão explícita — são assuntos diferentes dentro do mesmo cartão. */
.c-card__body + .c-card__body {
  margin-top: 0;
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

/* ── 3. Barra de progresso sem respiro ─────────────────────────────────────
   `<progress>` é elemento de linha e não traz margem própria. Encostava no
   cabeçalho do cartão em cima e na legenda embaixo, e a legenda é justamente o
   que dá sentido à barra. */
.c-progress {
  margin-block: var(--space-2) var(--space-1);
}

/* Bloco de código encostava no rótulo e no bloco seguinte pela mesma razão. */
.c-code + .c-code {
  margin-top: var(--space-3);
}

/* ── bloco de código + botão Copiar ────────────────────────────────────────
   A tela de documentação envolve cada `<pre class="c-code">` e o botão Copiar
   num `.c-code-block`. A classe não existia na folha, e elemento sem estilo se
   comporta como bloco: funcionava, com dois efeitos.

   O primeiro: o botão herda a largura do bloco e estica de ponta a ponta.

   O segundo, menos óbvio: com o `<pre>` embrulhado, a regra `.c-code + .c-code`
   logo acima parou de casar — os `<pre>` deixaram de ser irmãos — e o respiro
   entre exemplos consecutivos sumiu da documentação inteira.

   Deliberadamente sem moldura própria: quem pinta fundo, borda e raio é o
   `.c-code` de dentro. Caixa dentro de caixa é o defeito que a segunda rodada
   de correções, mais abaixo nesta folha, passou o tempo todo desfazendo. */
.c-code-block {
  display: grid;
  gap: var(--space-2);
}

/* O botão nasce com `hidden` e o `panel.js` o revela quando a API de clipboard
   existe. `justify-self` mantém a largura do conteúdo em vez de esticar. */
.c-code-block > .c-button {
  justify-self: start;
}

.c-code-block + .c-code-block {
  margin-top: var(--space-3);
}

/* ==========================================================================
   SEGUNDA RODADA DE CORREÇÕES — vistas em tela cheia
   ==========================================================================
   Quatro defeitos, e três deles têm a mesma origem: componente do kit que traz
   MOLDURA PRÓPRIA (borda + raio + fundo) sendo posto dentro de um cartão que já
   tem moldura. Cada um funciona sozinho; juntos viram cartão dentro de cartão.

   A regra que passa a valer: quem está dentro de `.c-card` não desenha a
   própria borda. O cartão é o recipiente; o conteúdo não repete o recipiente.
   ========================================================================== */

/* ── 1. Borda dupla: tabela e barra de filtros dentro de cartão ────────────
   `.c-table-wrap` existe para ser uma tabela SOLTA na página — daí a borda e o
   raio. Dentro de um cartão, a borda dela encosta na borda do cartão e o olho
   lê duas molduras concêntricas.

   A tabela continua ganhando a linha que a separa do cabeçalho do cartão: essa
   é do `thead`, não da moldura. */
.c-card .c-table-wrap,
.c-card .c-toolbar {
  border: 0;
  border-radius: 0;
  background: none;
}

/* Sem a moldura, a tabela precisa recuperar a linha de topo que a separava do
   cabeçalho do cartão — mas só quando ela NÃO vem logo após o header (aí o
   header já tem a própria borda inferior). */
.c-card__body + .c-table-wrap {
  border-top: var(--border-width) solid var(--color-border);
}

/* ── 2. A "fonte extra" ────────────────────────────────────────────────────
   `.c-datalist__term` é monoespaçada, CAIXA ALTA e com espaçamento de letra.
   Faz sentido no kit, onde a lista descreve campos de conta ("CPF", "PLANO").
   No painel o termo é DADO — nome de domínio, endereço de e-mail, rótulo de
   propriedade — e dado em caixa alta monoespaçada parece de outro sistema.

   Pior: `INFINITYMAIL.COM.BR` em caixa alta é uma afirmação errada, porque
   domínio não tem caixa alta. Uppercase por CSS engana quem copia com o olho.

   Escopo restrito ao painel (`page-panel`, `page-ops`) de propósito: as telas
   de conta e cobrança do kit continuam como estavam nos outros dezoito
   projetos. */
.page-panel .c-datalist__term,
.page-ops .c-datalist__term {
  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text-secondary);
}

/* Onde a monoespaçada é o certo — chave DKIM, Message-ID, Return-Path — a
   classe é explícita na view. Continua valendo. */

/* ── 3. Cartões da mesma linha com cabeçalhos de alturas diferentes ────────
   Um cabeçalho com selo ao lado do título fica mais alto que um só com título,
   e as duas colunas passam a ter o conteúdo começando em alturas diferentes —
   parece que um cartão "desceu".

   Altura mínima igual ao maior caso resolve sem travar nada: cabeçalho com duas
   linhas continua crescendo. */
.c-grid .c-card__header {
  min-height: 4.25rem;
}

/* ── 4. Alerta e conteúdo colados no cabeçalho ─────────────────────────────
   `.c-card__body` tem `padding-top: var(--space-2)`, que é apertado para um
   corpo que começa com alerta ou com bloco de código. No kit o primeiro filho
   costuma ser `.c-form`, que traz o próprio respiro. */
.c-card__body {
  padding-top: var(--space-5);
}

/* ── 5. Texto longo sem espaço para quebrar ────────────────────────────────
   Message-ID, chave DKIM e endereço de e-mail são strings contínuas sem espaço.
   Numa grade, uma string dessas empurra a coluna além do container e a linha
   inteira sai da tela — o conteúdo parecia "cortado à direita".

   `min-width: 0` desarma o mínimo automático do grid/flex; `overflow-wrap`
   permite quebrar dentro da palavra quando não há alternativa. */
.c-app__content,
.c-datalist__value,
.c-timeline__detail {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── revelação (disclosure) ────────────────────────────────────────────────
   Para o detalhe que a maioria não precisa ver e uma minoria precisa muito — a
   forma armazenada da chave DKIM é o caso que motivou.

   `<details>` nativo pelas mesmas razões do menu da conta: abre no clique e no
   Enter, estado narrado pelo navegador, zero JS. E, quando não renderiza como
   disclosure, degrada para o conteúdo visível — que é a falha certa: melhor
   mostrar demais do que esconder sem jeito de abrir. */
.c-disclosure {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
}

.c-disclosure__summary {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.c-disclosure__summary:hover { color: var(--color-text-primary); }

.c-disclosure__summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.c-disclosure__body {
  padding: 0 var(--space-3) var(--space-3);
}

.c-disclosure__body > * + * { margin-top: var(--space-2); }

/* Dentro do disclosure o fundo já é sutil; o bloco de código repetiria o mesmo
   cinza e sumiria. Volta para a superfície do cartão para manter o contraste. */
.c-disclosure .c-code {
  background: var(--color-bg-surface);
}

/* ==========================================================================
   MODAL — herdado do painel anterior, no vocabulário novo
   ==========================================================================
   O `<dialog>` nativo continua sendo a base: `showModal()` põe na top layer,
   prende o foco e fecha no Esc sem uma linha de JS para isso. O que o painel
   antigo já fazia certo e não havia razão para mudar.
   ========================================================================== */
.c-modal {
  width: min(34rem, calc(100vw - var(--space-8)));
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
}

.c-modal--wide { width: min(52rem, calc(100vw - var(--space-8))); }
.c-modal::backdrop { background: rgba(16, 18, 31, 0.45); }
.c-modal h3 { margin: 0 0 var(--space-4); font-size: var(--font-size-xl); }
.c-modal > * + * { margin-top: var(--space-4); }

.c-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

/* ==========================================================================
   ESTADO DE CARREGAMENTO E VAZIO EM TABELA
   ==========================================================================
   Uma célula que atravessa a tabela inteira. Existe porque tabela vazia sem
   mensagem parece tabela quebrada.
   ========================================================================== */
.c-table__notice {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

@media (max-width: 47.999rem) {
  .c-table__notice { text-align: left; }
  .c-table__notice::before { content: none; }
}

/* ==========================================================================
   AJUSTES DA PRIMEIRA TELA EM PRODUÇÃO
   ========================================================================== */

/* ── Largura de coluna ─────────────────────────────────────────────────────
   `table-layout: auto` divide o espaço pelo conteúdo, e uma coluna com um
   botão de duas palavras acabava do tamanho da coluna do domínio. Estas
   classes vão no `<colgroup>`, que é onde largura de coluna pertence — não
   no `<th>`, que só descreve o cabeçalho. */
.c-table__col--narrow { width: 12rem; }

/* `width: 1%` + `nowrap` é o truque de HTML para "o mínimo que couber": o
   navegador tenta 1% e o conteúdo empurra até caber, sem quebrar linha. */
.c-table__col--fit { width: 1%; }
.c-table td.c-table__actions { white-space: nowrap; }

/* ── Selo de status ────────────────────────────────────────────────────────
   O `.c-badge` do kit é CAIXA ALTA com espaçamento de letra, o que faz sentido
   para rótulo curto de marketing e é ruído para um status que a pessoa lê
   dezenas de vezes por dia. "PENDING" também gritava mais que o dado ao lado.

   Escopo no painel: as telas públicas do kit continuam como estavam. */
.page-panel .c-badge {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--font-size-sm);
}

/* ── Nome do usuário em caixa alta ─────────────────────────────────────────
   Vem assim do cadastro ("EMERSON ROQUE RODRIGUES") e ocupa o topo inteiro.
   `capitalize` no CSS normaliza a exibição sem tocar no dado — que continua
   como o usuário digitou, para documento e para e-mail. */
.c-usermenu__name,
.c-sidebar__footer {
  text-transform: capitalize;
}

/* ── Flash ─────────────────────────────────────────────────────────────────
   Componente próprio, e não `.c-alert`, porque são coisas diferentes que
   estavam parecendo irmãs na tela: o flash é o RESULTADO do que o usuário
   acabou de fazer e vive uma requisição; o alerta é uma CONDIÇÃO da tela e
   fica lá enquanto a condição existir.

   O ícone à esquerda é o que separa os dois de relance, e a barra lateral
   colorida dá a direção sem depender só do fundo. */
.c-flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  font-size: var(--font-size-md);
}

.c-flash .c-icon { margin-top: 0.15rem; }

.c-flash--success {
  border-color: var(--color-success-border);
  border-left-color: var(--color-success);
  background: var(--color-success-subtle);
  color: var(--color-success-text);
}

.c-flash--danger {
  border-color: var(--color-danger-border);
  border-left-color: var(--color-danger);
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}

/* Aviso permanente da tela nunca encosta no flash nem no título. */
.c-page-head + .c-alert { margin-bottom: var(--space-5); }

/* ==========================================================================
   PASSOS DO ONBOARDING
   ==========================================================================
   Cartão clicável inteiro, e não um cartão com link dentro: alvo de toque
   maior no telefone, e um `<a>` só na ordem de tabulação em vez de dois
   elementos focáveis para o mesmo destino.
   ========================================================================== */
.c-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  text-decoration: none;
}

.c-step:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.c-step:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.c-step__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

.c-step__label { font-weight: var(--font-weight-medium); }

/* Passo cumprido: marca no número E cor no cartão. Só a cor deixaria de fora
   quem não distingue verde, e o cliente perderia a única pista de onde parou. */
.c-step--done { border-color: var(--color-success-border); }

.c-step--done .c-step__num {
  background: var(--color-success);
  color: var(--color-text-on-accent);
}

.c-step--done .c-step__label { color: var(--color-text-secondary); }

/* ── Espaço entre blocos irmãos no conteúdo ────────────────────────────────
   `.c-card + .c-card` já tinha margem, mas um cartão seguido de TABELA, de
   estado vazio ou de paginação não — e os dois ficavam colados, como se
   fossem o mesmo bloco.

   Em vez de listar todos os pares possíveis (que é como se esquece um), a
   regra é do CONTÊINER: dentro do conteúdo do painel, todo irmão que vem
   depois do primeiro ganha respiro. Vale para o que existe hoje e para o que
   vier. */
.c-app__content > * + * {
  margin-top: var(--space-5);
}

/* O cabeçalho de página já traz a própria margem inferior; sem esta linha ele
   ganharia as duas e o título ficaria longe demais do conteúdo. */
.c-app__content > .c-page-head + * {
  margin-top: 0;
}

/* ── Duas ações na mesma célula ────────────────────────────────────────────
   Cada ação é um `<form>` próprio, porque cada uma posta para uma rota
   diferente — e `<form>` é elemento de bloco, então os botões empilhavam.

   Formulário aninhado não existe em HTML, então juntar os dois num só não é
   opção. O que resolve é a CÉLULA virar flex: os formulários viram itens de
   linha e os botões ficam lado a lado, com a coluna ainda no mínimo que
   couber. */
.c-table__actions--inline {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.c-table__actions--inline form { margin: 0; }

@media (max-width: 47.999rem) {
  /* No modo cartão a célula já é flex com o rótulo; aqui ela não tem rótulo,
     então os botões só precisam encostar à direita. */
  .c-table td.c-table__actions--inline { justify-content: flex-end; }
}