/* Scriblive buttons: how a button looks, ONE file for the site's pages, the app and the worker's own pages (Alex,
   2026-11-02); the app's look, which families see most. Size and layout (width, padding, font size) stay with each
   place. .btn = coral, .btn.plum = dark, .btn.ghost = white with a thin line; the site's .button is the dark one. */
.btn, .button { border: 0; border-radius: 999px; font-family: var(--body); font-weight: 650; text-decoration: none; cursor: pointer;
  background: var(--coral); color: var(--white); transition: transform .15s, box-shadow .15s, filter .15s; }
.btn.plum, .button { background: var(--plum); color: var(--white); }
.btn.ghost, .button.ghost { background: var(--white); color: var(--plum); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn[disabled], .button:disabled { opacity: .45; cursor: default; }
@media (hover: hover) {
  .btn:not([disabled]):hover, .button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(53,43,62,.16); filter: brightness(1.05); color: var(--white); }
  .btn.ghost:not([disabled]):hover, .button.ghost:not(:disabled):hover { box-shadow: inset 0 0 0 1.5px var(--coral), 0 8px 20px rgba(53,43,62,.10); filter: none; color: var(--plum); }
}
.btn:not([disabled]):active, .button:not(:disabled):active { transform: translateY(0) scale(.97); }