/* Identidade da Rove Lab para o painel. Fonte: manual de Art Direction (Brand Assets).
   Tenor Sans em títulos e números de destaque, Urbanist no resto. Fundo limpo, linhas finas.
   Os nomes --color-* e --cds-* são os que as abas já usam; aqui eles ganham os valores da marca. */
:root {
  /* marca */
  --rl-bg: #f4f4f4; --rl-card: #ffffff; --rl-ink: #1b1b1f;
  --rl-fair-orchid: #d0b6c9; --rl-arctic-ice: #c2c6d4; --rl-gray-mist: #9fbabe; --rl-faded-denim: #778ea1;
  --rl-denim-dark: #5e7080; --rl-sage: #a5c3b8; --rl-rose: #d9a6b6;
  --rl-prism: linear-gradient(90deg, #fcdfd4, #fabbf6, #a8bbce);
  --rl-font-display: "Tenor Sans", "Urbanist", system-ui, sans-serif;
  --rl-font-text: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* tokens que as abas usam */
  --color-fg: var(--rl-ink); --color-fg-muted: #5e6672; --color-bg: var(--rl-bg); --color-panel: var(--rl-card);
  --color-border-line: #e2e3e8;
  /* positivo e negativo: sálvia e rosa da marca, escurecidos para ler como texto (contraste acima de 4,5:1) */
  --color-ok: #1f7a5a; --color-bad: #b93a5f; --color-warn: #96690f;
  --font-anthropic-sans: var(--rl-font-text); --font-anthropic-serif: var(--rl-font-display);
  --cds-font-size-caption: 13px; --cds-font-size-body: 15px; --cds-font-size-heading: 18px; --cds-font-size-title: 34px;
  --cds-font-weight-medium: 600; --cds-radius: 10px;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 14px; --cds-gap-lg: 22px; --cds-gap-xl: 34px;
  --cds-pad-xs: 6px; --cds-pad-sm: 12px; --cds-pad-lg: 22px;
  --cds-chart-grid: #ececf0; --cds-chart-axis: #8b92a0; --cds-chart-muted: #c9ccd6; --cds-chart-reference: #5e7080;
  --cds-text-secondary: #5e6672; --cds-surface-popover: #ffffff; --cds-border: #d6d8e0;
  --cds-shadow-popover: 0 8px 28px -10px rgba(27, 27, 31, .28); --cds-dur-slow: .3s;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--rl-bg); color: var(--rl-ink); font-family: var(--rl-font-text); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }

/* barra da marca */
.rl-prism { height: 3px; background: var(--rl-prism); }
.rl-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1600px; margin: 0 auto; padding: 18px 28px 0; }
.rl-brand { display: flex; align-items: baseline; gap: 14px; }
.rl-logo { font-family: var(--rl-font-display); font-size: 17px; letter-spacing: .22em; }
.rl-product { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rl-denim-dark); padding-left: 14px; border-left: 1px solid #cfd2da; }
.rl-status[hidden], .rl-preview[hidden] { display: none; }
.rl-status { font-size: 13px; color: var(--color-fg-muted); display: flex; align-items: center; gap: 8px; }
.rl-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ok); }
.rl-status[data-state="preview"]::before { background: var(--color-warn); }
.rl-preview { max-width: 1544px; margin: 14px auto 0; padding: 10px 16px; border: 1px solid #e6d9b8; background: #fbf6e6; border-radius: 10px; font-size: 13px; color: #5c4708; }
.rl-preview b { font-weight: 700; }
@media (max-width: 1600px) { .rl-preview { margin-left: 28px; margin-right: 28px; } }
#dash-root { padding: 22px 28px 40px; max-width: 1600px; margin: 0 auto; }
.rl-foot { max-width: 1600px; margin: 0 auto; padding: 0 28px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--color-fg-muted); }

