/* Studio. Sem estilos inline (CSP style-src 'self'): tudo aqui. */
:root {
  --ground:#f4f6f5; --surface:#fff; --ink:#15303a; --muted:#5a6d72; --rule:#d8e1de;
  --accent:#1c6f63; --accent-ink:#fff; --accent-soft:#e1efeb; --amber:#8f5d10; --amber-bg:#f9efdc;
  --bad:#a4271b; --bad-bg:#fbe9e7; --ok:#16704a; --ok-bg:#e3f3ea;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0f1a1d; --surface:#152327; --ink:#e3ecea; --muted:#9bb0b2; --rule:#28393d;
    --accent:#5cbfad; --accent-ink:#0f1a1d; --accent-soft:#18332f; --amber:#e3b163; --amber-bg:#35291a;
    --bad:#f08a7e; --bad-bg:#3a1f1c; --ok:#7fd3a6; --ok-bg:#16301f;
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ground); color:var(--ink); font:15px/1.55 var(--sans); }
a { color:var(--accent); }
h1, h2, .h3, h3 { font-family:var(--serif); font-weight:600; line-height:1.2; margin:0 0 .5em; text-wrap:balance; }
h1 { font-size:clamp(26px, 3.4vw, 38px); }
h2 { font-size:24px; margin-top:.2em; }
.h3, h3 { font-size:18px; }
.h4 { font:600 13px var(--sans); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:14px 0 6px; }
p { margin:0 0 .7em; }
code { font-family:var(--mono); font-size:.9em; }
.eyebrow { font:600 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 10px; }
.lede { font-size:17px; color:var(--muted); max-width:72ch; }
.muted { color:var(--muted); } .small { font-size:13px; } .error { color:var(--bad); } .ok { color:var(--ok); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Cabecalho */
.top { display:flex; gap:24px; align-items:center; padding:12px 24px; background:var(--surface); border-bottom:1px solid var(--rule); flex-wrap:wrap; position:sticky; top:0; z-index:5; }
.brand { font:600 17px var(--serif); color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:8px; }
.brand .mark { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:6px; background:var(--accent); color:var(--accent-ink); font:700 14px var(--sans); }
.brand .dot { color:var(--accent); }
.brand .product { font:500 12px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); border:1px solid var(--rule); border-radius:4px; padding:2px 6px; }
.top nav { display:flex; gap:4px; flex-wrap:wrap; }
.top nav a { color:var(--ink); text-decoration:none; padding:6px 10px; border-radius:6px; }
.top nav a:hover { background:var(--accent-soft); }
.top nav a[aria-current="page"] { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.top .right { margin-left:auto; display:flex; gap:10px; align-items:center; }
.top .right > a { color:var(--muted); text-decoration:none; font:500 12px var(--mono); }
.top .right > a.on { color:var(--accent); font-weight:700; }
main { padding:28px 24px 40px; max-width:1280px; margin:0 auto; }
.foot { max-width:1280px; margin:0 auto; padding:16px 24px 32px; color:var(--muted); font-size:12px; border-top:1px solid var(--rule); }

/* Blocos */
.card { background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:18px 20px; margin-bottom:16px; }
.narrow { max-width:400px; margin:60px auto; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px; align-items:start; }
.three { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin:18px 0; }
.stat { background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:2px; }
.stat .n { font:600 26px/1.1 var(--serif); }
.stat .l { color:var(--muted); font-size:13px; }
.notice { background:var(--amber-bg); border:1px solid var(--amber); border-radius:var(--radius); padding:10px 14px; }
.callout { background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:var(--radius); padding:16px 20px; }
.callout > b { display:block; margin-bottom:6px; color:var(--accent); }
.note { background:var(--ground); border-left:3px solid var(--rule); padding:8px 12px; border-radius:4px; }
.tag { display:inline-block; padding:1px 7px; border-radius:10px; background:var(--ground); border:1px solid var(--rule); font-size:12px; margin:0 2px 2px 0; }
.tag.warn { background:var(--amber-bg); border-color:var(--amber); color:var(--amber); }
.tag.ok, .tag.review-confirmed, .tag.review-corrected { background:var(--ok-bg); border-color:var(--ok); color:var(--ok); }
.tag.review-removed { background:var(--bad-bg); border-color:var(--bad); color:var(--bad); }
.pill { background:var(--accent); color:var(--accent-ink); border-radius:12px; padding:2px 10px; font-size:12px; font-weight:600; }
.lang { font:500 11px var(--mono); text-transform:uppercase; }
.links { display:flex; gap:16px; flex-wrap:wrap; }
.meta { display:flex; flex-wrap:wrap; gap:4px 12px; color:var(--muted); font-size:12.5px; }
.meta.big { font-size:14px; margin-bottom:10px; }

/* Tabelas */
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--rule); vertical-align:top; }
thead th { font:600 12px var(--sans); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tr.total td { font-weight:700; border-top:2px solid var(--ink); }
tr.removed td { opacity:.45; text-decoration:line-through; }
.table-wrap { overflow-x:auto; }
table.kv th { width:40%; color:var(--muted); font-weight:500; }
.big-num { font:600 20px var(--serif); }
table.bars th { width:34%; font-weight:500; color:var(--ink); }
table.bars td { vertical-align:middle; }
svg.bar { width:100%; height:10px; display:block; background:var(--ground); border-radius:3px; }
svg.bar rect { fill:var(--accent); }

/* Formularios */
label { display:block; margin:6px 0; font-size:14px; }
input, select, textarea { font:inherit; color:inherit; background:var(--surface); padding:8px 10px; border:1px solid var(--rule); border-radius:6px; width:100%; }
input[type=radio], input[type=checkbox] { width:auto; }
textarea { resize:vertical; }
button { font:inherit; padding:8px 16px; border:0; border-radius:6px; background:var(--accent); color:var(--accent-ink); cursor:pointer; font-weight:600; }
button:disabled { opacity:.5; cursor:progress; }
button.secondary { background:var(--ground); color:var(--ink); border:1px solid var(--rule); }
button.link { background:none; color:var(--accent); padding:0; font-weight:500; }
button.mini { padding:2px 8px; font-size:12px; background:var(--ground); color:var(--ink); border:1px solid var(--rule); }
button.mini.on { background:var(--ok-bg); border-color:var(--ok); color:var(--ok); }
button.mini.danger.on, button.danger { background:var(--bad-bg); border-color:var(--bad); color:var(--bad); }
.inline { display:inline; }
.stack { display:flex; flex-direction:column; gap:6px; }
.row { display:flex; gap:12px; flex-wrap:wrap; } .row label { flex:1; min-width:160px; }
.actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.filters-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:16px 0; }
.filters-row input, .filters-row select { width:auto; min-width:220px; }
.filters-row a { padding:4px 10px; border-radius:14px; border:1px solid var(--rule); text-decoration:none; font-size:13px; }
.filters-row a[aria-current="page"] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.inline-form { margin:10px 0 24px; display:flex; gap:12px; align-items:center; }
.pager { display:flex; gap:16px; }
.label { font:600 12px var(--sans); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 6px; }

