/* loading.css (lane ux-loading): page, tab and modal skeletons, the action overlay. Tokens only. */
.sk { display: block; padding: var(--space-3) 0; }
.sk-table, .sk-panel, .sk-chart { min-width: 0; }
.sk-body { display: grid; gap: var(--space-3); }
.sk-block { display: block; min-height: 0.9rem; border-radius: var(--radius-sm); background-color: var(--border); background-image: linear-gradient(90deg, var(--border) 0%, var(--surface-2) 50%, var(--border) 100%); background-size: 200% 100%; animation: sk-shimmer 1.4s linear infinite; }
@keyframes sk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .sk-block { animation: none; background-image: none; }
  .loading-spin { animation: none; }
}

/* The loader hides the old content while the skeleton shows; the old nodes stay in the page for a restore. */
[data-loading-hold] > :not([data-loading-skeleton]) { display: none; }

/* Table */
.sk-toolbar { display: flex; justify-content: space-between; gap: var(--space-3); }
.sk-search { width: min(100%, 18rem); height: 2.25rem; }
.sk-action { width: 7rem; height: 2.25rem; }
.sk-row { display: grid; grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.sk-head { padding-top: var(--space-3); }
.sk-head .sk-block { height: 0.75rem; }

/* Form */
.sk-form .sk-body { grid-template-columns: 1fr; }
.sk-field { display: grid; gap: var(--space-1); }
.sk-label { width: 30%; height: 0.75rem; }
.sk-input { height: 2.25rem; }
.sk-actions { display: flex; justify-content: flex-end; }
@media (min-width: 768px) {
  .sk-form .sk-body { grid-template-columns: 1fr 1fr; }
  .sk-form .sk-actions { grid-column: 1 / -1; }
}

/* Panel */
.sk-heading { width: 40%; height: 1.4rem; }
.sk-para { display: grid; gap: var(--space-2); }
.sk-short { width: 60%; }

/* Chart */
.sk-arch { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-2); }
.sk-tooth { height: 3rem; }
@media (min-width: 768px) { .sk-arch { grid-template-columns: repeat(16, 1fr); } }
.sk-legend { display: grid; gap: var(--space-2); max-width: 20rem; }

/* Modal and drawer shell */
.modal-shell .modal-body { min-height: 10rem; }

/* Action overlay: a small centred card in the top layer (a popover), above open dialogs. */
.loading-overlay { display: none; position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--body); pointer-events: none; }
.loading-overlay.is-open { display: grid; place-items: center; }
.loading-card { display: flex; align-items: center; gap: var(--space-3); max-width: min(26rem, calc(100vw - 2rem)); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); pointer-events: auto; }
.loading-spin { flex: none; width: 1.25rem; height: 1.25rem; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
.loading-overlay.is-error .loading-spin { display: none; }
.loading-text { margin: 0; overflow-wrap: anywhere; }
.loading-overlay.is-error .loading-text { color: var(--danger-ink); }
.loading-card [hidden] { display: none; }

/* #main.htmx-request dims the page (layout.css); the skeleton must not be dimmed with it. */
#main[data-loading-hold].htmx-request { opacity: 1; }