/* Hotbar das páginas internas (js/hotbar.js). Usa os tokens do tema da página, com o codex como reserva. */
.hotbar-site {
  position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 60; display: grid; justify-items: center; gap: 6px; pointer-events: none;
}
.hb-nome {
  font: 700 13px var(--font-mono, "Space Mono", monospace); color: var(--bone, #ede6d8); text-shadow: 2px 2px 0 #000;
  min-height: 1.3em; white-space: nowrap; opacity: 0; transition: opacity .3s;
}
.hb-nome.show { opacity: 1; }
.hb-barra {
  pointer-events: auto; display: flex; gap: 2px; padding: 2px;
  background: color-mix(in srgb, var(--ink, #17121c) 86%, transparent);
  border: 2px solid #000; outline: 2px solid var(--border-outline, #4a4058);
}
.hb-slot {
  position: relative; width: clamp(32px, 9vw, 44px); aspect-ratio: 1; display: grid; place-items: center;
  border: 2px solid var(--line-soft, #3a3145); background: var(--panel, #1d1725); text-decoration: none;
}
.hb-slot img { width: 62%; image-rendering: pixelated; }
.hb-n { position: absolute; right: 2px; bottom: -1px; font: 10px var(--font-mono, monospace); color: var(--text-muted, #9a8ea6); }
.hb-slot:hover { border-color: var(--verdigris, #3e8c7a); }
.hb-slot:focus-visible { outline: 2px solid var(--verdigris, #3e8c7a); outline-offset: 1px; }
.hb-slot.is-aqui { border-color: var(--bone, #ede6d8); }
.hb-rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* espaço no fim da página pra barra não tampar o rodapé */
body:has(.hotbar-site) { padding-bottom: 76px; }
@media print { .hotbar-site { display: none; } }
@media (prefers-reduced-motion: reduce) { .hb-nome { transition: none; } }