/* Loading state for the page readers (assets/reader-loader.js): an hourglass
   in every page that has not arrived yet, a gentle shimmer on its box, the
   page fading in when it comes. Loaded by the portal readers and by the
   public free sample, so it is the one copy of these rules. */
.scheme-page .rl-wait { display: none; }
.scheme-page .rl-img { transition: opacity .35s ease; }
.scheme-page.is-loading, .scheme-page.is-failed { background: #fbf8f1; }
.scheme-page.is-loading .rl-img, .scheme-page.is-failed .rl-img { opacity: 0; }
.scheme-page.is-loading::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%);
  background-size: 220% 100%; animation: rl-shimmer 1.8s linear infinite;
}
.scheme-page.is-loading .rl-wait, .scheme-page.is-failed .rl-wait {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start;
  justify-content: center; padding: clamp(48px, 18%, 220px) 16px 16px; gap: 8px 10px; text-align: center;
}

.rl-glass { flex: none; width: 16px; height: 21px; overflow: visible; animation: rl-turn 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.rl-frame { fill: none; stroke: #112f46; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rl-sand-top, .rl-sand-bottom { fill: #c7a268; stroke: #c7a268; stroke-width: .6; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 100%; }
.rl-sand-top { animation: rl-drain 2.4s linear infinite; }
.rl-sand-bottom { animation: rl-fill 2.4s linear infinite; }
.rl-stream { fill: none; stroke: #c7a268; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1.4 2.1; animation: rl-flow .45s linear infinite; }
.rl-note { margin: 0; font: 500 14px/1.45 Inter, system-ui, sans-serif; color: var(--muted, #6b655b); letter-spacing: 0; text-transform: none; }
.scheme-page.is-failed .rl-glass { display: none; }
.scheme-page.is-failed .rl-note { color: #9b2c1f; }
.rl-retry {
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid #112f46; background: #112f46; color: #fffdf7;
  font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
.rl-retry:focus-visible { outline: 2px solid #976817; outline-offset: 2px; }
.rl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* While the next reader is being prepared. */
.rl-opening { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(251, 248, 241, .82); backdrop-filter: blur(2px); }
.rl-opening[hidden] { display: none; }
.rl-opening-card { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-radius: 18px;
  background: #fff; border: 1px solid rgba(23,23,19,.12); box-shadow: 0 24px 60px -24px rgba(17,47,70,.45); }
.rl-opening .rl-glass { width: 17px; height: 22px; }
.rl-opening .rl-note { font-size: 15px; }

@keyframes rl-turn { 0%, 82% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }
@keyframes rl-drain { 0% { transform: scaleY(1); } 82%, 100% { transform: scaleY(0); } }
@keyframes rl-fill { 0% { transform: scaleY(0); } 82%, 100% { transform: scaleY(1); } }
@keyframes rl-flow { to { stroke-dashoffset: -3.5; } }
.scheme-page.is-failed .rl-wait { flex-direction: column; }
@keyframes rl-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

@media (prefers-reduced-motion: reduce) {
  .rl-glass, .rl-sand-top, .rl-sand-bottom, .rl-stream, .scheme-page.is-loading::before { animation: none; }
  .rl-sand-top, .rl-sand-bottom { transform: scaleY(.55); }
  .scheme-page .rl-img { transition: none; }
}
@media print { .rl-wait, .rl-opening { display: none !important; } }