/* Blocaria · componentes compartilhados (brand/foundation). Estado: proposta em avaliação.
 * Depende de ../tokens/tokens.css. Prefixo bl- para não colidir com o CSS das frentes.
 * Componentes não usam física: a física é da marca (cena .h2), não da interface.
 */

/* ---------- base */
.bl{font:400 var(--t-texto)/1.5 var(--f-texto);color:var(--grafite);background:var(--giz)}
.bl :focus-visible{outline:var(--foco);outline-offset:2px;box-shadow:var(--foco-halo)}
.bl-mono{font:500 var(--t-tecnico)/1.4 var(--f-mono);letter-spacing:.01em}
.bl-display{font:800 var(--t-display)/.95 var(--f-display);letter-spacing:-.045em}
.bl-display .leve,.bl-titulo .leve{font-weight:300}
.bl-titulo{font:800 var(--t-titulo)/1.05 var(--f-display);letter-spacing:-.03em}
.bl-assinatura{display:block;color:var(--principal);height:auto}

/* ---------- botões: um só principal por tela */
.bl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);min-height:var(--alvo-toque);padding:0 var(--e5);border-radius:var(--r-pilula);font:600 15px var(--f-texto);border:1.5px solid transparent;cursor:pointer;transition:background var(--transicao),border-color var(--transicao);text-decoration:none}
.bl-btn--principal{background:var(--principal);color:var(--giz)}
.bl-btn--principal:hover{background:color-mix(in srgb,var(--principal) 86%,#000)}
.bl-btn--secundario{background:transparent;color:var(--grafite);border-color:var(--grafite)}
.bl-btn--secundario:hover{background:var(--branco)}
.bl-btn--texto{background:none;color:var(--principal);padding:0 var(--e2);text-decoration:underline;text-underline-offset:3px}
.bl-btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- busca */
.bl-busca{display:flex;align-items:center;gap:var(--e2);background:var(--branco);border:1.5px solid var(--grafite);border-radius:var(--r-pilula);padding:4px 4px 4px var(--e4);min-height:48px}
.bl-busca input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 16px var(--f-texto);color:var(--grafite)}
.bl-busca:focus-within{outline:var(--foco);outline-offset:2px;box-shadow:var(--foco-halo)}

/* ---------- formato: só formatos que existem; os outros aparecem como "em produção" */
.bl-fmt{display:inline-flex;align-items:center;gap:6px;font:500 var(--t-tecnico) var(--f-mono);padding:3px 8px;border-radius:4px;border:1.5px solid var(--grafite);color:var(--grafite)}
.bl-fmt--pendente{border-style:dashed;color:var(--grafite-suave);border-color:var(--grafite-suave)}

/* ---------- seletor de tipo (radio group) */
.bl-tipos{display:flex;flex-wrap:wrap;gap:6px}
.bl-tipos button{min-height:40px;padding:4px 10px;border:1.5px solid var(--grafite);border-radius:8px;background:var(--branco);font:500 13px/1.15 var(--f-texto);display:grid;text-align:left;cursor:pointer}
.bl-tipos button small{font:500 11px var(--f-mono);color:var(--grafite-suave)}
.bl-tipos button[aria-checked=true]{background:var(--principal);border-color:var(--principal);color:var(--giz)}
.bl-tipos button[aria-checked=true] small{color:color-mix(in srgb,var(--giz) 75%,transparent)}

/* ---------- selos */
.bl-novo{display:inline-block;background:var(--ambar);color:var(--grafite);border-radius:4px;padding:2px 8px;font:600 12px var(--f-texto)}
.bl-ilustracao{display:inline-block;background:color-mix(in srgb,var(--ambar) 80%,transparent);color:var(--grafite);border-radius:4px;padding:2px 6px;font:500 11px var(--f-mono)}
.bl-estado{display:inline-block;font:500 11px var(--f-mono);padding:2px 8px;border-radius:var(--r-pilula);border:1px solid var(--grafite-suave);color:var(--grafite);white-space:nowrap}
.bl-estado--estabelecido{background:var(--grafite);color:var(--giz);border-color:var(--grafite)}
.bl-estado--proposta{border-color:var(--ambar);background:color-mix(in srgb,var(--ambar) 18%,transparent)}
.bl-estado--exemplo{border-style:dashed}
.bl-estado--desenvolver{color:var(--grafite-suave)}

/* ---------- cartão de resultado: nome e tipos; código só na ficha */
.bl-cartao{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:var(--e3);align-items:center;padding:var(--e3);background:var(--branco);border-radius:var(--r-cartao);border:1px solid var(--pedra)}
.bl-cartao .fig{width:72px;height:72px;background:var(--giz);border-radius:4px;display:grid;place-items:center;overflow:hidden}
.bl-cartao .fig img{width:100%;height:100%;object-fit:contain}
.bl-cartao h4{margin:0;font:600 15px/1.25 var(--f-texto)}
.bl-cartao p{margin:2px 0 0;color:var(--grafite-suave);font-size:var(--t-meta)}

/* ---------- ficha: única peça com linha de chão e código */
.bl-ficha{background:var(--branco);border-radius:var(--r-cartao);border:1px solid var(--pedra);overflow:hidden}
.bl-ficha .fig{background:var(--giz);border-bottom:2px solid var(--grafite);padding:var(--e4) var(--e4) 0;display:flex;align-items:flex-end;justify-content:center;min-height:150px}
.bl-ficha .fig>*{flex-shrink:0}
.bl-ficha .pad{padding:var(--e4);display:grid;gap:var(--e3)}
.bl-ficha .cod{font:500 var(--t-tecnico) var(--f-mono);color:var(--grafite-suave)}

/* ---------- régua de tipos (ver regua.js) */
.bl-regua{display:block;max-width:100%;height:auto;overflow:visible}
.bl-regua rect{fill:none;stroke:var(--grafite);stroke-width:1.5}
.bl-regua rect.on{fill:var(--principal);stroke:var(--principal)}
.bl-regua text{font:500 11px var(--f-mono);fill:var(--grafite-suave);text-anchor:middle}
.bl-regua text.on{fill:var(--principal);font-weight:700}
.bl-regua text.m{font-size:10px}
.bl-regua .chao{stroke:var(--grafite);stroke-width:2}
.bl-regua-lista{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:6px 10px;align-items:center;font:500 12.5px var(--f-mono)}
.bl-regua-lista div{display:contents}
.bl-regua-lista .bar{display:block;min-width:0}
.bl-regua-lista i{display:block;height:12px;border:1.5px solid var(--grafite)}
.bl-regua-lista .on{color:var(--principal);font-weight:700}
.bl-regua-lista .on i{background:var(--principal);border-color:var(--principal)}
.bl-regua-lista em{font-style:normal;color:var(--grafite-suave);text-align:right}

/* ---------- cena de marca .h2 (o motor em ../objetos/motor.js procura .h2, .campo e [data-a=rep])
 * O campo de cor é um corpo físico: os objetos caem sobre ele e ao lado. Só em home e estados de marca. */
.h2{position:relative;height:clamp(560px,86vh,880px);background:var(--giz);border-radius:var(--r-cartao);overflow:hidden;cursor:crosshair;container-type:inline-size}
.h2 canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:3}
.h2 .bar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:18px;padding:16px 22px;z-index:4;font:500 14px var(--f-texto);color:var(--grafite)}
.h2 .bar .ent{margin-left:auto;font:600 14px var(--f-texto);padding:8px 14px;border-radius:var(--r-pilula);color:var(--giz);background:var(--principal)}
.h2 .campo{position:absolute;left:0;bottom:0;width:56%;height:58%;padding:28px 30px 30px;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;z-index:2;color:var(--giz);background:var(--principal)}
.h2 .campo .bl-assinatura{color:var(--giz);width:100%;max-width:640px}
.h2 .campo p{margin:0;font:400 18px/1.45 var(--f-texto);max-width:40ch}
.h2 .campo .bl-busca{border-color:transparent;max-width:560px}
.h2 .novo{position:absolute;right:22px;top:108px;z-index:4;border-radius:6px;padding:10px 14px;font:600 14px var(--f-texto);max-width:260px;background:var(--ambar);color:var(--grafite)}
.h2 .novo small{display:block;font:500 11px var(--f-mono)}
.h2 .ctl{position:absolute;right:22px;top:64px;z-index:4;display:flex;gap:6px}
.h2 .ctl button{font:500 12px var(--f-mono);border-radius:var(--r-pilula);padding:6px 12px;min-height:32px;cursor:pointer;border:1.5px solid var(--grafite);background:#ffffffc0;color:var(--grafite)}
@container (max-width:720px){
  .h2 .campo{width:100%;height:60%;padding:22px 18px}
  .h2 .bar span:not(.ent){display:none}
  .h2 .novo{top:auto;bottom:calc(60% + 14px);right:14px}
  .h2 .ctl{right:14px}
}