/* ============================================================================
   SILENT LOADING — one sheet, every surface.

   Celina, 6 Aug 2026:
     "I still see Loading… in the inbox … when we fix something in one place, a
      full system sweep should be undertaken to find the same issues and fix the
      full universal system."

   The rule already existed. It lived in crew-ui.css, which ELEVEN of thirty-two
   surfaces load — the identical structural fault the uppercase voice had, and the
   reason a fix that was genuinely made in June still reads as broken in August.
   A rule that only some pages load is not a rule, it is a coincidence.

   The interface does not narrate its own plumbing. A shimmer says "not yet"
   without a word; the word "Loading…" is the interface talking about itself, and
   it lingers forever if the fetch behind it fails.

   TEXT IS SWALLOWED, not deleted: legacy markup that still contains the word
   degrades to a shimmer rather than shouting. Screen readers keep the
   announcement through aria-busy on the container, so nothing is lost to anyone
   who needs it.
   ============================================================================ */

.loading,
.rollon-skel,
.rc-loading,            /* assets/record-card.js — the record drill-down sheet */
[data-loading] {
  font-size: 0 !important;            /* swallow any legacy "Loading…" text */
  color: transparent !important;
  padding: 28px 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left !important;
}

.loading::before,  .loading::after,
.rollon-skel::before, .rollon-skel::after,
.rc-loading::before,  .rc-loading::after,
[data-loading]::before, [data-loading]::after {
  content: '';
  display: block;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg,
    var(--line, rgba(128,128,128,.16)) 0%,
    var(--line2, rgba(128,128,128,.28)) 50%,
    var(--line, rgba(128,128,128,.16)) 100%);
  background-size: 200% 100%;
  animation: rollon-shimmer 1.15s ease-in-out infinite;
}
.loading::before, .rollon-skel::before, .rc-loading::before, [data-loading]::before { width: 100%; }
.loading::after,  .rollon-skel::after,  .rc-loading::after,  [data-loading]::after  { width: 62%; animation-delay: .15s; }

/* a row-shaped skeleton for tables and lists */
.rollon-skel-u {
  display: block; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg,
    var(--line, rgba(128,128,128,.16)) 0%,
    var(--line2, rgba(128,128,128,.28)) 50%,
    var(--line, rgba(128,128,128,.16)) 100%);
  background-size: 200% 100%;
  animation: rollon-shimmer 1.15s ease-in-out infinite;
}
.rollon-skel-rows .rollon-skel-u { height: 34px; }
.rollon-skel-rows .rollon-skel-u:nth-child(even) { opacity: .72; }

@keyframes rollon-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Motion is decoration here — the shimmer still reads as "not yet" when still. */
@media (prefers-reduced-motion: reduce) {
  .loading::before, .loading::after,
  .rollon-skel::before, .rollon-skel::after,
  .rc-loading::before, .rc-loading::after,
  [data-loading]::before, [data-loading]::after,
  .rollon-skel-u { animation: none; }
}