/* ==========================================================================
   foundation.css — "Grafite neutro, um acento só"

   Camada aditiva sobre styles.css. Carrega DEPOIS dele (e depois de
   crm-clientes/metas/saude) no index.html: redefine os tokens do :root e
   corrige o punhado de lugares onde a cor está escrita direto na regra.
   Nenhuma linha dos arquivos anteriores foi reescrita.

   Princípio (spec em web/preview/board-apple-v1.html, aprovado 2026-09-23):

     "Dark refinado tipo Xcode/Apple TV. Azul do sistema é o único acento
      decorativo. Verde, laranja e vermelho ficam reservados a significado:
      status, delta e risco. Sem glow, sem gradiente em cima de dado, sem
      borda colorida brilhante."

   Saiu: quase-preto #06090b, grade cyan de 48px, scanline, lavagem laranja,
   glow colorido, gradiente sobre card, mono decorativa em rótulo e KPI,
   magenta/cream de categoria.

   Ferramentas que validam esta folha (rodam no preview, contra os JS de
   produção com fixture congelada):
     node preview/_audit2.mjs <tela>        fundo escuro demais · matiz fora da paleta
     node preview/_contrast-v2.mjs          contraste real, hoje × com a folha
     node preview/_accent-check.mjs         AA no botão · 3:1 no traço de série
     node preview/_check375-v2.mjs          rolagem horizontal · alvo de toque
     node preview/_clip-v2.mjs              texto cortado introduzido
     node preview/_regress2.mjs             blast radius (CRM + Clientes)
   ========================================================================== */


/* ==========================================================================
   A · TOKENS
   ========================================================================== */
:root {

  /* --- A1. COR ------------------------------------------------------------
     Os nomes de token do produto são mantidos pra a folha ser aditiva. Onde
     o nome passou a mentir (--orange virou azul), está anotado: na hora de
     virar produção esses tokens são renomeados, não duplicados. */

  /* superfícies: elevação = mais CLARO, nunca mais escuro (dark da Apple) */
  --bg:        #1C1C1E;   /* fundo da app · grafite neutro */
  --bg-soft:   #161618;   /* trilho lateral, um passo abaixo do fundo */
  --surface:   #2C2C2E;   /* card sobre o fundo */
  --surface-2: #3A3A3C;   /* tile dentro de card · hover · badge */
  --surface-3: #3A3A3C;

  /* separadores: hairline cinza. A borda cyan brilhante some. */
  --separator:      rgba(84, 84, 88, .65);
  --separator-soft: rgba(84, 84, 88, .38);
  --line:           rgba(84, 84, 88, .38);
  --line-strong:    rgba(84, 84, 88, .65);

  /* texto: 3 níveis, sem quarto.
     DESVIO CONSCIENTE do spec: ele pede --text-2 #98989D e --text-3 #636366.
     Medido na tela real (preview/_contrast-v2.mjs), #98989D sobre um tile
     --surface-2 dá 3,90:1 e #636366 dá 1,90:1 — o produto de hoje entrega
     6,5:1 no mesmo rótulo. Baixar contraste num sistema de uso diário é
     regressão, não refinamento. Os dois níveis sobem o mínimo pra passar em
     AA (4,5:1) sobre a superfície mais clara em que aparecem. O desenho é o
     mesmo cinza neutro; só a luminância muda. */
  --text:  #FFFFFF;
  --muted: #ABABB0;   /* spec: #98989D · +12% de luz = AA sobre --surface-2 */
  --dim:   #96969B;   /* spec: #636366 · AA sobre --surface; apoio, não rótulo */

  /* acento — UMA família, três papéis. Cada valor tem uma medida atrás.

     O spec pede #0A84FF pra tudo. O Rafael escolheu legibilidade sobre
     fidelidade literal, então o preenchimento de controle desceu pra
     #0A6FE0 (branco por cima: 3,65:1 → 4,81:1, passa AA).

     Mas #0A6FE0 contra um card --surface dá 2,90:1, abaixo do mínimo de
     3:1 que a WCAG pede pra elemento GRÁFICO essencial (1.4.11). Traço de
     série e barra de progresso não têm texto em cima — o problema deles é
     a forma contra o card. Por isso o azul de DADO fica no #0A84FF do spec
     (3,83:1). São papéis diferentes, não três azuis decorativos. */
  --accent:      #0A6FE0;   /* preenchimento de controle: botão, logo, tint */
  --accent-data: #0A84FF;   /* traço de série, barra de progresso, meter    */
  --accent-text: #6FB9FF;   /* link e rótulo em azul (ver bloco abaixo)     */
  --accent-soft: #6FB9FF;   /* projeção — mesma série do realizado          */
  --accent-tint: rgba(10, 111, 224, .22);
  /* Azul como TEXTO sobre grafite: #0A84FF dá 3,8:1 e #0A6FE0 dá 2,9:1 —
     os dois reprovam AA. Link e rótulo usam --accent-text. Ver --danger
     abaixo pro mesmo raciocínio no vermelho. */

  /* Os dois acentos do produto caem cada um no seu papel:
     --orange era AÇÃO (botão primário, CTA)          → preenchimento de controle
     --blue   era INTELIGÊNCIA/DADO/EVIDÊNCIA         → traço e barra de dado
     Laranja fica livre pra significar "atenção", que é pra isso que ele
     serve de fato nas 3 telas. */
  --orange: var(--accent);
  --blue:   var(--accent-data);

  /* --cream era destaque decorativo em headline. Destaque vira branco puro. */
  --cream: #FFFFFF;

  /* --magenta era categoria decorativa (conteúdo, aprendizado, criativo).
     Categoria não é cor — vira texto neutro. */
  --magenta: #98989D;

  /* semântica — só estes três carregam juízo de valor */
  --success: #30D158;
  --warning: #FF9F0A;
  /* O spec tem UM vermelho (#FF453A) e usa #FF7A70 sempre que ele vira texto
     (.badge-erro, .status-bad). Como --danger é usado 58× como cor de texto e
     só 12× como preenchimento no produto, o token assume o valor de TEXTO e o
     preenchimento ganha nome próprio. Mesma decisão, invertida. */
  --danger:      #FF7A70;
  --danger-fill: #FF453A;

  /* preenchimentos neutros (trilho de barra, hover, campo) */
  --fill-quiet: rgba(120, 120, 128, .18);
  --fill-hover: rgba(120, 120, 128, .26);
  --fill-track: rgba(120, 120, 128, .28);

  /* --- A2. TIPO -----------------------------------------------------------
     SF Pro nativo no Mac do Rafael; Segoe UI Variable / Aptos no Windows da
     Daiana. Tracking negativo cresce com o tamanho, leading encurta. */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Aptos",
             "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;

  /* A mono do produto NÃO era código: eram 65 usos decorativos (rótulo, KPI,
     botão, badge). Nenhum `pre`/`code` real depende dela. Remapear o token
     resolve os 65 de uma vez; os 2 usos legítimos (prompt do criativo, pill
     de SKU) declaram monospace direto e continuam intactos. */
  --font-mono: var(--font-ui);

  --fs-display: 28px; --lh-display: 34px; --ls-display: -.020em;  /* Title1  */
  --fs-title:   20px; --lh-title:   25px; --ls-title:   -.015em;  /* Title3  */
  --fs-head:    17px; --lh-head:    22px; --ls-head:    -.014em;  /* Headline*/
  --fs-body:    15px; --lh-body:    20px; --ls-body:    -.007em;  /* Subhead */
  --fs-foot:    13px; --lh-foot:    18px; --ls-foot:     0;       /* Footnote*/
  --fs-micro:   11.5px; --lh-micro: 15px; --ls-micro:    .055em;  /* Caption */
  --fs-kpi:     28px; --lh-kpi:     32px; --ls-kpi:     -.022em;
  --fs-kpi-sm:  22px; --lh-kpi-sm:  28px; --ls-kpi-sm:  -.018em;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* --- A3. ESPAÇO (grade de 4) -------------------------------------------- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px;

  /* --- A4. RAIO (proporcional à superfície) -------------------------------
     Hoje é 8px pra tudo: pill, botão, card e painel na mesma curvatura. */
  --r-chip: 999px;
  --r-xs:   8px;    /* badge, mini-tile */
  --r-sm:  10px;    /* botão, input, item de menu */
  --r-md:  12px;    /* card */
  --r-lg:  18px;    /* painel / bloco */
  --r-xl:  20px;    /* diálogo */
  --radius: var(--r-md);

  /* --- A5. PROFUNDIDADE ---------------------------------------------------
     Sombra só preta. Glow colorido (--glow-blue/--glow-orange) sai: ele era
     a borda brilhante que o spec proíbe. Os tokens continuam existindo pra
     não quebrar os 7 usos — só deixaram de brilhar. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .30);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .34);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, .42);
  --shadow-4: 0 30px 90px rgba(0, 0, 0, .55);
  --shadow: var(--shadow-2);
  --glow-blue:   var(--shadow-2);
  --glow-orange: var(--shadow-2);

  /* --- A6. MOVIMENTO ------------------------------------------------------ */
  --dur-press: 90ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --press: .97;
  --focus-ring: 0 0 0 2px var(--accent);
}


