/* ════════════════════════════════════════════════════════════
   BUTTON CHIP — seletor compacto com status · FONTE ÚNICA
   Consumido por docs/componentes/button-chip.html E por organismos
   (ex.: Panel Browse) — uma só implementação, sem fork.

   Fonte: Figma "Panel · Browse" (node 9156:6787 · Default / Hover /
   Select / Disable). Bloco 104×64: número (700 16/18) no topo + chip
   de disponibilidade colado embaixo (justify-between). Cantos retos.
   ── Default : fundo Concrete 100 + borda 1px ink (Concrete 500)
   ── Hover   : fundo Concrete 200 + borda Concrete 300
   ── Select  : fundo MINT (Green 300), SEM borda + chip Dark
   ── Disable : fundo Concrete 100 + borda Concrete 300 + opacity 30
   ════════════════════════════════════════════════════════════ */

.hm-bchip {
  -webkit-user-select: none; user-select: none;   /* B15: rótulo de controle é comando, não texto pra selecionar */
  box-sizing: border-box;
  width: 104px; min-height: 64px;
  background: var(--hm-bg-soft);
  border: 1px solid var(--hm-fg);                    /* borda 1px ink (Default) */
  display: flex; flex-direction: column; gap: 4px; padding: 8px;
  justify-content: space-between; align-items: center; cursor: pointer;
  font-family: var(--hm-font-sans);
  color: var(--hm-fg);                               /* o <button> não herda cor — fixa no ink */
  transition: background-color var(--hm-dur-micro) var(--hm-ease), border-color var(--hm-dur-micro) var(--hm-ease);
}
.hm-bchip__num { font: 700 16px/18px var(--hm-font-sans); color: var(--hm-fg); text-align: center; font-variant-numeric: tabular-nums; }
.hm-bchip__tag { align-self: stretch; font: 600 12px/14px var(--hm-font-sans); text-align: center; padding: 1px 4px; background: var(--hm-bg-strong); color: var(--hm-fg); white-space: nowrap; }

/* hover: fundo Concrete 200 + borda Concrete 300 */
/* Hover honesto (B5): efeito de hover só onde hover existe de verdade —
   no toque, o dedo não deixa o estado aceso depois de sair. */
@media (hover: hover) and (pointer: fine) {
  .hm-bchip:hover { background: var(--hm-bg-alt); border-color: var(--hm-border-strong); }
}
.hm-bchip:active:not([aria-disabled="true"]):not([aria-pressed="true"]) { background: var(--hm-bg-strong); }  /* pressão (A3) */
.hm-bchip[aria-pressed="true"]:active:not([aria-disabled="true"]) { background-image: linear-gradient(var(--hm-hover), var(--hm-hover)); }

/* selecionado: MINT (Green 300), SEM borda + chip Dark */
.hm-bchip[aria-pressed="true"] { background: var(--hm-accent); border-color: transparent; }
.hm-bchip[aria-pressed="true"] .hm-bchip__tag { background: var(--hm-fg); color: var(--hm-fg-on-dark); }

/* indisponível: fundo Concrete 100 + borda Concrete 300 + opacity 30 */
.hm-bchip[aria-disabled="true"] { background: var(--hm-bg-soft); border-color: var(--hm-border-strong); opacity: .30; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .hm-bchip[aria-disabled="true"]:hover { background: var(--hm-bg-soft); border-color: var(--hm-border-strong); }
}

/* foco por teclado: anel ink */
.hm-bchip:focus-visible { outline: 2px solid var(--hm-fg); outline-offset: var(--hm-space-2); }

/* grade do seletor de andares (Panel Browse) */
.hm-bchip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hm-bchip-grid .hm-bchip { width: 100%; }