/* Perguntar */
.ask-layout { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:28px; }
@media (max-width:960px) { .ask-layout { grid-template-columns:1fr; } }
.ask-form textarea { font-size:16px; min-height:90px; }
.perspectives { border:0; padding:0; margin:14px 0 6px; display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:8px; }
.perspectives legend { font:600 12px var(--sans); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; }
.chip { margin:0; cursor:pointer; }
.chip input { position:absolute; opacity:0; }
.chip span { display:flex; flex-direction:column; gap:2px; border:1px solid var(--rule); border-radius:8px; padding:8px 10px; height:100%; }
.chip small { color:var(--muted); font-size:12px; line-height:1.3; }
.chip input:checked + span { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.chip input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
details.filters { margin:6px 0; }
details > summary { cursor:pointer; font-weight:600; color:var(--muted); font-size:14px; }
.filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-top:10px; }
.check { display:inline-flex; gap:6px; align-items:center; margin:2px 12px 2px 0; }
.thinking { display:none; color:var(--muted); font-size:14px; }
.thinking.htmx-request { display:inline-flex; align-items:center; gap:8px; }
.thinking.htmx-request::before { content:""; width:14px; height:14px; border-radius:50%; border:2px solid var(--rule); border-top-color:var(--accent); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.answer { border-left:3px solid var(--accent); }
.answer-head { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.answer-head a { margin-left:auto; }
.asked { font:italic 17px var(--serif); color:var(--muted); }
.prose { max-width:78ch; }
.prose ul { padding-left:20px; } .prose li { margin:4px 0; }
a.cite { display:inline-block; min-width:18px; text-align:center; font:600 11px var(--mono); background:var(--accent-soft); border-radius:4px; padding:0 3px; text-decoration:none; }
.sources ol { list-style:none; padding:0; margin:0; }
.source { scroll-margin-top:80px; }
.source:target { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.source-head { display:flex; gap:12px; align-items:flex-start; }
.source-head .n { flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font:700 12px var(--mono); }
.source-head a { text-decoration:none; color:var(--ink); }
.excerpt { font-size:13.5px; color:var(--muted); margin:8px 0 0 38px; white-space:pre-line; }
.examples, .history { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.example { text-align:left; background:var(--ground); color:var(--ink); border:1px solid var(--rule); font-weight:400; width:100%; font-size:14px; }
.example:hover { border-color:var(--accent); }
.example small { display:block; color:var(--accent); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.history small { display:block; }

/* Fonte */
.source-layout { display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); gap:16px; margin-top:12px; }
.chunk { padding:10px 12px; border-radius:6px; margin-bottom:8px; font-size:14px; white-space:pre-line; }
.chunk.cited { background:var(--amber-bg); border-left:3px solid var(--amber); }
iframe.viewer { width:100%; height:78vh; border:1px solid var(--rule); border-radius:6px; background:#fff; }

/* Evidencia e avaliacao */
.kinds { margin:0 0 8px; }
ul.checks { list-style:none; padding:0; margin:0; }
ul.checks li { padding:3px 0; font-size:14px; }
ul.checks li.warn { color:var(--amber); } ul.checks li.ok { color:var(--ok); }
.review-buttons { white-space:nowrap; }
.result.score-2 { border-left:3px solid var(--ok); }
.result.score-1 { border-left:3px solid var(--amber); }
.result.score-0, .result.score-x { border-left:3px solid var(--bad); }
.score { font:700 18px var(--serif); }
.add-question { margin-top:16px; }

/* Plano */
.toc { display:flex; flex-wrap:wrap; gap:6px; position:sticky; top:58px; background:var(--ground); padding:8px 0; z-index:4; border-bottom:1px solid var(--rule); margin-bottom:20px; }
.toc a { font:500 12.5px var(--mono); padding:4px 10px; border:1px solid var(--rule); border-radius:14px; text-decoration:none; background:var(--surface); }
.plan-head { padding:20px 0 28px; border-bottom:1px solid var(--rule); margin-bottom:12px; }
.plan-head h1 { font-size:clamp(28px, 4vw, 44px); max-width:24ch; }
.plan-section { padding:28px 0; border-bottom:1px solid var(--rule); scroll-margin-top:110px; }
.goals li { margin:6px 0; }
.steps { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin:18px 0; }
.steps > div { border-top:2px solid var(--accent); padding-top:10px; }
.steps p { font-size:13.5px; color:var(--muted); }
.phases { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; margin-bottom:20px; }
.phase { background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:14px 16px; }
.phase .when { display:block; font:600 12px var(--mono); color:var(--accent); text-transform:uppercase; margin-bottom:4px; }
.phase b { font:600 17px var(--serif); }
.phase ul { padding-left:18px; margin:8px 0 0; font-size:14px; }

@media (max-width:600px) {
  main { padding:18px 16px 32px; }
  .top { padding:10px 16px; gap:10px; }
  .filter-grid { grid-template-columns:1fr; }
  .toc { top:0; position:static; }
}
@media print {
  .top, .toc, .foot, form { display:none !important; }
  body { background:#fff; }
  .plan-section { break-inside:avoid-page; }
}