/* BioSphere · plataforma · componentes compostos (U3, 29/09/2026), trazidos pelo W1 para ui/composites.css.
   Carrega depois de tokens.css e components/bundle.css. Prefixo bs-.
   Toda cor, raio, espaço, sombra e desfoque vem de token. Os tamanhos de fonte repetem
   os estilos tipográficos de tokens.json (o tokens.css não exporta variáveis de tipo),
   com o nome do estilo no comentário. Os brancos translúcidos do vidro repetem a receita
   de .bs-stat--glass e .bs-go--glass do bundle, sem valores novos. */
   Montados por ui/composites.js (BSApp.ui.*). Mudanças do W1 no fim do arquivo, marcadas "W1". */

/* ================= bs-mc · card de métrica composto =================
   Vive dentro de .bs-card (qualquer material). Andares: cabeça, herói, instrumento, fatos, próxima data. */
.bs-mc__hero { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; min-width: 0; }
.bs-mc__unit { font-size: 13px; line-height: 1.45; color: var(--ink-muted); padding-bottom: var(--space-1); } /* body-s */
.bs-mc__hero .bs-tag, .bs-mc__hero .bs-delta { margin-bottom: var(--space-1); }
.bs-mc__read { margin: var(--space-2) 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-muted); max-width: 34ch; } /* body-s */
.bs-mc__read b { font-weight: 500; color: var(--ink); }
.bs-mc__inst { margin-top: var(--space-5); min-width: 0; }
.bs-mc__inst + .bs-mc__inst { margin-top: var(--space-3); }
.bs-mc__facts { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: var(--space-2); }
.bs-mc__fact { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; min-height: var(--size-control-m); box-sizing: border-box; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); text-align: left; transition: background .3s cubic-bezier(.625, .05, 0, 1); }
.bs-card--raised .bs-mc__fact { background: var(--surface); }
button.bs-mc__fact:hover { background: var(--surface-strong); }
button.bs-mc__fact:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.bs-mc__fact small { font-size: 12px; line-height: 1.4; color: var(--ink-muted); } /* caption */
.bs-mc__fact b { font: 500 18px/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } /* data-m */
.bs-mc__fact b span { font: 400 12px/1 var(--font-sans); color: var(--ink-muted); margin-left: var(--space-1); }
.bs-mc__fact--alert b::before, .bs-mc__fact--ok b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.bs-mc__fact--alert b::before { background: var(--alert); }
.bs-mc__fact--ok b::before { background: var(--mint-strong); }
.bs-mc__next { margin-top: auto; padding-top: var(--space-5); }
.bs-mc__next .bs-cta { gap: var(--space-3); padding-left: var(--space-2); }
.bs-mc__next .bs-cta__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-mc__next .bs-cta__txt small { color: var(--ink-muted); }

/* Materiais de mídia: fatos e texto viram vidro sobre mesh, terra, night e image */
:is(.bs-card--mesh, .bs-card--terra, .bs-card--night, .bs-card--image) .bs-mc__unit,
:is(.bs-card--mesh, .bs-card--terra, .bs-card--night, .bs-card--image) .bs-mc__read { color: var(--on-media); opacity: .88; }
:is(.bs-card--mesh, .bs-card--terra, .bs-card--night, .bs-card--image) .bs-mc__read b { color: var(--on-media); }
:is(.bs-card--mesh, .bs-card--terra, .bs-card--night, .bs-card--image) .bs-mc__fact { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); color: var(--on-media); backdrop-filter: blur(var(--blur-glass)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%); }
:is(.bs-card--mesh, .bs-card--terra, .bs-card--night, .bs-card--image) .bs-mc__fact small,
:is(.bs-card--mesh, .bs-card--terra, .bs-card--night, .bs-card--image) .bs-mc__fact b span { color: var(--on-media); opacity: .88; }
:is(.bs-card--mesh, .bs-card--terra, .bs-card--night, .bs-card--image) button.bs-mc__fact:hover { background: rgba(255, 255, 255, .22); }
:is(.bs-card--mesh, .bs-card--terra, .bs-card--night, .bs-card--image) .bs-mc__fact--alert b::before { background: var(--orange); box-shadow: 0 0 0 2px var(--on-media); }
:is(.bs-card--mesh, .bs-card--terra, .bs-card--night, .bs-card--image) .bs-mc__fact--ok b::before { background: var(--mint); }
:is(.bs-card--mesh, .bs-card--terra, .bs-card--night, .bs-card--image) .bs-mc__next .bs-cta { background: rgba(255, 255, 255, .92); color: var(--night); }

/* Densidade por largura do bento */
.bs-span-3 .bs-mc__facts { grid-template-columns: 1fr 1fr; }
.bs-mc--dense .bs-mc__inst, .bs-mc--dense .bs-mc__facts { margin-top: var(--space-3); }