/* ==========================================================================
   B · BASE
   ========================================================================== */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* A grade cyan de 48px, a lavagem laranja no canto e o degradê pra preto
   competiam com o dado em toda tela. Fundo vira uma cor chapada: o dado
   passa a ser a única coisa que varia dentro do quadro. */
body {
  background: var(--bg);
  background-size: auto;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text);
}
/* scanline: efeito puro. Nada carrega. Sai. */
body::before { content: none; display: none; }

/* Número lê em coluna: tabular em toda parte. */
.mono, .timestamp, .kpi-value, .metric-value, .regua-value, .mt-num,
table td, table th, [class*="-value"], [class*="-num"], [class*="-delta"] {
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   C · SUPERFÍCIE E ELEVAÇÃO
   Regra única: fundo #1C1C1E → card #2C2C2E → tile dentro do card #3A3A3C.
   Hoje é o inverso (card mais escuro que o fundo, separado por borda cyan),
   e é isso que faz a tela ler como painel de terminal.
   ========================================================================== */

/* --- C1. Nível 1 · card sobre o fundo ------------------------------------ */
.metric-card, .panel, .decision-card, .module-card, .autonomy-card,
.audit-item, .data-panel, .card, .executive-brief, .analytics-title-card,
.analytics-action-card, .cockpit-card, .board-bloco, .regua-faturamento,
.change-card, .focus-filter-card, .rhythm-card, .kpi-map-card, .rule-card,
.module-flow-card, .goal-sync-card, .goal-history-card, .empty-history,
.conteudo-causa-section, .conteudo-workflow, .conteudo-breadcrumbs,
.conteudo-step-nav, .fb-card, .aitem-card, .gestao-column, .cognition-status,
.brain-result-panel, .ads-platform-card, .ads-health-card, .ads-action-card,
.crm-hero, .crm-decision-panel, .crm-period-toolbar, .crm-warmup-panel,
.skeleton-card, .state-note, .state-explainer, .insight {
  background: var(--surface);
  border-color: var(--separator-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
/* card pequeno usa a curva de card, não a de painel */
.metric-card, .change-card, .focus-filter-card, .mini-card, .audit-item,
.aitem-card, .fb-card, .rule-card {
  border-radius: var(--r-md);
}
.executive-brief, .board-bloco, .analytics-title-card, .conteudo-causa-section,
.panel, .data-panel, .cockpit-card {
  box-shadow: var(--shadow-2);
}

/* --- C2. Nível 2 · tile dentro de card ----------------------------------- */
.agora-card, .conteudo-causa-card, .paraonde-stat, .paraonde-headline,
.regua-cell, .pimi-fez-item, .board-briefing-item, .caminho-alavanca,
.conteudo-pipeline-step, .conteudo-rascunho-preview, .construction-step,
.queue-reason, .mini-card, .meta-box, .diagnostic-item, .n2-step,
.closing-evidence div, .metric-comparisons div, .crm-daily-summary > div,
.crm-audience-stats > div, .crm-system-facts > div, .crm-warmup-summary,
.crm-warmup-delivery > div, .cycle-dialog-summary, .handoff-content-final,
.handoff-promotion-prefill, .learning-causa-origem-item, .parallel-dialog-item,
.fb-route-option, .vs-head, .conteudo-matriz-row.conteudo-matriz-head,
.board-bloco.board-bloco-apoio, .metric-card-primary {
  background: var(--surface-2);
  border-color: var(--separator-soft);
}
.board-bloco.board-bloco-apoio { background: var(--surface); }

/* --- C3. Sem gradiente em cima de dado ----------------------------------
   A lavagem branca de 6%/42% que cobria o topo de todo card sai: era brilho
   sem informação, e ela é o que faz o card parecer plástico. */
.decision-card::after, .executive-brief::after, .analytics-title-card::after,
.data-panel::after, .panel::after, .rfm-kpi::after { content: none; }

/* Hover de card: hoje sobe 1px e acende glow azul em QUALQUER card. Movimento
   é feedback de ação — passar o mouse não é ação. Vira sinal de borda. */
.module-card:hover, .decision-card:hover, .metric-card:hover,
.data-panel:hover, .conteudo-causa-card:hover, .fb-card:hover {
  transform: none;
  box-shadow: var(--shadow-1);
  border-color: var(--separator);
}

/* --- C4. Trilhos de barra ------------------------------------------------ */
.bar-track, .column-track, .meter-track, .comp-bar-track, .stock-track,
.planejar-page .alavanca-bar-track, .alavanca-bar-track {
  background: var(--fill-track);
  border-color: transparent;
}

/* --- C5. Diálogos -------------------------------------------------------- */
dialog {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-4);
  color: var(--text);
}
dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); }
.toast {
  background: var(--surface-2);
  border-color: var(--separator);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-3);
}


