/* ============================================================
   Jair Nunes — AI Studio · design system
   Tokens + shell + tipos de lâmina + modo apresentação + lab
   ============================================================ */

:root{
  /* Paleta */
  --bg:        #d9d7cc;   /* fundo fora do palco */
  --stage:     #edece2;   /* creme do palco */
  --ink:       #16150f;   /* quase-preto (headlines) */
  --ink-soft:  #23221c;   /* títulos */
  --muted:     #7c7a6f;   /* corpo de texto */
  --muted-2:   #9a988c;   /* ano / legendas mono */
  --line:      #cdcabb;   /* divisórias */
  --line-2:    #dddbd0;   /* divisórias sutis */
  --terra:     #a9744f;   /* terracota — destaque/futuro */
  --terra-ink: #8a5a3a;

  /* Semânticos do lab */
  --ok:        #4f7a52;
  --ok-bg:     #e6ebe0;
  --danger:    #b0533f;
  --danger-bg: #f0e4de;
  --off:       #a6a397;

  /* Tipografia */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --serif: "New York", ui-serif, Georgia, "Times New Roman", serif;

  --radius: 26px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  background:var(--bg);
  font-family:var(--sans);
  color:var(--ink);
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:24px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Design system: TUDO é um cartão emoldurado sobre o fundo.
   Verbete = slide 16:9 centrado; home = cartão-menu alto que rola do topo. */
#root{ width:min(100%, 1280px); }
body.view-home{ align-items:flex-start; }
body.presenting{ padding:0; }
body.presenting .topbar{ display:none; }
:fullscreen #root, body.presenting #root{ width:min(100vw, calc(100vh * 16 / 9)); }

/* ===================== Palco 16:9 (slide) ===================== */

.stage{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:var(--stage);
  border-radius:var(--radius);
  box-shadow:0 30px 70px -34px rgba(40,36,28,.4);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:4.4% 4.6% 0;
}

.stage-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* ===================== Barra superior (fora do palco) ===================== */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  z-index:40;
  pointer-events:none;
}
.topbar button, .topbar a{ pointer-events:auto; }

.tb-btn{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:-.01em;
  color:#5b5a51;
  background:rgba(237,236,226,.7);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 15px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:background .15s, color .15s, border-color .15s;
}
.tb-btn:hover{ background:var(--stage); color:var(--ink); border-color:var(--muted-2); }
.tb-key-dot{ width:7px; height:7px; border-radius:50%; background:var(--muted-2); }
.tb-key-dot.on{ background:var(--ok); }

body.presenting .topbar{ display:none; }

/* ===================== Rodapé / marca ===================== */
.footer{
  flex-shrink:0;
  padding:0 0 3.2%;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#4b4a42;
  font-size:.92rem;
  font-weight:400;
  letter-spacing:-.01em;
  text-decoration:none;
  transition:opacity .15s;
}
a.brand:hover{ opacity:.6; }
.brand svg{ display:block; }
.brand b{ font-weight:600; }
.brand .sep{ color:var(--muted-2); font-weight:300; margin:0 2px; }
.foot-right{
  font-family:var(--mono);
  font-size:.8rem;
  letter-spacing:.14em;
  color:var(--muted-2);
}

/* ===================== Eyebrow ===================== */
.eyebrow{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted-2);
  font-weight:400;
}

