/* Runekin · css/buttons.css — botões genéricos legados (.btn → Broadsheet).
   Fatia do antigo style.css (linhas 427–449); a ORDEM dos <link> em layout.jsx preserva a cascata. */

/* ============ GENERIC BUTTONS (legacy .btn → Broadsheet) ============ */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 14px;
  font: 400 15px var(--display); letter-spacing: 1px; text-transform: uppercase; line-height: 1;
  color: var(--ink); --face: #fff; --sh: transparent; --sx: 4px; --sy: 4px; --clip: var(--e-chip);
  transition: transform .08s ease; white-space: nowrap;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--face); clip-path: var(--clip); }
.btn::after  { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--sh); clip-path: var(--clip); transform: translate(var(--sx), var(--sy)); transition: transform .08s ease; }
.btn:active:not([disabled]) { transform: translate(var(--sx), var(--sy)); }
.btn:active:not([disabled])::after { transform: none; }
.btn.ghost { --face: transparent; border: 3px solid currentColor; }
.btn.ghost::before, .btn.ghost::after { clip-path: none; }
.btn.primary { --face: var(--ink); color: #fff; --clip: var(--e-btn-a); --sh: #fff; font-size: 20px; letter-spacing: 2px; min-height: 48px; padding: 10px 18px; }
.btn.block { display: flex; width: 100%; margin-top: 12px; }
.btn[disabled] { opacity: .4; }
/* on ink pages the default button is white; on paper pages it is ink */
body[data-screen="grimorio"] .btn:not(.primary):not(.ghost), body[data-screen="altar"] .btn:not(.primary):not(.ghost), body[data-screen="instrucoes"] .btn:not(.primary):not(.ghost) { --face: var(--ink); color: #fff; }
body[data-screen="dex"] .btn.primary, body[data-screen="creditos"] .btn.primary, body[data-screen="scanner"] .btn.primary { --face: #fff; color: var(--ink); --sh: var(--c1); }
.btn .rg-ic { width: 1em; height: 1em; }