/* BUSY — a button that is working: the design library's block, as it is at `design-v1.2.0` (app/css/blocks-more.css
   § BUSY, its settings from app/css/theme.css, and its still ring under reduced motion from app/css/blocks.css), so every
   page here and its staff screens draw it alike. busy.js beside this file is the library's, copied unchanged. A library
   release reaches these pages only by copying again. */
:root {
  --pe-busy-size: 1em;           /* the ring */
  --pe-busy-line: 2px;           /* its line */
  --pe-busy-speed: .7s;          /* one turn */
  --pe-busy-dim: .8;             /* the busy button, a little faded */
}

/* ---------- BUSY: a button that is working ----------
   The moment a button that does work is pressed it shows a turning ring before its label and takes no second press until
   the answer comes (busy.js sets aria-busy="true" on it). Any button: .btn, or a plain <button>. Under reduced motion the
   ring stands still (blocks.css) — the faded button and the ring still say it is working. */
button[aria-busy="true"], .btn[aria-busy="true"] { cursor: progress; pointer-events: none; opacity: var(--pe-busy-dim); }
button[aria-busy="true"]::before, .btn[aria-busy="true"]::before { content: ""; display: inline-block; flex: none; width: var(--pe-busy-size); height: var(--pe-busy-size); margin-right: .45em;
  vertical-align: -.15em; border: var(--pe-busy-line) solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: pe-busy-turn var(--pe-busy-speed) linear infinite; }
@keyframes pe-busy-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button[aria-busy="true"]::before, .btn[aria-busy="true"]::before { animation: none !important; } }