/* =========================================================================
   Feeds (/feeds): extraído do rascunho aprovado.
   Base (tokens, chips, blocos, tabelas .tbl/.tbl-stack, .ext, .note) em /assets/site.css.
   ========================================================================= */
/* ---- Feeds ---- */
.feeds { display: grid; gap: .6rem; }
.feed { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.feed .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #fff1e6; color: #b24a00; }
.feed .ic.json { background: var(--brand-50); color: var(--brand-2); }
.feed .ic svg { width: 18px; height: 18px; }
.feed b { display: block; color: var(--ink); font-size: var(--fs-sm); }
.feed code { display: block; font-family: var(--font-mono); font-size: .74rem; color: var(--muted); overflow-wrap: anywhere; line-height: 1.5; }
@media (max-width: 480px) { .feed { grid-template-columns: minmax(0, 1fr) auto; } .feed .ic { display: none; } }
:root[data-theme="dark"] .feed .ic:not(.json) { background: rgba(255,140,50,.14); color: #ffb27a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feed .ic:not(.json) { background: rgba(255,140,50,.14); color: #ffb27a; } }
.feed .ptile { --s: 38px; border-radius: 11px; }
/* ---- O que era style="" no rascunho (a CSP não aceita atributo style) ---- */
.feeds-wrap { max-width: 900px; }
.h3s-gap { margin-top: 2rem; }
.feeds-note { margin-top: 1.4rem; }
/* "(veja as fontes)" numa peça só: o link é inline-flex e o "(" ficava sozinho no fim da linha, no celular */
.feeds-note .paren { white-space: nowrap; }
.feed-t { min-width: 0; }
/* Nome + "para que serve" (só nos dois gerais): na mesma linha no computador, a legenda desce no celular */
.feed-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45rem; }
.feed-h b { display: inline; }
.feed-use { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
/* Item apontado pela âncora (#feed-rss, #feed-json, #feed-<slug>: "RSS do produto" e "Assinar via RSS"): borda e anel
   roxos. Ele para no terço de cima da tela, com os vizinhos à vista (o scroll-padding-top do html já desconta o
   cabeçalho; colado nele, o item de cima ficava cortado atrás do cabeçalho) */
.feed { transition: border-color var(--t), box-shadow var(--t); scroll-margin-top: 20vh; scroll-margin-bottom: 1.5rem; }
.feed:target { border-color: var(--brand-300); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
/* No celular o rascunho some com o ícone (.ic), mas o logo do produto ficava e desmontava a grade (logo por cima do
   texto, "Copiar" solto embaixo): some também, como o ícone */
@media (max-width: 480px) { .feed > .ptile { display: none; } }