:root{
  --paper:#f7f0e2; --card:#fff8eb; --side:#ebe0bc; --ink:#211a15; --ink-soft:#48372c;
  --muted:#716454; --rule:#b8a98a; --rule-strong:#8f7a5b; --brand:#8f3027; --brand-dark:#641f1a;
  --shell:#211a15; --shell-fg:#f7f0e2;
  --t-CLAIM:#c0392b; --t-EVIDENCIA:#2f6b45; --t-FONTE:#1f5d75; --t-QUALIFICADOR:#8a6105;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;
  --sidebar-w:264px; --topbar-h:54px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:flex;background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.muted{color:var(--muted)} .small{font-size:.82rem}
mark{background:none;color:inherit}

/* sidebar */
#sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--side);border-right:1px solid var(--rule);
  height:100vh;overflow:auto;padding:18px 16px;font-family:var(--sans)}
#sidebar header h1{font-family:var(--serif);font-size:1.18rem;margin:.1rem 0 .1rem;color:var(--brand-dark);line-height:1.2}
#sidebar h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  margin:1.4rem 0 .5rem;border-bottom:1px solid var(--rule);padding-bottom:.3rem}
.nav-list{list-style:none;padding:0;margin:0}
.nav-list li{margin:.15rem 0}
.nav-list a{display:block;padding:.42rem .6rem;border-radius:4px;color:var(--ink-soft);font-size:.95rem}
.nav-list a:hover{background:#fff8eb88;text-decoration:none}
.nav-list a.active{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.tag{display:inline-block;background:#fff8eb;border:1px solid var(--rule);border-radius:99px;
  padding:.05rem .5rem;font-size:.7rem;color:var(--muted)}
select,input[type=search]{width:100%;font-family:var(--sans);font-size:.9rem;padding:.4rem .5rem;
  border:1px solid var(--rule-strong);border-radius:4px;background:#fff8eb;color:var(--ink);margin-top:.2rem}

/* mobile top bar — only shown on narrow screens */
#topbar{display:none;position:sticky;top:0;z-index:30;height:var(--topbar-h);
  align-items:center;gap:10px;padding:0 14px;background:var(--side);
  border-bottom:1px solid var(--rule);font-family:var(--sans)}
#topbar .brand{font-family:var(--serif);font-weight:600;color:var(--brand-dark);font-size:1.02rem;
  line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#menu-btn{appearance:none;-webkit-appearance:none;border:1px solid var(--rule-strong);background:#fff8eb;
  color:var(--ink-soft);border-radius:7px;width:42px;height:42px;flex:0 0 42px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.25rem;line-height:1}
#menu-btn:active{background:var(--brand);color:#fff}
#drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(33,26,21,.42);z-index:35}

/* main */
#content{flex:1;height:100vh;overflow:auto;padding:34px 40px 80px}
#view{max-width:820px;margin:0 auto}
h2.view-title{font-size:1.7rem;color:var(--brand-dark);margin:.2rem 0 .2rem;font-weight:600}
.lede{color:var(--ink-soft);margin:.2rem 0 1.4rem;font-size:1.02rem}
.card{background:var(--card);border:1px solid var(--rule);border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.07);padding:20px 22px;margin:16px 0}

/* legend / type chips */
.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--sans);font-size:.8rem;margin:.4rem 0 0}
.legend b{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.dot{width:11px;height:11px;border-radius:3px;display:inline-block}
.d-CLAIM{background:var(--t-CLAIM)} .d-EVIDENCIA{background:var(--t-EVIDENCIA)}
.d-FONTE{background:var(--t-FONTE)} .d-QUALIFICADOR{background:var(--t-QUALIFICADOR)}

/* note explorer */
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-family:var(--sans);margin-bottom:12px}
.seg{display:inline-flex;border:1px solid var(--rule-strong);border-radius:6px;overflow:hidden}
.seg button{font-family:var(--sans);border:0;background:#fff8eb;padding:.4rem .8rem;cursor:pointer;
  font-size:.85rem;color:var(--ink-soft);border-right:1px solid var(--rule)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--brand);color:#fff}
.pager{margin-left:auto;display:flex;gap:6px;align-items:center}
.pager button{font-family:var(--sans);border:1px solid var(--rule-strong);background:#fff8eb;border-radius:6px;
  width:32px;height:32px;cursor:pointer;font-size:1rem;color:var(--ink-soft)}