/* ================= bs-mc-group · trio de KPIs num só card =================
   Até 4 células com divisores; cada célula é um button.bs-kpi reduzido. Nunca sobre material de mídia. */
.bs-mc-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-5) 0; }
.bs-mc-group__cell { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-5); box-shadow: inset 1px 0 0 var(--line); text-align: left; min-width: 0; border-radius: 0; }
.bs-mc-group__cell:first-child { box-shadow: none; padding-left: 0; }
button.bs-mc-group__cell:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.bs-mc-group__lbl { font-size: 13px; line-height: 1.4; color: var(--ink-muted); } /* body-s */
.bs-mc-group__sub { font-size: 12px; line-height: 1.4; color: var(--ink-muted); } /* caption */
.bs-mc-group__sub b { font-weight: 500; color: var(--ink); }
@media (max-width: 600px) {
  .bs-mc-group__cell { box-shadow: none; padding: 0; }
  .bs-mc-group__cell + .bs-mc-group__cell { padding-top: var(--space-5); box-shadow: inset 0 1px 0 var(--line); }
}

/* ================= bs-pair · previsto × realizado (e meta) na mesma escala =================
   Duas barras finas; previsto tracejado em data-2, realizado em ink; meta é um tick. */
.bs-pair { display: grid; grid-template-columns: minmax(64px, auto) 1fr auto; align-items: center; gap: var(--space-2) var(--space-3); }
.bs-pair__lbl { font-size: 12px; color: var(--ink-muted); } /* caption */
.bs-pair__val { font: 400 13px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; } /* data-s */
.bs-pair__track { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--surface-strong); }
.bs-pair__bar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: var(--radius-pill); background: var(--data-1); }
.bs-pair__bar--plan { background: repeating-linear-gradient(135deg, var(--data-2) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--data-2); }
.bs-pair__bar--done::after { content: ""; position: absolute; right: -5px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 3px var(--mint-strong); }
.bs-pair--behind .bs-pair__bar--done::after { background: var(--orange); box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 3px var(--orange-ink); }
.bs-pair__goal { position: absolute; top: -4px; bottom: -4px; left: var(--g, 100%); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.bs-pair__gap { grid-column: 2 / -1; font-size: 12px; color: var(--ink-muted); } /* caption */
.bs-pair__gap b { font: 500 12px/1 var(--font-mono); color: var(--ink); }

/* ================= bs-buckets · contagem por prazo =================
   Atrasado · Hoje · 7 dias · Depois. Cada balde é filtro; o atrasado é o único em alerta. */
.bs-buckets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.bs-bucket { display: flex; flex-direction: column; gap: var(--space-1); min-height: 76px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); text-align: left; color: var(--ink); }
.bs-card--raised .bs-bucket { background: var(--surface); }
button.bs-bucket:hover { background: var(--surface-strong); }
button.bs-bucket:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.bs-bucket b { margin-top: auto; font: 400 28px/1 var(--font-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } /* data-l */
.bs-bucket small { font-size: 12px; line-height: 1.3; color: var(--ink-muted); } /* caption */
.bs-bucket--late { background: var(--orange-tint); }
.bs-bucket--late small { color: var(--orange-deep); }
.bs-bucket--late b::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; vertical-align: top; border-radius: 50%; background: var(--alert); }
.bs-bucket[aria-disabled="true"] b { color: var(--ink-faint); }
.bs-buckets__bar { grid-column: 1 / -1; display: flex; gap: 2px; height: 6px; }
.bs-buckets__bar i { flex: var(--n, 1) 1 0; border-radius: var(--radius-pill); background: var(--data-3); }
.bs-buckets__bar i:first-child { background: var(--alert); }
.bs-buckets__bar i:nth-child(2) { background: var(--data-1); }
.bs-buckets__bar i:nth-child(3) { background: var(--data-2); }
:is(.bs-card--terra, .bs-card--night) .bs-bucket { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); color: var(--on-media); }
:is(.bs-card--terra, .bs-card--night) .bs-bucket small { color: var(--on-media); opacity: .88; }
:is(.bs-card--terra, .bs-card--night) .bs-bucket--late { background: rgba(255, 255, 255, .92); color: var(--night); }
:is(.bs-card--terra, .bs-card--night) .bs-bucket--late small { color: var(--orange-deep); opacity: 1; }
@media (max-width: 420px) { .bs-buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= bs-datechip · próxima data =================
   Bloco de calendário (mês + dia) com a frase ao lado. Entra no rodapé do card ou dentro de .bs-cta. */
.bs-datechip { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; text-align: left; }
.bs-datechip__cal { flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.bs-datechip__cal small { font: 500 10.5px/1 var(--font-sans); color: var(--ink-muted); } /* label */
.bs-datechip__cal b { font: 500 18px/1 var(--font-mono); color: var(--ink); } /* data-m */
.bs-datechip--soon .bs-datechip__cal { background: var(--mint); box-shadow: none; }
.bs-datechip--soon .bs-datechip__cal small, .bs-datechip--soon .bs-datechip__cal b { color: var(--on-mint); }
.bs-datechip--late .bs-datechip__cal { background: var(--orange-soft); box-shadow: none; }
.bs-datechip--late .bs-datechip__cal small, .bs-datechip--late .bs-datechip__cal b { color: var(--orange-deep); }
.bs-datechip__txt { font-size: 13px; line-height: 1.35; min-width: 0; } /* body-s */
.bs-datechip__txt small { display: block; font-size: 12px; color: var(--ink-muted); } /* caption */

/* ================= bs-entity · card de entidade (projeto, tecnologia, ativo, agente, parceiro) =================
   Cabeça com marca da entidade, uma posição (TRL, fase, status) e 3–5 fatos. Usa bs-mc__facts. */
.bs-entity { gap: 0; }
.bs-entity__head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.bs-entity__mark { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--surface-strong) var(--bs-img, none) center / cover; box-shadow: inset 0 0 0 1px var(--line); }
.bs-entity__mark .bs-orb { width: 44px; height: 44px; }
.bs-entity__id { font: 400 11px/1.4 var(--font-mono); color: var(--ink-muted); } /* code */
.bs-entity__title { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* title-s */
.bs-entity__head .bs-go { margin-left: auto; }
.bs-entity__pos { margin-top: var(--space-5); display: flex; align-items: center; gap: var(--space-3); }
.bs-entity__pos > [data-bs] { flex: 1; min-width: 0; }
.bs-entity__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
:is(.bs-card--image, .bs-card--mesh, .bs-card--terra, .bs-card--night) .bs-entity__id { color: var(--on-media); opacity: .8; }
:is(.bs-card--image, .bs-card--mesh, .bs-card--terra, .bs-card--night) .bs-entity__mark { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }

/* ================= bs-cellmeter · instrumento dentro de célula de tabela =================
   Régua ou barra de 72px com o número ao lado; para tabelas que precisam comparar linhas sem abrir cada uma. */
.bs-cellmeter { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } /* data-s */
.bs-cellmeter__track { position: relative; width: 72px; height: 6px; border-radius: var(--radius-pill); background: var(--surface-strong); flex: none; }
.bs-cellmeter__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: var(--radius-pill); background: var(--data-1); }
.bs-cellmeter--alert .bs-cellmeter__fill { background: var(--alert); }
.bs-cellmeter--ruler .bs-cellmeter__track { background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 9px); height: 10px; border-radius: 0; }
.bs-cellmeter--ruler .bs-cellmeter__fill { width: 10px; height: 10px; left: var(--p, 0%); margin-left: -5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 3px var(--mint-strong); }
.bs-cellmeter__goal { position: absolute; top: -3px; bottom: -3px; left: var(--g, 100%); width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }

@media (prefers-reduced-motion: reduce) {
  .bs-mc__fact, button.bs-mc__fact { transition: none; }
}

/* ================= W1 · ajustes para o protótipo =================
   Tudo em token. Não criar cor nova aqui: pedir ao W1. */
/* Fila em span-3: 2 × 2 baldes */
.bs-span-3 .bs-buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bs-span-3 .bs-bucket { min-height: 64px; }
.bs-span-3 .bs-bucket b { font-size: 22px; }
/* Fato sem permissão (U3 §3.3): mostra o rótulo e um cadeado, nunca o número */
.bs-mc__fact--lock b { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); font: 400 12px/1 var(--font-sans); }
.bs-mc__fact--lock b .bs-i { width: 14px; height: 14px; }
/* Estado parcial: herói normal + Tag outline "Parcial" (U3 §3.3) */
.bs-mc--parcial .bs-mc__hero .bs-tag--outline { box-shadow: inset 0 0 0 1px var(--line-strong); }
/* Card composto que é link inteiro (entidade em lista) */
a.bs-card { color: inherit; text-decoration: none; }
/* Cabeça de card composto: título pode quebrar; o ↗ fica no canto */
.bs-mc .bs-card__head { align-items: flex-start; }
.bs-mc .bs-card__title { flex: 1; }
/* Linhas de lista dentro de card composto */
.bs-mc__list { margin-top: var(--space-4); }
.bs-mc__list .bs-row { padding: 10px 12px; }
/* Data dentro do CTA do rodapé */
.bs-mc__next .bs-cta .bs-datechip__cal { width: 38px; height: 38px; }
:is(.bs-card--mesh, .bs-card--terra, .bs-card--night, .bs-card--image) .bs-datechip__txt small { color: inherit; opacity: .8; }
.bs-mc__next .bs-cta .bs-datechip__txt small { color: var(--ink-muted); opacity: 1; }
/* Duas linhas de par comparativo com legenda */
.bs-pair + .bs-pair { margin-top: var(--space-3); }
/* Leitura com link */
.bs-mc__read a, .bs-mc__read button.ap-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }