/* Shared by the first HTML paint, React surfaces and the desktop connection page. */
.rio-brand-image {
  display: block;
  width: 136px;
  height: auto;
  max-width: 100%;
  flex-shrink: 0;
  object-fit: contain;
}
.rio-brand-image.is-square { width: 44px; aspect-ratio: 1; }
.rio-brand-shimmer {
  position: relative;
  display: block;
  width: min(280px, 100%);
  aspect-ratio: 1024 / 360;
  flex-shrink: 0;
  overflow: hidden;
  /* Let the page show through; only the SVG's colored paths receive light. */
  background: transparent;
  isolation: isolate;
}
.rio-brand-shimmer > .rio-brand-image { width: 100%; height: 100%; }
.rio-brand-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(105deg, transparent 43%, rgb(255 255 255 / 88%) 50%, transparent 57%);
  background-size: 240% 100%;
  background-repeat: no-repeat;
  -webkit-mask: var(--rio-brand-mask, url("./riowork-horizontal.svg?v=20261017")) center / 100% 100% no-repeat;
  mask: var(--rio-brand-mask, url("./riowork-horizontal.svg?v=20261017")) center / 100% 100% no-repeat;
  animation: rio-brand-sweep 2.6s linear infinite;
}
@keyframes rio-brand-sweep {
  from { background-position: 140% 0; }
  to { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rio-brand-shimmer::after { animation: none; display: none; }
}

/* Persistent first-paint / page-loading geometry; independent of panel heights. */
.rio-page-loading {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  padding: 24px; box-sizing: border-box; background: var(--rw-canvas, #edf2f5);
  color: var(--rw-muted, #566879); font: 500 calc(13px * var(--rw-font-scale, 1))/1.6 system-ui, -apple-system, sans-serif;
}
.rio-page-loading[hidden] { display: none; }
.rio-page-loading-content {
  width: min(360px, 100%); display: flex; flex-direction: column;
  align-items: center; gap: 12px; text-align: center;
}
.rio-page-loading .rio-brand-shimmer { width: min(280px, 100%); }
.rio-page-loading:not(.is-error) .rio-page-loading-content { height: 132px; }
.rio-page-loading button {
  padding: 8px 16px; border: 1px solid var(--rw-control-border, #80929e);
  border-radius: 8px; background: var(--rw-surface, #fff); color: inherit; cursor: pointer;
}
.rio-page-loading button[hidden] { display: none; }
.rio-page-loading[hidden] .rio-brand-shimmer::after { animation-play-state: paused; }
.rio-page-loading.is-error .rio-brand-shimmer::after { display: none; }
html[data-theme="dark"] .rio-page-loading {
  background: var(--rw-canvas, #142128); color: var(--rw-muted, #b0c2cd);
}
html[data-theme="dark"] .rio-page-loading button { background: var(--rw-surface, #1d2d36); }
html[data-workspace-surface="true"] .rio-page-loading:not(.is-error) { visibility: hidden; }
.rio-page-loading [data-loading-label] { flex-shrink: 0; }

/* Work-page waits stay inside their iframe; the application chrome stays usable. */
html[data-workspace-surface="true"] .rio-page-loading.is-surface-loading { visibility: visible; }
.rio-page-loading.is-surface-loading .rio-brand-shimmer { display: none; }
.rio-page-loading.is-surface-loading:not(.is-error) .rio-page-loading-content { height: auto; }
.rio-page-loading.is-surface-loading:not(.is-error) [data-loading-label]::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px;
  border-radius: 50%; background: currentColor; vertical-align: middle;
  animation: rio-surface-wait 1.6s ease-in-out infinite;
}
@keyframes rio-surface-wait { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .rio-page-loading.is-surface-loading [data-loading-label]::before { animation: none; }
}