/* The one loading language every bluprint page uses (frontend/README.md §11).
 *
 * One spinner, one place. A page shows at most one spinner at a time, and it
 * is always in the same place: the wait centre (frontend/shared/wait-center.js),
 * a pill fixed at the bottom centre of the page while the page can be used, or
 * a card centred over the page (block mode) while it cannot. Nothing else draws
 * a spinner: a button that is working is disabled and says so ("Saving…"), a
 * list that is loading says so in muted text where its rows will be.
 *
 *   .bp-wait-center   the centre: __pill (bottom centre) or __block (centred card),
 *                     one spinner, the shown entry's label, "+N" for the other
 *                     entries, a bar for a counted job, Retry on a failure that has one.
 *   .bp-spinner       the arc, 14px (.is-lg 24px). Drawn only by the centre and by a
 *                     page's static boot card (.bp-loading.is-block in its HTML).
 *   .bp-loading       muted one-line placeholder text in place of content that is
 *                     loading. .is-block centres it as a whole area's placeholder.
 *   .bp-progress      determinate only, for a job that reports real done/total: a 4px
 *                     track with one child fill (<i>) whose width the page sets.
 *
 * Colours are literal on purpose: the arc is the product accent
 * (Information.json style.uiTheme.accent) on every page, whatever that page's own palette.
 */

.bp-spinner {
  display: inline-block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: calc(14px * var(--ui-density-scale, 1));
  height: calc(14px * var(--ui-density-scale, 1));
  border: 2px solid rgba(148, 163, 184, 0.28);
  border-top-color: #7c6af7;
  border-radius: 50%;
  vertical-align: -2px;
  animation: bp-spin 0.8s linear infinite;
}
.bp-spinner.is-lg {
  width: calc(24px * var(--ui-density-scale, 1));
  height: calc(24px * var(--ui-density-scale, 1));
}
.bp-spinner[hidden] { display: none; }

.bp-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9aa7b8;
  font: var(--fw-medium, 500) var(--fs-xs, 12px)/var(--lh-tight, 1.3) var(--font-sans, system-ui, sans-serif);
}
.bp-loading.is-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 72px;
  padding: 16px;
  box-sizing: border-box;
  text-align: center;
}
.bp-loading[hidden] { display: none; }

.bp-progress {
  position: relative;
  display: block;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.18);
}
.bp-progress > * {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #7c6af7;
  transition: width 0.2s ease;
}
.bp-progress[hidden] { display: none; }

/* The wait centre. The root is a fixed, click-through strip at the bottom of the
   page; only the pill, the card and their Retry button take the pointer. */
.bp-wait-center {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
}
.bp-wait-center[hidden] { display: none; }
.bp-wait-center__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(480px, 100%);
  height: 28px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid #3d414d;
  border-radius: 999px;
  background: #23262ded;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  color: #d0c6ff;
  font: 500 11px/1.2 var(--font-sans, system-ui, sans-serif);
  white-space: nowrap;
  pointer-events: auto;
}
.bp-wait-center__pill[hidden] { display: none; }
.bp-wait-center__pill .bp-wait-center__text { overflow: hidden; text-overflow: ellipsis; }
.bp-wait-center__pill .bp-progress { flex: 0 0 72px; }
.bp-wait-center__more {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(124, 106, 247, 0.22);
  color: #d0c6ff;
  font-size: 10px;
}
.bp-wait-center__more[hidden] { display: none; }
.bp-wait-center__block {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  min-height: 0;
  max-width: min(360px, calc(100% - 32px));
  padding: 9px 11px;
  border: 1px solid #3d414d;
  border-radius: 10px;
  background: #1d2028f0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  color: #bbc2cf;
  font: 500 11px/1.4 var(--font-sans, system-ui, sans-serif);
  pointer-events: none;
}
.bp-wait-center__block[hidden] { display: none; }
.bp-wait-center[data-state="failed"] .bp-wait-center__pill,
.bp-wait-center[data-state="failed"] .bp-wait-center__block { color: #fbbf24; border-color: #7a5a1f; }
.bp-wait-center__retry {
  flex: 0 0 auto;
  margin: 0;
  padding: 2px 10px;
  border: 1px solid #4b5563;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}
.bp-wait-center__retry:is(:hover, :focus-visible) { border-color: #8c7df4; outline: none; }
.bp-wait-center__retry[hidden] { display: none; }

@keyframes bp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bp-spinner { animation-duration: 2.4s; }
  .bp-progress > * { transition: none; }
}