/* Immediate route/action feedback while work is in flight. */
.page-loading { padding-block: 10px 36px; }
.loading-label { display: flex; align-items: center; gap: 10px; min-height: 32px; color: var(--muted, #61635a); font-size: 14px; }
.loading-spinner, button[data-pending="1"]::after, a[data-pending="1"]::after {
  display: inline-block; content: ""; width: 15px; height: 15px; flex: 0 0 15px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: loading-spin .75s linear infinite;
}
button[data-pending="1"], a[data-pending="1"] { cursor: progress; }
.loading-placeholder { background: var(--line, #e4e5dc); border-radius: 12px; opacity: .55; }
.loading-title { width: min(340px, 75%); height: 42px; margin-top: 24px; }
.loading-line { width: min(480px, 90%); height: 14px; margin-top: 18px; }
.loading-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.loading-panels > div { min-height: 210px; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .loading-panels { grid-template-columns: 1fr; gap: 14px; }
  .loading-panels > div { min-height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-spinner, button[data-pending="1"]::after, a[data-pending="1"]::after { animation: none; }
}