/* Owner-approved water study, revision 02. Shared unchanged across Back apps. */
.back-loading {
  --back-loading-water-top: #79baf0;
  --back-loading-water-bottom: #176ec1;
  --back-loading-edge: #456685;
  --back-loading-glass: linear-gradient(170deg, #f8fbffb8, #c5e4ff59);
  width: min(100%, 480px);
  min-width: 0;
  margin: 12px auto;
  color: inherit;
  contain: layout style;
}
.back-loading__lane { position: relative; width: 100%; height: 92px; isolation: isolate; }
.back-loading__bubble {
  box-sizing: border-box;
  position: absolute; top: 12px; left: 0;
  height: 60px; border-radius: 30px; overflow: hidden;
  background: var(--back-loading-glass);
  box-shadow: inset -2px -3px 9px #f8fbffa6, inset 0 1px 0 #f8fbffbf, 0 4px 16px #072b501f;
  will-change: transform;
}
.back-loading__bubble::after {
  content: ''; position: absolute; inset: 0; border: 1px solid var(--back-loading-edge);
  border-radius: inherit; pointer-events: none; box-shadow: inset 0 -2px 6px #f8fbff80;
}
.back-loading__bubble svg { display: block; width: 100%; height: 100%; }
.back-loading__rim { fill: none; stroke: #d9f2ff; stroke-width: 1.5; }
.back-loading__label { margin: 0; min-height: 24px; line-height: 1.5; font-size: 14px; text-align: center; overflow-wrap: anywhere; }
.back-loading--compact { width: min(100%, 300px); margin: 8px 0; }
.back-loading--compact .back-loading__lane { height: 60px; }
.back-loading--compact .back-loading__bubble { height: 36px; border-radius: 18px; }
.back-loading--compact .back-loading__label { font-size: 13px; }
html[data-theme='dark'] .back-loading, [data-theme='dark'] .back-loading {
  --back-loading-water-top: #95c1e8; --back-loading-water-bottom: #3268a1;
  --back-loading-edge: #adbfD2; --back-loading-glass: linear-gradient(170deg, #92b7d54d, #0b2235b8);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) .back-loading {
    --back-loading-water-top: #95c1e8; --back-loading-water-bottom: #3268a1;
    --back-loading-edge: #adbfd2; --back-loading-glass: linear-gradient(170deg, #92b7d54d, #0b2235b8);
  }
}
@media (max-width: 560px) {
  .back-loading__bubble { height: 48px; border-radius: 24px; top: 16px; }
  .back-loading__lane { height: 84px; }
  .back-loading--compact .back-loading__bubble { top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .back-loading__bubble { will-change: auto; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .back-loading { --back-loading-glass: #e9f3fc; }
  html[data-theme='dark'] .back-loading, [data-theme='dark'] .back-loading { --back-loading-glass: #19354d; }
}
@media (prefers-color-scheme: dark) and (prefers-reduced-transparency: reduce), (prefers-color-scheme: dark) and (prefers-contrast: more) {
  html:not([data-theme='light']) .back-loading { --back-loading-glass: #19354d; }
}
@media (forced-colors: active) {
  .back-loading__bubble { background: Canvas; outline: 1px solid CanvasText; }
  .back-loading__bubble path:first-of-type { fill: Highlight; }
  .back-loading__rim { stroke: CanvasText; }
}

/* No decorative bubble for waits shorter than half a second. */
.back-loading__lane[hidden] { display: none !important; }