/* Base compartilhada pelas paginas de docs/paginas/. Um arquivo so para os
   quatro documentos: tema claro e escuro, tipografia e componentes de tabela. */

:root {
  --ground:#FAF9F6; --surface:#FFFFFF; --sunken:#F2EFE8;
  --ink:#211E18; --muted:#625C50; --line:#E3DDD0; --line-soft:#EDE7DB;
  --accent:#8A651D; --accent-dim:#8A651D18;
  --gold:#8A6410; --crit:#A32C1A; --info:#2A5578;
  --f-display:"Libre Franklin",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Source Serif 4",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --measure:68ch; --pad:clamp(1.25rem,4vw,3rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0C0C0B; --surface:#171715; --sunken:#24221D;
    --ink:#F7F3EA; --muted:#A69D8B; --line:#363128; --line-soft:#302819;
    --accent:#D6B568; --accent-dim:#D6B5681F;
    --gold:#D6A94A; --crit:#E4735C; --info:#7EAECF;
  }
}
:root[data-theme="dark"] {
  --ground:#0C0C0B; --surface:#171715; --sunken:#24221D;
  --ink:#F7F3EA; --muted:#A69D8B; --line:#363128; --line-soft:#302819;
  --accent:#D6B568; --accent-dim:#D6B5681F;
  --gold:#D6A94A; --crit:#E4735C; --info:#7EAECF;
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--f-body); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 var(--pad) 6rem; }
.col { max-width: var(--measure); }

.masthead { border-bottom: 2px solid var(--ink); padding: clamp(2.5rem,6vw,4.5rem) 0 1.5rem; margin-bottom: 2rem; }
.eyebrow { font-family: var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); margin:0 0 1rem; }
h1 { font-family: var(--f-display); font-weight:800; font-size: clamp(2rem,5.5vw,3.2rem); line-height:1.03; letter-spacing:-.025em; text-wrap:balance; margin:0 0 1rem; }
.standfirst { font-size: clamp(1.05rem,2vw,1.25rem); color: var(--muted); max-width:58ch; margin:0 0 1.75rem; }
.meta { display:flex; flex-wrap:wrap; gap:.4rem 2rem; font-family: var(--f-mono); font-size:.76rem; color: var(--muted); }
.meta b { color: var(--ink); font-weight:500; }

nav.docnav { display:flex; flex-wrap:wrap; gap:.5rem; margin: 1.5rem 0 0; }
nav.docnav a {
  font-family: var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.35rem .7rem; border:1px solid var(--line); color: var(--muted); text-decoration:none;
}
nav.docnav a:hover { border-color: var(--accent); color: var(--accent); }
nav.docnav a[aria-current="page"] { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

section { padding-top: 3.25rem; }
h2 { font-family: var(--f-display); font-weight:700; font-size: clamp(1.4rem,3vw,1.9rem); letter-spacing:-.018em; line-height:1.12; text-wrap:balance; margin:0 0 .35rem; }
.sec-note { font-family: var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin:0 0 1.5rem; padding-bottom:.85rem; border-bottom:1px solid var(--line); }
h3 { font-family: var(--f-display); font-weight:600; font-size:1.12rem; margin:2rem 0 .5rem; text-wrap:balance; }
h4 { font-family: var(--f-display); font-weight:600; font-size:.98rem; margin:1.5rem 0 .35rem; }
p { margin:0 0 1rem; } ul,ol { margin:0 0 1rem; padding-left:1.3rem; } li { margin-bottom:.45rem; }
a { color: var(--accent); text-underline-offset:2px; }
a:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
code,.mono { font-family: var(--f-mono); font-size:.86em; }
code { background: var(--sunken); border:1px solid var(--line-soft); padding:.08em .32em; border-radius:3px; white-space:nowrap; }

.scroll { overflow-x:auto; margin:0 0 1.4rem; border:1px solid var(--line-soft); background: var(--surface); }
table { border-collapse:collapse; width:100%; font-size:.89rem; }
caption { text-align:left; font-family: var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); padding:.85rem 1.1rem .55rem; }
th,td { padding:.6rem 1.1rem; text-align:left; border-top:1px solid var(--line-soft); vertical-align:top; }
thead th { font-family: var(--f-display); font-weight:600; font-size:.77rem; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); border-top:none; border-bottom:1px solid var(--line); white-space:nowrap; }
td.num, th.num { text-align:right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space:nowrap; }
tbody tr:hover { background: var(--sunken); }
tr.hl td { background: var(--accent-dim); font-weight:600; }

