/* gd-busy-veil: the working state. Same glass vocabulary as the dock and the
   sheets, but it owns the whole screen, because its job is to cover the
   controls it is asking the guest not to press. */
gd-busy-veil { position: fixed; inset: 0; z-index: 40; display: flex;
  align-items: center; justify-content: center; padding: var(--inset-floating);
  /* A real scrim, keyed to the viewer's own surface. --dim-wash is the tile
     selection wash at .25 and reads as a smudge here: the gallery behind is
     photographs, which win every contrast fight they are allowed into. The
     wait has to be the only thing on screen or it is not a wait, it is a
     decoration on top of the controls it is asking nobody to press. */
  background: rgba(11, 12, 15, .82);
  backdrop-filter: blur(10px) saturate(.85);
  /* While it is working it exists to stop taps: nothing inside is reachable,
     and the veil itself swallows the ones aimed at what is behind it. */
  touch-action: none; -webkit-tap-highlight-color: transparent;
  animation: gd-bv-in var(--dur-quick, .2s) var(--ease-out, ease-out); }
@keyframes gd-bv-in { from { opacity: 0; } to { opacity: 1; } }

/* No backdrop-filter here, deliberately, though the dock and the sheets have
   one. A backdrop-filter inside an element that already has one re-samples the
   ORIGINAL page rather than its parent's result, so the card came out brighter
   than the scrim around it: the photos read through the panel while the
   gallery outside it was properly dimmed, which is exactly backwards. The
   veil has done the blurring; the card only has to be a surface. */
/* Nearly opaque, unlike the dock's glass. Glass is for a panel floating over
   content the guest is reading and can still act on; this one is stopping
   them, and a wait you read a sunset through is a wait that looks broken.
   --glass-strong is .72, which over a bright photo leaves the photo winning. */
gd-busy-veil .bv-card { width: 100%; max-width: 320px; text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: rgba(24, 25, 31, .96); border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 18px 40px rgba(0, 0, 0, .5); }

gd-busy-veil .bv-title { font: 500 var(--type-title)/1.3 var(--font-display);
  color: var(--ink); margin: 0; }

/* Determinate: we know how many photos there are, so the bar means what it
   looks like it means. */
gd-busy-veil .bv-bar { margin-top: var(--space-md); height: 4px; border-radius: var(--radius-pill);
  background: var(--accent-soft-border); overflow: hidden; }
gd-busy-veil .bv-bar i { display: block; height: 100%; width: 0; background: var(--accent);
  border-radius: inherit; transition: width var(--dur-quick, .2s) ease; }

/* Indeterminate: only for work we cannot count. It travels rather than fills,
   so it never implies a fraction it does not know. */
gd-busy-veil .bv-sweep { margin-top: var(--space-md); height: 4px; border-radius: var(--radius-pill);
  background: var(--accent-soft-border); overflow: hidden; }
gd-busy-veil .bv-sweep i { display: block; height: 100%; width: 40%; border-radius: inherit;
  background: var(--accent); animation: gd-bv-sweep 1.4s ease-in-out infinite; }
@keyframes gd-bv-sweep { from { transform: translateX(-110%); } to { transform: translateX(260%); } }

gd-busy-veil .bv-note { font: var(--type-note)/1.5 var(--font-ui); color: var(--ink-2);
  margin: var(--space-sm) 0 0; min-height: 1.5em; }

/* Ready: the work is done, and the one tap the platform still needs.
   The card has to stop being scenery and become a control, so the whole thing
   moves at once -- it arrives, the bar is gone, a button is there. The old
   hand-off changed one word on a button that never moved, and read as
   nothing happening at all. */
gd-busy-veil.is-ready { touch-action: auto; }
gd-busy-veil .bv-actions { margin-top: var(--space-md); display: grid; gap: var(--space-xs); }
gd-busy-veil.is-ready .bv-card { animation: gd-bv-ready var(--dur-sheet, .3s) var(--ease-out, ease-out); }
@keyframes gd-bv-ready {
  from { transform: translateY(10px) scale(.98); opacity: .4; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  gd-busy-veil.is-ready .bv-card { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  gd-busy-veil { animation: none; }
  gd-busy-veil .bv-sweep i { animation: none; width: 100%; opacity: .5; }
  gd-busy-veil .bv-bar i { transition: none; }
}