/* ==========================================================================
   PONTE COM A FERRAMENTA E PAINEL DE REFERÊNCIA
   --------------------------------------------------------------------------
   Os dois pontos de acesso ao COMPARTDISK e a camada em que uma referência
   citada no texto abre sobre a página, sem trocar de rota e sem mover a
   rolagem do registro em leitura.
   ========================================================================== */
/* ==========================================================================
   7. PONTE COM A FERRAMENTA — download do COMPARTDISK
   Dois pontos de acesso e nada mais: um botao discreto na barra fixa, sempre
   ao alcance, e um cartao ao pe da coluna, depois da leitura tecnica. Ambos
   usam os mesmos tokens da pagina; nao ha componente novo de marca.
   ========================================================================== */
.tb-dl{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  padding:6px 12px;border:1px solid var(--line-2);border-radius:9px;
  background:var(--surface);color:var(--text);
  font-size:13px;font-weight:600;letter-spacing:-0.012em;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.tb-dl:hover{background:var(--surface-2);border-color:var(--blue)}
.tb-dl:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tb-dl svg{width:15px;height:15px;flex-shrink:0;color:var(--blue)}

.xband{
  margin-top:56px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center;
}
/* cinza proprio, e nao --text-3/--text-4: em 11px este rotulo precisa de
   4.5:1 para passar no AA, e #6e6e73 entrega 5.07:1 sem sair da familia */
.xband-k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6e6e73}
.xband-h{font-size:17px;font-weight:650;letter-spacing:-0.021em;line-height:1.3;color:var(--text);margin:7px 0 8px}
.xband-d{font-size:13.5px;line-height:1.6;color:var(--text-2);max-width:62ch}
.xband-a{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:0}
.xbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  padding:10px 16px;border:1px solid var(--line-2);border-radius:11px;
  background:var(--surface);color:var(--text);
  font-size:13.5px;font-weight:600;letter-spacing:-0.012em;
  transition:background .15s,border-color .15s,color .15s;
}
.xbtn:hover{background:var(--surface-2);border-color:var(--text-4)}
.xbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.xbtn svg{width:15px;height:15px;flex-shrink:0}
.xbtn-p{background:var(--blue);border-color:var(--blue);color:#fff}
.xbtn-p:hover{background:var(--blue-2);border-color:var(--blue-2);color:#fff}

/* fallback sem JavaScript: a base e montada no navegador */
.nojs{padding:8px 0 24px}
.nojs h1{font-size:clamp(24px,3vw,32px);font-weight:650;letter-spacing:-0.028em;line-height:1.18}
.nojs p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--text-2);max-width:64ch}

/* ==========================================================================
   8. PAINEL DE REFERENCIA — consulta sem sair do topico
   Uma referencia citada no texto abre aqui, sobre a pagina, e o registro que
   estava sendo lido continua exatamente onde estava: mesma rolagem, mesmo
   ponto de leitura. Fechar devolve o foco ao link de origem.
   ========================================================================== */
.rdr{position:fixed;inset:0;z-index:200;pointer-events:none}
.rdr[hidden]{display:none}
.rdr.on{pointer-events:auto}
.rdr-scrim{
  position:absolute;inset:0;background:rgba(0,0,0,.28);
  opacity:0;transition:opacity .22s ease;
}
.rdr.on .rdr-scrim{opacity:1}
.rdr-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(560px,46vw);min-width:400px;
  display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line);
  box-shadow:-12px 0 44px rgba(0,0,0,.13);
  transform:translateX(101%);transition:transform .26s cubic-bezier(.32,.72,0,1);
}
.rdr.on .rdr-panel{transform:none}
.rdr-panel:focus{outline:none}
.rdr-head{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  padding:11px 14px;border-bottom:1px solid var(--line);
  background:rgba(251,251,253,.9);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
}
.rdr-id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.rdr-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6e6e73}
.rdr-title{
  font-size:14px;font-weight:600;letter-spacing:-0.016em;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rdr-btn{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:32px;height:32px;padding:0;cursor:pointer;
  border:1px solid var(--line-2);border-radius:9px;
  background:var(--surface);color:var(--text-2);
  transition:background .15s,color .15s,border-color .15s;
}
.rdr-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--text-4)}
.rdr-btn[hidden]{display:none}
.rdr-btn svg{width:15px;height:15px}
.rdr-open{
  flex-shrink:0;padding:6px 10px;border-radius:8px;
  font-size:12.5px;font-weight:600;color:var(--blue);white-space:nowrap;
  transition:background .15s;
}
.rdr-open:hover{background:var(--blue-tint)}
.rdr-btn:focus-visible,.rdr-open:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rdr-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:24px 20px 64px}
.rdr-body:focus{outline:none}
/* o mesmo registro, na medida do painel */
.rdr-body .rec h1{font-size:22px}
.rdr-body .rec .lede{font-size:15px;margin-top:11px}
.rdr-body .sec{margin-top:28px;padding-top:18px;scroll-margin-top:0}
.rdr-body .card-body .mdh{scroll-margin-top:0}

/* rolagem da pagina travada enquanto o painel esta aberto: a posicao de
   leitura e devolvida intacta no fechamento */
body.rdr-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden;padding-right:var(--sbw,0px)}
body.rdr-lock .tb{padding-right:var(--sbw,0px)}

@media(max-width:900px){
  /* tela estreita: folha inferior, com a mesma mecanica e o mesmo fechamento */
  .rdr-panel{
    top:auto;left:0;right:0;bottom:0;width:auto;min-width:0;height:min(88vh,100%);
    border-left:none;border-top:1px solid var(--line);border-radius:18px 18px 0 0;
    box-shadow:0 -10px 40px rgba(0,0,0,.18);
    transform:translateY(101%);
  }
  .rdr.on .rdr-panel{transform:none}
  .rdr-body{padding:20px 18px 56px}
}
@media(max-width:640px){
  .tb-dl .tb-dl-t{display:none}
  .tb-dl{padding:7px 9px;gap:0}
  .xband{grid-template-columns:minmax(0,1fr);gap:16px}
  /* rotulo longo quebra em vez de vazar: em tela estreita a coluna manda */
  .xbtn{white-space:normal;text-align:center}
}
@media print{
  .tb,.tb-dl,.browse,.tools,.crumb .back,.xband,.rdr{display:none!important}
  .page{padding-top:0}
  /* no papel não há rolagem: o croqui volta a caber inteiro na coluna */
  .cfig{overflow:visible}
  .cfig svg{min-width:0}
}