/* ==========================================================================
   D · TIPOGRAFIA
   ========================================================================== */

.page-title {
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); font-weight: var(--fw-bold);
}
/* Título de bloco em 15px lia igual a um rótulo. Vira Title3: a tela passa a
   ter 3 níveis visíveis (tela · bloco · card) em vez de 2 e meio. */
.board-bloco-title, .section-heading h2, .panel h2, .executive-brief h2,
.dialog-head h2, .analytics-title-card h2, .conteudo-title {
  font-size: var(--fs-title); line-height: var(--lh-title);
  letter-spacing: var(--ls-title); font-weight: var(--fw-semibold);
}
.card-title, .data-panel h3, .decision-card h3, .module-card h3,
.autonomy-card h3, .agora-action-text, .conteudo-causa-titulo, .fb-card h3 {
  font-size: var(--fs-head); line-height: var(--lh-head);
  letter-spacing: var(--ls-head); font-weight: var(--fw-semibold);
}

/* --- D1. Micro-rótulo: o maior ganho de silêncio da tela -----------------
   Eram mono 700/800 caixa-alta com tracking .08–.14em — desenho de terminal,
   e num "REALIZADO / META DO MÊS" isso grita mais que o número embaixo. */
.eyebrow, .section-note, .meta-label, .card-eyebrow, .kpi-label, .breadcrumb,
.nav-section, .brand-tag, .regua-eyebrow, .regua-label, .conteudo-eyebrow,
.board-prologo-eyebrow, .agora-meta-label, .agora-action-eyebrow,
.agora-why-label, .board-briefing-label, .paraonde-stat-label,
.caminho-alavanca-label, .pimi-fez-domain, .df-label, .mt-rowhead,
.planner-field, .custom-cause-eyebrow, .conteudo-causa-tipo, .conteudo-causa-origem {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  font-weight: var(--fw-semibold);
  color: var(--muted);
}
.nav-section { letter-spacing: .085em; color: var(--dim); }

/* --- D2. Números --------------------------------------------------------- */
.metric-value, .kpi-value, .regua-value, .conteudo-stat-num, .brain-stat-num {
  font-family: var(--font-ui);
  font-size: var(--fs-kpi-sm); line-height: var(--lh-kpi-sm);
  letter-spacing: var(--ls-kpi-sm); font-weight: var(--fw-bold);
  color: var(--text);
}
/* 800/900 em número pequeno vira mancha; 700 destaca igual e lê melhor. */
.mt-num, .mt-qpill, .mt-cascade-item strong, .vs-current, .vs-base, .vs-delta,
.delta-val, .closing-evidence strong, .metric-comparisons strong,
.data-table th, .rfm-table th, .trust-pill, .engine-loading-timer,
.planejar-page .formula-strip, .planejar-page .alavanca-impact,
.planejar-page .driver-compare, .planejar-page .driver-result-roas,
.planejar-page .subcanal-sep-info, .planejar-page .canal-subtotal-bar .st-kpi .v,
.planejar-page .canal-subtotal-bar .st-mini, .planejar-page .cenario-table td,
.planejar-page .mono {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  letter-spacing: -.012em;
}

/* --- D3. Piso de 11px ---------------------------------------------------
   Varredura nas 3 telas achou rótulo de 9px, 9,5px e 10px (o menor da
   referência é 12px). O piso é 11 e não 12 de propósito: 12 reflow a tabela
   anual de 14 colunas. Tipo muda, métrica de layout não. */
.source-strip-state, .board-briefing-source, .agora-trust, .sync-badge-text,
.sync-badge-age, .vs-row.vs-head div, .vs-source, .df-label, .board-bloco-num,
.board-briefing-label, .page-kind-pill, .plan-state, .mt-nodata, .mt-rowhead,
.mt-qcell, .mt-meter__tick em, .mt-meter__scale span, .mt-verdict__cta small,
.cz-status-pill, .cz-sev-pill, .cz-age-pill, .cz-filter-group label,
.conteudo-causa-kpi dt, .regua-pill, .autonomy-pill, .brand-tag {
  font-size: 11px;
  line-height: 15px;
}
/* Os mesmos 9,5px dentro da tabela anual e dos diálogos, onde a regra de
   produção é mais específica. As colunas da anual têm largura fixa (col),
   então subir o rótulo não alarga a tabela. */
