/* ==========================================================================
   Ficha — página de documentação gerada a partir de um .md.
   Não é componente: este CSS não sai daqui. Prefixo fi-.
   Gerado por bin/indice.py; a fonte é o .md irmão.

   Dentro de .fi-doc o seletor de elemento é permitido — o conteúdo vem
   do conversor de Markdown, que não carimba classe em nada. É a mesma
   licença que o showroom já toma; nenhum componente depende disto.
   ========================================================================== */

/* ---------------------------------------------------------------- topo */
.fi-top{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule)}
.fi-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:15px 0}
.fi-back{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-2);transition:color .25s;white-space:nowrap}
.fi-back:hover{color:var(--accent)}
.fi-crumb{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--fg-muted);margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-top-act{display:flex;gap:10px;flex-wrap:wrap}
.fi-top-act a{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  font-family:var(--display);font-weight:700;border:1px solid var(--rule-2);
  border-radius:var(--radius-pill);padding:8px 15px;color:var(--fg-2);
  transition:border-color .3s,color .3s;white-space:nowrap}
.fi-top-act a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------------------------------------------------------------- cabeçalho */
.fi-head{padding:clamp(46px,7vh,78px) 0 clamp(26px,4vh,38px);border-bottom:1px solid var(--rule)}
.fi-kind{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  letter-spacing:.02em;color:var(--fg-muted)}
.fi-h1{font-family:var(--display);font-weight:700;font-size:clamp(27px,4vw,44px);
  letter-spacing:-.03em;line-height:1.08;color:var(--fg);margin-top:14px}
.fi-h1 em{font-style:italic;color:var(--accent)}
.fi-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.fi-chip{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:var(--radius-pill);padding:5px 11px;color:var(--fg-muted)}
.fi-chip--on{border-color:rgba(198,206,170,.34);color:var(--accent)}

/* ---------------------------------------------------------------- corpo */
.fi-main{padding:clamp(30px,5vh,52px) 0 clamp(64px,10vh,110px)}
.fi-doc{max-width:76ch}
.fi-doc>*:first-child{margin-top:0}
.fi-doc p,.fi-doc ul,.fi-doc ol{color:var(--fg-2);line-height:1.72;font-size:15.5px;margin:14px 0}
.fi-doc h2{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,26px);
  letter-spacing:-.02em;color:var(--fg);margin:52px 0 4px;padding-bottom:13px;
  border-bottom:1px solid var(--rule)}
.fi-doc h3{font-family:var(--display);font-weight:700;font-size:17.5px;letter-spacing:-.01em;
  color:var(--fg);margin:36px 0 2px}
.fi-doc h4{font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:.01em;
  color:var(--fg-2);margin:26px 0 2px}
.fi-doc strong{color:var(--fg);font-weight:600}
.fi-doc em{font-style:italic}
.fi-doc a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(198,206,170,.34);transition:text-decoration-color .25s}
.fi-doc a:hover{text-decoration-color:var(--accent)}
.fi-doc ul,.fi-doc ol{padding-left:20px}
.fi-doc li{margin:7px 0}
.fi-doc li::marker{color:var(--fg-muted)}
.fi-doc hr{border:0;border-top:1px solid var(--rule);margin:44px 0}
.fi-doc blockquote{margin:22px 0;padding:2px 0 2px 20px;border-left:2px solid var(--rule-2)}
.fi-doc blockquote p{color:var(--fg-muted);font-size:15px}
.fi-doc img{max-width:100%;height:auto;border-radius:var(--radius-media)}

/* ---------------------------------------------------------------- código */
.fi-doc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875em;
  background:rgba(255,255,255,.055);border:1px solid var(--rule);border-radius:4px;
  padding:1.5px 5px;color:var(--fg)}
.fi-doc pre{background:var(--dark-2,rgba(255,255,255,.03));border:1px solid var(--rule);
  padding:18px 20px;margin:20px 0;overflow-x:auto;border-radius:var(--radius-media)}
.fi-doc pre code{background:none;border:0;padding:0;font-size:13px;line-height:1.66;
  color:var(--fg-2);white-space:pre}

/* ---------------------------------------------------------------- tabelas
   A tabela é o formato de metade das fichas (padrão editorial, histórico,
   gotchas). Rola dentro do próprio invólucro: a página nunca rola lateral. */
.fi-tw{overflow-x:auto;margin:22px 0;border:1px solid var(--rule)}
.fi-doc table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
.fi-doc th,.fi-doc td{text-align:left;vertical-align:top;padding:12px 15px;
  border-bottom:1px solid var(--rule)}
.fi-doc th{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-muted);background:rgba(255,255,255,.028);
  white-space:nowrap}
.fi-doc td{color:var(--fg-2);line-height:1.6}
.fi-doc tr:last-child td{border-bottom:0}
.fi-doc td code,.fi-doc th code{white-space:nowrap}

/* ---------------------------------------------------------------- rodapé */
.fi-foot{border-top:1px solid var(--rule);padding:30px 0 46px;margin-top:clamp(50px,8vh,80px)}
.fi-foot p{font-size:12.5px;color:var(--fg-muted);line-height:1.7}
.fi-foot a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
.fi-foot a:hover{color:var(--accent)}

/* ---------------------------------------------------------------- mobile */
@media(max-width:760px){
  .fi-crumb{width:100%;order:3;margin-right:0}
  .fi-bar{gap:12px;padding:12px 0}
  .fi-doc p,.fi-doc ul,.fi-doc ol{font-size:15px}
  .fi-doc h2{margin-top:40px}
}