/* título da página e resumo */
#dash-root .pm-head h1 { font-size: 34px; letter-spacing: -.01em; line-height: 1.15; }
#dash-root .pm-take { font-size: 16px; max-width: 78ch; }

/* abas: pílulas, a ativa preenchida */
#dash-root .pm-tabs { gap: 6px; border-bottom: 0; padding: 6px; background: var(--rl-card); border: 1px solid var(--color-border-line); border-radius: 14px; }
#dash-root .pm-tabs button { font-size: 13.5px; font-weight: 500; padding: 8px 11px; border: 0; border-radius: 9px; margin: 0; color: var(--color-fg-muted); transition: background .15s, color .15s; }
#dash-root .pm-tabs button:hover { background: #f0f1f5; color: var(--rl-ink); }
#dash-root .pm-tabs button[aria-selected="true"] { background: var(--rl-ink); color: #fff; }

/* filtros */
#dash-root .pm-controls { gap: 12px 18px; }
#dash-root .pm-ctl { font-size: 13px; font-weight: 500; }
#dash-root .pm-seg { border-color: #d6d8e0; border-radius: 9px; background: var(--rl-card); }
#dash-root .pm-seg button { font-size: 13px; font-weight: 500; padding: 6px 12px; }
#dash-root .pm-seg button[aria-pressed="true"] { background: var(--rl-denim-dark); color: #fff; }
#dash-root .pm-ctl input, #dash-root .pm-ctl select { background: var(--rl-card); border-color: #d6d8e0; border-radius: 9px; padding: 6px 10px; font-size: 13px; }

/* cartões de número: rótulo pequeno em caixa alta, número grande em Tenor Sans */
#dash-root .pm-kpis { gap: 14px; }
#dash-root .pm-kpi { border-radius: 14px; padding: 18px 20px; gap: 6px; position: relative; overflow: hidden; }
#dash-root .pm-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--rl-faded-denim); }
#dash-root .pm-kpi > span { font-size: 13px; }
#dash-root .pm-kpi > span:first-child { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
#dash-root .pm-kpi strong { font-size: 32px; line-height: 1.1; letter-spacing: -.01em; }

/* seções e cartões */
#dash-root .pm-section > h2 { font-family: var(--rl-font-display); font-weight: 400; font-size: 22px; }
#dash-root .pm-card { border-radius: 14px; padding: 20px 22px; }
#dash-root .pm-card h3 { font-size: 16px; font-weight: 600; }
#dash-root .pm-note, #dash-root .pm-defs { font-size: 13px; }
#dash-root .pm-legend { font-size: 13px; color: var(--rl-ink); gap: 8px 16px; }
#dash-root .pm-sw { width: 11px; height: 11px; border-radius: 3px; }

/* tabelas */
#dash-root table.pm-t, #dash-root table.bf-t { font-size: 13px; }
#dash-root .pm-t th, #dash-root .pm-t td { padding: 8px 10px; }
#dash-root .pm-t thead th { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
#dash-root .pm-t tbody tr:nth-child(even) > td { background-color: #f8f8fa; }
#dash-root .pm-t tbody tr:hover > td { background-color: #eef1f6; }

/* dica do gráfico */
#dash-root .pm-tip { border-radius: 10px; padding: 8px 12px; font-size: 13px; }

/* fonte sem resposta */
#dash-root .pm-fail { border: 1px dashed #d6d8e0; border-radius: 10px; background: #fafafb; font-size: 13px; }
#dash-root .pm-fail::before { background: var(--color-warn); width: 8px; height: 8px; }

/* eixos dos gráficos */
#dash-root svg text { font-family: var(--rl-font-text); }