/* ===================== HOME / índice ===================== */
.home-head{ flex-shrink:0; }
.home-title{
  margin-top:3.2%;
  font-size:clamp(24px, 3.4vw, 44px);
  line-height:1.12;
  letter-spacing:-.026em;
  font-weight:600;
  color:var(--ink);
  max-width:20ch;
}
.home-sub{
  margin-top:14px;
  font-size:clamp(13px, 1.2vw, 17px);
  line-height:1.5;
  color:var(--muted);
  max-width:52ch;
  letter-spacing:-.006em;
}
.library{
  margin-top:auto;
  overflow-y:auto;
  padding-bottom:2%;
}
.tax-group + .tax-group{ margin-top:26px; }
.tax-label{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted-2);
  font-weight:400;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.chapter-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:14px;
}
.chapter-card{
  text-align:left;
  text-decoration:none;
  color:inherit;
  font-family:var(--sans);
  background:transparent;
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 20px 18px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:border-color .16s, background .16s, transform .16s;
}
.chapter-card:hover{ border-color:var(--muted-2); background:#f3f2ea; transform:translateY(-2px); }
.chapter-card:disabled{ cursor:default; opacity:.55; }
.chapter-card:disabled:hover{ transform:none; background:transparent; border-color:var(--line); }
.cc-num{
  font-family:var(--mono);
  font-size:.9rem;
  color:var(--muted-2);
  letter-spacing:.06em;
}
.cc-title{
  font-size:1.12rem;
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--ink-soft);
  line-height:1.2;
}
.cc-meta{ margin-top:2px; display:flex; align-items:center; gap:8px; }
.cc-status{
  font-family:var(--mono);
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:999px;
}
.cc-status.ready{ color:var(--ok); background:var(--ok-bg); }
.cc-status.draft{ color:var(--muted-2); background:#e7e5da; }

/* ===================== Lâmina: cover ===================== */
.s-cover{ display:flex; flex-direction:column; justify-content:center; height:100%; }
.s-cover .eyebrow{ margin-bottom:24px; }
.s-cover h1{
  font-size:clamp(30px, 5vw, 66px);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:600;
  color:var(--ink);
  max-width:16ch;
}
.s-cover .cover-sub{
  margin-top:22px;
  font-size:clamp(14px, 1.3vw, 19px);
  color:var(--muted);
  max-width:46ch;
  line-height:1.5;
}

/* ===================== Lâmina: concept ===================== */
.s-concept{ display:flex; flex-direction:column; justify-content:center; height:100%; }
.s-concept .eyebrow{ margin-bottom:20px; }
.s-concept h2{
  font-size:clamp(24px, 3.4vw, 46px);
  line-height:1.1;
  letter-spacing:-.026em;
  font-weight:600;
  color:var(--ink);
  max-width:22ch;
}
.s-concept .body{
  margin-top:22px;
  font-size:clamp(15px, 1.35vw, 20px);
  line-height:1.55;
  color:var(--muted);
  max-width:60ch;
  letter-spacing:-.006em;
}
.s-concept .body p + p{ margin-top:14px; }
.s-concept .body strong{ color:var(--ink-soft); font-weight:600; }

/* ===================== Lâmina: columns ===================== */
.s-columns{ display:flex; flex-direction:column; height:100%; }
.s-columns .eyebrow{ flex-shrink:0; }
.s-columns h2{
  flex-shrink:0;
  margin-top:2.4%;
  font-size:clamp(22px, 3vw, 40px);
  line-height:1.12;
  letter-spacing:-.024em;
  font-weight:600;
  color:var(--ink);
  max-width:24ch;
}
.col-grid{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(var(--cols, 4), 1fr);
  gap:0 4%;
  padding-bottom:1%;
}
.col{
  border-top:1px solid var(--line);
  padding-top:22px;
  min-height:210px;
  display:flex;
  flex-direction:column;
}
.col .tag{
  font-size:clamp(14px, 1.4vw, 19px);
  color:var(--muted-2);
}
.col .c-title{
  margin-top:11px;
  font-size:clamp(16px, 1.75vw, 23px);
  font-weight:600;
  letter-spacing:-.018em;
  color:var(--ink-soft);
}
.col .c-body{
  margin-top:14px;
  font-size:clamp(12px, 1vw, 15px);
  line-height:1.5;
  color:var(--muted);
  max-width:24ch;
  letter-spacing:-.006em;
}
.col .c-caption{
  margin-top:auto;
  padding-top:24px;
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.col.fade-1{ opacity:.5; }
.col.fade-2{ opacity:.34; }
.col.future .tag,
.col.future .c-caption{ color:var(--terra); }
.col.future .c-title{ color:var(--terra); font-family:var(--serif); font-style:italic; font-weight:400; }
.col.future .c-body{ color:var(--terra); }

/* ===================== Lâmina: quote ===================== */
.s-quote{ display:flex; flex-direction:column; justify-content:center; height:100%; }
.s-quote blockquote{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(26px, 3.8vw, 52px);
  line-height:1.18;
  letter-spacing:-.02em;
  color:var(--ink);
  max-width:20ch;
}
.s-quote .attr{
  margin-top:26px;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-2);
}

/* ===================== Lâmina: lab ===================== */
.s-lab{ display:flex; flex-direction:column; height:100%; min-height:0; }
.lab-head{ flex-shrink:0; margin-bottom:16px; }
.lab-head .eyebrow{ margin-bottom:12px; }
.lab-head h2{
  font-size:clamp(19px, 2.2vw, 30px);
  line-height:1.12;
  letter-spacing:-.022em;
  font-weight:600;
  color:var(--ink);
}
.lab-head .intro{
  margin-top:9px;
  font-size:clamp(12px, 1.05vw, 15px);
  line-height:1.5;
  color:var(--muted);
  max-width:74ch;
  letter-spacing:-.006em;
}
.lab-mount{ flex:1; min-height:0; display:flex; }

/* ---- lab: aviso de chave ---- */
.lab-needkey{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  text-align:center;
  border:1px dashed var(--line);
  border-radius:16px;
  color:var(--muted);
}
.lab-needkey p{ max-width:36ch; font-size:.95rem; line-height:1.5; }
.lab-needkey button{
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:600;
  color:var(--stage);
  background:var(--ink-soft);
  border:none;
  border-radius:999px;
  padding:10px 22px;
  cursor:pointer;
}
.lab-needkey button:hover{ background:var(--ink); }

/* ---- lab: injection ---- */
.inj{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 0.9fr;
  gap:20px;
}
.inj-left, .inj-right{ min-height:0; display:flex; flex-direction:column; }
.inj-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; flex-shrink:0; }
.chip{
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:-.005em;
  color:#5b5a51;
  background:#f3f2ea;
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
  transition:border-color .14s, background .14s, color .14s;
}
.chip:hover{ border-color:var(--muted-2); color:var(--ink); }
.chip.attack::before{ content:"⚔ "; color:var(--danger); }
.chip.safe::before{ content:"✓ "; color:var(--ok); }
.inj-io{ flex:1; min-height:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#f5f4ee; }
.inj-log{ flex:1; min-height:0; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.inj-empty{ margin:auto; color:var(--muted-2); font-size:.85rem; text-align:center; max-width:28ch; line-height:1.5; }
.msg{ display:flex; gap:9px; align-items:flex-start; }
.msg .ico{ flex-shrink:0; font-size:1rem; line-height:1.5; }
.msg .bubble{
  font-size:.86rem; line-height:1.5; color:var(--ink-soft);
  background:var(--stage); border:1px solid var(--line-2);
  border-radius:12px; padding:9px 12px; max-width:88%; white-space:pre-wrap; word-break:break-word;
}
.msg.user .bubble{ background:#e9e7dc; }
.msg.block .bubble{ background:var(--danger-bg); border-color:#e2c9bf; color:var(--danger); }
.spin{ display:inline-block; width:12px; height:12px; border:2px solid var(--muted-2); border-top-color:transparent; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; margin-right:6px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.inj-form{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); background:var(--stage); flex-shrink:0; }
.inj-form input{
  flex:1; font-family:var(--sans); font-size:.85rem; color:var(--ink);
  background:#f5f4ee; border:1px solid var(--line); border-radius:10px; padding:9px 12px;
}
.inj-form input:focus{ outline:none; border-color:var(--muted-2); }
.inj-form button{
  font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--stage);
  background:var(--ink-soft); border:none; border-radius:10px; padding:9px 18px; cursor:pointer;
}
.inj-form button:disabled{ opacity:.5; cursor:default; }

.inj-defense{ display:flex; align-items:center; gap:14px; margin-bottom:12px; flex-shrink:0; flex-wrap:wrap; }
.toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:.78rem; color:var(--ink-soft); font-weight:500; }
.toggle input{ display:none; }
.toggle .track{ width:34px; height:19px; border-radius:999px; background:#d2cfc2; position:relative; transition:background .16s; flex-shrink:0; }
.toggle .track::after{ content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; transition:transform .16s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.toggle input:checked + .track{ background:var(--ok); }
.toggle input:checked + .track::after{ transform:translateX(15px); }

.inj-trace{ flex:1; min-height:0; overflow-y:auto; border:1px solid var(--line); border-radius:14px; padding:14px; background:#f5f4ee; }
.trace-title{ font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); margin-bottom:12px; }
.trace-empty{ color:var(--muted-2); font-size:.82rem; line-height:1.5; }
.step{ border-left:2px solid var(--line); padding:2px 0 14px 13px; position:relative; }
.step:last-child{ padding-bottom:0; }
.step::before{ content:""; position:absolute; left:-5px; top:4px; width:8px; height:8px; border-radius:50%; background:var(--muted-2); }
.step.pass::before{ background:var(--ok); }
.step.block::before{ background:var(--danger); }
.step.off::before{ background:var(--off); }
.step .sh{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.step .sh .label{ font-size:.82rem; font-weight:600; color:var(--ink-soft); }
.step .sh .ms{ font-family:var(--mono); font-size:.66rem; color:var(--muted-2); }
.step .verdict{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; margin-top:5px; font-weight:600; }
.step.pass .verdict{ color:var(--ok); }
.step.block .verdict{ color:var(--danger); }
.step.off .verdict{ color:var(--off); }
.step .reason{ font-size:.78rem; color:var(--muted); line-height:1.45; margin-top:4px; }
.step .reason b{ color:var(--ink-soft); font-weight:600; }
.trace-total{ font-family:var(--mono); font-size:.66rem; color:var(--muted-2); margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.grade{ margin-top:12px; border-radius:10px; padding:9px 12px; font-size:.8rem; line-height:1.4; }
.grade.fail{ background:var(--danger-bg); color:var(--danger); }
.grade.safe{ background:var(--ok-bg); color:var(--ok); }
.grade b{ font-weight:600; }

/* ---- lab: guardrail-compare ---- */
.cmp{ flex:1; min-height:0; display:flex; flex-direction:column; }
.cmp-controls{ display:flex; gap:8px; margin-bottom:14px; flex-shrink:0; }
.cmp-controls input{
  flex:1; font-family:var(--sans); font-size:.85rem; color:var(--ink);
  background:#f5f4ee; border:1px solid var(--line); border-radius:10px; padding:10px 13px;
}
.cmp-controls input:focus{ outline:none; border-color:var(--muted-2); }
.cmp-controls button{
  font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--stage);
  background:var(--ink-soft); border:none; border-radius:10px; padding:10px 20px; cursor:pointer;
}
.cmp-controls button:disabled{ opacity:.5; cursor:default; }
.cmp-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; flex-shrink:0; }
.cmp-grid{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cmp-pane{ min-height:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.cmp-pane.exposed{ border-color:#e2c9bf; }
.cmp-pane.defended{ border-color:#c3d0bc; }
.cmp-pane-head{ padding:11px 14px; font-size:.8rem; font-weight:600; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); }
.cmp-pane.exposed .cmp-pane-head{ background:var(--danger-bg); color:var(--danger); }
.cmp-pane.defended .cmp-pane-head{ background:var(--ok-bg); color:var(--ok); }
.cmp-pane-body{ flex:1; min-height:0; overflow-y:auto; padding:14px; font-size:.85rem; line-height:1.55; color:var(--ink-soft); white-space:pre-wrap; }
.cmp-pane-body .placeholder{ color:var(--muted-2); }
.cmp-pipeline{ font-family:var(--mono); font-size:.64rem; color:var(--muted-2); padding:9px 14px; border-top:1px solid var(--line); letter-spacing:.04em; }

/* ===================== Navegação (setas) ===================== */
.nav{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(237,236,226,.7);
  backdrop-filter:blur(8px);
  color:#5b5a51;
  font-size:1.1rem;
  cursor:pointer;
  z-index:30;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s, opacity .15s;
}
.nav:hover{ background:var(--stage); color:var(--ink); }
.nav:disabled{ opacity:.28; cursor:default; }
.nav.prev{ left:22px; }
.nav.next{ right:22px; }
.nav{ display:none; }
body.view-verbete .nav{ display:flex; }

/* ===================== Config modal ===================== */
.modal-back{
  position:fixed; inset:0; background:rgba(30,28,22,.42);
  display:flex; align-items:center; justify-content:center; z-index:60; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .18s;
}
.modal-back.open{ opacity:1; pointer-events:auto; }
.modal{
  width:min(440px, 100%); background:var(--stage); border-radius:20px; padding:28px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.5); transform:translateY(8px); transition:transform .18s;
}
.modal-back.open .modal{ transform:none; }
.modal h3{ font-size:1.2rem; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.modal p{ margin-top:8px; font-size:.85rem; line-height:1.5; color:var(--muted); }
.modal label{ display:block; margin-top:18px; font-size:.72rem; font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:7px; }
.modal input, .modal select{
  width:100%; font-family:var(--sans); font-size:.9rem; color:var(--ink);
  background:#f5f4ee; border:1px solid var(--line); border-radius:10px; padding:10px 13px;
}
.modal input:focus, .modal select:focus{ outline:none; border-color:var(--muted-2); }
.modal .hint{ margin-top:8px; font-size:.72rem; color:var(--muted-2); }
.modal .hint a{ color:var(--terra-ink); }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:24px; }
.modal-actions button{ font-family:var(--sans); font-size:.85rem; font-weight:600; border-radius:10px; padding:9px 18px; cursor:pointer; border:1px solid transparent; }
.btn-ghost{ background:transparent; border-color:var(--line); color:#5b5a51; }
.btn-ghost:hover{ border-color:var(--muted-2); color:var(--ink); }
.btn-solid{ background:var(--ink-soft); color:var(--stage); }
.btn-solid:hover{ background:var(--ink); }
.key-ok{ margin-top:10px; font-size:.76rem; color:var(--ok); font-weight:500; }

/* ===================== Responsivo ===================== */
@media (max-width:720px){
  body{ padding:10px; align-items:flex-start; }
  .stage{ aspect-ratio:auto; min-height:calc(100vh - 20px); padding:24px 20px 0; }
  .inj, .cmp-grid, .col-grid{ grid-template-columns:1fr; }
  .col{ min-height:0; }
  .nav.prev{ left:8px; } .nav.next{ right:8px; }
}

/* ===================== Fullscreen ===================== */
:fullscreen #root, :-webkit-full-screen #root{ width:min(100vw, calc((100vh - 0px) * 16 / 9)); }

/* ============================================================
   v2 — Enciclopédia: documento (home/verbete) + blocos + deck
   ============================================================ */

/* ---- coluna de leitura ---- */
.doc{ max-width:940px; margin:0 auto; padding:92px 32px 48px; }
.doc-foot{
  margin-top:60px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}

/* ---- HOME ---- */
.home-card .home-head{ max-width:none; }
.home-topline{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.home-card .home-title{
  margin-top:24px; font-size:clamp(30px, 4.4vw, 52px); line-height:1.06;
  letter-spacing:-.03em; font-weight:600; color:var(--ink); max-width:none;
}
.home-card .home-sub{
  margin-top:14px; font-size:clamp(15px,1.35vw,19px); line-height:1.55;
  color:var(--muted); max-width:62ch; letter-spacing:-.006em;
}
/* busca compacta, no canto superior direito */
.search{ flex-shrink:0; }
.search input{
  width:clamp(190px, 24vw, 300px); font-family:var(--sans); font-size:.92rem; color:var(--ink);
  background:var(--stage); border:1px solid var(--line); border-radius:999px; padding:10px 18px;
  transition:border-color .15s, width .18s;
}
.search input:focus{ outline:none; border-color:var(--muted-2); width:clamp(240px, 30vw, 360px); }
@media(max-width:640px){
  .home-topline{ flex-wrap:wrap; }
  .search{ width:100%; } .search input{ width:100%; }
}

.areas{ margin-top:44px; }
.area + .area{ margin-top:44px; }
.area-head{ padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.area-head h2{ font-size:clamp(19px,2vw,26px); font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.area-head p{ margin-top:6px; font-size:.95rem; color:var(--muted); max-width:58ch; }
.verbete-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px; }
/* Fontes (bibliografia-base), no fim da home */
.fontes{ margin-top:56px; }
.fontes-list{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px; }
.fontes-list li{ display:flex; flex-direction:column; gap:6px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--stage); }
.fontes-list a{ text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:3px; }
.fontes-list a:hover .f-title{ text-decoration:underline; }
.f-title{ font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.f-authors{ font-size:.9rem; color:var(--muted); }
.f-where{ font-size:.78rem; color:var(--terra-ink); text-transform:uppercase; letter-spacing:.06em; }
.vcard{
  text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:8px;
  border:1px solid var(--line); border-radius:16px; padding:20px; background:transparent;
  transition:border-color .16s, background .16s, transform .16s;
}
.vcard:hover{ border-color:var(--muted-2); background:#f3f2ea; transform:translateY(-2px); }
.vcard.draft{ opacity:.62; }
.vc-term{ font-size:1.12rem; font-weight:600; letter-spacing:-.015em; color:var(--ink-soft); line-height:1.2; }
.vc-one{ font-size:.86rem; line-height:1.45; color:var(--muted); }
.vc-soon{
  align-self:flex-start; font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); background:#e7e5da; padding:3px 8px; border-radius:999px; margin-top:2px;
}

/* ---- VERBETE ---- */
.crumb{
  display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2); text-decoration:none; margin-bottom:22px;
}
.crumb:hover{ color:var(--ink); }
.verbete-doc .eyebrow{ margin-bottom:14px; }
.v-term{ font-size:clamp(30px,4.6vw,56px); line-height:1.04; letter-spacing:-.03em; font-weight:600; color:var(--ink); }
.v-oneliner{
  margin-top:16px; font-size:clamp(17px,1.7vw,23px); line-height:1.45; color:var(--ink-soft);
  letter-spacing:-.012em; max-width:44ch;
}
.blocks{ margin-top:40px; }
.blocks > * + *{ margin-top:30px; }
.v-empty{ color:var(--muted); font-size:1rem; padding:28px; border:1px dashed var(--line); border-radius:14px; }

/* blocos */
.b-prose p{ font-size:1.06rem; line-height:1.65; color:var(--muted); max-width:70ch; letter-spacing:-.006em; }
.b-prose strong{ color:var(--ink-soft); font-weight:600; }
.b-analogy{
  border-left:3px solid var(--terra); background:#f1ece6; border-radius:0 14px 14px 0; padding:18px 22px; max-width:72ch;
}
.b-analogy-tag{
  display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--terra-ink); margin-bottom:8px;
}
.b-analogy p{ font-size:1.02rem; line-height:1.6; color:var(--ink-soft); }
.b-analogy strong{ font-weight:600; }

.b-diagram{ margin:6px 0; padding:24px; background:#f5f4ee; border:1px solid var(--line); border-radius:16px; }
.b-diagram svg{ display:block; width:100%; height:auto; }
.b-diagram figcaption, .b-image figcaption{
  margin-top:14px; font-family:var(--mono); font-size:.7rem; letter-spacing:.03em; color:var(--muted-2);
  line-height:1.5; text-align:center;
}
.b-image img{ width:100%; height:auto; border-radius:14px; border:1px solid var(--line); display:block; }
.b-image figcaption{ text-align:left; }
.b-image .src{ color:var(--muted-2); }

.b-columns h3{ font-size:clamp(18px,1.8vw,24px); font-weight:600; letter-spacing:-.02em; color:var(--ink); margin:4px 0 20px; }
.b-columns .col-grid{ margin-top:0; }
.b-columns .col{ min-height:0; }

.b-steps h3{ font-size:clamp(18px,1.8vw,24px); font-weight:600; letter-spacing:-.02em; color:var(--ink); margin-bottom:18px; }
.step-item{ display:flex; gap:16px; padding:14px 0; border-top:1px solid var(--line-2); }
.step-item:first-of-type{ border-top:none; }
.step-n{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--stage); border:1px solid var(--terra);
  color:var(--terra); font-family:var(--mono); font-size:.85rem; display:flex; align-items:center; justify-content:center;
}
.step-text h4{ font-size:1.02rem; font-weight:600; color:var(--ink-soft); letter-spacing:-.01em; }
.step-text p{ margin-top:5px; font-size:.95rem; line-height:1.55; color:var(--muted); max-width:66ch; }

.b-quote{
  font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.4vw,30px); line-height:1.3;
  color:var(--ink); border-left:3px solid var(--line); padding-left:24px; max-width:26ch;
}
.b-quote cite{ display:block; margin-top:16px; font-family:var(--mono); font-style:normal;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }

.b-lab{ border:1px solid var(--line); border-radius:18px; padding:22px; background:#f5f4ee; }
.b-lab .lab-head{ margin-bottom:16px; }
.b-lab .lab-head h3{ font-size:clamp(18px,1.9vw,25px); font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.b-lab .lab-head .intro{ margin-top:8px; font-size:.92rem; line-height:1.5; color:var(--muted); max-width:74ch; }
.b-lab .lab-mount{ height:520px; display:flex; }

/* ===================== Roteiros ===================== */
.rcard .vc-meta{ display:block; margin-top:10px; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.roteiro-cover .cover-meta{ margin-top:26px; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }
.r-origem{
  flex-shrink:0; align-self:flex-start; margin-bottom:14px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); text-decoration:none;
}
a.r-origem:hover{ color:var(--ink); }

/* Impressão do roteiro: lâminas empilhadas; no papel, uma por página, 16:9 */
body.printing{ display:block; padding:24px; }
body.printing .topbar, body.printing .nav{ display:none !important; }
body.printing #root{ margin:0 auto; }
.print-deck{ display:flex; flex-direction:column; gap:24px; }
@media print{
  @page{ size:297mm 167mm; margin:0; }
  body.printing{ padding:0; background:#fff; }
  .print-deck{ gap:0; }
  .print-deck .stage{
    width:297mm; height:167mm; aspect-ratio:auto;
    border-radius:0; box-shadow:none;
    break-after:page; page-break-after:always;
  }
  .print-deck .stage:last-child{ break-after:auto; page-break-after:auto; }
  /* No papel não há rolagem: prosa em coluna mais larga e fonte fixa para caber na página */
  .print-deck .deck-panel{ overflow:hidden; }
  .print-deck .deck-panel .b-prose p{ font-size:20px; line-height:1.55; max-width:68ch; }
  .print-deck .deck-panel .b-analogy p{ font-size:18px; }
  .print-deck .stage, .print-deck .b-lab, .print-deck .col, .print-deck .b-analogy{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* Modo público (vitrine): bancada vira convite */
.lab-convite .convite-body{
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
  padding:22px 24px; border:1px dashed var(--line); border-radius:14px; background:#fbfaf5;
}
.lab-convite .convite-body p{ max-width:62ch; font-size:1rem; line-height:1.55; color:var(--ink); }
.convite-btn{
  display:inline-block; padding:10px 18px; border-radius:999px; background:var(--ink); color:#fff;
  font-size:.92rem; font-weight:600; text-decoration:none;
}
.convite-btn:hover{ opacity:.9; }

/* rodapé do verbete */
.v-foot{ margin-top:40px; }
.v-foot-label{ display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin-bottom:12px; }
.v-related{ padding-top:26px; border-top:1px solid var(--line); }
.v-related-links{ display:flex; flex-wrap:wrap; gap:10px; }
.v-related-links a{
  text-decoration:none; font-size:.9rem; font-weight:500; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:7px 15px; transition:border-color .15s, background .15s;
}
.v-related-links a:hover{ border-color:var(--muted-2); background:#f3f2ea; }
.v-papers{ margin-top:26px; padding-top:26px; border-top:1px solid var(--line); }
.v-papers ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.v-papers a{ font-size:.92rem; color:var(--terra-ink); text-decoration:none; }
.v-papers a:hover{ text-decoration:underline; }

/* ---- DECK (modo apresentar) ---- */
.deck-cover{ display:flex; flex-direction:column; justify-content:center; height:100%; }
.deck-cover .eyebrow{ margin-bottom:22px; }
.deck-cover h1{ font-size:clamp(30px,5vw,64px); line-height:1.04; letter-spacing:-.03em; font-weight:600; color:var(--ink); max-width:18ch; }
.deck-cover .cover-sub{ margin-top:20px; font-size:clamp(15px,1.4vw,21px); color:var(--muted); max-width:48ch; line-height:1.5; }
.deck-panel{ display:flex; flex-direction:column; justify-content:center; height:100%; overflow:auto; }
.deck-panel > *{ width:100%; }
.deck-panel .b-prose p{ font-size:clamp(18px,2.1vw,28px); line-height:1.5; color:var(--ink-soft); max-width:26ch; }
.deck-panel .b-prose strong{ color:var(--ink); }
.deck-panel .b-analogy{ max-width:none; }
.deck-panel .b-analogy p{ font-size:clamp(16px,1.7vw,22px); }
.deck-panel .b-quote{ max-width:22ch; }
.deck-panel .b-diagram{ background:transparent; border:none; padding:0; }
.deck-panel .b-lab .lab-mount{ height:min(58vh, 460px); }
.deck-panel .b-columns .col{ min-height:0; }

@media (max-width:720px){
  .doc{ padding:80px 20px 36px; }
  .b-lab .lab-mount{ height:auto; min-height:620px; }
}

/* ============================================================
   v2.1 — cartão-menu (home) + verbete como deck de slides
   ============================================================ */

/* home = cartão emoldurado de altura automática (rola a página) */
.home-card{ aspect-ratio:auto; }
.home-card .home-scroll{ flex:1; }
.home-card .areas{ margin-top:40px; }
.home-card .area + .area{ margin-top:40px; }

/* colunas ocupando a lâmina inteira (headline no topo, colunas no rodapé) */
.deck-panel .b-columns{ height:100%; display:flex; flex-direction:column; }
.deck-panel .b-columns .eyebrow{ margin-bottom:0; flex-shrink:0; }
.deck-panel .b-columns h3{
  flex-shrink:0; margin:2.2% 0 0; max-width:24ch;
  font-size:clamp(24px,3.4vw,44px); line-height:1.1; letter-spacing:-.026em; font-weight:600; color:var(--ink);
}
.deck-panel .b-columns .col-grid{ margin-top:auto; }
.deck-panel .b-columns .col{ min-height:210px; }

/* painel de referências (último slide do verbete) */
.deck-refs{ display:flex; flex-direction:column; justify-content:center; height:100%; }
.refs-inner{ display:flex; flex-direction:column; gap:34px; }
.deck-refs .v-related, .deck-refs .v-papers{ border:none; padding:0; margin:0; }
.deck-refs .v-papers ul{ gap:11px; }
.deck-refs .v-papers a{ font-size:1rem; }

/* ============================================================
   Lab: explorador de camadas (stage-explorer)
   ============================================================ */
.stg{ height:100%; width:100%; display:flex; flex-direction:column; justify-content:center; gap:22px; }
.stg-pipe{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; }
.stg-box{
  font-family:var(--sans); text-align:center; cursor:pointer;
  background:#f5f4ee; border:1.5px solid var(--line); border-radius:14px;
  padding:14px 16px; min-width:120px; display:flex; flex-direction:column; gap:5px;
  transition:border-color .15s, background .15s, transform .15s;
}
.stg-box.guard{ border-color:var(--terra); }
.stg-box:hover{ transform:translateY(-2px); }
.stg-box.sel{ background:var(--stage); border-color:var(--ink-soft); box-shadow:0 6px 18px -12px rgba(40,36,28,.5); }
.stg-box.guard.sel{ border-color:var(--terra); }
.stg-tag{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }
.stg-box.guard .stg-tag{ color:var(--terra); }
.stg-t{ font-size:.98rem; font-weight:600; letter-spacing:-.01em; color:var(--ink-soft); }
.stg-arrow{ color:var(--muted-2); font-size:1rem; flex-shrink:0; }
.stg-detail{ border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:#f5f4ee; min-height:130px; }
.stg-lb{ display:inline-block; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); background:#e7e5da; padding:3px 9px; border-radius:999px; margin-bottom:10px; }
.stg-lb.guard{ color:var(--terra); background:var(--danger-bg); }
.stg-detail h5{ font-size:1.06rem; font-weight:600; letter-spacing:-.015em; color:var(--ink); }
.stg-detail p{ margin-top:8px; font-size:.92rem; line-height:1.55; color:var(--muted); max-width:66ch; }

/* ============================================================
   Lab: eval harness
   ============================================================ */
.eh{ height:100%; width:100%; display:flex; flex-direction:column; }
.eh-top{ display:flex; align-items:center; gap:16px; flex-shrink:0; flex-wrap:wrap; }
.eh-run{
  font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--stage);
  background:var(--ink-soft); border:none; border-radius:10px; padding:11px 20px; cursor:pointer;
}
.eh-run:hover{ background:var(--ink); }
.eh-run:disabled{ opacity:.5; cursor:default; }
.eh-note{ font-family:var(--mono); font-size:.72rem; color:var(--muted-2); flex:1; }
.eh-score{ text-align:right; }
.eh-pct{ font-size:2rem; font-weight:600; letter-spacing:-.03em; color:var(--ink); line-height:1; }
.eh-pct-lb{ font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-top:3px; }
.eh-legend{ display:flex; gap:16px; margin:12px 0 14px; flex-shrink:0; }
.eh-legend span{ display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--muted); }
.eh-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.eh-legend i.ok{ background:var(--ok); } .eh-legend i.danger{ background:var(--danger); } .eh-legend i.warn{ background:#b58a3c; }
.eh-tbl-wrap{ flex:1; min-height:0; overflow-y:auto; border:1px solid var(--line); border-radius:12px; }
.eh-tbl{ width:100%; border-collapse:collapse; font-size:.86rem; }
.eh-tbl th{ text-align:left; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); font-weight:400; padding:11px 14px; background:#f5f4ee; position:sticky; top:0; }
.eh-tbl td{ padding:11px 14px; border-top:1px solid var(--line-2); color:var(--muted); vertical-align:middle; }
.eh-tbl td.nm{ color:var(--ink-soft); font-weight:500; }
.eh-tbl td.exp{ font-size:.8rem; }
.eh-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px; }
.eh-badge.pend{ color:var(--muted-2); background:#e7e5da; }
.eh-badge.run{ color:var(--muted); background:#e7e5da; }
.eh-badge.ok{ color:var(--ok); background:var(--ok-bg); }
.eh-badge.danger{ color:var(--danger); background:var(--danger-bg); }
.eh-badge.warn{ color:#8a6420; background:#efe6d2; }
.eh-badge.type-atk{ color:var(--danger); background:var(--danger-bg); }
.eh-badge.type-leg{ color:var(--ok); background:var(--ok-bg); }

/* imagem real dentro do slide: cabe no 16:9, legenda embaixo */
.deck-panel .b-image{ height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; }
.deck-panel .b-image img{ width:auto; max-width:100%; max-height:74%; margin:0; object-fit:contain; }
.deck-panel .b-image figcaption{ text-align:center; max-width:70ch; }

/* ============================================================
   Bloco: código (a apostila é "diagrama ↔ código")
   ============================================================ */
.b-code .code-label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:10px; }
.b-code pre{
  background:#f5f4ee; border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; overflow-x:auto;
}
.b-code code{ font-family:var(--mono); font-size:.82rem; line-height:1.62; color:var(--ink-soft); white-space:pre; display:block; }
/* dentro do slide: centraliza e rola se passar */
.deck-panel .b-code{ height:100%; display:flex; flex-direction:column; justify-content:center; gap:0; }
.deck-panel .b-code pre{ max-height:82%; overflow:auto; }

/* Bloco: embed (app interativo buildado num iframe) */
.b-embed .lab-mount{ display:block; }
.embed-frame{ width:100%; height:100%; min-height:460px; border:1px solid var(--line); border-radius:14px; background:#fff; display:block; }
.deck-panel .b-embed .lab-mount{ height:min(60vh,470px); }
.deck-panel .b-embed .embed-frame{ min-height:0; }

/* Remissão inline dentro de um bloco (<a href="#/verbete">) — o azul
   padrão do browser quebrava o creme; herda o peso do texto em volta. */
.b-prose a, .b-analogy a, .c-body a, .step-text p a, .b-quote a{
  color:var(--terra-ink);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--terra) 45%, transparent);
  padding-bottom:.5px;
  transition:border-color .15s ease, color .15s ease;
}
.b-prose a:hover, .b-analogy a:hover, .c-body a:hover, .step-text p a:hover, .b-quote a:hover{
  color:var(--terra);
  border-bottom-color:var(--terra);
}
.col.future .c-body a{ color:var(--terra); border-bottom-color:color-mix(in srgb, var(--terra) 55%, transparent); }

/* ============================================================
   v3 — laboratório embutido em tela cheia (server/, /atendimento/)
   ============================================================ */
.deck-panel .b-embed.full{ height:100%; display:flex; flex-direction:column; padding:14px 16px; }
.deck-panel .b-embed.full .lab-head{ margin-bottom:8px; flex-shrink:0; }
.deck-panel .b-embed.full .lab-head h3{ font-size:clamp(15px,1.4vw,19px); }
.deck-panel .b-embed.full .lab-head .intro{ font-size:.82rem; margin-top:2px; }
.deck-panel .b-embed.full .lab-mount{ flex:1; height:auto; min-height:0; }
.deck-panel .b-embed.full .embed-frame{ height:100%; }
.cfg-backend{ font-size:.86rem; margin-bottom:10px; }
.cfg-backend code, .lab-needkey code{ font-family:var(--mono); font-size:.8em; background:#e3e1d6; padding:1px 5px; border-radius:5px; }
.embed-open{ font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--terra-ink); margin-left:10px; text-decoration:none; vertical-align:middle; }
.embed-open:hover{ text-decoration:underline; }