/* Neutral loading placeholders share the platform's spacing and surfaces. */
.ui-skeleton { width: 100%; min-width: 0; }
.ui-skeleton-visual { display: grid; gap: var(--space-5); }
.ui-skeleton-block {
  display: block;
  flex: none;
  max-width: 100%;
  height: 12px;
  width: 100%;
  border-radius: 5px;
  background: #e8ebef;
  background-image: linear-gradient(100deg, transparent 25%, #f4f5f7 48%, transparent 72%);
  background-size: 240% 100%;
  animation: ui-skeleton-shimmer 1.9s ease-in-out infinite;
}
.ui-skeleton-heading,
.ui-skeleton-toolbar,
.ui-skeleton-panel-heading,
.ui-skeleton-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-width: 0; }
.ui-skeleton-heading { min-height: 64px; }
.ui-skeleton-copy { display: grid; gap: var(--space-3); min-width: 0; flex: 1; }
.ui-skeleton-title { width: 228px; height: 27px; border-radius: 7px; }
.ui-skeleton-subtitle { width: 352px; }
.ui-skeleton-short { width: 40%; }
.ui-skeleton-medium { width: 56%; }
.ui-skeleton-wide { width: 76%; }
.ui-skeleton-control { width: 118px; height: 38px; border-radius: var(--control-radius); }
.ui-skeleton-search { width: 300px; height: 38px; border-radius: var(--control-radius); }
.ui-skeleton-pill { width: 72px; height: 22px; border-radius: 6px; }
.ui-skeleton-panel,
.ui-skeleton-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ui-skeleton-panel-heading,
.ui-skeleton-table-heading { padding: 20px var(--ui-section-inset); border-bottom: 1px solid var(--line); }
.ui-skeleton-table-heading { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 90px; gap: var(--space-5); background: var(--surface-soft); }
.ui-skeleton-table-heading .ui-skeleton-block { height: 9px; width: 65%; }
.ui-skeleton-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 90px; align-items: center; gap: var(--space-5); min-height: 78px; padding: 18px var(--ui-section-inset); }
.ui-skeleton-row + .ui-skeleton-row { border-top: 1px solid var(--line); }
.ui-skeleton-row > .ui-skeleton-short { width: 68%; }
.ui-skeleton-row:nth-child(even) .ui-skeleton-copy .ui-skeleton-wide { width: 64%; }
.ui-skeleton-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.ui-skeleton-card { display: grid; align-content: start; gap: 20px; padding: var(--ui-card-inset); }
.ui-skeleton-card > .ui-skeleton-title { height: 22px; }
.ui-skeleton-card-foot { padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--line); }
.ui-skeleton-journey-panel > .ui-skeleton-heading { padding: 22px var(--ui-section-inset); border-bottom: 1px solid var(--line); }
.ui-skeleton-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); padding: 40px var(--ui-section-inset); }
.ui-skeleton-milestone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.ui-skeleton-milestone:not(:last-child)::after { content: ""; position: absolute; left: calc(50% + 23px); width: calc(100% + var(--space-5) - 46px); top: 18px; height: 2px; background: var(--line); }
.ui-skeleton-circle { width: 38px; height: 38px; border-radius: 50%; }
.ui-skeleton-context { padding: 18px var(--ui-section-inset); border-top: 1px solid var(--line); }
@keyframes ui-skeleton-shimmer { from { background-position: 140% 0; } to { background-position: -100% 0; } }
@media (max-width: 600px) {
  .ui-skeleton-heading { flex-wrap: wrap; }
  .ui-skeleton-heading > .ui-skeleton-copy { flex-basis: 180px; }
  .ui-skeleton-heading > .ui-skeleton-control { width: 88px; }
  .ui-skeleton-toolbar .ui-skeleton-search { flex: 1; }
  .ui-skeleton-row,
  .ui-skeleton-table-heading { grid-template-columns: minmax(0, 1fr) 60px; gap: var(--space-3); padding-left: var(--space-4); padding-right: var(--space-4); }
  .ui-skeleton-row > .ui-skeleton-short,
  .ui-skeleton-table-heading > :nth-child(2) { display: none; }
  .ui-skeleton-flow { gap: var(--space-3); padding: 30px var(--space-4); }
  .ui-skeleton-milestone:not(:last-child)::after { width: calc(100% + var(--space-3) - 46px); }
  .ui-skeleton-flow .ui-skeleton-line { height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-skeleton-block { animation: none; background-image: none; }
}

/* The page stays in flow; this noninteractive layer contains its measured shapes. */
.app-main { position: relative; }
html.ui-page-loading { overflow-anchor: none; scroll-behavior: auto !important; }
.ui-loading-pending { opacity: 0; }
.ui-loading-overlay { position: fixed; pointer-events: none; overflow: clip; z-index: 2; }
.ui-loading-block, .ui-loading-surface { position: absolute; display: block; }
.ui-loading-surface { border: 1px solid var(--line); background: var(--surface); }
.ui-loading-block { background: #e8ebef; background-image: linear-gradient(100deg, transparent 25%, #f4f5f7 48%, transparent 72%); background-size: 240% 100%; animation: ui-skeleton-shimmer 1.9s ease-in-out infinite; }
.ui-loading-progress { height: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .ui-loading-block { animation: none; background-image: none; } }

/* Busy actions keep their label and dimensions, including the first request. */
:where(button,summary,[role="button"])[aria-busy="true"], .ui-search-picker-panel[aria-busy="true"] .ui-search-picker-option { background-image:linear-gradient(100deg,transparent 25%,rgb(140 150 166 / 16%) 48%,transparent 72%);background-size:240% 100%;animation:ui-skeleton-shimmer 1.9s ease-in-out infinite; }
@media(prefers-reduced-motion:reduce) { :where(button,summary,[role="button"])[aria-busy="true"], .ui-search-picker-panel[aria-busy="true"] .ui-search-picker-option { animation:none;background-image:none; } }

.page-heading .actions { max-width:100%; }

/* During tab requests the shared header stays live; only the destination body is masked. */
.ui-loading-pending.ui-loading-partial { opacity:1; }
.ui-loading-hidden { opacity:0 !important; }