/* Shared loading surfaces preserve the workspace geometry and never mimic real values. */
.loading-region { position: relative; }
.loading-region > :not(.loading-layer) { visibility: hidden !important; pointer-events: none !important; }
.loading-layer { position: absolute; inset: 0; z-index: 8; padding: 16px; overflow: hidden; background: var(--off, #f6f6f2); border-radius: 8px; }
.loading-status { display: flex; align-items: center; gap: 14px; min-height: 22px; margin-bottom: 18px; color: var(--grey, #666); font: 500 12px/1.5 var(--font); }
.loading-status button { border: 1px solid var(--line, #ddd); border-radius: 5px; padding: 7px 14px; background: var(--white, #fff); color: var(--ink, #252727); cursor: pointer; }
.skeleton-layout { display: grid; gap: 18px; width: 100%; }
.skeleton-bar { display: block; width: 85%; height: 11px; border-radius: 4px; background: var(--d0); animation: skeleton-pulse 1.8s ease-in-out infinite; }
.skeleton-bar.short { width: 50%; }
.skeleton-bar.figure { width: 65%; height: 26px; margin: 15px 0; }
.skeleton-bar.skeleton-heading { width: min(240px, 45%); height: 15px; }
.skeleton-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.skeleton-metrics > div { min-height: 105px; padding: 18px; background: var(--white, #fff); border: 1px solid var(--line, #e5e5df); border-radius: 8px; }
.skeleton-portfolio .skeleton-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skeleton-portfolio .skeleton-metrics > div { min-height: 165px; }
.skeleton-panel { padding: 18px; border: 1px solid var(--line, #e5e5df); border-radius: 8px; background: var(--white, #fff); }
.skeleton-row { display: grid; grid-template-columns: 2fr 1fr 1fr; align-items: center; gap: 20px; min-height: 45px; border-bottom: 1px solid var(--line, #eee); }
.skeleton-row:last-child { border-bottom: 0; }
.skeleton-form .skeleton-row { min-height: 52px; }
.loading-refresh > :not(.loading-layer) { visibility: visible !important; opacity: .55; }
.loading-refresh > .loading-layer { background: transparent; pointer-events: none; }
.loading-refresh > .loading-layer .skeleton-layout { display: none; }
.loading-refresh .loading-status { display: inline-flex; background: var(--white, #fff); border: 1px solid var(--line, #ddd); padding: 7px 12px; border-radius: 6px; }
.loading-failed .skeleton-layout { opacity: .45; }
.loading-failed .skeleton-bar { animation: none; }
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .skeleton-bar { animation: none; } }
@media (max-width: 700px) {
  .skeleton-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skeleton-metrics > div:last-child { display: none; }
  .skeleton-portfolio .skeleton-metrics { grid-template-columns: 1fr; }
  .skeleton-portfolio .skeleton-metrics > div { min-height: 125px; }
  .skeleton-portfolio .skeleton-metrics > div:last-child { display: block; }
  .skeleton-row { gap: 10px; grid-template-columns: 2fr 1fr 1fr; }
  .loading-layer { padding: 10px; }
}
/* Authentication uses static placeholders, so there is no empty first paint. */
body.auth-pending .auth-loading { display: block; place-content: normal; align-content: start; max-width: 1400px; margin: 0 auto; padding: 26px 24px; min-height: 70vh; text-align: left; }
.auth-loading .skeleton-layout { margin-top: 22px; }
html.session-restoring body.auth-pending { padding-left: var(--sidebar-width, 232px); }
html.loading-sidebar-compact body.auth-pending { --sidebar-width: 56px; }
html.session-restoring .auth-loading::before { content: ''; position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-width, 232px); background: #282b2b; }
.client-initial-loading { display: none; }
.client-page.is-loading .client-initial-loading { display: block; }
.client-page.is-loading .wrap:not(.client-initial-loading) { display: none; }
.client-page .idstrip { min-height: 65px; }
.client-page .railnav { min-height: 65px; }
@media (max-width: 700px) {
  body.auth-pending .auth-loading { padding: 18px 14px; }
}

.skeleton-layout[hidden], #pdfLoading[hidden] { display: none; }

.loading-region.view > .loading-layer { padding: 0; }
.loading-region.wrap > .loading-layer { padding: 24px 22px; }
.skeleton-financial > .skeleton-heading { display: none; }
.loading-layer[data-kind="financial"] > .loading-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.loading-refresh .loading-layer[data-kind="financial"] > .loading-status,
.loading-failed .loading-layer[data-kind="financial"] > .loading-status { position: static; width: auto; height: auto; clip-path: none; overflow: visible; white-space: normal; }

/* Match the Financial Dashboard cards throughout loading and resizing. */
.skeleton-financial .skeleton-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1400px) {
  .skeleton-financial .skeleton-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .skeleton-financial .skeleton-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .skeleton-financial .skeleton-metrics { grid-template-columns: 1fr; }
  .skeleton-financial .skeleton-metrics > div:last-child { display: block; }
}