/* =========================================================================
   research.jflneto.dev.br — tema único
   Toda página do site usa este arquivo. Não escreva <style> em content/.
   ========================================================================= */

:root {
  /* tipografia */
  --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-serif: Georgia, "Times New Roman", serif;
  --ff-mono: "SF Mono", "JetBrains Mono", Consolas, Menlo, monospace;

  --fs-xs: .78rem;
  --fs-sm: .86rem;
  --fs-base: 1rem;
  --fs-lg: 1.13rem;
  --fs-h3: 1.22rem;
  --fs-h2: 1.55rem;
  --fs-h1: 2.1rem;

  /* neutros */
  --c-bg: #ffffff;
  --c-bg-soft: #f7f8f9;
  --c-bg-sunk: #eef0f2;
  --c-border: #e0e3e7;
  --c-border-strong: #c7ccd2;
  --c-text: #1c2126;
  --c-text-soft: #5a636c;
  --c-text-faint: #8a939c;

  /* acento único do projeto */
  --c-accent: #1f5f8b;
  --c-accent-soft: #eaf2f8;

  /* semântica — usada em callouts, tags e KPIs. Uma cor, um significado. */
  --c-good: #1d7a4c;      --c-good-bg: #e8f5ee;
  --c-warn: #a8690b;      --c-warn-bg: #fdf3e3;
  --c-risk: #b3352e;      --c-risk-bg: #fdeceb;
  --c-info: #1f5f8b;      --c-info-bg: #eaf2f8;
  --c-quest: #6b4fa8;     --c-quest-bg: #f1ecfa;
  --c-neutral: #5a636c;   --c-neutral-bg: #f2f4f6;

  --radius: 6px;
  --w-text: 74ch;
  --w-wide: 1180px;
  --shadow: 0 1px 2px rgba(20,30,40,.06), 0 2px 8px rgba(20,30,40,.05);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

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

/* ------------------------------------------------------------------ topo */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--c-border);
}
.topbar__in {
  max-width: var(--w-wide); margin: 0 auto;
  padding: .6rem 1.5rem;
  display: flex; align-items: center; gap: 1.4rem;
}
.topbar__brand {
  font-weight: 700; letter-spacing: -.01em; color: var(--c-text);
  text-decoration: none; font-size: var(--fs-sm); white-space: nowrap;
}
.topbar__brand span { color: var(--c-text-faint); font-weight: 400; }
.topbar__nav { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; }
.topbar__nav a {
  color: var(--c-text-soft); text-decoration: none;
  font-size: var(--fs-sm); padding: .15rem 0;
  border-bottom: 2px solid transparent;
}
.topbar__nav a:hover { color: var(--c-text); }
.topbar__nav a[aria-current="page"] { color: var(--c-accent); border-bottom-color: var(--c-accent); }

.search { position: relative; }
.search input {
  font: inherit; font-size: var(--fs-sm);
  padding: .35rem .7rem .35rem 2rem;
  width: 15rem; max-width: 40vw;
  border: 1px solid var(--c-border-strong); border-radius: 99px;
  background: var(--c-bg-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a939c' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") no-repeat .55rem center / 1rem;
  color: var(--c-text);
}
.search input:focus { outline: 2px solid var(--c-accent-soft); border-color: var(--c-accent); background-color: #fff; }
.search__results {
  position: absolute; right: 0; top: calc(100% + .5rem);
  width: 30rem; max-width: 88vw; max-height: 70vh; overflow: auto;
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: none; padding: .35rem;
}
.search__results.is-open { display: block; }
.search__hit { display: block; padding: .55rem .7rem; border-radius: 4px; text-decoration: none; color: inherit; }
.search__hit:hover, .search__hit.is-active { background: var(--c-bg-soft); }
.search__hit b { color: var(--c-accent); }
.search__hit .t { font-weight: 600; font-size: var(--fs-sm); display: block; }
.search__hit .s { font-size: var(--fs-xs); color: var(--c-text-soft); display: block; }
.search__hit mark { background: #fff2a8; color: inherit; padding: 0 .1em; }
.search__empty { padding: .8rem; font-size: var(--fs-sm); color: var(--c-text-soft); }

/* --------------------------------------------------------------- layout */

.shell { max-width: var(--w-wide); margin: 0 auto; padding: 0 1.5rem 5rem; }
.doc { display: grid; grid-template-columns: minmax(0,1fr) 15rem; gap: 3rem; align-items: start; }
.doc__body { min-width: 0; max-width: var(--w-text); }
.doc--wide .doc__body { max-width: none; }
@media (max-width: 900px) { .doc { grid-template-columns: 1fr; gap: 1rem; } }

/* cabeçalho de documento — gerado pelo build, nunca escrito à mão */
.dochead { padding: 2.6rem 0 1.4rem; border-bottom: 1px solid var(--c-border); margin-bottom: 2rem; }
.dochead__kicker {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--c-accent); font-weight: 600;
}
.dochead h1 {
  font-family: var(--ff-serif); font-size: var(--fs-h1); line-height: 1.2;
  margin: .5rem 0 .5rem; letter-spacing: -.015em;
}
.dochead__sub { font-size: var(--fs-lg); color: var(--c-text-soft); margin: 0 0 1rem; }
.dochead__meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: var(--fs-xs); color: var(--c-text-faint); }
.dochead__meta b { color: var(--c-text-soft); font-weight: 600; }

/* sumário lateral */
.toc { position: sticky; top: 5rem; font-size: var(--fs-sm); }
.toc__title {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--c-text-faint); font-weight: 600; margin-bottom: .6rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--c-border); }
.toc li a {
  display: block; padding: .22rem 0 .22rem .8rem; margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--c-text-soft); text-decoration: none; line-height: 1.35;
}
.toc li a:hover { color: var(--c-text); }
.toc li a.is-active { color: var(--c-accent); border-left-color: var(--c-accent); font-weight: 600; }
.toc li.lvl3 a { padding-left: 1.6rem; font-size: var(--fs-xs); }
@media (max-width: 900px) { .toc { position: static; margin-bottom: 2rem; } }