.tweet{font-family:var(--sans);font-size:.9rem;color:var(--ink-soft);background:#efe6cf;
  border-left:3px solid var(--rule-strong);border-radius:0 6px 6px 0;padding:10px 14px;margin-bottom:14px;
  overflow-wrap:anywhere;word-break:break-word}
.tweet .lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:.2rem}
.nota-text{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;font-size:1.05rem;line-height:1.7}
.sp{border-radius:3px;padding:.02em .12em;border-bottom:2px solid}
.sp-CLAIM{background:#c0392b1f;border-color:var(--t-CLAIM)}
.sp-EVIDENCIA{background:#2f6b451f;border-color:var(--t-EVIDENCIA)}
.sp-FONTE{background:#1f5d751f;border-color:var(--t-FONTE)}
.sp-QUALIFICADOR{background:#8a61051f;border-color:var(--t-QUALIFICADOR)}
/* FONTE ancorada em URL: infraestrutura (injetada por regex; removida na leitura sem FONTE-URL) */
.sp-url{border-bottom-style:dashed;opacity:.72;background-image:repeating-linear-gradient(135deg,transparent,transparent 3px,#1f5d7526 3px,#1f5d7526 4px)}
.meta-row{font-family:var(--sans);font-size:.78rem;color:var(--muted);margin-top:14px;display:flex;gap:14px;flex-wrap:wrap}
.badge{background:#efe6cf;border:1px solid var(--rule);border-radius:99px;padding:.08rem .55rem}

/* scrollable wrapper for wide tables on small screens */
.table-scroll{overflow:auto;-webkit-overflow-scrolling:touch}

/* heatmap */
table.heat{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:.86rem}
table.heat th,table.heat td{padding:.5rem .6rem;text-align:center;border:1px solid #00000010}
table.heat th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
table.heat td.lbl{text-align:left;font-weight:600;color:var(--ink-soft);white-space:nowrap}
table.heat td.dom{font-size:.74rem;color:var(--muted);text-align:left}
.hcell{position:relative;color:var(--ink)}

/* painel */
.headline{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:14px 16px}
.stat .k{font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stat .v{font-size:1.5rem;color:var(--brand-dark);font-weight:600}
.stat .s{font-family:var(--sans);font-size:.8rem;color:var(--ink-soft)}
.bars{font-family:var(--sans);font-size:.82rem}
.bar-row{display:flex;align-items:center;gap:10px;margin:.3rem 0}
.bar-row .nm{width:120px;color:var(--ink-soft)}
.bar{height:14px;border-radius:3px}
.dchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:.4rem}
.dchip{font-family:var(--sans);font-size:.8rem;border-radius:99px;padding:.12rem .6rem;border:1px solid}
table.simple{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:.86rem;margin-top:.4rem}
table.simple th,table.simple td{padding:.45rem .6rem;border-bottom:1px solid var(--rule);text-align:right}
table.simple th:first-child,table.simple td:first-child{text-align:left}
.perfil-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.pcol h4{margin:.1rem 0 .35rem;font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.dchip.pos-VERB{border-color:#8f302755;color:#8f3027} .dchip.pos-NOUN{border-color:#1f5d7555;color:#1f5d75} .dchip.pos-ADJ{border-color:#8a610555;color:#8a6105}
.ex{font-family:var(--sans);font-size:.86rem;color:var(--ink-soft);border-left:3px solid var(--rule);padding:.25rem .7rem;margin:.45rem 0;line-height:1.5}
.ex b{color:var(--brand-dark)}
.occ-click{cursor:pointer;border-radius:0 5px 5px 0} .occ-click:hover{background:#efe6cf;border-left-color:var(--brand)}
.cloud{display:flex;flex-wrap:wrap;gap:5px 11px;align-items:baseline}
.cloud span{line-height:1.15;font-weight:600}
.cloud .pos-VERB{color:#8f3027} .cloud .pos-NOUN{color:#1f5d75} .cloud .pos-ADJ{color:#8a6105}
.reasoning-block{margin:16px 0 0}
.reasoning-toggle{font-family:var(--sans);display:flex;align-items:center;gap:8px;width:100%;cursor:pointer;background:#efe6cf;border:1px solid var(--rule-strong);border-radius:6px;padding:.5rem .7rem;color:var(--ink-soft);font-size:.88rem}
.reasoning-toggle:hover{border-color:var(--t-FONTE)} .reasoning-toggle .hint{margin-left:auto;font-style:italic;color:var(--muted);font-size:.74rem}
.reasoning-body{border:1px solid var(--rule);border-top:0;border-radius:0 0 6px 6px;padding:12px 14px;background:var(--card)}
.reasoning-banner{font-family:var(--sans);font-size:.78rem;color:#8a3b16;background:#f3e2c8;border:1px solid #d8b98e;border-radius:5px;padding:.4rem .6rem;margin-bottom:.6rem}
.reasoning-md{font-family:var(--sans);font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.reasoning-md p{margin:0 0 .5rem} .reasoning-md ul,.reasoning-md ol{margin:.2rem 0 .6rem;padding-left:20px} .reasoning-md li{margin:.1rem 0}
.reasoning-md strong{color:var(--ink);font-weight:600} .reasoning-md h1,.reasoning-md h2,.reasoning-md h3,.reasoning-md h4{font-size:1rem;color:var(--brand-dark);margin:.6rem 0 .3rem}
.modal-bg{position:fixed;inset:0;background:rgba(33,26,21,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}
.modal-bg[hidden]{display:none}
.modal{background:var(--paper);border:1px solid var(--rule-strong);border-radius:10px;max-width:760px;width:100%;max-height:84vh;overflow:auto;box-shadow:0 14px 38px rgba(0,0,0,.3);padding:22px 26px}
.modal .x{float:right;border:0;background:none;font-size:1.4rem;cursor:pointer;color:var(--muted);line-height:1}
.modal h3{color:var(--brand-dark);margin:.1rem 0 .5rem}

/* ============================================================= *
 *  Conjunto (overview / dashboard) — KPIs, donut, barras, anatomia
 * ============================================================= */
.card h3{margin:.1rem 0 .5rem;font-family:var(--serif);font-size:1.12rem;color:var(--brand-dark);font-weight:600}
.scope{font-family:var(--sans);font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  vertical-align:middle;background:#efe6cf;border:1px solid var(--rule);color:var(--muted);border-radius:99px;padding:.18rem .55rem;margin-left:.5rem}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin:.2rem 0 4px}
.kpi{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.kpi-v{font-size:1.6rem;color:var(--brand-dark);font-weight:600;line-height:1.12}
.kpi-k{font-family:var(--sans);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:.15rem}
.kpi-s{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);margin-top:.3rem}

.donut-wrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.donut{width:168px;height:168px;flex:0 0 auto}
.don-seg{transition:opacity .15s} .donut:hover .don-seg{opacity:.55} .don-seg:hover{opacity:1}
.don-c1{font:600 6px var(--serif);fill:var(--brand-dark);text-anchor:middle}
.don-c2{font:3px var(--sans);fill:var(--muted);text-anchor:middle;letter-spacing:.1px;text-transform:uppercase}
.don-legend{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:.9rem;display:flex;flex-direction:column;gap:.4rem;justify-content:center}
.don-legend li{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.don-legend .sw{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
.don-hint{font-size:.74rem;color:var(--muted);font-style:italic}

.hbars{font-family:var(--sans);font-size:.86rem;display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem}
.hbar-row{display:grid;grid-template-columns:minmax(120px,210px) 1fr auto;align-items:center;gap:10px}
.hbar-lbl{color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-track{background:#0000000d;border-radius:4px;height:14px;overflow:hidden}
.hbar-fill{display:block;height:100%;border-radius:4px}
.hbar-val{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;min-width:38px}

.anat{display:flex;flex-direction:column;gap:.6rem;margin-top:.5rem;font-family:var(--sans)}
.anat-row{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:12px}
.anat-lbl{font-size:.82rem;font-weight:700;letter-spacing:.02em}
.anat-bars{display:flex;flex-direction:column;gap:.28rem}
.anat-b{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;font-size:.8rem}
.anat-b-n{color:var(--muted);font-size:.72rem}
.anat-b-track{background:#0000000d;border-radius:4px;height:12px;overflow:hidden}
.anat-b-fill{display:block;height:100%;border-radius:4px}
.anat-b-v{color:var(--ink-soft);font-variant-numeric:tabular-nums;min-width:46px;text-align:right}

.dist-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;margin-top:.4rem}
.dist h4{margin:.1rem 0 .15rem;font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.dist .hbars{margin-top:.2rem;gap:.28rem}

/* navegador de entidades */
.crumbs{font-family:var(--sans);font-size:.86rem;margin:.1rem 0 1rem;color:var(--muted)}
.crumbs .crumb{cursor:pointer;color:var(--brand)} .crumbs .crumb.cur{color:var(--ink-soft);cursor:default}
.crumbs .sep{margin:0 .4rem;color:var(--rule-strong)}
tr.heat-nav{cursor:pointer} tr.heat-nav:hover td{background-color:#fff8eb !important}
tr.heat-nav .lbl{color:var(--brand)}
.ent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:.5rem}
.ent-pick{font-family:var(--sans);text-align:left;border:1px solid var(--rule);background:#fff8eb;border-radius:7px;
  padding:.5rem .7rem;cursor:pointer;display:flex;flex-direction:column;gap:.1rem;color:var(--ink-soft)}
.ent-pick:hover{border-color:var(--brand);background:#fff}
.ent-nm{font-weight:600;color:var(--brand-dark)} .ent-meta{font-size:.74rem;color:var(--muted)}
.eh{margin:.1rem 0 .35rem;font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ag-bar{display:flex;height:16px;border-radius:5px;overflow:hidden;background:#0000000d;margin:.2rem 0 .5rem}
.ag-seg{display:block;height:100%}
.ag-leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--sans);font-size:.8rem;color:var(--ink-soft)}
.ag-leg span{display:inline-flex;align-items:center;gap:6px}
.ag-leg i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* BIO (rotulagem de sequência, nível de token) */
.bio-stream{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;font-size:1.05rem;line-height:2.15}
.btok{border-radius:2px;padding:.05em .04em;border-bottom:2px solid var(--tc)}
.bio-b{box-shadow:-2.5px 0 0 var(--tc);margin-left:2px;border-top-left-radius:0;border-bottom-left-radius:0}
.bio-CLAIM{--tc:var(--t-CLAIM);background:#c0392b1f}
.bio-EVIDENCIA{--tc:var(--t-EVIDENCIA);background:#2f6b451f}
.bio-FONTE{--tc:var(--t-FONTE);background:#1f5d751f}
.bio-QUALIFICADOR{--tc:var(--t-QUALIFICADOR);background:#8a61051f}

/* ============================================================= *
 *  Mobile / narrow viewport: sidebar becomes an off-canvas drawer
 *  toggled from a sticky top bar, with larger touch targets.
 * ============================================================= */
@media(max-width:760px){
  html{overflow-x:hidden}
  html,body{height:auto;min-height:100%}
  body{flex-direction:column}

  /* top bar + off-canvas drawer */
  #topbar{display:flex}
  #sidebar{position:fixed;top:0;left:0;height:100%;width:min(86vw,320px);z-index:40;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 0 0 100vmax transparent;overscroll-behavior:contain}
  body.drawer-open #sidebar{transform:translateX(0);box-shadow:6px 0 28px rgba(0,0,0,.28)}
  body.drawer-open #drawer-backdrop{display:block}

  #content{height:auto;flex:1 1 auto;padding:18px 16px 64px}
  #view{max-width:none}
  h2.view-title{font-size:1.42rem}
  .lede{font-size:.98rem;margin-bottom:1rem}
  .card{padding:16px 15px;margin:12px 0}

  /* roomier tap targets; segmented control on its own full-width row,
     pager beneath it (right-aligned) so nothing is cramped on narrow phones */
  .nav-list a{padding:.7rem .7rem;font-size:1rem}
  .controls{gap:10px}
  .seg{flex:1 1 100%}
  .seg button{flex:1 1 0;padding:.6rem .5rem;font-size:.92rem;min-height:44px}
  .pager{width:100%;justify-content:flex-end;margin-left:0}
  .pager button{width:44px;height:44px;font-size:1.15rem}

  /* keep wide grids/tables from overflowing the page */
  .headline{grid-template-columns:1fr}
  .perfil-cols{grid-template-columns:1fr}
  .bar-row .nm{width:96px}

  /* conjunto: stack overview pieces on narrow screens */
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .kpi-v{font-size:1.4rem}
  .donut-wrap{justify-content:center;gap:16px}
  .anat-row{grid-template-columns:1fr;gap:.35rem}
  .anat-lbl{margin-bottom:.05rem}
  .hbar-row{grid-template-columns:minmax(84px,1.4fr) 2fr auto;gap:8px}
  .scope{display:inline-block;margin:.3rem 0 0}
  .dist-grid{grid-template-columns:1fr;gap:14px}

  /* roomier modal */
  .modal-bg{padding:10px;align-items:flex-start}
  .modal{max-height:92vh;padding:18px 16px;border-radius:12px}
  .modal .x{font-size:1.7rem;padding:.1rem .35rem;margin:-.3rem -.3rem 0 0}
}