/* Neutral placeholders share the register, field and motion tokens. */
.skeleton-block { display: block; height: var(--space-3); min-width: 0; background: var(--secondary-surface); }
.workspace-skeleton[data-visible="true"] .skeleton-block,
.order-panel[data-load-state="loading"][data-load-visible="true"]:has(#order-panel[hidden]) .skeleton-block { animation: skeleton-breathe 1600ms ease-in-out infinite; }
@keyframes skeleton-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.skeleton-block--action { width: 96px; height: var(--control-height); }
.skeleton-block--mark { flex: 0 0 var(--space-6); height: var(--space-6); }
.skeleton-block--heading { width: 32%; height: var(--space-4); }

.workspace-skeleton { position: fixed; z-index: 55; top: 0; bottom: 0; overflow: hidden; background: var(--surface); color: var(--ink); font: 400 var(--text-ui)/var(--line-body) var(--sans); opacity: 0; pointer-events: none; transition: opacity var(--motion-dialog) ease-out; }
.workspace-skeleton[data-visible="true"] { opacity: 1; pointer-events: auto; }
.workspace-skeleton__visual { padding-inline: var(--space-6); }
.workspace-skeleton__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 44px; margin-bottom: var(--space-4); }
.workspace-skeleton__header strong { font-size: var(--text-ui); line-height: var(--line-body); font-weight: 600; }
.workspace-skeleton__tabs { display: flex; align-items: center; gap: var(--space-4); height: var(--control-height); margin-block: calc(-1 * var(--space-2)) var(--space-2); }
.workspace-skeleton__tabs > span { width: 64px; }
.workspace-skeleton__columns, .workspace-skeleton__row { display: grid; grid-template-columns: 2fr 2fr 2fr 1fr 1fr; gap: var(--space-4); align-items: center; padding-inline: var(--space-2); }
.workspace-skeleton__columns { height: var(--field-row-height); background: var(--table-header); }
.workspace-skeleton__columns > span { width: 60%; background: var(--surface); }
.workspace-skeleton__row { height: var(--row-height); border-bottom: 1px solid var(--line-soft); }
.workspace-skeleton__row > .skeleton-block { width: 72%; }
.workspace-skeleton__row:nth-child(even) > .skeleton-block { width: 52%; }
.workspace-skeleton__identity { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.workspace-skeleton__identity > span:last-child { width: 60%; }
.workspace-skeleton__group { display: flex; align-items: center; height: var(--field-row-height); padding-inline: var(--space-2); }
.workspace-skeleton__group > span { width: 128px; }
.workspace-skeleton[data-layout="clients"] .workspace-skeleton__tabs,
.workspace-skeleton:not([data-layout="production"], [data-layout="inventory"]) .workspace-skeleton__group,
.workspace-skeleton:not([data-layout="settings"]) .workspace-skeleton__settings,
.workspace-skeleton[data-layout="settings"] :is(.workspace-skeleton__tabs, .workspace-skeleton__table) { display: none; }
.workspace-skeleton__settings { display: grid; grid-template-columns: var(--settings-nav-width) minmax(0, var(--settings-content-width)); gap: var(--space-8); }
.workspace-skeleton__navigation { display: grid; align-content: start; gap: var(--space-4); padding-block: var(--space-2); }
.workspace-skeleton__navigation > span { width: 60%; }
.workspace-skeleton__section { display: grid; gap: var(--space-2); padding-block: var(--space-4); }
.workspace-skeleton__section:first-child { padding-top: 0; }
.workspace-skeleton__field { display: grid; grid-template-columns: var(--settings-label-width) minmax(0, 1fr); gap: var(--space-3); align-items: center; min-height: var(--field-row-height); }
.workspace-skeleton__field > span { width: 68%; }

/* Overlay the hidden frame; a completed frame appears under the fading layer. */
.panel-skeleton { position: absolute; z-index: 8; inset: 0; display: grid; align-content: start; gap: var(--space-8); padding: var(--panel-gutter); background: var(--surface); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--motion-dialog) ease-out, visibility 0s var(--motion-dialog); }
.panel-skeleton__header, .panel-skeleton__section { display: grid; gap: var(--space-4); }
.panel-skeleton__header { padding-right: calc(var(--control-height) + var(--space-4)); }
.panel-skeleton__header strong { font-size: var(--title-panel); line-height: var(--line-panel); font-weight: 600; }
.panel-skeleton__header strong:empty, .panel-skeleton__header strong:not(:empty) + span { display: none; }
.panel-skeleton__header span:first-of-type { width: 55%; height: var(--space-4); }
.panel-skeleton__header span:last-child { width: 35%; }
.panel-skeleton__section span { width: 68%; }
.panel-skeleton__section span:first-child { width: 32%; }
.panel-skeleton__section span:last-child { width: 52%; }
.order-panel[data-load-state="loading"][data-load-visible="true"]:has(#order-panel[hidden]) > .panel-skeleton { opacity: 1; visibility: visible; transition-delay: 0s; }
/* A retained record header is hidden with its frame during a fresh read. */
.order-panel:has(#order-panel[hidden]) > .order-panel__header .order-panel__close { display: inline-flex; }

@media (max-width: 900px) {
  .workspace-skeleton__settings { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .workspace-skeleton__navigation { display: flex; gap: var(--space-4); overflow: hidden; }
  .workspace-skeleton__navigation > span { flex: 0 0 64px; }
  .workspace-skeleton__field { grid-template-columns: 120px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .workspace-skeleton { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .workspace-skeleton__columns, .workspace-skeleton__row { grid-template-columns: 2fr 2fr 1fr; }
  .workspace-skeleton__columns > :nth-child(n+4), .workspace-skeleton__row > :nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-block { animation: none; }
  .workspace-skeleton, .panel-skeleton { transition: none; }
}