.mt-annual thead tr.mt-q th, .mt-annual thead th.mt-rowhead,
.mt-annual .mt-sub, .mt-annual .mt-rowhead em, .mt-annual .mt-cost,
.mt-lever thead th, .mt-lever__name em, .mt-lever__now em, .mt-legend span,
.mt-insight__impact small, .mt-foot-note, .pimi-fez-demo-state,
.parallel-dialog-eyebrow, .leave-confirm-eyebrow, .edit-dialog-eyebrow {
  font-size: 11px;
  line-height: 14px;
}

/* Exceção declarada ao piso: a tira de 30 dias do mês tem 30 colunas em
   343px no celular. 11px não cabe. Fica em 9px — o número do dia é apoio do
   desenho da barra, não leitura isolada. */
.mt-days .mt-day em { font-size: 9px; }

/* Rótulo que é frase inteira volta a ser frase: o texto do JS já vem em caixa
   de frase, quem gritava era o text-transform do CSS. */
summary, .decision-hint, .metric-link, .agora-why-label, .primary-button,
.secondary-button, .ghost-button, .text-button, .btn-v5-primary, .mt-btn,
.agora-secondary summary, .conteudo-causa-details summary, .cz-evidence-toggle,
.crm-disclosure > summary {
  text-transform: none;
  letter-spacing: -.006em;
  font-size: var(--fs-foot);
}


/* ==========================================================================
   E · COR SEMÂNTICA — badge, pill, selo
   Hoje quase todo selo tem cor e borda coloridas: fonte, severidade, estado,
   idade, domínio, autonomia. Seis cores no mesmo card e nenhuma hierarquia.
   Regra nova: selo é NEUTRO por padrão; cor só quando ela é o assunto
   (risco, atraso, erro, meta batida).
   ========================================================================== */