/* ---------------------------------------------------------- tipografia */

.doc__body h2 {
  font-family: var(--ff-serif); font-size: var(--fs-h2); line-height: 1.25;
  margin: 2.8rem 0 .8rem; padding-top: .3rem; letter-spacing: -.01em;
}
.doc__body h2:first-child { margin-top: 0; }
.doc__body h3 { font-size: var(--fs-h3); margin: 2rem 0 .6rem; font-weight: 650; }
.doc__body h4 { font-size: var(--fs-base); margin: 1.4rem 0 .4rem; font-weight: 650; color: var(--c-text-soft); }
.doc__body p { margin: 0 0 1.05rem; }
.doc__body ul, .doc__body ol { margin: 0 0 1.05rem; padding-left: 1.35rem; }
.doc__body li { margin-bottom: .35rem; }
.doc__body li > ul, .doc__body li > ol { margin-top: .35rem; }
.doc__body a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.doc__body strong, .doc__body b { font-weight: 650; }
.doc__body hr { border: 0; border-top: 1px solid var(--c-border); margin: 2.5rem 0; }
.doc__body blockquote {
  margin: 1.4rem 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 3px solid var(--c-border-strong); color: var(--c-text-soft);
}

code, kbd { font-family: var(--ff-mono); font-size: .88em; }
:not(pre) > code { background: var(--c-bg-sunk); padding: .1em .35em; border-radius: 3px; }
pre {
  background: var(--c-bg-sunk); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: .9rem 1rem; overflow-x: auto;
  font-size: var(--fs-sm); line-height: 1.5; margin: 0 0 1.2rem;
}

.lead { font-size: var(--fs-lg); color: var(--c-text-soft); }
.nota, .fonte { font-size: var(--fs-xs); color: var(--c-text-faint); }
.fonte { margin-top: -.6rem; }

/* ------------------------------------------------------------- tabelas */

.tabela-wrap { overflow-x: auto; margin: 0 0 1.4rem; border: 1px solid var(--c-border); border-radius: var(--radius); }
table.tabela { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
table.tabela th, table.tabela td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--c-border); }
table.tabela thead th {
  background: var(--c-bg-soft); font-weight: 650; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-soft);
  position: sticky; top: 0; white-space: nowrap;
}
table.tabela tbody tr:last-child td { border-bottom: 0; }
table.tabela tbody tr:hover { background: var(--c-bg-soft); }
table.tabela td.num, table.tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabela .melhor { color: var(--c-good); font-weight: 650; }
table.tabela .pior { color: var(--c-risk); }

/* ------------------------------------------------------------ callouts */

