/* Busy state shared by every screen (busy.js). */
[data-busy] { cursor:progress; }
[data-busy="other"] { opacity:.55; }
[data-busy="visible"] { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
[data-busy="visible"]::before {
  content:""; flex:none; width:1em; height:1em; box-sizing:border-box;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:busy-spin .8s linear infinite;
}
/* Icon-only buttons have no room beside the icon: the spinner replaces it. */
[data-busy="visible"]:has(> svg:only-child) > svg { display:none; }
.busy-progress {
  position:fixed; inset:0 0 auto 0; z-index:1000; height:5px; overflow:hidden;
  background:color-mix(in srgb, var(--primary, #203b60) 25%, white); pointer-events:none;
  box-shadow:0 1px 3px #162a4633;
}
.busy-progress::before {
  content:""; position:absolute; inset:0 auto 0 0; width:40%;
  background:linear-gradient(90deg, var(--primary, #203b60) 70%, #d5b674);
  animation:busy-slide 1.2s ease-in-out infinite;
}
.busy-progress[hidden], .busy-pill[hidden] { display:none; }
/* A link shows the spinner inline, without changing the line it sits on. */
a[data-busy="visible"] { display:inline-flex; vertical-align:middle; }
.busy-pill {
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:1001;
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  background:var(--primary, #203b60); color:#fff; font-size:13px; font-weight:600;
  box-shadow:0 6px 20px #162a4640; pointer-events:none;
}
.busy-pill::before {
  content:""; width:1em; height:1em; box-sizing:border-box; border:2px solid currentColor;
  border-right-color:transparent; border-radius:50%; animation:busy-spin .8s linear infinite;
}
@keyframes busy-spin { to { transform:rotate(360deg); } }
@keyframes busy-slide { from { transform:translateX(-100%); } to { transform:translateX(290%); } }
@media (prefers-reduced-motion: reduce) {
  /* Still visibly working, without the motion. */
  [data-busy="visible"]::before { animation:none; border-right-color:currentColor; opacity:.6; }
  .busy-progress::before { animation:none; width:100%; opacity:.6; }
  .busy-pill::before { animation:none; border-right-color:currentColor; opacity:.6; }
}