.source-badge, .impact-chip, .risk-chip, .autonomy-badge, .status-badge,
.module-chip, .persona-tag, .diag-status, .regua-pill, .regua-source,
.cz-source-badge, .cz-age-pill, .cz-dup-pill, .page-kind-pill,
.autonomy-pill, .mt-sim__badge, .estimated-tag,
.plan-version-strip span, .planner-version-row span, .board-bloco-num {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: .03em;
  border-radius: var(--r-chip);
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid transparent;
  box-shadow: none;
}
.board-bloco-num {
  border-radius: var(--r-xs);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--dim);
}
.nav-badge { border-radius: var(--r-chip); background: var(--surface-2); color: var(--muted); font-weight: var(--fw-semibold); }
.nav-badge.nav-badge-warn { background: rgba(255, 69, 58, .18); color: #FF7A70; }

/* As exceções que MANTÊM cor, porque a cor é a informação */
.source-badge.source-real, .regua-source.source-real,
.cz-status-pill.st-usada { color: var(--success); background: rgba(48, 209, 88, .15); }
.regua-source.source-partial, .cz-status-pill.st-em-analise,
.mt-saved.is-dirty { color: var(--warning); background: rgba(255, 159, 10, .16); border-color: transparent; }
.regua-source.source-disconnected, .source-badge.source-error,
.cz-sev-pill.sev-alta, .cz-status-pill.st-descartada {
  color: #FF7A70; background: rgba(255, 69, 58, .16);
}
/* "Nova" é o estado padrão de toda causa — não é juízo nem urgência. Estado
   padrão com cor de ação competia com o botão Criar brief no mesmo card. */
.cz-status-pill.st-nova { color: var(--muted); background: var(--surface-2); }
.cz-status-pill.st-expirada { color: var(--dim); background: var(--surface-2); }

/* Severidade: só alta e média merecem cor. Baixa é neutra — hoje ela é azul
   claro, e azul claro ao lado de vermelho lê como "outra categoria", não
   como "menos grave". */
.cz-sev-alta  { color: #FF7A70;       background: rgba(255, 69, 58, .16); }
.cz-sev-media { color: var(--warning); background: rgba(255, 159, 10, .16); }
.cz-sev-baixa { color: var(--muted);   background: var(--surface-2); }
/* Idade da causa: nova/recente não é juízo de valor. Só envelhecer é. */
.cz-age-fresh, .cz-age-recent, .cz-age-unknown { background: var(--surface-2); color: var(--muted); }
.cz-age-aging { background: rgba(255, 159, 10, .14); color: var(--warning); }
.cz-age-stale { background: rgba(255, 69, 58, .14); color: #FF7A70; }

/* Tag de domínio (CEO azul, CFO verde, CRM laranja, COO magenta) vira texto
   neutro: verde de CFO colidia com verde de "está bom". */
.tag-ceo, .tag-cgo, .tag-coo, .tag-cfo, .tag-crm,
.planejar-page .tag-ceo, .pimi-fez-domain {
  background: var(--surface-2); color: var(--muted); border-color: transparent;
}

/* Preenchimentos que continuam no vermelho cheio do spec. */
.mt-minibar i.is-bad, .mt-day__col i.is-bad, .mt-lever__dec.t-danger::before,
.sh-seg.is-down .sh-bar, .nav-saude-status.is-down, .nx-btn.is-danger,
.cognition-status.is-error::before { background: var(--danger-fill); }

/* Delta e trilho continuam semânticos. */
.delta-up, .trend-up, .regua-delta-up, .alavanca-vs.is-up { color: var(--success); }
.delta-down, .trend-down, .regua-delta-down { color: var(--danger); }
.delta-flat, .regua-delta-flat { color: var(--dim); }
/* --orange virou azul; estes três significavam ATENÇÃO, não ação. */
.alavanca-bar-fill.is-alert { background: var(--warning); }
.alavanca-vs.is-down, .subcanal-alert { color: var(--warning); }

/* --- E2. Resíduos de cor literal ----------------------------------------
   Varredura automatizada (preview/_audit2.mjs) nas 3 telas: tudo que sobrou
   com matiz fora da paleta ou fundo mais escuro que --bg depois do remap de
   token. São cores escritas direto na regra, sem passar por token. */
.date-filter { background: var(--surface); border-color: var(--separator-soft); }
/* Campo de texto: preto puro num fundo grafite vira buraco. Vira fill neutro
   (o campo é MAIS claro que a superfície, não mais escuro). */
.date-filter input, .drilldown-field input, .drilldown-field select,
.data-panel input, .custom-cause-form input, .custom-cause-form select,
.custom-cause-form textarea, .package-edit-form input, .package-edit-form textarea,
.handoff-result-field input, .handoff-result-field textarea, .handoff-instructions textarea,
.ads-cpa-row input, .ads-hook-body input, .ads-hook-body textarea,
.crm-campaign-dialog select, .cz-filter-group select, .fb-filter-group select,
.edit-dialog-textarea, .conteudo-adjustments-freetext, .adj-chip-open input,
.planner-input-wrap, .planner-select-wrap, .handoff-promotion-select,
.handoff-promotion-newpattern input {
  background: var(--fill-quiet);
  border-color: transparent;
}

/* Pill de período: ativo era laranja (ação) pra marcar ESTADO; vira tint. */
.period-pill.active { background: var(--accent-tint); border-color: transparent; color: var(--text); }
.period-pill.custom { border-color: var(--separator-soft); color: var(--muted); }
.period-pill:hover, .period-pill.custom:hover { background: var(--fill-hover); color: var(--text); }

/* Bordas cyan de decoração */
.topbar-glossario-btn, .board-briefing-cta, .brain-domain-tag, .btn-evidence {
  border-color: var(--separator-soft);
  color: var(--accent-text);
}
.brain-domain-tag { background: var(--surface-2); color: var(--muted); }
/* Dono da tarefa (Rafael / Daiana) é rótulo, não status: neutro. */
.agora-owner-pill { background: var(--surface-2); color: var(--muted); border-color: transparent; }

/* Verdes fora do token (#35e29a, #38c789, #4cd49a) apontam pro verde do
   sistema — três verdes diferentes na mesma tela era ruído. */
.source-strip-real, .vs-source.vs-source-real, .agora-done { border-color: rgba(48, 209, 88, .28); }
.source-strip-real, .source-strip-parcial, .source-strip-construcao { background: transparent; }
.source-strip-real .source-strip-icon, .source-strip-real .source-strip-state,
.agora-done-icon, .agora-done-label, .vs-source.vs-source-real { color: var(--success); }
.agora-done-icon { background: rgba(48, 209, 88, .16); }

/* Ícone de tipo de causa (Conteúdo): quadrado laranja com borda laranja em
   TODO card. Tipo é categoria — o rótulo ao lado já diz qual. Neutro. */
.conteudo-causa-icon { background: var(--surface-2); border-color: transparent; color: var(--muted); }
.conteudo-causa-card.is-active .conteudo-causa-icon { background: var(--accent-tint); color: var(--accent-text); }
.conteudo-bc-item.is-current { border-color: var(--accent); }
/* Passo corrente em azul-texto; passos futuros a 15% de branco eram
   invisíveis (1,6:1) — o stepper precisa mostrar QUANTAS etapas faltam. */
.conteudo-bc-item.is-current .conteudo-bc-icon,
.conteudo-bc-item.is-current .conteudo-bc-num,
.conteudo-bc-item.is-current .conteudo-bc-label { color: var(--accent-text); }
.conteudo-bc-sep, .conteudo-bc-item.is-blocked .conteudo-bc-icon,
.wf-step.is-future .wf-step-n { color: var(--dim); }
/* O bloco diz "Atenção", mas pinta vermelho de risco. Vermelho é "pare"; */
/* isto é "olhe". Vira âmbar. */
.cz-invalidated-warning { background: rgba(255, 159, 10, .10); border-color: rgba(255, 159, 10, .3); }
.cz-invalidated-warning strong, .cz-invalidated-warning svg { color: var(--warning); }
/* "+ Outra causa" é roxo tracejado com !important em produção (era o jeito de
   marcar "ação de criação"). Tracejado já marca isso sozinho — a cor sai. */
.cz-add-custom-inline {
  color: var(--accent-text) !important;
  border: 1px dashed var(--separator) !important;
  background: transparent !important;
}
.cz-add-custom-inline:hover {
  border-color: var(--accent) !important;
  background: var(--accent-tint) !important;
}

/* Dois campos vêm com style= inline no template (board.js "Pergunte ao Pimi").
   Inline só cede pra !important. Em produção viram classe. */
#ask-pimi-input { background: var(--fill-quiet) !important; border-color: transparent !important; border-radius: var(--r-sm) !important; }
#ask-pimi-btn   { background: var(--accent-tint) !important; border-color: transparent !important; color: var(--accent-text) !important; }

/* Barras de domínio coloridas na lateral do card (3px laranja/azul/magenta):
   viram um hairline neutro. A prioridade já está no topo da lista. */
.agora-card, .conteudo-causa-card, .brief::before {
  border-left-color: var(--separator);
}
.brief::before { background: var(--separator); }
.decision.priority, .decision-v5.priority { border-left-color: var(--accent); }


/* ==========================================================================
   F · CONTROLES
   4 tipos, uma ação primária por bloco. Press responde no :active — é o que
   dá sensação de resposta imediata.
   ========================================================================== */

.primary-button, .secondary-button, .ghost-button, .text-button,
.btn-v5-primary, .btn-primary, .mt-btn {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: -.01em;
  border-radius: var(--r-sm);
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              color var(--dur-fast) ease;
}
.primary-button, .secondary-button { padding: 9px 16px; min-height: 36px; }

/* Primário: accent chapado. O gradiente laranja + glow empurrava o botão pra
   frente do número que ele deveria acompanhar. */
.primary-button, .btn-primary, .btn-v5-primary {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}
.primary-button:hover, .btn-primary:hover, .btn-v5-primary:hover { background: #2B86F0; }

/* Secundário: tinted */
.secondary-button {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: transparent;
}
.secondary-button:hover { background: rgba(10, 111, 224, .32); }

/* Terciário: plain. Texto em azul usa a variante CLARA (AA sobre grafite). */
.ghost-button, .text-button {
  background: transparent;
  color: var(--accent-text);
  border-color: var(--separator-soft);
}
.ghost-button:hover, .text-button:hover { background: var(--fill-quiet); color: var(--accent-text); border-color: var(--separator); }

/* Secundário tinted: mesma correção — o texto é azul sobre fundo escuro. */
.secondary-button { color: var(--accent-text); }

/* Todo link/rótulo que herdou var(--blue)/var(--orange) como TEXTO. */
.metric-link, .decision-hint, .evidence-link, .board-briefing-cta,
.topbar-glossario-btn, .cz-add-custom-inline, .conteudo-causa-card.is-active .conteudo-causa-tipo,
.agora-rank, .mt-crumb b, .kpi-tile-link .kpi-delta, .brief-eyebrow,
.conteudo-stat-num, .brain-stat-num, .metric-value.is-accent {
  color: var(--accent-text);
}

.primary-button:active, .secondary-button:active, .ghost-button:active,
.text-button:active, .icon-button:active, .nav-item:active,
.btn-v5-primary:active, .btn-primary:active, .mt-btn:active {
  transform: scale(var(--press));
}
:where(button, a, select, input, textarea, summary):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

input, select, textarea {
  background: var(--fill-quiet);
  border-color: transparent;
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-ui);
}
input::placeholder, textarea::placeholder { color: var(--dim); }
.icon-button { background: transparent; border-color: var(--separator-soft); border-radius: var(--r-sm); color: var(--muted); }
.icon-button:hover { background: var(--fill-quiet); color: var(--text); }


/* ==========================================================================
   G · NAVEGAÇÃO E TOPO
   Regra do spec: a translucidez fica SÓ na topbar. Sidebar é superfície
   sólida — nunca duas superfícies translúcidas empilhadas.
   ========================================================================== */
.sidebar {
  background: var(--bg-soft);
  border-right: 1px solid var(--separator-soft);
  backdrop-filter: none;
  padding: var(--s4) var(--s3) var(--s8);
  gap: 1px;
}
.brand { border-bottom-color: var(--separator-soft); padding-bottom: var(--s4); margin-bottom: var(--s3); }
.brand-logo { background: var(--accent); border-radius: var(--r-sm); color: #fff; }
.brand-name { font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: -.01em; text-transform: none; }

.nav-item {
  border-radius: var(--r-xs);
  font-size: 14px;
  letter-spacing: -.008em;
  padding: 7px 10px;
  min-height: 34px;
  color: var(--muted);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
              transform var(--dur-press) var(--ease-out);
}
.nav-item:hover { background: var(--fill-quiet); color: var(--text); }
/* Seleção = variante TINTED. O accent chapado fica reservado pra AÇÃO: estado
   e ação não podem ter o mesmo peso visual. E some a barra de 2px que
   empurrava o texto pro lado a cada clique. */
.nav-item.is-active {
  background: var(--accent-tint);
  color: var(--text);
  font-weight: var(--fw-semibold);
  border-left: 0;
  padding-left: 10px;
}
.nav-item.is-active svg { color: var(--accent); }
.nav-item.sub { color: var(--dim); font-size: 13px; }
.nav-item.sub.is-active { padding-left: 10px; }

/* Topbar: a única superfície translúcida do sistema. Conteúdo passa por
   baixo — a pergunta da tela fica sempre à vista na rolagem. */
.app-shell { padding: var(--s6) var(--s7) 64px; }
.topbar {
  position: sticky; top: 0; z-index: 12;
  margin: calc(var(--s6) * -1) calc(var(--s7) * -1) var(--s5);
  padding: 13px var(--s7);
  background: rgba(28, 28, 30, .72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--separator-soft);
}
.timestamp {
  background: var(--surface-2);
  border-color: transparent;
  border-radius: var(--r-xs);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: -.005em;
}
.topbar-glossario-btn { border-radius: var(--r-xs); }


/* ==========================================================================
   H · TABELA E GRÁFICO
   ========================================================================== */
table th { color: var(--dim); font-weight: var(--fw-medium); }
table td { border-color: var(--separator-soft); }
.data-table tbody tr:hover, .crm-data-table tbody tr:hover,
.rfm-table tbody tr:hover { background: var(--fill-quiet); }

/* --- H1. Gráfico de ritmo da Sala ---------------------------------------
   O SVG é montado com cor literal no atributo (board.js). Propriedade CSS
   vence atributo de apresentação, então dá pra re-tematizar sem tocar no JS.
   Mapa: realizado → accent · projetado → accent claro · meta → verde ·
   histórico estimado e "necessário p/ bater meta" → cinza (são réguas, não
   resultado). Em produção isto vira cor por token no template. */
.ritmo-chart [stroke="#fd8043"]      { stroke: var(--accent-data); }
.ritmo-chart [stroke="#fd8043"][stroke-dasharray] { stroke: var(--accent-soft); }
.ritmo-chart [fill="#fd8043"]        { fill: var(--accent-data); }
.ritmo-chart text[fill="#fd8043"]    { fill: var(--accent-soft); }
.ritmo-chart [stroke="#35e29a"]      { stroke: var(--success); }
.ritmo-chart [fill="#35e29a"]        { fill: var(--success); }
.ritmo-chart [stroke="#37d5ff"]      { stroke: var(--muted); }
.ritmo-chart [fill="#37d5ff"]        { fill: var(--muted); }
.ritmo-chart [stroke="#d96cff"]      { stroke: var(--dim); }
.ritmo-chart [fill="#d96cff"]        { fill: var(--dim); }
.ritmo-chart [stroke="#5e737b"]      { stroke: var(--dim); }
.ritmo-chart [fill="#5e737b"]        { fill: var(--dim); }
.ritmo-chart [fill="#8ea6ad"]        { fill: var(--muted); }
.ritmo-chart [fill="#eef7fa"]        { fill: var(--text); }
.ritmo-chart [stroke="#06090b"]      { stroke: var(--surface); }
.ritmo-chart stop[stop-color="#fd8043"] { stop-color: var(--accent-data); }
.ritmo-chart stop[stop-color="#d96cff"] { stop-color: var(--accent-data); }
.ritmo-chart { font-family: var(--font-ui); }

/* Legenda do gráfico: o swatch vem com `style=` inline no template, então só
   !important alcança. Todo !important desta folha existe pelo mesmo motivo:
   o alvo é style= inline no template ou !important no styles.css — nunca pra
   ganhar briga de especificidade. Os alvos são: legenda do ritmo, campo do
   "Pergunte ao Pimi", "+ Outra causa", pontinhos do card anual e a grade
   .brief-kpis-4. Em produção todos viram classe/token e o !important cai. */
.ritmo-legend .legend-item:nth-child(1) .legend-swatch { background: var(--accent-data) !important; background-image: none !important; }
.ritmo-legend .legend-item:nth-child(2) .legend-swatch { background: var(--accent-soft) !important; background-image: none !important; opacity: 1 !important; }
.ritmo-legend .legend-item:nth-child(3) .legend-swatch { background: var(--muted) !important; opacity: 1 !important; }
.ritmo-legend .legend-item:nth-child(4) .legend-swatch { background: var(--success) !important; }
.ritmo-legend .legend-item:nth-child(5) .legend-swatch { background: var(--dim) !important; opacity: 1 !important; }
.ritmo-legend .legend-item:nth-child(6) .legend-swatch { background: var(--dim) !important; }


/* ==========================================================================
   I · AJUSTES DE PÁGINA — só as 3 telas em escopo.
   Continua sendo aparência: cor, espaço, raio, tipo. Nenhuma mudança de
   markup, de dado ou de comportamento.
   ========================================================================== */

/* --- I1. Sala de Conselho ------------------------------------------------ */
#page-board .board-bloco { padding: var(--s5) var(--s6) var(--s6); margin-bottom: var(--s5); }
#page-board .board-bloco-header { margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom-color: var(--separator-soft); }
/* Uma decisão na fila ocupava 1/3 da largura com 2/3 vazios ao lado — o card
   mais importante da Sala lia como sobra de grid. */
#page-board .agora-grid:has(> .agora-card:only-child) { grid-template-columns: minmax(0, 1fr); }
#page-board .agora-card { border-radius: var(--r-md); padding: var(--s4) var(--s5); gap: var(--s3); }
#page-board .agora-card > details > summary { min-height: 38px; display: flex; align-items: center; }
/* Com uma decisão só na fila o card ocupa a largura toda, e o botão primário
   (flex:1) virava uma faixa azul de 1.370px. Ação é alvo, não faixa. */
#page-board .agora-actions .primary-button,
#page-board .agora-card .primary-button { flex: 0 1 auto; min-width: 180px; max-width: 320px; }
#page-board .regua-cell { border-radius: var(--r-md); border-color: transparent; }
#page-board .vs-table { border-radius: var(--r-md); overflow: hidden; }
#page-board .brief-kpis { border-top-color: var(--separator-soft); }

/* --- I2. Metas & Ritmo ---------------------------------------------------
   A tela nasceu com paleta e fonte próprias (navy #0c1424 + azul #3399ff +
   Manrope, copiados da referência Axoly) e lê como outro produto dentro do
   PIMI. Os tokens locais passam a apontar pros tokens do sistema — mesma
   estrutura, mesma tabela, mesma leitura, agora na língua da casa. */
#page-metas .mt-page, .mt-page {
  --mt-card: var(--surface);
  --mt-card-2: var(--surface-2);
  --mt-card-3: var(--surface-2);
  --mt-border: var(--separator-soft);
  --mt-border-strong: var(--separator);
  --mt-primary: var(--accent-data);
  --mt-primary-soft: var(--accent-tint);
  --mt-primary-line: rgba(10, 111, 224, .55);
  --mt-text: var(--text);
  --mt-muted: var(--muted);
  --mt-dim: var(--dim);
  --mt-font: var(--font-ui);
  padding: 0 0 72px;
}
/* Os 3 pontinhos de "janela do macOS" no topo do card anual são decoração
   pura herdada da referência Axoly. Ficam cinza — ou somem, se o Rafael
   preferir (é o único enfeite restante na tela). */
.mt-dots i { background: var(--surface-2) !important; }
/* A fonte do sistema tem dígito mais largo que a Manrope: com a coluna de
   82px o número da meta cortava ("136.44…"). Craft: número cortado é dado
   mentindo. */
#page-metas .mt-annual col.mt-col-m { width: 88px; }
#page-metas .mt-annual col.mt-col-t { width: 134px; }  /* "−2% vs meta até hoje" cortava em 110 */
#page-metas .mt-annual .mt-num { letter-spacing: -.018em; }
#page-metas .mt-annual th, #page-metas .mt-annual td { padding: 9px 8px; }
#page-metas .mt-card { border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
/* Botão primário da tela de Metas vinha com texto navy escuro (#06121f) sobre
   o azul — 1,4:1. Texto branco sobre o azul de controle. --mt-primary aponta
   pro azul de DADO (barra de canal, sublinhado do mês corrente), então os
   dois controles que têm texto por cima pedem o azul de controle. */
.mt-btn.is-primary, .mt-storebtn.is-open { background: var(--accent); color: #fff; }
.mt-btn.is-insight, .mt-page .mt-num.is-info, .mt-annual thead th.is-now,
.mt-page .mt-num.is-accent { color: var(--accent-text); }
.mt-crumb b { color: var(--success); }
/* Ícone da leitura do Pimi era um degradê roxo→magenta de 34px — a única
   coisa colorida do rodapé, e não diz nada. Vira o azul de inteligência. */
.mt-insight__icon { background: var(--accent); }
/* A linha "Meta" é a única editável da tabela; hoje ela é âmbar, que na
   mesma tela significa "atrasado". Interativo = azul. */
.mt-rowhead.is-editable b, .mt-goal-dot { color: var(--accent-text); }
/* Q1 verde · Q2 azul · Q3 violeta · Q4 âmbar: quatro cores pra dizer
   "trimestre", e duas delas colidem com "bateu a meta" / "atenção" na MESMA
   tabela. O rótulo já diz o trimestre. Neutro. */
.mt-qpill, .mt-qpill[data-q="1"], .mt-qpill[data-q="2"],
.mt-qpill[data-q="3"], .mt-qpill[data-q="4"] {
  background: var(--surface-2); color: var(--text);
  border-radius: var(--r-chip); font-weight: var(--fw-semibold);
}
.mt-qpill:hover { background: var(--fill-hover); filter: none; }
/* Mesma coisa nas linhas de grupo da tabela anual (RECEITA verde, FUNIL azul,
   MÍDIA violeta, SAÚDE âmbar). */
.mt-annual tr.mt-group.t-green td, .mt-annual tr.mt-group.t-blue td,
.mt-annual tr.mt-group.t-violet td, .mt-annual tr.mt-group.t-amber td {
  color: var(--muted);
}
/* Veredito do mês: a barra lateral colorida já diz o status. A lavagem de
   cor por cima do card (gradiente 105°) é gradiente em cima de dado. */
.mt-verdict.is-ok, .mt-verdict.is-warn, .mt-verdict.is-risk { background: var(--surface); }
/* Linha "alavanca mais barata" era tinta laranja; ela é a RECOMENDAÇÃO. */
.mt-lever tr.is-best td { background: var(--accent-tint); }
.mt-goal.is-dirty { border-color: var(--warning); background: rgba(255, 159, 10, .10); }
.mt-sim { border-color: var(--separator-soft); background: transparent; }
.mt-sim__out { background: var(--surface-2); }
.mt-annualgoal input { background: var(--fill-quiet); }

/* --- I3. Conteúdo --------------------------------------------------------- */
#page-conteudo .conteudo-causas-grid { gap: var(--s4); }
#page-conteudo .conteudo-causa-card {
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  gap: var(--s3);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-fast) ease;
}
/* Uma ação primária por tela. A lista já vem ordenada por prioridade
   (sortCausasByPriority) — o azul chapado fica só na primeira; as outras
   viram contorno. Mesma ação, mesmo lugar, só o peso muda. */
#page-conteudo .conteudo-causa-card:not(:first-child) .primary-button {
  background: transparent;
  color: var(--accent-text);
  border: 1px solid var(--separator);
}
#page-conteudo .conteudo-causa-card:not(:first-child) .primary-button:hover {
  background: var(--accent-tint);
  border-color: var(--accent);
}
/* Cards de altura diferente deixavam vão morto embaixo do card mais curto e
   o botão flutuando no meio da fileira. */