.callout {
  margin: 1.4rem 0; padding: .9rem 1.1rem;
  border: 1px solid var(--c-border); border-left: 3px solid var(--c-neutral);
  border-radius: var(--radius); background: var(--c-neutral-bg);
  font-size: var(--fs-sm);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout__label {
  display: block; font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: .35rem;
  color: var(--c-neutral);
}
.callout--info     { border-left-color: var(--c-info);  background: var(--c-info-bg);  }
.callout--info     .callout__label { color: var(--c-info); }
.callout--good     { border-left-color: var(--c-good);  background: var(--c-good-bg);  }
.callout--good     .callout__label { color: var(--c-good); }
.callout--warn     { border-left-color: var(--c-warn);  background: var(--c-warn-bg);  }
.callout--warn     .callout__label { color: var(--c-warn); }
.callout--risk     { border-left-color: var(--c-risk);  background: var(--c-risk-bg);  }
.callout--risk     .callout__label { color: var(--c-risk); }
.callout--question { border-left-color: var(--c-quest); background: var(--c-quest-bg); }
.callout--question .callout__label { color: var(--c-quest); }
.callout--method   { border-left-color: var(--c-text-soft); background: var(--c-bg-soft); font-family: var(--ff-mono); font-size: var(--fs-xs); }
.callout--method   .callout__label { color: var(--c-text-soft); font-family: var(--ff-sans); }

/* ----------------------------------------------------------------- tags */

.tag {
  display: inline-block; font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .12rem .5rem; border-radius: 99px; vertical-align: .08em;
  background: var(--c-neutral-bg); color: var(--c-neutral);
  border: 1px solid transparent;
}
.tag--info     { background: var(--c-info-bg);  color: var(--c-info); }
.tag--good     { background: var(--c-good-bg);  color: var(--c-good); }
.tag--warn     { background: var(--c-warn-bg);  color: var(--c-warn); }
.tag--risk     { background: var(--c-risk-bg);  color: var(--c-risk); }
.tag--question { background: var(--c-quest-bg); color: var(--c-quest); }

/* ----------------------------------------------------------------- KPIs */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; margin: 1.4rem 0; }
.kpi {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: .8rem .9rem; background: var(--c-bg-soft);
}
.kpi__num {
  display: block; font-size: 1.65rem; line-height: 1.15; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.kpi__label { display: block; font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: .2rem; }
.kpi--info  .kpi__num { color: var(--c-info); }
.kpi--good  .kpi__num { color: var(--c-good); }
.kpi--warn  .kpi__num { color: var(--c-warn); }
.kpi--risk  .kpi__num { color: var(--c-risk); }
.kpi--accent { background: var(--c-accent-soft); border-color: #cfe1ee; }
.kpi--accent .kpi__num { color: var(--c-accent); }

/* ---------------------------------------------------------------- grids */

.grid { display: grid; gap: 1rem; margin: 1.4rem 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

.card {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 1rem 1.1rem; background: #fff; box-shadow: var(--shadow);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card__title { font-weight: 650; font-size: var(--fs-sm); margin-bottom: .4rem; }

/* -------------------------------------------------------------- figuras */

.figura { margin: 1.6rem 0; }
.figura__plot {
  min-height: 320px; border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-bg-soft); position: relative;
}
.figura__plot[data-state="idle"]::after,
.figura__plot[data-state="loading"]::after {
  content: attr(data-msg); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); color: var(--c-text-faint);
}
.figura__plot[data-state="ready"] { background: #fff; }
.figura__cap { font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: .5rem; }
.figura__cap b { color: var(--c-text); font-weight: 650; }
.figura img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }

/* divisor narrativo ("Começo — existe um sinal?") */
.ato {
  display: flex; align-items: center; gap: 1rem;
  margin: 3.2rem 0 2rem;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em;
  font-weight: 650; color: var(--c-text-faint); white-space: nowrap;
}
.ato::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }

/* lista de definições compacta (caixa de método, glossários) */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: var(--fs-sm); }
.dl dt { font-weight: 650; color: var(--c-text); }
.dl dd { margin: 0; color: var(--c-text-soft); }
@media (max-width: 620px) { .dl { grid-template-columns: 1fr; gap: .1rem .5rem; } .dl dd { margin-bottom: .5rem; } }

/* ----------------------------------------------------- índice / listas */

.hero { padding: 3.5rem 0 2rem; border-bottom: 1px solid var(--c-border); }
.hero h1 { font-family: var(--ff-serif); font-size: 2.6rem; line-height: 1.13; margin: .4rem 0 .8rem; letter-spacing: -.02em; max-width: 20ch; }
.hero__kicker { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--c-accent); font-weight: 600; }
.hero p { font-size: var(--fs-lg); color: var(--c-text-soft); max-width: 62ch; }

.section-head { margin: 3rem 0 1rem; display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.section-head h2 { font-family: var(--ff-serif); font-size: var(--fs-h2); margin: 0; }
.section-head p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-soft); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.doccard {
  display: flex; flex-direction: column; gap: .4rem;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 1rem 1.1rem; text-decoration: none; color: inherit;
  background: #fff; transition: border-color .12s, box-shadow .12s, transform .12s;
}
.doccard:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.doccard__date { font-size: var(--fs-xs); color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.doccard__title { font-weight: 650; line-height: 1.32; }
.doccard__sub { font-size: var(--fs-sm); color: var(--c-text-soft); }
.doccard--soon { background: var(--c-bg-soft); border-style: dashed; cursor: default; }
.doccard--soon:hover { transform: none; box-shadow: none; border-color: var(--c-border); }

/* rodapé */
.foot { border-top: 1px solid var(--c-border); margin-top: 4rem; padding: 1.6rem 0; font-size: var(--fs-xs); color: var(--c-text-faint); }
.foot a { color: var(--c-text-soft); }
.foot__in { max-width: var(--w-wide); margin: 0 auto; padding: 0 1.5rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }

/* utilidades */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: .5rem; background: #fff; padding: .5rem 1rem; z-index: 100; border: 1px solid var(--c-accent); border-radius: var(--radius); }
.u-good { color: var(--c-good); } .u-risk { color: var(--c-risk); } .u-warn { color: var(--c-warn); }
.u-num { font-variant-numeric: tabular-nums; }

@media print {
  .topbar, .toc, .foot, .search { display: none !important; }
  .doc { display: block; }
  .doc__body { max-width: none; }
  a { text-decoration: none; color: inherit; }
}