/* selos de variação: seta = direção, cor = bom (sálvia) ou ruim (rosa). Nunca só a cor. */
.rl-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.5; }
.rl-chip-good { background: #dff0e8; color: #17694c; }
.rl-chip-bad { background: #f9e1e8; color: #a82f54; }
.rl-chip-flat { background: #eff0f3; color: var(--color-fg-muted); }
#dash-root .pm-t td .rl-chip { font-size: 12.5px; }
/* nós da árvore de diagnóstico no cartão do país */
.rl-nodes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.rl-node { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap; }
.rl-node-good { background: #eef7f2; color: #17694c; border-color: #cfe6da; }
.rl-node-bad { background: #f9e1e8; color: #a82f54; border-color: #efc3d0; }
.rl-node-flat { background: #f4f4f6; color: #8b92a0; border-color: #e2e3e8; }
#dash-root .dg-take { font-size: 14px; color: var(--rl-ink); }
#dash-root .dg-sec > h2 { font-family: var(--rl-font-display); font-weight: 400; font-size: 22px; }
/* cartões de país do Daily Journal são botões: sem a faixa lateral, e selos sem caixa alta */
#dash-root button.pm-kpi::before { display: none; }
#dash-root .pm-kpi .rl-chip, #dash-root .pm-kpi .rl-node { text-transform: none; letter-spacing: 0; }
#dash-root .pm-kpi .rl-chip { font-size: 12.5px; }
#dash-root .pm-kpi .rl-node { font-size: 11.5px; }

/* telas estreitas: as abas rolam de lado em uma linha, em vez de ocupar meia tela */
@media (max-width: 820px) {
  #dash-root .pm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  #dash-root .pm-tabs button { white-space: nowrap; flex: none; }
  #dash-root { padding: 16px 16px 32px; }
  .rl-bar { padding: 14px 16px 0; } .rl-preview { margin-left: 16px; margin-right: 16px; } .rl-foot { padding: 0 16px 24px; }
  #dash-root .pm-head h1 { font-size: 28px; }
}
/* prévia local: diz por que o bloco está vazio, em vez de "Failed to load" */
html[data-preview] #dash-root .pm-fail, html[data-preview] #dash-root td.bf-fail { font-size: 0; }
html[data-preview] #dash-root .pm-fail::after, html[data-preview] #dash-root td.bf-fail::after { content: "No data in this preview: this source needs the Rove MCP connection"; font-size: 13px; color: var(--color-fg-muted); }

/* canto direito da barra: conexões, usuário e saída */
.rl-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.rl-conn, .rl-user { display: flex; align-items: center; gap: 10px; }
.rl-conn[hidden], .rl-user[hidden], .rl-notice[hidden] { display: none; }
.rl-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--color-fg-muted); font-weight: 500; }
.rl-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b9bdc9; }
.rl-dot.on::before { background: var(--color-ok); }
.rl-dot.off::before { background: var(--color-bad); }
.rl-dot.on::after { content: "connected"; font-size: 12px; color: #17694c; }
.rl-dot.off::after { content: "off"; font-size: 12px; color: #a82f54; }
.rl-cta, .rl-conn button, .rl-user button { font: inherit; font-size: 13px; font-weight: 600; border-radius: 9px; padding: 6px 12px; cursor: pointer; text-decoration: none; }
.rl-cta { background: var(--rl-ink); color: #fff; border: 1px solid var(--rl-ink); }
.rl-conn button, .rl-user button { background: var(--rl-card); color: var(--rl-ink); border: 1px solid #d6d8e0; }
.rl-user { padding-left: 14px; border-left: 1px solid #cfd2da; color: var(--color-fg-muted); }
.rl-notice { max-width: 1544px; margin: 14px auto 0; padding: 10px 16px; border: 1px solid #efc3d0; background: #fdf0f4; border-radius: 10px; font-size: 13.5px; color: #8a2445; }
.rl-notice[data-tone="ok"] { border-color: #cfe6da; background: #eef7f2; color: #17694c; }
@media (max-width: 1600px) { .rl-notice { margin-left: 28px; margin-right: 28px; } }
@media (max-width: 820px) { .rl-notice { margin-left: 16px; margin-right: 16px; } }