#page-conteudo .cz-card-actions { margin-top: auto; padding-top: var(--s2); }
#page-conteudo .conteudo-causas-filters { gap: var(--s3) var(--s4); }
#page-conteudo .conteudo-causas-filters select { min-height: 36px; padding: 6px 10px; }
/* Stepper de 6 etapas: etapa atual com tint, futuras neutras. */
#page-conteudo .conteudo-workflow, #page-conteudo .conteudo-breadcrumbs,
#page-conteudo .conteudo-step-nav { border-color: var(--separator-soft); }


/* ==========================================================================
   J · ACESSIBILIDADE E 375
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .primary-button:active, .secondary-button:active, .ghost-button:active,
  .icon-button:active, .nav-item:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* "Aumentar contraste" ligado no sistema = AA 4,5:1 em TODO texto das 3
   telas (medido). O preço é a hierarquia de 3 níveis virar quase 2 — por
   isso não é o padrão. Se o Rafael quiser AA sempre, é só mover estes dois
   valores pro :root. */
@media (prefers-contrast: more) {
  :root {
    --muted: #B8B8BD;
    --dim:   #A4A4A9;
    --separator-soft: rgba(84, 84, 88, .6);
  }
  .metric-card, .panel, .decision-card, .module-card, .data-panel, .card,
  .board-bloco { border-color: var(--separator); }
}