.ledger { background: var(--surface); border:1px solid var(--line); margin:1.4rem 0 2rem; }
.ledger-head { padding:1rem 1.35rem; border-bottom:1px solid var(--line); }
.ledger-head .t { font-family: var(--f-display); font-weight:600; font-size:1rem; display:block; }
.ledger-head .s { font-family: var(--f-mono); font-size:.74rem; color: var(--muted); display:block; margin-top:.25rem; }
.lane { padding:1.15rem 1.35rem; }
.row { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.45rem 0; border-bottom:1px dotted var(--line-soft); font-size:.93rem; }
.row:last-child { border-bottom:none; }
.row .val { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space:nowrap; font-weight:500; }
.row .sub { display:block; font-size:.79rem; color: var(--muted); }
.row.total { border-top:1px solid var(--line); border-bottom:none; margin-top:.45rem; padding-top:.65rem; font-weight:600; font-size:1rem; }
.pos { color: var(--accent); } .neg { color: var(--gold); }

figure { margin:1.75rem 0 2rem; }
figure svg { display:block; width:100%; max-width:100%; height:auto; color: var(--ink); }
figcaption { font-size:.85rem; color: var(--muted); border-top:1px solid var(--line-soft); padding-top:.6rem; margin-top:.6rem; }
.figframe { background: var(--surface); border:1px solid var(--line-soft); padding:1.5rem 1.25rem; overflow-x:auto; }

.callout { border-left:3px solid var(--accent); background: var(--accent-dim); padding:1.05rem 1.3rem; margin:1.6rem 0; }
.callout p:last-child { margin-bottom:0; }
.callout .lbl { font-family: var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--accent); display:block; margin-bottom:.4rem; }
.callout.warn { background:transparent; border:1px solid var(--line); border-left:3px solid var(--gold); }
.callout.warn .lbl { color: var(--gold); }
.callout.crit { background:transparent; border:1px solid var(--line); border-left:3px solid var(--crit); }
.callout.crit .lbl { color: var(--crit); }

.item { display:grid; grid-template-columns:4px 1fr; gap:0 1.15rem; background: var(--surface); border:1px solid var(--line-soft); margin-bottom:1rem; }
.item > .stripe { background: var(--muted); }
.item.crit > .stripe { background: var(--crit); }
.item.warn > .stripe { background: var(--gold); }
.item.ok > .stripe { background: var(--accent); }
.item > .body { padding:1.05rem 1.35rem 1.15rem 0; }
.item h4 { margin:0 0 .3rem; font-size:1rem; }
.item p { margin:0 0 .55rem; font-size:.93rem; }
.item p:last-child { margin-bottom:0; }

.tag { display:inline-block; font-family: var(--f-mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; padding:.2rem .45rem; border:1px solid var(--line); color: var(--muted); margin-bottom:.55rem; }
.tag.crit { color: var(--crit); border-color: var(--crit); }
.tag.warn { color: var(--gold); border-color: var(--gold); }
.tag.ok { color: var(--accent); border-color: var(--accent); }

.cards { display:grid; gap:1rem; grid-template-columns:1fr; margin:1.5rem 0; }
@media (min-width:700px) { .cards { grid-template-columns:repeat(3,1fr); } }
.card { border:1px solid var(--line); background: var(--surface); padding:1.25rem 1.35rem; }
.card h4 { margin:0 0 .4rem; }
.card p { font-size:.9rem; color: var(--muted); margin:0; }

ol.steps { list-style:none; padding:0; counter-reset:s; }
ol.steps > li { counter-increment:s; display:grid; grid-template-columns:2.2rem 1fr; gap:.95rem; padding:.75rem 0; border-top:1px solid var(--line-soft); }
ol.steps > li::before { content: counter(s,decimal-leading-zero); font-family: var(--f-mono); font-size:.78rem; color: var(--accent); padding-top:.2rem; }
ol.steps b { font-family: var(--f-display); font-weight:600; }

hr.rule { border:none; border-top:1px solid var(--line); margin:3rem 0 0; }
.foot { font-size:.85rem; color: var(--muted); padding-top:1.5rem; }

@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }