/* Empty, error and "not built yet" states.
   .empty            what is true, and a way forward when there is one (emptyState() / errorState()).
   .empty.is-error   the same shape when a read failed, with "Try again".
   .soon             the shared screen for a route whose view is not built yet (comingSoon()). */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-6) var(--s-5);
  color: var(--text-2);
  text-align: center;
  background: var(--ink-1);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-3);
}
.empty strong { color: var(--text); font-weight: 600; }
.empty .btn { margin-top: var(--s-3); }
.empty.is-error { border-style: solid; border-color: rgb(242 160 142 / 0.45); background: var(--danger-bg); }
.empty.is-error strong { color: var(--danger); }
.card > .empty, .panel > .empty { border: 0; background: none; padding-block: var(--s-5); }

.soon { display: grid; gap: var(--s-6); }
.soon-frame {
  position: relative;
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.soon-frame .skel-block:first-child { grid-column: 1 / -1; height: clamp(8rem, 18vw, 13rem); }
.soon-frame .skel-block { height: 7rem; }
@media (prefers-reduced-motion: no-preference) {
  .soon-frame .skel-block { animation-duration: 2.4s; }
}
.soon .callout { margin-top: 0; }