/* ------------------------------------------------------------ the states
 * templates/ui/states.html, design system «EmptyState», «LoadingState» and
 * «ErrorState» (WEB-ZUS-01 to WEB-ZUS-03):
 *   empty   - one sentence what is missing, an action if there is one;
 *   loading - skeleton lines in web.skeleton.surface (cloud) where the
 *             content will stand, never a spinner, never a shimmer
 *             (WEB-ZUS-02, WEB-BEW-10); the lines take the room the
 *             content will take, so nothing jumps;
 *   error   - a plain statement for the RM and «Erneut versuchen»; the
 *             technical details only for administrators, folded.
 * The note: ui/note.css. */
@layer ui {
.empty, .state-empty { padding: var(--s-7) 0; text-align: center; color: var(--text-secondary); font-size: var(--t-small); }
.state-empty { text-align: left; padding: var(--s-5) 0; border-top: 1px solid var(--rule-faint); border-bottom: 1px solid var(--rule-faint); }
.state-empty p { margin: 0; }
.state-empty .btn, .state-empty .text-action { margin-top: var(--s-3); }

.state-loading { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3) 0; }
.state-loading__line { display: block; height: var(--s-3); background: var(--surface-functional); }
.state-loading__line:nth-child(3n+2) { width: 82%; }
.state-loading__line:nth-child(3n) { width: 64%; }

.state-error { margin: 0 0 var(--s-5); }
.state-error .btn-row { margin-top: var(--s-4); }
.state-error__details { margin-top: var(--s-4); }
.state-error__details pre { margin: var(--s-3) 0 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: var(--t-micro); color: var(--slate); }
}  /* @layer ui */