/* Duas grades nasceram sem quebra de linha e estouravam a largura no celular
   (618px de rolagem horizontal num viewport de 375). Defeito que já existe
   hoje — a fundação não pode herdar. */
@media (max-width: 760px) {
  .app-shell { padding: var(--s4) var(--s4) 56px; }
  .topbar { margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4); padding: 12px var(--s4); }
  .grid-2, .grid-3, .brief-grid, .conteudo-causas-grid,
  .agora-grid { grid-template-columns: minmax(0, 1fr); }
  .cz-pill-row, .conteudo-causa-head { flex-wrap: wrap; }
  /* A grade de KPI do briefing tem 4 colunas com !important — no 375 isso
     empurrava o documento pra 618px de largura. */
  .brief-kpis, .brief-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* alvo de toque de 44px: botão de 36 não se pega em pé */
  .primary-button, .secondary-button, .ghost-button, .mt-btn, .mt-qpill,
  .evidence-link, .text-button { min-height: 44px; }
  /* Duas exceções conscientes ao 44px, pra decisão do Rafael:
     · .sync-badge-refresh é um ícone dentro de um pill de 24px — 44 estoura
       o pill. Fica em 36 com margem negativa (área cresce, layout não).
     · .mt-storebtn é um botão POR CÉLULA da tabela anual de 14 colunas: 44px
       em 12 linhas dobra a altura da tabela. Fica em 32. */
  /* Cabeçalho de bloco: [nº][título][resumo] numa linha só espreme o título
     em 2 linhas de uma palavra. O resumo desce pra segunda linha. */
  .board-bloco-header { flex-wrap: wrap; row-gap: 4px; }
  .board-bloco-header .board-bloco-title { flex: 1 1 auto; }
  .board-bloco-sub { flex: 1 1 100%; margin-left: 0; }
  .sync-badge-refresh { min-width: 36px; min-height: 36px; margin-block: -8px; }
  .mt-storebtn { min-height: 32px; }
 /* Linha de ações do card: no 375 os botões lado a lado não cabem e o card
     fica mais largo que a coluna. Já era assim antes da folha (min-content de
     .decision-actions era 318 numa coluna de 339); o padding maior do botão
     empurrou de vez. Quebra a linha em vez de estourar a página.
     min-width:0 tira o piso de min-content do item de grid — o card não pode
     ter overflow:hidden aqui, o fix C-13 depende de overflow:visible. */
  .decision-actions, .fila-decision-card .decision-actions { flex-wrap: wrap; }
  .decision-card, .fila-decision-card, .fila-grid > * { min-width: 0; }
  #page-board .agora-actions { flex-wrap: wrap; }
  #page-board .agora-actions .primary-button,
  #page-board .agora-card .primary-button { min-width: 0; max-width: none; flex: 1 1 100%; }
  .board-bloco { padding: var(--s4); }
  .page-title { font-size: 24px; line-height: 29px; }
}