/* Selected mm-tiles palette. The overlay occupies its own layer and never changes layout. */
html.mm-loading body > * { visibility: hidden; }
html.mm-loading .rb-loader, html.mm-loading .rb-loader * { visibility: visible; }
.rb-loader { font: 16px/1.5 system-ui, sans-serif; background: #fffef4; --rb-loader-ink: #173f35; --rb-loader-paper: #fffef4; }
.rb-loader__canvas { width: 100%; height: 100%; }
/* The calm mosaic sets --mm-mosaic-bottom (its own bottom edge, in px) from
   the theme's layout math, so the text always sits just under the square,
   whichever breakpoint sized it. 60% is only the pre-JS fallback. */
.rb-loader__chrome { top: var(--mm-mosaic-bottom, 60%); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); margin-top: 22px; box-sizing: border-box; width: 288px; max-width: calc(100% - 32px); padding: 16px 24px; background: #fffef4; color: #173f35; }
.rb-loader__label { padding: 0; border-radius: 0; min-width: 12em; text-align: center; } /* fixed width: label text swaps (Setting up the table / Ready) must not shift layout */
.rb-loader__percent { font-variant-numeric: tabular-nums; width: 4ch; text-align: left; }
.rb-loader__skip { min-width: 56px; min-height: 56px; border-radius: 8px; }
.rb-loader__skip:hover { background: #eff773; }
.rb-loader__skip:active { background: #f3b7d4; }
/* Reduced motion still forms the same centred square (now static); the text
   stays under it too, rather than jumping to the middle of the screen. */
.rb-loader[data-reduced="1"] .rb-loader__chrome { transform: translateX(-50%); }
.mm-loading-note { position: fixed; z-index: 100; bottom: 12px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 8px 12px; background: #fffef4; color: #173f35; font: 14px/1.5 system-ui, sans-serif; box-shadow: 0 2px 12px #173f3520; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .rb-loader { transition: none; } }