/* The unreachable state, and the skeletons it replaces.
 *
 * Operator, 2026-09-23: resuming on a phone leaves every list on a loading
 * skeleton forever. The banner below says what is happening; these rules stop
 * the skeletons from continuing to animate underneath it, because a shimmer
 * is a claim that something is still arriving. */

.cc-reachability {
  position: fixed;
  inset-inline: 0;
  inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: fit-content;
  max-width: calc(100vw - 2rem);
  margin-inline: auto;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: var(--ui-raised);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.18);
  color: var(--ui-text);
  font-size: 0.85rem;
}

.cc-reachability[hidden] { display: none; }

.cc-reachability-retry {
  min-height: 44px;
  padding-inline: 0.85rem;
  border: 0;
  border-radius: 999px;
  background: var(--ui-accent);
  color: var(--ui-primary-text, #fff);
  font: inherit;
  font-weight: 650;
}

.cc-reachability-retry[hidden] { display: none; }
.cc-reachability-retry:disabled { opacity: 0.7; }

/* A skeleton that is never going to fill must stop pretending. The animation
   is what reads as progress, so it is the animation that goes; the block
   stays, because collapsing the layout underneath the banner would move
   everything the operator is looking at. */
html[data-data-unreachable] .cc-loading-copy,
html[data-data-unreachable] .cc-loading-head {
  animation: none;
  opacity: 0.4;
}