/* ─── Skeleton loading ────────────────────────────────────────
   One block of the placeholder that stands in for a screen still in flight.

   The shapes in custom_apps/dumont/lib/skeleton_shapes.js are built out of
   dumont's own class names — .container, .news-page-grid, .app-photo-item — so
   the columns, gaps and card sizes come from the stylesheets that draw the real
   screens and cannot drift from them. What is left for this file is the surface
   those blocks are painted with, plus the handful of sizes that exist only in
   the placeholder.

   Every block runs the same sweep with no delay, so a screenful reads as one
   surface waking up instead of a dozen parts blinking out of step. The cycle is
   short enough that a wait of a few hundred milliseconds still shows the light
   travelling. */
.skeleton {
  background-color: rgba(15, 23, 42, 0.08);
  background-image: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.7) 45%,
    rgba(255, 255, 255, 0.7) 55%,
    transparent 70%
  );
  background-repeat: no-repeat;
  /* Twice the block's width, so the highlight can start and finish fully
     off-screen — see the keyframes below. */
  background-size: 200% 100%;
  border-radius: 4px;
  animation: dumont-skeleton-sweep 1.1s linear infinite;
}

/* The gradient is twice as wide as the block, so a percentage position slides it
   by a whole block width: 120% parks the highlight past the left edge and -20%
   past the right one, giving a sweep that enters and leaves cleanly. */
@keyframes dumont-skeleton-sweep {
  from { background-position: 120% 0; }
  to   { background-position: -20% 0; }
}

/* A shimmer is decoration, and for anyone who asked the OS to calm motion down
   it is exactly the kind that provokes. The flat surface still says "loading". */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background-image: none;
  }
}

/* The live region that speaks the wait. Dumont writes its own CSS, so unlike
   the Tailwind modules it has no sr-only of its own — this is the standard
   clip-rect recipe: off the screen for the eye, still in the accessibility tree
   for a screen reader. `display: none` or `visibility: hidden` would take it out
   of both. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Placeholder-only boxes ──────────────────────────────────
   The real screens get these heights from the text and images inside them.
   The placeholder has neither, so it says so here. */
.skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* One row of a list: a square thumbnail, then the text beside it. Modelled on
   .app-photo-item, which every list in the app shares the proportions of. */
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 0;
  border-bottom: 1px solid #e0e0e0;
}

.skeleton-row-thumb {
  flex-shrink: 0;
}

.skeleton-row-body {
  flex: 1;
  min-width: 0;
}

.skeleton-app-list {
  gap: 0;
}

/* The app screens that stack cards rather than rows — promoções, um post — put
   their own breathing room around them; .container-app has none of its own. */
.skeleton-app-cards {
  gap: 16px;
  padding: 16px;
}

/* The title bar is centred text in the real header, so the block that stands in
   for it goes to the middle too. */
.dumont-app-header .skeleton {
  margin: 0 auto;
}

/* The title inside a page header band, which is a large uppercase heading beside
   its icon. Lightened rather than darkened: those bands are a solid brand blue,
   and a dark block on them reads as a hole. */
.skeleton-on-band {
  background-color: rgba(255, 255, 255, 0.28);
  background-image: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0.5) 55%,
    transparent 70%
  );
}

/* Fills the card it sits in, without being in its flow. For the cards whose
   height comes from an aspect-ratio — see mediaCard in skeleton_shapes.js, where
   in-flow content inflated the card's minimum width and overflowed the grid. */
.skeleton-fill {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}